solara 0.3.0 → 0.5.0

data/solara/lib/core/dashboard/brand/BrandDetailView.js

@@ -1,6 +1,6 @@
 import {DataSource} from './BrandDetailModel.js';
+import SectionsFormManager from './SectionsFormManager.js';
 import '../component/OnboardBrandBottomSheet.js';
-import '../component/AddFieldSheet.js';
 import '../component/ConfirmationDialog.js';
 import '../component/MessageBottomSheet.js';
 
@@ -15,7 +15,6 @@ class BrandDetailView {
         this.addBrandContainer = document.getElementById('add-brand-container');
 
         this.sectionsContainer = document.getElementById('sections');
-        this.addFieldSheet = document.getElementById('addFieldSheet');
         this.confirmationDialog = document.getElementById('confirmationDialog');
         this.messageBottomSheet = document.getElementById('messageBottomSheet');
 
@@ -24,8 +23,9 @@ class BrandDetailView {
         this.addNewBrandBtn = document.getElementById('newBrandBtn');
         this.exportBrandBtn = document.getElementById('exportBrandBtn');
         this.allBrandsButton = document.getElementById('allBrandsButton');
-
+        this.syncBrandButton = document.getElementById('syncBrandButton');
         this.onboardSheet = document.getElementById('onboardBottomSheet');
+        this.sectionsFormManager = new SectionsFormManager();
 
         this.initializeApp();
     }
@@ -67,177 +67,12 @@ class BrandDetailView {
         }
     }
 
-    createSection(key, name, inputType) {
-        const section = document.createElement('div');
-        section.className = 'section';
-
-        section.dataset.key = key
-        section.dataset.name = name
-        section.dataset.inputType = inputType
-
-        const titleContainer = document.createElement('div');
-        titleContainer.className = 'section-title-container';
-
-        const title = document.createElement('h2');
-        title.textContent = name;
-        titleContainer.appendChild(title);
-
-        const subtitleElement = document.createElement('p');
-        subtitleElement.className = 'section-subtitle';
-        subtitleElement.textContent = key;
-        titleContainer.appendChild(subtitleElement);
-
-        section.appendChild(titleContainer);
-
-        return section;
-    }
-
-    populateSection(sectionItem, sectionElement, content, inputType) {
-        for (const [key, value] of Object.entries(content)) {
-            if (Array.isArray(value)) {
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, 'array'));
-            } else if (typeof value === 'object' && value !== null) {
-                for (const [subKey, subValue] of Object.entries(value)) {
-                    const subInputType = subValue === true || subValue === false ? 'boolean' : inputType;
-                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, subInputType));
-                }
-            } else {
-                const fieldInputType = value === true || value === false ? 'boolean' : inputType;
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, fieldInputType));
-            }
-        }
-    }
-
-    createInputField(sectionItem, key, value, inputType) {
-        const container = document.createElement('div');
-        container.className = 'input-group';
-        const label = document.createElement('label');
-        label.textContent = key;
-        container.appendChild(label);
-
-        const inputWrapper = document.createElement('div');
-        inputWrapper.className = 'input-wrapper';
-
-        if (inputType === 'array') {
-            const arrayInputContainer = document.createElement('div');
-            arrayInputContainer.className = 'array-input-container';
-
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.id = key;
-            input.className = 'array-input';
-            input.placeholder = 'Enter array value';
-
-            const addButton = document.createElement('button');
-            addButton.className = 'add-array-item';
-            addButton.textContent = '+';
-
-            arrayInputContainer.appendChild(input);
-            arrayInputContainer.appendChild(addButton);
-
-            const arrayItemsContainer = document.createElement('div');
-            arrayItemsContainer.className = 'array-items-container';
-
-            inputWrapper.appendChild(arrayInputContainer);
-            inputWrapper.appendChild(arrayItemsContainer);
-
-            if (Array.isArray(value)) {
-                value.forEach(item => {
-                    this.addArrayItem(sectionItem, arrayItemsContainer, item);
-                });
-            }
-
-            addButton.addEventListener('click', () => {
-                this.addArrayItem(sectionItem, arrayItemsContainer, input.value.trim());
-                input.value = '';
-            });
-
-        } else if (inputType === 'boolean') {
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.id = key;
-            checkbox.checked = value;
-
-            const checkboxLabel = document.createElement('label');
-            checkboxLabel.className = 'checkbox-label';
-            checkboxLabel.htmlFor = key;
-            checkboxLabel.textContent = value ? 'True' : 'False';
-
-            checkbox.addEventListener('change', () => {
-                checkboxLabel.textContent = checkbox.checked ? 'True' : 'False';
-                this.onSectionChanged(sectionItem, container.closest('.section'));
-            });
-
-            inputWrapper.appendChild(checkbox);
-            inputWrapper.appendChild(checkboxLabel);
-        } else {
-            const input = document.createElement('input');
-            input.type = inputType;
-            input.id = key;
-
-            console.log(value)
-            if (inputType === 'color') {
-                input.value = value.startsWith('#') ? value : `#${value.substring(4)}`;
-            } else {
-                input.value = value;
-            }
-
-            inputWrapper.appendChild(input);
-        }
-
-        const deleteIcon = document.createElement('span');
-        deleteIcon.className = 'delete-icon';
-        deleteIcon.textContent = '×';
-        deleteIcon.onclick = () => this.onDeleteField(sectionItem, container);
-        inputWrapper.appendChild(deleteIcon);
-
-        container.appendChild(inputWrapper);
-
-        container.addEventListener('change', () => this.onSectionChanged(sectionItem, container.closest('.section')));
-
-        return container;
-    }
-
-    addArrayItem(sectionItem, container, value) {
-        const itemContainer = document.createElement('div');
-        itemContainer.classList.add('array-item');
-
-        const itemInput = document.createElement('input');
-        itemInput.type = 'text';
-        itemInput.classList.add('array-item-input');
-        itemInput.value = value;
-
-        const deleteButton = document.createElement('button');
-        deleteButton.classList.add('delete-array-item');
-        deleteButton.textContent = '×';
-        deleteButton.addEventListener('click', () => {
-            itemContainer.remove();
-            this.onSectionChanged(sectionItem, container.closest('.section'));
-        });
-
-        itemContainer.appendChild(itemInput);
-        itemContainer.appendChild(deleteButton);
-        container.appendChild(itemContainer);
-
-        this.onSectionChanged(sectionItem, container.closest('.section'));
-    }
-
-    showAddFieldForm(sectionItem, sectionElement, inputType) {
-        this.addFieldSheet.show(inputType, (name, value) => {
-            const newField = this.createInputField(sectionItem, name, value, inputType);
-            sectionElement.insertBefore(newField, sectionElement.lastElementChild);
-            this.onSectionChanged(sectionItem, sectionElement);
-        })
-    }
-
     showConfirmationDialog(message, onConfirm) {
         this.confirmationDialog.showDialog(message, onConfirm);
     }
 
