diff --git a/solara/lib/core/dashboard/brand/BrandView.js b/solara/lib/core/dashboard/brand/BrandView.js index 214235a..31f098d 100644 --- a/solara/lib/core/dashboard/brand/BrandView.js +++ b/solara/lib/core/dashboard/brand/BrandView.js @@ -1,5 +1,5 @@ import {DataSource} from './BrandModel.js'; -import '../component/OnboardBottomSheet.js'; +import '../component/OnboardBrandBottomSheet.js'; import '../component/AddFieldSheet.js'; import '../component/ConfirmationDialog.js'; import '../component/MessageBottomSheet.js'; diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html index 7760211..7c6c631 100644 --- a/solara/lib/core/dashboard/brand/brand.html +++ b/solara/lib/core/dashboard/brand/brand.html @@ -5,7 +5,7 @@ Solara Dashboard - + - + diff --git a/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js b/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js index 96c89e4..ccb543a 100644 --- a/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js +++ b/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js @@ -59,7 +59,7 @@ class BrandOptionsBottomSheet extends HTMLElement { z-index: 999; } - +
diff --git a/solara/lib/core/dashboard/component/OnboardBottomSheet.js b/solara/lib/core/dashboard/component/OnboardBottomSheet.js deleted file mode 100644 index 58d9533..0000000 --- a/solara/lib/core/dashboard/component/OnboardBottomSheet.js +++ /dev/null @@ -1,198 +0,0 @@ -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 diff --git a/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js b/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js new file mode 100644 index 0000000..3f1732d --- /dev/null +++ b/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js @@ -0,0 +1,202 @@ +class OnboardBrandBottomSheet 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', OnboardBrandBottomSheet); \ No newline at end of file