From 921dea6b9210b071628508e826dc567383689c2a Mon Sep 17 00:00:00 2001
From: Shaban Kamel <ideasoftwaretech@gmail.com>
Date: Sun, 15 Sep 2024 16:08:44 +0300
Subject: [PATCH] Solara

---
 .../dashboard/brand/BrandDetailController.js  | 39 +++++++++++++++----
 .../core/dashboard/brand/BrandDetailView.js   | 16 ++++++++
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/solara/lib/core/dashboard/brand/BrandDetailController.js b/solara/lib/core/dashboard/brand/BrandDetailController.js
index 52edbe8..9e4276f 100644
--- a/solara/lib/core/dashboard/brand/BrandDetailController.js
+++ b/solara/lib/core/dashboard/brand/BrandDetailController.js
@@ -114,6 +114,7 @@ class BrandDetailController {
         try {
             this.view.updateAppNameTitle(`${configuraationsResult.brand.key} (${configuraationsResult.brand.name})`);
             await this.showSections(configuraationsResult);
+            this.view.showIndex();
         } catch (error) {
             console.error('Error initializing app:', error);
             alert(error.message);
@@ -145,7 +146,7 @@ class BrandDetailController {
                 if (sectionInfo.key === 'theme') {
                     this.createThemeSections(sectionInfo)
                 } else {
-                    this.createSection(sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
+                    this.createSection(sectionInfo.key, sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
                 }
             }
         } catch (error) {
@@ -155,15 +156,39 @@ class BrandDetailController {
     }
 
     createThemeSections(sectionInfo) {
-        this.createSection(sectionInfo, sectionInfo.content.colors, 'Theme Colors', 'color', 'colors')
-        this.createSection(sectionInfo, sectionInfo.content.typography, 'Theme Typography', 'text', 'typography')
-        this.createSection(sectionInfo, sectionInfo.content.spacing, 'Theme Spacing', 'text', 'spacing')
-        this.createSection(sectionInfo, sectionInfo.content.borderRadius, 'Theme Border Radius', 'text', 'borderRadius')
-        this.createSection(sectionInfo, sectionInfo.content.elevation, 'Theme Elevation', 'text', 'elevation')
+        this.createSection(`${sectionInfo.key}_colors`,
+            sectionInfo,
+            sectionInfo.content.colors,
+            'Theme Colors',
+            'color',
+            'colors')
+        this.createSection(`${sectionInfo.key}_typography`,
+            sectionInfo, sectionInfo.content.typography,
+            'Theme Typography',
+            'text',
+            'typography')
+        this.createSection(`${sectionInfo.key}_spacing`,
+            sectionInfo, sectionInfo.content.spacing,
+            'Theme Spacing', 'text',
+            'spacing')
+        this.createSection(
+            `${sectionInfo.key}_borderRadius`,
+            sectionInfo, sectionInfo.content.borderRadius,
+            'Theme Border Radius',
+            'text',
+            'borderRadius')
+        this.createSection(
+            `${sectionInfo.key}_elevation`,
+            sectionInfo,
+            sectionInfo.content.elevation,
+            'Theme Elevation',
+            'text',
+            'elevation')
     }
 
-    createSection(sectionInfo, content, sectionName, inputType, propertiesGroupName = null) {
+    createSection(id, sectionInfo, content, sectionName, inputType, propertiesGroupName = null) {
         const sectionElement = this.view.createSection(sectionInfo.key, sectionName, inputType);
+        sectionElement.id = id;
         sectionElement.dataset.propertiesGroupName = propertiesGroupName
 
         this.view.sectionsContainer.appendChild(sectionElement);
diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js
index e6e225c..9fc3233 100644
--- a/solara/lib/core/dashboard/brand/BrandDetailView.js
+++ b/solara/lib/core/dashboard/brand/BrandDetailView.js
@@ -236,6 +236,22 @@ class BrandDetailView {
         this.onboardSheet.show('Brand Details', 'Add Brand', onSubmit);
     }
 
+    showIndex() {
+        const sectionsContainer = this.sectionsContainer;
+        const sectionElements = Array.from(sectionsContainer.querySelectorAll('.section'));
+
+        const indexElement = document.getElementById('index');
+
+        // Clear existing items if needed
+        indexElement.innerHTML = '';
+
+        sectionElements.forEach(sectionElement => {
+            const newItem = document.createElement('li');
+            newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`;
+            indexElement.appendChild(newItem);
+        });
+    }
+
     async hideOnboardBrandForm() {
         this.onboardSheet.hide();
     }