From 6fe7c3ffa5abb4f5aeff3934c3f03831ab48ab68 Mon Sep 17 00:00:00 2001 From: Shaban Kamel Date: Mon, 9 Sep 2024 18:29:42 +0300 Subject: [PATCH] Solara --- .../core/dashboard/brands/BrandsController.js | 56 +++++--- .../lib/core/dashboard/brands/BrandsView.js | 21 +-- solara/lib/core/dashboard/brands/brands.html | 56 +------- .../component/BrandOptionsBottomSheet.js | 130 ++++++++++++++++++ 4 files changed, 177 insertions(+), 86 deletions(-) create mode 100644 solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js diff --git a/solara/lib/core/dashboard/brands/BrandsController.js b/solara/lib/core/dashboard/brands/BrandsController.js index 001eff9..31a4912 100644 --- a/solara/lib/core/dashboard/brands/BrandsController.js +++ b/solara/lib/core/dashboard/brands/BrandsController.js @@ -18,15 +18,37 @@ class BrandsController { } attachEventListeners() { - document.querySelector('.onboard-brand-button').addEventListener('click', () => this.showOnboardBrandForm()); - document.getElementById('brandSearch').addEventListener('input', (e) => this.filterBrands(e.target.value)); - document.getElementById('closeAliases').addEventListener('click', () => this.view.hideAliasesBottomSheet()); - - document.getElementById('cloneOption').onclick = (event) => this.handleCloneOption(event); - document.getElementById('offboardOption').onclick = (event) => this.handleOffboardOption(event); - document.getElementById('doctorOption').onclick = (event) => this.handleDoctorOption(event); - document.getElementById('aliasesOption').onclick = (event) => this.handleAliasesOption(event); - document.getElementById('settingsOption').onclick = (event) => this.handleSettingsOption(event); + document.querySelector('.onboard-brand-button') + .addEventListener('click', () => this.showOnboardBrandForm()); + document.getElementById('brandSearch') + .addEventListener('input', (e) => this.filterBrands(e.target.value)); + document.getElementById('closeAliases') + .addEventListener('click', () => this.view.hideAliasesBottomSheet()); + + this.view.brandOptionsSheet.addEventListener('clone', (event) => { + console.log('Clone', event.detail); + this.handleCloneOption(event) + }); + + this.view.brandOptionsSheet.addEventListener('offboard', (event) => { + console.log('Offboard', event.detail); + this.handleOffboardOption(event) + }); + + this.view.brandOptionsSheet.addEventListener('doctor', (event) => { + console.log('Doctor', event.detail); + this.handleDoctorOption(event) + }); + + this.view.brandOptionsSheet.addEventListener('aliases', (event) => { + console.log('Aliases', event.detail); + this.handleAliasesOption(event) + }); + + this.view.brandOptionsSheet.addEventListener('settings', (event) => { + console.log('Settings', event.detail); + this.handleSettingsOption(event) + }); } showOnboardBrandForm() { @@ -75,16 +97,13 @@ class BrandsController { handleCloneOption(event) { event.stopPropagation(); - this.view.hideBrandOptionsBottomSheet(); this.showOnboardBrandForm(); } handleOffboardOption(event) { event.stopPropagation(); - this.view.hideBrandOptionsBottomSheet(); - - const brandKey = this.view.bottomSheet.dataset.brandKey; - const brandName = this.view.bottomSheet.dataset.brandName; + const brandKey = this.view.brandOptionsSheet.dataset.brandKey; + const brandName = this.view.brandOptionsSheet.dataset.brandName; this.view.showConfirmationDialog(`Are you sure you need to offboard ${brandKey} (${brandName}) and delete all its configurations?`, async () => { await this.model.offboardBrand(brandKey); @@ -94,9 +113,8 @@ class BrandsController { async handleDoctorOption(event) { event.stopPropagation(); - this.view.hideBrandOptionsBottomSheet(); - const brandKey = this.view.bottomSheet.dataset.brandKey; + const brandKey = this.view.brandOptionsSheet.dataset.brandKey; const result = await this.model.runDoctor(brandKey); if (!result.passed) { const errors = result.errors @@ -110,9 +128,8 @@ class BrandsController { async handleAliasesOption(event) { event.stopPropagation(); - this.view.hideBrandOptionsBottomSheet(); - const brandKey = this.view.bottomSheet.dataset.brandKey; + const brandKey = this.view.brandOptionsSheet.dataset.brandKey; const aliases = await this.model.fetchAliases(brandKey); if (aliases) { this.view.showAliasesBottomSheet(aliases, brandKey); @@ -121,9 +138,8 @@ class BrandsController { handleSettingsOption(event) { event.stopPropagation(); - this.view.hideBrandOptionsBottomSheet(); - const brandKey = this.view.bottomSheet.dataset.brandKey; + const brandKey = this.view.brandOptionsSheet.dataset.brandKey; window.location.href = this.view.brandUrl(brandKey); } diff --git a/solara/lib/core/dashboard/brands/BrandsView.js b/solara/lib/core/dashboard/brands/BrandsView.js index bc73c7a..a07f121 100644 --- a/solara/lib/core/dashboard/brands/BrandsView.js +++ b/solara/lib/core/dashboard/brands/BrandsView.js @@ -1,6 +1,7 @@ import '../component/OnboardBottomSheet.js'; import '../component/ConfirmationDialog.js'; import '../component/MessageBottomSheet.js'; +import '../component/BrandOptionsBottomSheet.js'; class BrandsView { constructor() { @@ -9,7 +10,7 @@ class BrandsView { this.currentBrandItem = document.getElementById('currentBrandItem'); this.overlay = document.getElementById('overlay'); this.aliasesBottomSheet = document.getElementById('aliasesBottomSheet'); - this.bottomSheet = document.getElementById('bottomSheet'); + this.brandOptionsSheet = document.getElementById('bottomSheet'); this.confirmationDialog = document.getElementById('confirmationDialog'); this.messageBottomSheet = document.getElementById('messageBottomSheet'); this.onboardSheet = document.getElementById('onboardBottomSheet'); @@ -57,7 +58,7 @@ class BrandsView { const overflowMenu = brandItem.querySelector('.overflow-menu'); overflowMenu.addEventListener('click', (event) => { event.stopPropagation(); - this.showBrandOptionsBottomSheet(brand); + this.showBrandOptionsSheet(brand); }); brandItem.dataset.brand = brand.key; @@ -127,18 +128,10 @@ class BrandsView { }, 300); } - showBrandOptionsBottomSheet(brand) { - this.bottomSheet.dataset.brandName = brand.name; - this.bottomSheet.dataset.brandKey = brand.key; - this.bottomSheet.style.display = 'block'; - this.overlay.style.display = 'block'; - this.overlay.onclick = () => this.hideBrandOptionsBottomSheet(); - setTimeout(() => this.bottomSheet.classList.add('show'), 10); - } - - hideBrandOptionsBottomSheet() { - this.bottomSheet.classList.remove('show'); - this.overlay.style.display = 'none'; + showBrandOptionsSheet(brand) { + this.brandOptionsSheet.dataset.brandName = brand.name; + this.brandOptionsSheet.dataset.brandKey = brand.key; + this.brandOptionsSheet.show(); } showConfirmationDialog(message, onConfirm) { diff --git a/solara/lib/core/dashboard/brands/brands.html b/solara/lib/core/dashboard/brands/brands.html index 41dc388..3e879a3 100644 --- a/solara/lib/core/dashboard/brands/brands.html +++ b/solara/lib/core/dashboard/brands/brands.html @@ -112,48 +112,7 @@ .overflow-menu:hover { color: var(--primary-color); } - .bottom-sheet { - display: none; - position: fixed; - bottom: 0; - left: 0; - right: 0; - background-color: white; - border-top-left-radius: 20px; - border-top-right-radius: 20px; - box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - z-index: 1000; - padding: 20px; - transition: transform 0.3s ease-out; - transform: translateY(100%); - max-width: 700px; - margin: 0 auto; /* Center the bottom sheet */ - width: 100%; /* Ensure full width on smaller screens */ - } - .bottom-sheet.show { - transform: translateY(0); - } - .bottom-sheet ul { - list-style-type: none; - padding: 0; - margin: 0; - } - .bottom-sheet li { - padding: 15px 20px; - cursor: pointer; - transition: background-color 0.3s ease; - display: flex; - align-items: center; - } - .bottom-sheet li:hover { - background-color: var(--background-color); - } - .bottom-sheet li i { - margin-right: 15px; - font-size: 20px; - width: 24px; - text-align: center; - } + .current-brand, .brands-list { margin-bottom: 40px; max-width: 700px; @@ -413,7 +372,7 @@

Solara Dashboard

-
+

Current Brand

@@ -435,15 +394,8 @@

All Brands

-
-
    -
  • Clone
    • -
  • Doctor
    • -
  • Offboard
    • -
  • Terminal aliases
    • -
  • Settings
    • -
-
+ + diff --git a/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js b/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js new file mode 100644 index 0000000..96c89e4 --- /dev/null +++ b/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js @@ -0,0 +1,130 @@ +class BrandOptionsBottomSheet extends HTMLElement { + constructor() { + super(); + this.attachShadow({mode: 'open'}); + + this.shadowRoot.innerHTML = ` + + + + +
+
+
    +
  • Clone
    • +
  • Doctor
    • +
  • Offboard
    • +
  • Terminal aliases
    • +
  • Settings
    • +
+
+ `; + + this.bottomSheet = this.shadowRoot.getElementById('bottomSheet'); + this.overlay = this.shadowRoot.querySelector('.overlay'); + + this.shadowRoot.getElementById('cloneOption').onclick = this.handleCloneOption.bind(this); + this.shadowRoot.getElementById('offboardOption').onclick = this.handleOffboardOption.bind(this); + this.shadowRoot.getElementById('doctorOption').onclick = this.handleDoctorOption.bind(this); + this.shadowRoot.getElementById('aliasesOption').onclick = this.handleAliasesOption.bind(this); + this.shadowRoot.getElementById('settingsOption').onclick = this.handleSettingsOption.bind(this); + + this.overlay.onclick = this.hideBrandOptionsBottomSheet.bind(this); + } + + show() { + this.bottomSheet.style.display = 'block'; + this.overlay.style.display = 'block'; + setTimeout(() => this.bottomSheet.classList.add('show'), 10); + } + + hideBrandOptionsBottomSheet() { + this.bottomSheet.classList.remove('show'); + this.overlay.style.display = 'none'; + } + + handleCloneOption(event) { + event.stopPropagation(); + this.hideBrandOptionsBottomSheet(); + this.dispatchEvent(new CustomEvent('clone', {detail: this.bottomSheet.dataset})); + } + + handleOffboardOption(event) { + event.stopPropagation(); + this.hideBrandOptionsBottomSheet(); + this.dispatchEvent(new CustomEvent('offboard', {detail: this.bottomSheet.dataset})); + } + + handleDoctorOption(event) { + event.stopPropagation(); + this.hideBrandOptionsBottomSheet(); + this.dispatchEvent(new CustomEvent('doctor', {detail: this.bottomSheet.dataset})); + } + + handleAliasesOption(event) { + event.stopPropagation(); + this.hideBrandOptionsBottomSheet(); + this.dispatchEvent(new CustomEvent('aliases', {detail: this.bottomSheet.dataset})); + } + + handleSettingsOption(event) { + event.stopPropagation(); + this.hideBrandOptionsBottomSheet(); + this.dispatchEvent(new CustomEvent('settings', {detail: this.bottomSheet.dataset})); + } +} + +customElements.define('brand-options-bottom-sheet', BrandOptionsBottomSheet); \ No newline at end of file