-    showApplyChangesButton() {
-        const applyChangesButton = document.getElementById('applyChangesButton');
-        applyChangesButton.style.display = 'block';
-        this.header.style.backgroundColor = '#ff4136';
+    setupSyncBrandButton(color) {
+        this.syncBrandButton.style.display = 'block';
     }
 
     showSwitchButton() {
@@ -254,14 +89,6 @@ class BrandDetailView {
         this.messageBottomSheet.showMessage(message);
     }
 
-    setOnSectionChangedHandler(handler) {
-        this.onSectionChanged = handler;
-    }
-
-    setOnDeleteFieldHandler(handler) {
-        this.onDeleteField = handler;
-    }
-
     showOnboardBrandForm(onSubmit) {
         this.onboardSheet.show('Brand Details', 'Add Brand', onSubmit);
     }
@@ -287,6 +114,17 @@ class BrandDetailView {
         this.onboardSheet.hide();
     }
 
+    async toast(message) {
+        const toastElement = document.getElementById('toast');
+        toastElement.textContent = message;
+        toastElement.style.display = 'block';
+
+        setTimeout(() => {
+            toastElement.style.display = 'none';
+        }, 3000);
+    }
+
+
 }
 
 export default BrandDetailView;

data/solara/lib/core/dashboard/brand/SectionsFormManager.js

@@ -0,0 +1,232 @@
+import '../component/EditJsonSheet.js';
+
+class SectionsFormManager {
+
+    constructor() {
+        this.sections = [];
+        this.sectionsContainer = document.getElementById('sections');
+    }
+
+    display(sections, onChange) {
+        this.sections = sections.map((section) => {
+            return new SectionItemManager(
+                section,
+                this.createSection(section),
+                onChange)
+        })
+        this.sections.forEach((item => {
+            item.displayJSONCards()
+        }))
+    }
+
+    createSection(section) {
+        const sectionElement = document.createElement('div');
+        sectionElement.className = 'section';
+
+        sectionElement.dataset.key = section.key
+        sectionElement.dataset.name = section.name
+
+        const titleContainer = document.createElement('div');
+        titleContainer.className = 'section-title-container';
+
+        const title = document.createElement('h2');
+        title.className = "section-title";
+        title.textContent = section.name;
+        titleContainer.appendChild(title);
+
+        sectionElement.appendChild(titleContainer);
+
+        sectionElement.id = section.key;
+
+        this.sectionsContainer.appendChild(sectionElement);
+
+        return sectionElement
+    }
+
+    data() {
+        const data = this.sections.map((section) => {
+            return section.section
+        })
+        return Array.from(data);
+    }
+
+}
+
+class SectionItemManager {
+    constructor(section, container, onChange) {
+        this.section = section
+        this.container = container
+        this.onChange = onChange
+        this.editJsonSheet = document.getElementById('editJsonSheet');
+    }
+
+    displayJSONCards() {
+        let cardContent = this.container.querySelector('.card-content')
+        if (cardContent !== null) this.container.innerHTML = ''
+        this.container.appendChild(this.createCard(this.section.content, 'root', null, this.section.key));
+    }
+
+    createCard(obj, key, parent, cardTitle) {
+        const card = document.createElement('div');
+        card.className = 'card';
+
+        const header = document.createElement('div');
+        header.className = 'card-header';
+        header.textContent = key === 'root' ? cardTitle : key;
+        header.onclick = () => {
+            if (key !== 'root') {
+                this.editKey(parent, key)
+                return
+            }
+            this.editJsonSheet.show(
+                JSON.stringify(this.section.content, null, 2),
+                cardTitle,
+                (value) => {
+                    this.section.content = value
+                    this.displayJSONCards()
+                    this.notifyChange()
+                })
+        };
+
+        const actions = document.createElement('div');
+        actions.className = 'card-actions';
+
+        const addBtn = document.createElement('button');
+        addBtn.className = 'add-property-btn';
+        addBtn.innerHTML = '<i class="fas fa-plus"></i>';
+        addBtn.onclick = () => this.addProperty(obj);
+        actions.appendChild(addBtn);
+
+        if (key !== 'root') {
+            const deleteCardBtn = document.createElement('button');
+            deleteCardBtn.className = 'delete-btn';
+            deleteCardBtn.innerHTML = '<i class="fas fa-times"></i>';
+            deleteCardBtn.onclick = () => this.confirmDeleteProperty(parent, key);
+            actions.appendChild(deleteCardBtn);
+        }
+
+        header.appendChild(actions);
+        card.appendChild(header);
+
+        const content = document.createElement('div');
+        content.className = 'card-content';
+
+        const isArray = Array.isArray(obj)
+
+        for (const [k, v] of Object.entries(obj)) {
+            const item = document.createElement('div');
+
+            const cardValueContainer = document.createElement('div');
+            cardValueContainer.className = 'card-value-container';
+            item.appendChild(cardValueContainer);
+
+            const itemKey = document.createElement('span');
+            itemKey.className = 'card-key';
+            itemKey.onclick = () => {
+                if (isArray) return
+                this.editKey(obj, k)
+            };
+            cardValueContainer.appendChild(itemKey);
+
+            if (typeof v === 'object' && v !== null) {
+                item.appendChild(this.createCard(v, k, obj, null));
+                itemKey.textContent = isArray ? `${key}[${k}]` : ''
+            } else {
+                item.className = 'card-item';
+                itemKey.textContent = k.replace(/_/g, ' ')
+
+                if (this.isColorValue(v)) {
+                    const itemValue = document.createElement('input');
+                    itemValue.type = 'color';
+                    itemValue.className = 'card-value';
+                    itemValue.value = v;
+                    itemValue.onchange = () => this.updateValue(obj, k, itemValue.value);
+                    cardValueContainer.appendChild(itemValue);
+                } else {
+                    const itemValue = document.createElement('textarea');
+                    itemValue.className = 'card-value';
+                    itemValue.value = v;
+                    itemValue.onchange = () => this.updateValue(obj, k, itemValue.value);
+                    cardValueContainer.appendChild(itemValue);
+                }
+
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'delete-btn';
+                deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
+                deleteBtn.onclick = () => this.confirmDeleteProperty(obj, k);
+                cardValueContainer.appendChild(deleteBtn);
+            }
+
+            content.appendChild(item);
+        }
+
+        card.appendChild(content);
+        return card;
+    }
+
+    isColorValue(value) {
+        // Check if the value is a valid color (hex with opacity, RGBA, or RGB)
+        const hexPattern = /^#([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i; // 3, 6, or 8 hex digits
+        const rgbaPattern = /^rgba?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}\s*,?\s*(0|1|0?\.\d+|1?\.\d+)\s*\)$/;
+
+        return hexPattern.test(value) || rgbaPattern.test(value);
+    }
+
+    editKey(obj, oldKey) {
+        const newKey = prompt('Edit property name:', oldKey);
+        if (newKey && newKey !== oldKey) {
+            obj[newKey] = obj[oldKey];
+            delete obj[oldKey];
+            this.displayJSONCards();
+        }
+        this.notifyChange()
+    }
+
+    updateValue(obj, key, value) {
+        try {
+            obj[key] = JSON.parse(value);
+        } catch {
+            obj[key] = value;
+        }
+        this.displayJSONCards();
+        this.notifyChange()
+    }
+
+    confirmDeleteProperty(obj, key) {
+        const confirmationDialog = document.getElementById('confirmationDialog');
+        confirmationDialog.showDialog(`Are you sure you need to delete: ${key}?`,
+            async () => {
+                this.deleteProperty(obj, key)
+            });
+    }
+
+    deleteProperty(obj, key) {
+        if (Array.isArray(obj)) {
+            obj.splice(key, 1);
+        } else {
+            delete obj[key];
+        }
+        this.displayJSONCards();
+        this.notifyChange()
+    }
+
+    addProperty(obj) {
+        if (Array.isArray(obj)) {
+            obj.push('');
+        } else {
+            const key = prompt('Enter new property name:');
+            if (key) {
+                obj[key] = '';
+            }
+        }
+        this.displayJSONCards();
+        this.notifyChange()
+    }
+
+    notifyChange() {
+        this.onChange(this.section, this.container)
+    }
+}
+
+
+export default SectionsFormManager;