diff --git a/solara/lib/core/dashboard/brand/BrandView.js b/solara/lib/core/dashboard/brand/BrandView.js index 2ea4eef..cdd261b 100644 --- a/solara/lib/core/dashboard/brand/BrandView.js +++ b/solara/lib/core/dashboard/brand/BrandView.js @@ -1,4 +1,5 @@ import {DataSource} from './BrandModel.js'; +import '../component/onboard_bottom_sheet/OnboardBottomSheet.js'; class BrandView { constructor(model) { @@ -15,6 +16,8 @@ class BrandView { this.uploadBrandBtn = document.getElementById('uploadBrandBtn'); this.addNewBrandBtn = document.getElementById('newBrandBtn'); + this.onboardSheet = document.getElementById('onboardBottomSheet'); + this.initializeApp(); } @@ -33,7 +36,9 @@ class BrandView { this.toggleAddBrandContainer(true); this.addNewBrandBtn.addEventListener('click', async () => { - await this.addNewBrand('TODO', 'TODO'); + this.showOnboardBrandForm((key, name) => { + this.addNewBrand(key, name) + }) }); this.uploadBrandBtn.addEventListener('click', async () => { @@ -41,7 +46,9 @@ class BrandView { const dirHandle = await window.showDirectoryPicker(); const sections = await this.createBrandSectionsFromFolder(dirHandle); - await this.addBrand(dirHandle.name, "TODO", sections) + this.showOnboardBrandForm((key, name) => { + this.addBrand(key, name, sections) + }) } catch (error) { console.error('Error:', error); } @@ -54,7 +61,6 @@ class BrandView { await this.addBrand(key, name, sections) } - async addBrand(key, name, sections) { // TODO: remove later const json = JSON.stringify(sections, null, 2); @@ -417,6 +423,15 @@ class BrandView { setOnDeleteFieldHandler(handler) { this.onDeleteField = handler; } + + showOnboardBrandForm(onSubmit) { + this.onboardSheet.show(onSubmit); + } + + async hideOnboardBrandForm() { + this.onboardSheet.hide(); + } + } export default BrandView; \ No newline at end of file diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html index 0f02227..e8d9805 100644 --- a/solara/lib/core/dashboard/brand/brand.html +++ b/solara/lib/core/dashboard/brand/brand.html @@ -541,7 +541,7 @@ padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - z-index: 1001; + z-index: 1000; animation: fadeIn 0.5s ease-out; display: none; } @@ -605,6 +605,8 @@

+ +
- -
\ No newline at end of file diff --git a/solara/lib/core/dashboard/component/onboard_bottom_sheet/OnboardBottomSheet.js b/solara/lib/core/dashboard/component/onboard_bottom_sheet/OnboardBottomSheet.js new file mode 100644 index 0000000..58d9533 --- /dev/null +++ b/solara/lib/core/dashboard/component/onboard_bottom_sheet/OnboardBottomSheet.js @@ -0,0 +1,198 @@ +class OnboardBottomSheet extends HTMLElement { + constructor() { + super(); + this.attachShadow({mode: 'open'}); + this.onSubmit = null; + } + + connectedCallback() { + this.render(); + this.setupEventListeners(); + } + + render() { + this.shadowRoot.innerHTML = ` + +
+
+
+

Onboard New Brand

+
+
+ + +
+
+ + +
+ +
+
+
+ `; + } + + setupEventListeners() { + const form = this.shadowRoot.getElementById('onboardBrandForm'); + form.addEventListener('submit', (e) => { + e.preventDefault(); + this.submit(); + }); + } + + submit() { + const brandKey = this.shadowRoot.getElementById('brandKey').value; + const brandName = this.shadowRoot.getElementById('brandName').value; + + const brandKeyRegex = /^[A-Za-z][A-Za-z0-9_-]*$/; + + if (!brandKeyRegex.test(brandKey)) { + alert('Brand key must start with a letter and contain no spaces. Only letters, numbers, underscores, and hyphens are allowed.'); + return; + } + + this.dispatchEvent(new CustomEvent('onboard', { + detail: {brandKey, brandName}, + bubbles: true, + composed: true + })); + + // Call the onSubmit if it's defined + if (this.onSubmit) { + this.onSubmit(brandKey, brandName); + } + + this.hide(); + } + + show(onSubmit) { + this.onSubmit = onSubmit; // Store the onSubmit function + const sheet = this.shadowRoot.getElementById('onboardBrandSheet'); + sheet.style.display = 'block'; + setTimeout(() => { + sheet.classList.add('show'); + this.overlay = this.shadowRoot.getElementById('overlay'); + this.overlay.style.display = 'block'; + this.overlay.onclick = () => this.hide(); + }, 10); + } + + hide() { + const sheet = this.shadowRoot.getElementById('onboardBrandSheet'); + sheet.classList.remove('show'); + setTimeout(() => { + sheet.style.display = 'none'; + this.overlay.style.display = 'none'; + }, 300); + } + +} + +customElements.define('onboard-bottom-sheet', OnboardBottomSheet); \ No newline at end of file