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 @@