domma-cms 0.2.1 → 0.5.0

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

@@ -1,487 +1,3 @@
-/**
- * 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();
-    }
-};
+import{api as D}from"../api.js";const Q=[{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"}],J=new Set(["select","radio","checkbox-group"]),le=["public","subscriber","editor","manager","admin"],X=["create","read","update","delete"];let f=[],x=null,T=!0;function Z(e){return e.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function $(e){return Q.find(t=>t.value===e)?.label||e}function ne(e){const t={...f[e]},o=document.getElementById(`fb-label-${e}`),n=document.getElementById(`fb-name-${e}`),i=document.getElementById(`fb-type-${e}`),p=document.getElementById(`fb-required-${e}`),r=document.getElementById(`fb-placeholder-${e}`),l=document.getElementById(`fb-helper-${e}`);if(o&&(t.label=o.value.trim()||t.label),n&&(t.name=n.value.trim()||t.name),i&&(t.type=i.value||t.type),p&&(t.required=p.checked),r&&(t.placeholder=r.value.trim()),l&&(t.helper=l.value.trim()),J.has(t.type)){const c=document.getElementById(`fb-options-${e}`);c&&(t.options=c.value.split(`
+`).filter(u=>u.trim()).map(u=>{const[g,...m]=u.split(":");return{value:g.trim(),label:m.join(":").trim()||g.trim()}}))}const a=document.getElementById(`fb-span-${e}`);if(document.getElementById(`fb-fullwidth-${e}`)?.checked)t.fullWidth=!0,delete t.span;else{delete t.fullWidth;const c=parseInt(a?.value,10);c>1?t.span=c:delete t.span}return t}function ee(){return f.map((e,t)=>ne(t))}function ae(e,t){const o=document.createElement("div");o.className="fb-field-card",o.dataset.index=t,o.style.cssText="border:1px solid var(--border-color,#333);border-radius:8px;margin-bottom:.75rem;overflow:hidden;";const n=document.createElement("div");n.className="fb-field-header",n.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 i=document.createElement("span");i.textContent="\u283F",i.style.cssText="cursor:grab;opacity:.4;font-size:1.1rem;";const p=document.createElement("span");p.className="fb-field-summary",p.style.cssText="flex:1;font-weight:500;font-size:.9rem;",p.textContent=e.label||"(Untitled field)";const r=document.createElement("span");r.style.cssText="font-size:.75rem;opacity:.5;",r.textContent=$(e.type);const l=document.createElement("span");l.className="fb-field-chevron",l.textContent="\u25BE",l.style.cssText="opacity:.5;transition:transform .2s;";const a=document.createElement("button");a.type="button",a.textContent="\xD7",a.className="btn btn-sm",a.style.cssText="padding:.15rem .45rem;line-height:1;font-size:1rem;opacity:.6;",a.title="Remove field",a.addEventListener("click",d=>{d.stopPropagation(),f.splice(t,1),K(document.getElementById("fields-list"))}),n.appendChild(i),n.appendChild(p),n.appendChild(r),n.appendChild(l),n.appendChild(a);const s=document.createElement("div");s.className="fb-field-body",s.style.cssText="padding:.75rem;display:none;";const c=document.createElement("div");c.style.cssText="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-bottom:.6rem;";const u=document.createElement("div"),g=document.createElement("label");g.className="form-label",g.textContent="Label";const m=document.createElement("input");m.id=`fb-label-${t}`,m.type="text",m.className="form-input",m.value=e.label||"",m.addEventListener("input",()=>{p.textContent=m.value.trim()||"(Untitled field)";const d=document.getElementById(`fb-name-${t}`);d&&!d.dataset.manual&&(d.value=Z(m.value).replace(/-/g,"_"))}),u.appendChild(g),u.appendChild(m);const w=document.createElement("div"),h=document.createElement("label");h.className="form-label",h.textContent="Name (key)";const y=document.createElement("input");y.id=`fb-name-${t}`,y.type="text",y.className="form-input",y.value=e.name||"",y.addEventListener("input",()=>{y.dataset.manual="1"}),w.appendChild(h),w.appendChild(y);const z=document.createElement("div"),P=document.createElement("label");P.className="form-label",P.textContent="Type";const v=document.createElement("select");v.id=`fb-type-${t}`,v.className="form-input",Q.forEach(d=>{const F=document.createElement("option");F.value=d.value,F.textContent=d.label,d.value===e.type&&(F.selected=!0),v.appendChild(F)}),v.addEventListener("change",()=>{r.textContent=$(v.value);const d=s.querySelector(".fb-options-wrap");d&&(d.style.display=J.has(v.value)?"":"none")}),z.appendChild(P),z.appendChild(v),c.appendChild(u),c.appendChild(w),c.appendChild(z);const N=document.createElement("div");N.style.cssText="display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;margin-bottom:.6rem;";const O=document.createElement("div"),U=document.createElement("label");U.className="form-label",U.textContent="Placeholder";const I=document.createElement("input");I.id=`fb-placeholder-${t}`,I.type="text",I.className="form-input",I.value=e.placeholder||"",O.appendChild(U),O.appendChild(I);const M=document.createElement("div"),_=document.createElement("label");_.className="form-label",_.textContent="Helper text";const k=document.createElement("input");k.id=`fb-helper-${t}`,k.type="text",k.className="form-input",k.value=e.helper||"",M.appendChild(_),M.appendChild(k);const j=document.createElement("div");j.style.cssText="padding-bottom:.35rem;";const B=document.createElement("label");B.style.cssText="display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;";const q=document.createElement("input");q.id=`fb-required-${t}`,q.type="checkbox",q.checked=!!e.required,B.appendChild(q),B.appendChild(document.createTextNode("Required")),j.appendChild(B),N.appendChild(O),N.appendChild(M),N.appendChild(j);const L=document.createElement("div");L.className="fb-options-wrap",L.style.display=J.has(e.type)?"":"none";const V=document.createElement("label");V.className="form-label",V.textContent="Options (one per line: value: Label)";const S=document.createElement("textarea");S.id=`fb-options-${t}`,S.className="form-input",S.rows=4,S.value=(e.options||[]).map(d=>typeof d=="string"?`${d}: ${d}`:`${d.value??""}: ${d.label??d.value??""}`).join(`
+`),L.appendChild(V),L.appendChild(S);const b=document.createElement("div");b.className="fb-grid-row",b.style.gridTemplateColumns="1fr auto",b.style.gap=".6rem",b.style.alignItems="end",b.style.marginBottom=".6rem",b.style.display=document.getElementById("collection-layout")?.value==="grid"?"grid":"none";const H=document.createElement("div"),Y=document.createElement("label");Y.className="form-label",Y.textContent="Column Span";const C=document.createElement("input");C.id=`fb-span-${t}`,C.type="number",C.className="form-input",C.min="1",C.max="6",C.value=e.span>1?String(e.span):"1",H.appendChild(Y),H.appendChild(C);const G=document.createElement("div");G.style.cssText="padding-bottom:.35rem;";const W=document.createElement("label");W.style.cssText="display:flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap;";const A=document.createElement("input");return A.id=`fb-fullwidth-${t}`,A.type="checkbox",A.checked=!!e.fullWidth,W.appendChild(A),W.appendChild(document.createTextNode("Full Width")),G.appendChild(W),b.appendChild(H),b.appendChild(G),s.appendChild(c),s.appendChild(N),s.appendChild(L),s.appendChild(b),n.addEventListener("click",()=>{const d=s.style.display!=="none";s.style.display=d?"none":"",l.style.transform=d?"":"rotate(180deg)"}),o.appendChild(n),o.appendChild(s),o}function K(e){if(e){if(e.textContent="",f.length===0){const t=document.createElement("p");t.className="text-muted",t.id="fields-empty-msg",t.style.cssText="text-align:center;padding:2rem 0;",t.textContent='No fields yet. Click "Add Field" to get started.',e.appendChild(t);return}f.forEach((t,o)=>{e.appendChild(ae(t,o))})}}function oe(e,t){t.textContent="",X.forEach(o=>{const n=e?.[o]||{enabled:!1,access:"admin"},i=document.createElement("div");i.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 p=document.createElement("strong");p.textContent=o.charAt(0).toUpperCase()+o.slice(1),p.style.cssText="font-size:.9rem;";const r=document.createElement("label");r.style.cssText="display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.875rem;";const l=document.createElement("input");l.type="checkbox",l.id=`api-${o}-enabled`,l.checked=!!n.enabled,r.appendChild(l),r.appendChild(document.createTextNode("Enable public access"));const a=document.createElement("select");a.id=`api-${o}-access`,a.className="form-input",le.forEach(s=>{const c=document.createElement("option");c.value=s,c.textContent=s.charAt(0).toUpperCase()+s.slice(1),s===n.access&&(c.selected=!0),a.appendChild(c)}),i.appendChild(p),i.appendChild(r),i.appendChild(a),t.appendChild(i)})}function se(e,t){E.dropdown("#storage-adapter-trigger",{items:[{label:"File (default)",value:"file"},{label:"MongoDB",value:"mongodb"}],onSelect:({item:n})=>{e.find("#storage-adapter").val(n.value),e.find("#storage-adapter-label").text(n.label);const i=n.value==="mongodb";e.find("#storage-connection-group").toggle(i),e.find("#storage-migration-warning").toggle(i&&!T)}});const o=t.map(n=>({label:n,value:n}));E.dropdown("#storage-connection-trigger",{items:o.length?o:[{label:"default",value:"default"}],onSelect:({item:n})=>{e.find("#storage-connection").val(n.value),e.find("#storage-connection-label").text(n.label)}})}function te(){return(document.getElementById("storage-adapter")?.value||"file")==="mongodb"?{adapter:"mongodb",connection:document.getElementById("storage-connection")?.value||"default"}:{adapter:"file"}}function ce(){const e={};return X.forEach(t=>{const o=document.getElementById(`api-${t}-enabled`)?.checked??!1,n=document.getElementById(`api-${t}-access`)?.value||"admin";e[t]={enabled:o,access:n}}),e}export const collectionEditorView={templateUrl:"/admin/js/templates/collection-editor.html",async onMount(e){f=[],x=null,T=!0;const o=window.location.hash.match(/\/collections\/edit\/([^/?#]+)/);o&&(x=o[1],T=!1),E.tabs(e.find("#collection-tabs").get(0)),e.find("#collection-layout").get(0)?.addEventListener("change",function(){const l=this.value==="grid";e.find("#collection-columns-group").get(0).style.display=l?"":"none",document.querySelectorAll(".fb-grid-row").forEach(a=>{a.style.display=l?"grid":"none"})});const n=e.find("#fields-list").get(0),i=e.find("#api-access-rows").get(0),p=await D.collections.proStatus();p?.pro&&x!=="roles"&&(e.find("#storage-tab-btn").show(),se(e,p.connections));let r={create:{enabled:!1,access:"admin"},read:{enabled:!0,access:"public"},update:{enabled:!1,access:"admin"},delete:{enabled:!1,access:"admin"}};if(T){const l=e.find("#field-title").get(0),a=e.find("#field-slug").get(0);l&&a&&(l.addEventListener("input",()=>{a.dataset.manual||(a.value=Z(l.value))}),a.addEventListener("input",()=>{a.dataset.manual="1"}))}else try{const l=await D.collections.get(x);if(!l){E.toast("Collection not found.",{type:"error"}),R.navigate("/collections");return}const a=e.find("#editor-title-text").get(0);a&&(a.textContent=l.title),e.find("#field-title").val(l.title||""),e.find("#field-slug").val(l.slug||""),e.find("#field-slug").prop("readonly",!0),e.find("#slug-hint").get(0).textContent="Slug cannot be changed after creation.",e.find("#field-description").val(l.description||""),e.find("#collection-layout").val(l.layout||"stacked"),e.find("#collection-columns").val(l.columns||2),e.find("#collection-columns-group").get(0).style.display=l.layout==="grid"?"":"none",f=l.fields||[],r=l.api||r,l.storage&&(e.find("#storage-adapter").val(l.storage.adapter||"file"),e.find("#storage-adapter-label").text(l.storage.adapter==="mongodb"?"MongoDB":"File (default)"),l.storage.adapter==="mongodb"&&(e.find("#storage-connection-group").show(),e.find("#storage-connection").val(l.storage.connection||"default"),e.find("#storage-connection-label").text(l.storage.connection||"default"))),x==="roles"&&e.find("#storage-tab-btn").hide()}catch{E.toast("Failed to load collection.",{type:"error"}),R.navigate("/collections");return}K(n),oe(r,i),e.find("#add-field-btn").off("click").on("click",()=>{f=ee(),f.push({id:`field-${Date.now()}`,name:"",label:"",type:"string",required:!1,placeholder:"",helper:"",options:[],validation:[],logic:null}),K(n);const l=n.querySelectorAll(".fb-field-card");if(l.length){const a=l[l.length-1],s=a.querySelector(".fb-field-body"),c=a.querySelector(".fb-field-chevron");s&&(s.style.display=""),c&&(c.style.transform="rotate(180deg)"),a.querySelector(`#fb-label-${f.length-1}`)?.focus()}}),e.find("#save-collection-btn").off("click").on("click",async()=>{const l=e.find("#field-title").val().trim(),a=e.find("#field-slug").val().trim(),s=e.find("#field-description").val().trim();if(!l){E.toast("Title is required.",{type:"warning"});return}const c=ee(),u=ce(),g=e.find("#collection-layout").val()||"stacked",m=parseInt(e.find("#collection-columns").val(),10)||2,w=e.find("#save-collection-btn");w.prop("disabled",!0);try{if(T){const h=await D.collections.create({title:l,slug:a,description:s,layout:g,columns:m,fields:c,api:u,storage:te()});x=h.slug,T=!1,E.toast("Collection created.",{type:"success"}),R.navigate(`/collections/edit/${h.slug}`)}else await D.collections.update(x,{title:l,description:s,layout:g,columns:m,fields:c,api:u,storage:te()}),E.toast("Collection saved.",{type:"success"})}catch(h){E.toast(h.message||"Failed to save.",{type:"error"})}finally{w.prop("disabled",!1)}}),Domma.icons.scan()}};