From 8573f1d089311ad3c4cfd0f22e6e6a52597d8527 Mon Sep 17 00:00:00 2001
From: Shaban Kamel <ideasoftwaretech@gmail.com>
Date: Mon, 9 Sep 2024 18:45:06 +0300
Subject: [PATCH] Solara

---
 .../core/dashboard/brands/BrandsController.js |   2 -
 .../lib/core/dashboard/brands/BrandsView.js   |  40 +-----
 solara/lib/core/dashboard/brands/brands.html  |  68 +---------
 .../dashboard/component/AliasesBottomSheet.js | 128 ++++++++++++++++++
 4 files changed, 132 insertions(+), 106 deletions(-)
 create mode 100644 solara/lib/core/dashboard/component/AliasesBottomSheet.js

diff --git a/solara/lib/core/dashboard/brands/BrandsController.js b/solara/lib/core/dashboard/brands/BrandsController.js
index 31a4912..fd7b6d0 100644
--- a/solara/lib/core/dashboard/brands/BrandsController.js
+++ b/solara/lib/core/dashboard/brands/BrandsController.js
@@ -22,8 +22,6 @@ class BrandsController {
             .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);
diff --git a/solara/lib/core/dashboard/brands/BrandsView.js b/solara/lib/core/dashboard/brands/BrandsView.js
index a07f121..688c57c 100644
--- a/solara/lib/core/dashboard/brands/BrandsView.js
+++ b/solara/lib/core/dashboard/brands/BrandsView.js
@@ -2,14 +2,13 @@ import '../component/OnboardBottomSheet.js';
 import '../component/ConfirmationDialog.js';
 import '../component/MessageBottomSheet.js';
 import '../component/BrandOptionsBottomSheet.js';
