solara 0.4.0 → 0.6.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,199 +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;
-    }
-
-    populateJsonFields(data, container, content, inputType, level = 0) {
-        container.dataset.key = data.key
-        container.dataset.level = `${level}`
-
-        for (const [key, value] of Object.entries(content)) {
-            if (Array.isArray(value)) {
-                this.populateJsonArray(key, value, data, container, content, inputType, level)
-                continue
-            }
-
-            if (value !== null && typeof value === 'object') {
-                this.populateJsonObject(key, value, data, container, content, inputType, level)
-                continue
-            }
-
-            const fieldElement = this.createJsonField(data, key, value, inputType, level)
-            container.appendChild(fieldElement);
-        }
-    }
-
-    populateJsonArray(key, value, data, container, content, inputType, level) {
-        const arrayContainer = document.createElement('div');
-        arrayContainer.className = 'json-array';
-        arrayContainer.classList.add(`json-array-${level}`);
-
-        const labelContainer = document.createElement('div');
-        labelContainer.className = 'json-array-label-group';
-        const label = document.createElement('label');
-        label.textContent = key;
-        labelContainer.appendChild(label);
-
-        // TODO: to be implemented later
-        if (false) {
-            const addButton = document.createElement('button');
-            addButton.className = 'add-array-item';
-            addButton.textContent = '+';
-            let lastItemIndex = value.length - 1
-            addButton.addEventListener('click', () => {
-                const itemContainer = document.createElement('div');
-                itemContainer.className = 'json-array-item';
-
-                lastItemIndex += 1
-                let fieldKey = `${key}[${lastItemIndex}]`
-
-                const indexed = container.querySelectorAll(`.json-array-item-indexed-${level}`).length !== 0;
-                if (indexed) {
-                    fieldKey = lastItemIndex
-                }
-                const field = this.createJsonField(data, fieldKey, '', inputType, level + 1)
-                field.classList.add(`json-array-item-${level}`);
-                itemContainer.appendChild(field);
-
-                arrayContainer.insertBefore(itemContainer, arrayContainer.lastElementChild);
-
-                this.onSectionChanged(data, container.closest('.section'));
-            });
-        }
-        arrayContainer.appendChild(labelContainer);
-
-        value.forEach((item, index) => {
-            const itemContainer = document.createElement('div');
-            itemContainer.className = 'json-array-item';
-            itemContainer.classList.add(`json-array-item-${level}`);
-            if (typeof item === 'object' && item !== null) {
-                this.populateJsonFields(data, itemContainer, item, inputType, level + 1);
-            } else {
-                itemContainer.dataset.level = `${level + 1}`
-                const field = this.createJsonField(data, `${index}`, item, inputType, level + 1)
-                itemContainer.classList.add(`json-array-item-indexed-${level}`);
-                itemContainer.appendChild(field);
-            }
-            arrayContainer.appendChild(itemContainer);
-        });
-
-        // TODO: to be implemented later
-        // arrayContainer.appendChild(addButton);
-        container.appendChild(arrayContainer);
-    }
-
-    populateJsonObject(key, value, data, container, content, inputType, level) {
-        const objectContainer = document.createElement('div');
-        objectContainer.className = 'json-object';
-        objectContainer.classList.add(`json-object-${level}`);
-        const objectLabel = document.createElement('label');
-        objectLabel.className = 'json-object-title';
-        objectLabel.textContent = key;
-        objectContainer.appendChild(objectLabel);
-
-        this.populateJsonFields(data, objectContainer, value, inputType, level + 1);
-
-        container.appendChild(objectContainer);
-    }
-
-    createJsonField(data, key, value, inputType, level) {
-        const fieldInputType = typeof value === 'boolean' ? 'boolean' : 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 (fieldInputType === '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(data, container.closest('.section'));
-            });
-
-            inputWrapper.appendChild(checkbox);
-            inputWrapper.appendChild(checkboxLabel);
-        } else {
-            const input = document.createElement('input');
-            input.type = fieldInputType;
-            input.id = key;
-
-            console.log(value)
-            if (fieldInputType === '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(data, container);
-        inputWrapper.appendChild(deleteIcon);
-
-        container.appendChild(inputWrapper);
-
-        container.addEventListener('change', () => this.onSectionChanged(data, container.closest('.section')));
-
-        container.classList.add(`json-field-${level}`);
-
-        return container;
-    }
-
-    showAddFieldForm(data, sectionElement, inputType) {
-        this.addFieldSheet.show(inputType, (name, value) => {
-            const newField = this.createJsonField(data, name, value, inputType, 0);
-            sectionElement.insertBefore(newField, sectionElement.lastElementChild);
-            this.onSectionChanged(data, 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() {
@@ -276,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);
     }
@@ -309,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,293 @@
+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 (typeof v === 'boolean') {
+                    // Create a container for the entire boolean input
+                    const booleanContainer = document.createElement('div');
+                    booleanContainer.className = 'boolean-container';
+
+                    const checkboxContainer = document.createElement('div');
+                    checkboxContainer.className = 'card-value checkbox-container';
+
+                    const itemValue = document.createElement('input');
+                    itemValue.type = 'checkbox';
+                    itemValue.className = 'card-value checkbox';
+                    itemValue.checked = v;
+
+                    const valueLabel = document.createElement('span');
+                    valueLabel.className = 'checkbox-value';
+                    valueLabel.textContent = v.toString();
+
+                    const updateValue = () => {
+                        const newValue = !itemValue.checked;
+                        itemValue.checked = newValue;
+                        valueLabel.textContent = newValue.toString();
+                        this.updateValue(obj, k, newValue, typeof v);
+                    };
+
+                    // Add click handlers to both container and checkbox
+                    booleanContainer.onclick = (e) => {
+                        if (e.target !== itemValue) { // Prevent double-toggle when clicking checkbox
+                            updateValue();
+                        }
+                    };
+
+                    itemValue.onchange = () => {
+                        valueLabel.textContent = itemValue.checked.toString();
+                        this.updateValue(obj, k, itemValue.checked, typeof v);
+                    };
+
+                    checkboxContainer.appendChild(itemValue);
+                    checkboxContainer.appendChild(valueLabel);
+
+                    // Move the key inside the boolean container
+                    booleanContainer.appendChild(itemKey);
+                    booleanContainer.appendChild(checkboxContainer);
+
+                    cardValueContainer.appendChild(booleanContainer);
+                } else 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, typeof v);
+                    cardValueContainer.appendChild(itemValue);
+                } else {
+                    const itemValue = document.createElement('textarea');
+                    itemValue.className = 'card-value';
+                    itemValue.value = v;
+                    itemValue.onchange = () => this.updateValue(obj, k, itemValue.value, typeof v);
+                    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) {
+        const hexPattern = /^#([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i;
+        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, originalType) {
+        try {
+            // Handle different types based on the original value's type
+            switch (originalType) {
+                case 'string':
+                    obj[key] = String(value);
+                    break;
+                case 'number':
+                    // If the original was a number, keep it number
+                    if (!isNaN(value) || value === '') {
+                        obj[key] = Number(value);
+                    }
+                    break;
+                case 'boolean':
+                    obj[key] = value.toLowerCase() === 'true';
+                    break;
+                default:
+                    // Try to parse as JSON, fallback to string if it fails
+                    try {
+                        obj[key] = JSON.parse(value);
+                    } catch {
+                        obj[key] = 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;