domma-cms 0.1.0 → 0.2.1

package/admin/js/views/collection-editor.js

@@ -0,0 +1,487 @@
+/**
+ * Collection Editor View
+ * Create or edit a collection schema: Settings, Fields, and API Access tabs.
+ * Field editor mirrors the form-builder pattern (same DOM ID convention) but
+ * without page-break or spacer types — collections are pure data stores.
+ */
+import { api } from '../api.js';
+
+const FIELD_TYPES = [
+    { value: 'string',         label: 'Text (single line)' },
+    { value: 'email',          label: 'Email' },
+    { value: 'tel',            label: 'Phone' },
+    { value: 'number',         label: 'Number' },
+    { value: 'textarea',       label: 'Textarea (multi-line)' },
+    { value: 'select',         label: 'Dropdown (select)' },
+    { value: 'radio',          label: 'Radio buttons' },
+    { value: 'checkbox',       label: 'Single checkbox' },
+    { value: 'checkbox-group', label: 'Checkbox group' },
+    { value: 'date',           label: 'Date' },
+    { value: 'time',           label: 'Time' },
+    { value: 'url',            label: 'URL' },
+    { value: 'hidden',         label: 'Hidden field' }
+];
+
+const OPTION_TYPES  = new Set(['select', 'radio', 'checkbox-group']);
+const ACCESS_LEVELS = ['public', 'subscriber', 'editor', 'manager', 'admin'];
+const OPERATIONS    = ['create', 'read', 'update', 'delete'];
+
+let fields         = [];
+let collectionSlug = null;
+let isNew          = true;
+
+function slugify(str) {
+    return str.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+function getTypeLabel(type) {
+    return FIELD_TYPES.find(t => t.value === type)?.label || type;
+}
+
+// ---------------------------------------------------------------------------
+// Collect current field state from DOM
+// ---------------------------------------------------------------------------
+
+function collectFieldFromDOM(idx) {
+    const field = { ...fields[idx] };
+
+    const label       = document.getElementById(`fb-label-${idx}`);
+    const name        = document.getElementById(`fb-name-${idx}`);
+    const type        = document.getElementById(`fb-type-${idx}`);
+    const required    = document.getElementById(`fb-required-${idx}`);
+    const placeholder = document.getElementById(`fb-placeholder-${idx}`);
+    const helper      = document.getElementById(`fb-helper-${idx}`);
+
+    if (label)       field.label       = label.value.trim()       || field.label;
+    if (name)        field.name        = name.value.trim()        || field.name;
+    if (type)        field.type        = type.value               || field.type;
+    if (required)    field.required    = required.checked;
+    if (placeholder) field.placeholder = placeholder.value.trim();
+    if (helper)      field.helper      = helper.value.trim();
+
+    if (OPTION_TYPES.has(field.type)) {
+        const ta = document.getElementById(`fb-options-${idx}`);
+        if (ta) {
+            field.options = ta.value.split('\n').filter(l => l.trim()).map(line => {
+                const [v, ...rest] = line.split(':');
+                return { value: v.trim(), label: rest.join(':').trim() || v.trim() };
+            });
+        }
+    }
+
+    return field;
+}
+
+function collectAllFields() {
+    return fields.map((_, idx) => collectFieldFromDOM(idx));
+}
+
+// ---------------------------------------------------------------------------
+// Build a field card DOM element
+// ---------------------------------------------------------------------------
+
+function buildFieldCard(field, idx) {
+    const card = document.createElement('div');
+    card.className        = 'fb-field-card';
+    card.dataset.index    = idx;
+    card.style.cssText    = 'border:1px solid var(--border-color,#333);border-radius:8px;margin-bottom:.75rem;overflow:hidden;';
+
+    // Header
+    const header = document.createElement('div');
+    header.className     = 'fb-field-header';
+    header.style.cssText = 'display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:var(--card-header-bg,rgba(255,255,255,.03));cursor:pointer;user-select:none;';
+
+    const grip = document.createElement('span');
+    grip.textContent   = '⠿';
+    grip.style.cssText = 'cursor:grab;opacity:.4;font-size:1.1rem;';
+
+    const labelSpan = document.createElement('span');
+    labelSpan.className   = 'fb-field-summary';
+    labelSpan.style.cssText = 'flex:1;font-weight:500;font-size:.9rem;';
+    labelSpan.textContent = field.label || '(Untitled field)';
+
+    const typeSpan = document.createElement('span');
+    typeSpan.style.cssText = 'font-size:.75rem;opacity:.5;';
+    typeSpan.textContent  = getTypeLabel(field.type);
+
+    const chevron = document.createElement('span');
+    chevron.className   = 'fb-field-chevron';
+    chevron.textContent = '▾';
+    chevron.style.cssText = 'opacity:.5;transition:transform .2s;';
+
+    const delBtn = document.createElement('button');
+    delBtn.type        = 'button';
+    delBtn.textContent = '×';
+    delBtn.className   = 'btn btn-sm';
+    delBtn.style.cssText = 'padding:.15rem .45rem;line-height:1;font-size:1rem;opacity:.6;';
+    delBtn.title       = 'Remove field';
+    delBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        fields.splice(idx, 1);
+        renderFields(document.getElementById('fields-list'));
+    });
+
+    header.appendChild(grip);
+    header.appendChild(labelSpan);
+    header.appendChild(typeSpan);
+    header.appendChild(chevron);
+    header.appendChild(delBtn);
+
+    // Body
+    const body = document.createElement('div');
+    body.className    = 'fb-field-body';
+    body.style.cssText = 'padding:.75rem;display:none;';
+
+    // Row 1: Label + Name + Type
+    const row1 = document.createElement('div');
+    row1.style.cssText = 'display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-bottom:.6rem;';
+
+    const labelWrap  = document.createElement('div');
+    const labelLbl   = document.createElement('label');
+    labelLbl.className   = 'form-label';
+    labelLbl.textContent = 'Label';
+    const labelInput = document.createElement('input');
+    labelInput.id        = `fb-label-${idx}`;
+    labelInput.type      = 'text';
+    labelInput.className = 'form-input';
+    labelInput.value     = field.label || '';
+    labelInput.addEventListener('input', () => {
+        labelSpan.textContent = labelInput.value.trim() || '(Untitled field)';
+        const nameEl = document.getElementById(`fb-name-${idx}`);
+        if (nameEl && !nameEl.dataset.manual) {
+            nameEl.value = slugify(labelInput.value).replace(/-/g, '_');
+        }
+    });
+    labelWrap.appendChild(labelLbl);
+    labelWrap.appendChild(labelInput);
+
+    const nameWrap  = document.createElement('div');
+    const nameLbl   = document.createElement('label');
+    nameLbl.className   = 'form-label';
+    nameLbl.textContent = 'Name (key)';
+    const nameInput = document.createElement('input');
+    nameInput.id        = `fb-name-${idx}`;
+    nameInput.type      = 'text';
+    nameInput.className = 'form-input';
+    nameInput.value     = field.name || '';
+    nameInput.addEventListener('input', () => { nameInput.dataset.manual = '1'; });
+    nameWrap.appendChild(nameLbl);
+    nameWrap.appendChild(nameInput);
+
+    const typeWrap   = document.createElement('div');
+    const typeLbl    = document.createElement('label');
+    typeLbl.className   = 'form-label';
+    typeLbl.textContent = 'Type';
+    const typeSelect = document.createElement('select');
+    typeSelect.id        = `fb-type-${idx}`;
+    typeSelect.className = 'form-input';
+    FIELD_TYPES.forEach(ft => {
+        const opt       = document.createElement('option');
+        opt.value       = ft.value;
+        opt.textContent = ft.label;
+        if (ft.value === field.type) opt.selected = true;
+        typeSelect.appendChild(opt);
+    });
+    typeSelect.addEventListener('change', () => {
+        typeSpan.textContent = getTypeLabel(typeSelect.value);
+        const optWrap = body.querySelector('.fb-options-wrap');
+        if (optWrap) optWrap.style.display = OPTION_TYPES.has(typeSelect.value) ? '' : 'none';
+    });
+    typeWrap.appendChild(typeLbl);
+    typeWrap.appendChild(typeSelect);
+
+    row1.appendChild(labelWrap);
+    row1.appendChild(nameWrap);
+    row1.appendChild(typeWrap);
+
+    // Row 2: Placeholder + Helper + Required
+    const row2 = document.createElement('div');
+    row2.style.cssText = 'display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;margin-bottom:.6rem;';
+
+    const phWrap  = document.createElement('div');
+    const phLbl   = document.createElement('label');
+    phLbl.className   = 'form-label';
+    phLbl.textContent = 'Placeholder';
+    const phInput = document.createElement('input');
+    phInput.id        = `fb-placeholder-${idx}`;
+    phInput.type      = 'text';
+    phInput.className = 'form-input';
+    phInput.value     = field.placeholder || '';
+    phWrap.appendChild(phLbl);
+    phWrap.appendChild(phInput);
+
+    const hlWrap  = document.createElement('div');
+    const hlLbl   = document.createElement('label');
+    hlLbl.className   = 'form-label';
+    hlLbl.textContent = 'Helper text';
+    const hlInput = document.createElement('input');
+    hlInput.id        = `fb-helper-${idx}`;
+    hlInput.type      = 'text';
+    hlInput.className = 'form-input';
+    hlInput.value     = field.helper || '';
+    hlWrap.appendChild(hlLbl);
+    hlWrap.appendChild(hlInput);
+
+    const reqWrap  = document.createElement('div');
+    reqWrap.style.cssText = 'padding-bottom:.35rem;';
+    const reqLabel = document.createElement('label');
+    reqLabel.style.cssText = 'display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;';
+    const reqCheck = document.createElement('input');
+    reqCheck.id      = `fb-required-${idx}`;
+    reqCheck.type    = 'checkbox';
+    reqCheck.checked = !!field.required;
+    reqLabel.appendChild(reqCheck);
+    reqLabel.appendChild(document.createTextNode('Required'));
+    reqWrap.appendChild(reqLabel);
+
+    row2.appendChild(phWrap);
+    row2.appendChild(hlWrap);
+    row2.appendChild(reqWrap);
+
+    // Options (only for select/radio/checkbox-group)
+    const optWrap = document.createElement('div');
+    optWrap.className    = 'fb-options-wrap';
+    optWrap.style.display = OPTION_TYPES.has(field.type) ? '' : 'none';
+    const optLbl = document.createElement('label');
+    optLbl.className   = 'form-label';
+    optLbl.textContent = 'Options (one per line: value: Label)';
+    const optTa = document.createElement('textarea');
+    optTa.id        = `fb-options-${idx}`;
+    optTa.className = 'form-input';
+    optTa.rows      = 4;
+    optTa.value     = (field.options || []).map(o => `${o.value}: ${o.label}`).join('\n');
+    optWrap.appendChild(optLbl);
+    optWrap.appendChild(optTa);
+
+    body.appendChild(row1);
+    body.appendChild(row2);
+    body.appendChild(optWrap);
+
+    // Toggle expand/collapse
+    header.addEventListener('click', () => {
+        const expanded = body.style.display !== 'none';
+        body.style.display      = expanded ? 'none' : '';
+        chevron.style.transform = expanded ? '' : 'rotate(180deg)';
+    });
+
+    card.appendChild(header);
+    card.appendChild(body);
+    return card;
+}
+
+// ---------------------------------------------------------------------------
+// Render all fields
+// ---------------------------------------------------------------------------
+
+function renderFields(listEl) {
+    if (!listEl) return;
+    listEl.textContent = '';
+
+    if (fields.length === 0) {
+        const msg = document.createElement('p');
+        msg.className   = 'text-muted';
+        msg.id          = 'fields-empty-msg';
+        msg.style.cssText = 'text-align:center;padding:2rem 0;';
+        msg.textContent = 'No fields yet. Click "Add Field" to get started.';
+        listEl.appendChild(msg);
+        return;
+    }
+
+    fields.forEach((field, idx) => {
+        listEl.appendChild(buildFieldCard(field, idx));
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Build API Access rows
+// ---------------------------------------------------------------------------
+
+function buildApiAccessRows(apiConfig, containerEl) {
+    containerEl.textContent = '';
+
+    OPERATIONS.forEach(op => {
+        const access = apiConfig?.[op] || { enabled: false, access: 'admin' };
+
+        const row = document.createElement('div');
+        row.style.cssText = 'display:grid;grid-template-columns:140px 1fr 160px;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border-color,#333);';
+
+        const opLabel = document.createElement('strong');
+        opLabel.textContent   = op.charAt(0).toUpperCase() + op.slice(1);
+        opLabel.style.cssText = 'font-size:.9rem;';
+
+        const toggleLabel = document.createElement('label');
+        toggleLabel.style.cssText = 'display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.875rem;';
+        const toggleCheck = document.createElement('input');
+        toggleCheck.type    = 'checkbox';
+        toggleCheck.id      = `api-${op}-enabled`;
+        toggleCheck.checked = !!access.enabled;
+        toggleLabel.appendChild(toggleCheck);
+        toggleLabel.appendChild(document.createTextNode('Enable public access'));
+
+        const accessSelect = document.createElement('select');
+        accessSelect.id        = `api-${op}-access`;
+        accessSelect.className = 'form-input';
+        ACCESS_LEVELS.forEach(level => {
+            const opt       = document.createElement('option');
+            opt.value       = level;
+            opt.textContent = level.charAt(0).toUpperCase() + level.slice(1);
+            if (level === access.access) opt.selected = true;
+            accessSelect.appendChild(opt);
+        });
+
+        row.appendChild(opLabel);
+        row.appendChild(toggleLabel);
+        row.appendChild(accessSelect);
+        containerEl.appendChild(row);
+    });
+}
+
+function collectApiAccess() {
+    const result = {};
+    OPERATIONS.forEach(op => {
+        const enabled = document.getElementById(`api-${op}-enabled`)?.checked ?? false;
+        const access  = document.getElementById(`api-${op}-access`)?.value || 'admin';
+        result[op]    = { enabled, access };
+    });
+    return result;
+}
+
+// ---------------------------------------------------------------------------
+// View export
+// ---------------------------------------------------------------------------
+
+export const collectionEditorView = {
+    templateUrl: '/admin/js/templates/collection-editor.html',
+
+    async onMount($container) {
+        fields         = [];
+        collectionSlug = null;
+        isNew          = true;
+
+        // Detect edit mode from URL
+        const hash  = window.location.hash;
+        const match = hash.match(/\/collections\/edit\/([^/?#]+)/);
+        if (match) {
+            collectionSlug = match[1];
+            isNew          = false;
+        }
+
+        E.tabs($container.find('#collection-tabs').get(0));
+
+        const listEl       = $container.find('#fields-list').get(0);
+        const apiContainer = $container.find('#api-access-rows').get(0);
+
+        let apiConfig = {
+            create: { enabled: false, access: 'admin' },
+            read:   { enabled: true,  access: 'public' },
+            update: { enabled: false, access: 'admin' },
+            delete: { enabled: false, access: 'admin' }
+        };
+
+        if (!isNew) {
+            try {
+                const schema = await api.collections.get(collectionSlug);
+                if (!schema) {
+                    E.toast('Collection not found.', { type: 'error' });
+                    R.navigate('/collections');
+                    return;
+                }
+
+                const titleText = $container.find('#editor-title-text').get(0);
+                if (titleText) titleText.textContent = schema.title;
+
+                $container.find('#field-title').val(schema.title || '');
+                $container.find('#field-slug').val(schema.slug || '');
+                $container.find('#field-slug').prop('readonly', true);
+                $container.find('#slug-hint').get(0).textContent = 'Slug cannot be changed after creation.';
+                $container.find('#field-description').val(schema.description || '');
+
+                fields    = schema.fields || [];
+                apiConfig = schema.api || apiConfig;
+            } catch {
+                E.toast('Failed to load collection.', { type: 'error' });
+                R.navigate('/collections');
+                return;
+            }
+        } else {
+            // Auto-populate slug from title input
+            const titleInput = $container.find('#field-title').get(0);
+            const slugInput  = $container.find('#field-slug').get(0);
+            if (titleInput && slugInput) {
+                titleInput.addEventListener('input', () => {
+                    if (!slugInput.dataset.manual) {
+                        slugInput.value = slugify(titleInput.value);
+                    }
+                });
+                slugInput.addEventListener('input', () => { slugInput.dataset.manual = '1'; });
+            }
+        }
+
+        renderFields(listEl);
+        buildApiAccessRows(apiConfig, apiContainer);
+
+        // Add field button
+        $container.find('#add-field-btn').off('click').on('click', () => {
+            fields = collectAllFields();
+            fields.push({
+                id:          `field-${Date.now()}`,
+                name:        '',
+                label:       '',
+                type:        'string',
+                required:    false,
+                placeholder: '',
+                helper:      '',
+                options:     [],
+                validation:  [],
+                logic:       null
+            });
+            renderFields(listEl);
+            // Auto-expand and focus the new card
+            const cards = listEl.querySelectorAll('.fb-field-card');
+            if (cards.length) {
+                const last = cards[cards.length - 1];
+                const body = last.querySelector('.fb-field-body');
+                const chev = last.querySelector('.fb-field-chevron');
+                if (body) body.style.display = '';
+                if (chev) chev.style.transform = 'rotate(180deg)';
+                last.querySelector(`#fb-label-${fields.length - 1}`)?.focus();
+            }
+        });
+
+        // Save button
+        $container.find('#save-collection-btn').off('click').on('click', async () => {
+            const title       = $container.find('#field-title').val().trim();
+            const slug        = $container.find('#field-slug').val().trim();
+            const description = $container.find('#field-description').val().trim();
+
+            if (!title) {
+                E.toast('Title is required.', { type: 'warning' });
+                return;
+            }
+
+            const finalFields = collectAllFields();
+            const finalApi    = collectApiAccess();
+
+            const $btn = $container.find('#save-collection-btn');
+            $btn.prop('disabled', true);
+            try {
+                if (isNew) {
+                    const created = await api.collections.create({ title, slug, description, fields: finalFields, api: finalApi });
+                    collectionSlug = created.slug;
+                    isNew          = false;
+                    E.toast('Collection created.', { type: 'success' });
+                    R.navigate(`/collections/edit/${created.slug}`);
+                } else {
+                    await api.collections.update(collectionSlug, { title, description, fields: finalFields, api: finalApi });
+                    E.toast('Collection saved.', { type: 'success' });
+                }
+            } catch (err) {
+                E.toast(err.message || 'Failed to save.', { type: 'error' });
+            } finally {
+                $btn.prop('disabled', false);
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};