+import '../component/AliasesBottomSheet.js';
 
 class BrandsView {
     constructor() {
         this.brandList = document.getElementById('brandList');
         this.currentBrandSection = document.getElementById('currentBrandSection');
         this.currentBrandItem = document.getElementById('currentBrandItem');
-        this.overlay = document.getElementById('overlay');
-        this.aliasesBottomSheet = document.getElementById('aliasesBottomSheet');
         this.brandOptionsSheet = document.getElementById('bottomSheet');
         this.confirmationDialog = document.getElementById('confirmationDialog');
         this.messageBottomSheet = document.getElementById('messageBottomSheet');
@@ -91,41 +90,8 @@ class BrandsView {
     }
 
     showAliasesBottomSheet(aliases, brand) {
-        const commonAliasesList = document.getElementById('commonAliasesList');
-        const brandAliasesList = document.getElementById('brandAliasesList');
-        const closeAliasesBtn = document.getElementById('closeAliases');
-
-        commonAliasesList.innerHTML = '';
-        brandAliasesList.innerHTML = '';
-
-        aliases.aliases.common_aliases.forEach(alias => {
-            const li = document.createElement('li');
-            li.textContent = alias;
-            commonAliasesList.appendChild(li);
-        });
-
-        const brandAliases = aliases.aliases.brand_aliases[brand.key] || [];
-        brandAliases.forEach(alias => {
-            const li = document.createElement('li');
-            li.textContent = alias;
-            brandAliasesList.appendChild(li);
-        });
-
-        this.aliasesBottomSheet.style.display = 'block';
-        this.overlay.style.display = 'block';
-
-        this.overlay.onclick = () => this.hideAliasesBottomSheet();
-        closeAliasesBtn.onclick = () => this.hideAliasesBottomSheet();
-
-        setTimeout(() => this.aliasesBottomSheet.classList.add('show'), 10);
-    }
-
-    hideAliasesBottomSheet() {
-        this.aliasesBottomSheet.classList.remove('show');
-        setTimeout(() => {
-            this.aliasesBottomSheet.style.display = 'none';
-            this.overlay.style.display = 'none';
-        }, 300);
+        const aliasesSheet = document.getElementById('aliasesSheet');
+        aliasesSheet.show(aliases, brand);
     }
 
     showBrandOptionsSheet(brand) {
diff --git a/solara/lib/core/dashboard/brands/brands.html b/solara/lib/core/dashboard/brands/brands.html
index 3e879a3..1c3dccf 100644
--- a/solara/lib/core/dashboard/brands/brands.html
+++ b/solara/lib/core/dashboard/brands/brands.html
@@ -186,59 +186,6 @@
                 cursor: pointer;
                 color: var(--primary-color);
             }
-
-            .aliases-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;
-                width: 100%;
-                max-height: 80vh;
-                overflow-y: auto;
-            }
-            .aliases-bottom-sheet.show {
-                transform: translateY(0);
-            }
-            .aliases-bottom-sheet h3 {
-                color: var(--primary-color);
-                margin-top: 0;
-            }
-            .aliases-bottom-sheet ul {
-                list-style-type: none;
-                padding: 0;
-            }
-            .aliases-bottom-sheet li {
-                margin-bottom: 10px;
-                font-family: monospace;
-                background-color: #f1f1f1;
-                padding: 5px;
-                border-radius: 5px;
-            }
-            .close-aliases {
-                background-color: var(--primary-color);
-                color: white;
-                border: none;
-                padding: 10px 20px;
-                border-radius: 5px;
-                cursor: pointer;
-                font-size: 16px;
-                transition: background-color 0.3s ease;
-                margin-top: 20px;
-            }
-            .close-aliases:hover {
-                background-color: #3a7bc8;
-            }
             .logo {
                 width: 75px;
                 height: 75px;
@@ -393,8 +340,6 @@ <h2>All Brands</h2>
             </div>
         </div>
 
-        <div class="overlay" id="overlay"></div>
-
         <brand-options-bottom-sheet id="bottomSheet"></brand-options-bottom-sheet>
 
         <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
@@ -403,18 +348,7 @@ <h2>All Brands</h2>
 
         <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
 
-        <div class="aliases-bottom-sheet" id="aliasesBottomSheet">
-            <h3>Aliases</h3>
-            <div id="commonAliases">
-                <h4>Common Aliases</h4>
-                <ul id="commonAliasesList"></ul>
-            </div>
-            <div id="brandAliases">
-                <h4>Brand Aliases</h4>
-                <ul id="brandAliasesList"></ul>
-            </div>
-            <button class="close-aliases" id="closeAliases">Close</button>
-        </div>
+        <aliases-bottom-sheet id="aliasesSheet"></aliases-bottom-sheet>
 
         <script type="module" src="Brands.js"></script>
     </body>
diff --git a/solara/lib/core/dashboard/component/AliasesBottomSheet.js b/solara/lib/core/dashboard/component/AliasesBottomSheet.js
new file mode 100644
index 0000000..7aa9291
--- /dev/null
+++ b/solara/lib/core/dashboard/component/AliasesBottomSheet.js
@@ -0,0 +1,128 @@
+class AliasesBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .aliases-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;
+                    width: 100%;
+                    max-height: 80vh;
+                    overflow-y: auto;
+                }
+                .aliases-bottom-sheet.show {
+                    transform: translateY(0);
+                }
+                .aliases-bottom-sheet h3 {
+                    color: var(--primary-color);
+                    margin-top: 0;
+                }
+                .aliases-bottom-sheet ul {
+                    list-style-type: none;
+                    padding: 0;
+                }
+                .aliases-bottom-sheet li {
+                    margin-bottom: 10px;
+                    font-family: monospace;
+                    background-color: #f1f1f1;
+                    padding: 5px;
+                    border-radius: 5px;
+                }
+                .overlay {
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.5);
+                    z-index: 999;
+                }
+                .close-aliases {
+                    background-color: var(--primary-color);
+                    color: white;
+                    border: none;
+                    padding: 10px 20px;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background-color 0.3s ease;
+                    margin-top: 20px;
+            }
+            .close-aliases:hover {
+                background-color: #3a7bc8;
+            }
+            </style>
+            <div class="overlay"></div>
+            <div class="aliases-bottom-sheet" id="aliasesSheet">
+                <h3>Aliases</h3>
+                <div id="commonAliases">
+                    <h4>Common Aliases</h4>
+                    <ul id="commonAliasesList"></ul>
+                </div>
+                <div id="brandAliases">
+                    <h4>Brand Aliases</h4>
+                    <ul id="brandAliasesList"></ul>
+                </div>
+                <button class="close-aliases" id="closeAliases">Close</button>
+            </div>
+        `;
+
+        this.aliasesBottomSheet = this.shadowRoot.getElementById('aliasesSheet');
+        this.overlay = this.shadowRoot.querySelector('.overlay');
+        this.closeAliasesBtn = this.shadowRoot.getElementById('closeAliases');
+
+        this.closeAliasesBtn.onclick = () => this.hide();
+        this.overlay.onclick = () => this.hide();
+    }
+
+    show(aliases, brand) {
+        const commonAliasesList = this.shadowRoot.getElementById('commonAliasesList');
+        const brandAliasesList = this.shadowRoot.getElementById('brandAliasesList');
+
+        commonAliasesList.innerHTML = '';
+        brandAliasesList.innerHTML = '';
+
+        aliases.aliases.common_aliases.forEach(alias => {
+            const li = document.createElement('li');
+            li.textContent = alias;
+            commonAliasesList.appendChild(li);
+        });
+
+        const brandAliases = aliases.aliases.brand_aliases[brand.key] || [];
+        brandAliases.forEach(alias => {
+            const li = document.createElement('li');
+            li.textContent = alias;
+            brandAliasesList.appendChild(li);
+        });
+
+        this.aliasesBottomSheet.style.display = 'block';
+        this.overlay.style.display = 'block';
+
+        setTimeout(() => this.aliasesBottomSheet.classList.add('show'), 10);
+    }
+
+    hide() {
+        this.aliasesBottomSheet.classList.remove('show');
+        setTimeout(() => {
+            this.aliasesBottomSheet.style.display = 'none';
+            this.overlay.style.display = 'none';
+        }, 300); // Match with the CSS transition duration
+    }
+}
+
+customElements.define('aliases-bottom-sheet', AliasesBottomSheet);
\ No newline at end of file