domma-cms 0.1.0 → 0.2.0

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

@@ -0,0 +1,484 @@
+/**
+ * Collection Entries View
+ * Browse, search, add, edit, delete, import, and export entries.
+ * Dynamic table columns are built from the collection schema fields.
+ */
+import {api} from '../api.js';
+
+let currentSlug   = null;
+let currentSchema = null;
+let allEntries    = [];
+let currentPage   = 1;
+const PAGE_SIZE   = 50;
+
+export const collectionEntriesView = {
+    templateUrl: '/admin/js/templates/collection-entries.html',
+
+    async onMount($container) {
+        allEntries    = [];
+        currentPage   = 1;
+        currentSchema = null;
+
+        // Parse slug from hash
+        const hash  = window.location.hash;
+        const match = hash.match(/\/collections\/([^/?#]+)\/entries/);
+        currentSlug = match ? match[1] : null;
+
+        if (!currentSlug) {
+            E.toast('No collection selected.', { type: 'error' });
+            return;
+        }
+
+        // Load schema
+        try {
+            currentSchema = await api.collections.get(currentSlug);
+            if (!currentSchema) {
+                E.toast('Collection not found.', { type: 'error' });
+                R.navigate('/collections');
+                return;
+            }
+            const titleEl = $container.find('#entries-title').get(0);
+            if (titleEl) titleEl.textContent = currentSchema.title + ' — Entries';
+
+            const editBtn = $container.find('#edit-schema-btn').get(0);
+            if (editBtn) editBtn.setAttribute('href', `#/collections/edit/${currentSlug}`);
+        } catch {
+            E.toast('Failed to load collection schema.', { type: 'error' });
+            return;
+        }
+
+        await loadEntries($container);
+
+        // Search
+        const searchEl = $container.find('#entry-search').get(0);
+        if (searchEl) {
+            searchEl.addEventListener('input', () => {
+                const term = searchEl.value.toLowerCase().trim();
+                const filtered = term
+                    ? allEntries.filter(e => Object.values(e.data || {}).some(v => String(v).toLowerCase().includes(term)))
+                    : allEntries;
+                renderTable(filtered, $container);
+            });
+        }
+
+        // Add Entry
+        $container.find('#add-entry-btn').off('click').on('click', () => {
+            showEntryModal(null, $container);
+        });
+
+        // Export
+        $container.find('#export-btn').off('click').on('click', () => {
+            const so = E.slideover({ title: 'Export Entries', size: 'sm', position: 'right' });
+
+            const panel = document.createElement('div');
+            panel.style.cssText = 'padding:1.25rem;display:flex;flex-direction:column;gap:1rem;';
+
+            ['json', 'csv'].forEach(fmt => {
+                const btn = document.createElement('button');
+                btn.className    = 'btn btn-ghost';
+                btn.style.cssText = 'justify-content:flex-start;gap:.5rem;';
+                btn.textContent  = fmt === 'json' ? 'Export as JSON' : 'Export as CSV';
+                btn.addEventListener('click', () => {
+                    fetch(`/api/collections/${currentSlug}/export?format=${fmt}`, {
+                        headers: { Authorization: `Bearer ${S.get('auth_token') || ''}` }
+                    })
+                        .then(r => r.blob())
+                        .then(blob => {
+                            const a = document.createElement('a');
+                            a.href     = URL.createObjectURL(blob);
+                            a.download = `${currentSlug}-entries.${fmt}`;
+                            document.body.appendChild(a);
+                            a.click();
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(a.href);
+                            so.close();
+                        })
+                        .catch(() => E.toast('Export failed.', { type: 'error' }));
+                });
+                panel.appendChild(btn);
+            });
+
+            so.setContent(panel);
+            so.open();
+        });
+
+        // Import
+        $container.find('#import-btn').off('click').on('click', () => {
+            showImportModal($container);
+        });
+
+        // Clear all
+        $container.find('#clear-all-btn').off('click').on('click', async () => {
+            const confirmed = await E.confirm('Delete ALL entries? This cannot be undone.');
+            if (!confirmed) return;
+            try {
+                await api.collections.clearEntries(currentSlug);
+                allEntries = [];
+                E.toast('All entries cleared.', { type: 'success' });
+                renderTable([], $container);
+            } catch {
+                E.toast('Failed to clear entries.', { type: 'error' });
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};
+
+// ---------------------------------------------------------------------------
+// Load entries from API
+// ---------------------------------------------------------------------------
+
+async function loadEntries($container) {
+    try {
+        const result  = await api.collections.listEntries(currentSlug, { limit: 500 });
+        allEntries = result.entries || result || [];
+    } catch {
+        allEntries = [];
+        E.toast('Could not load entries.', { type: 'error' });
+    }
+    renderTable(allEntries, $container);
+}
+
+// ---------------------------------------------------------------------------
+// Render table
+// ---------------------------------------------------------------------------
+
+function renderTable(entries, $container) {
+    const countEl = $container.find('#entry-count').get(0);
+    if (countEl) {
+        countEl.textContent = entries.length === allEntries.length
+            ? `${allEntries.length} entr${allEntries.length !== 1 ? 'ies' : 'y'}`
+            : `Showing ${entries.length} of ${allEntries.length}`;
+    }
+
+    const displayFields = (currentSchema?.fields || []).slice(0, 5); // first 5 fields as columns
+
+    const columns = [
+        ...displayFields.map(field => ({
+            key:    `data.${field.name}`,
+            title: field.label || field.name,
+            render: (val, row) => {
+                const raw = row.data?.[field.name] ?? '';
+                const str = String(raw);
+                const span = document.createElement('span');
+                span.title       = str;
+                span.textContent = str.length > 60 ? str.slice(0, 60) + '\u2026' : str;
+                return span.outerHTML;
+            }
+        })),
+        {
+            key:    'meta',
+            title: 'Created',
+            render: (val) => D(val?.createdAt).format('DD MMM YYYY HH:mm')
+        },
+        {
+            key:    'id',
+            title: '',
+            render: (val) => {
+                const wrap = document.createElement('div');
+                wrap.style.cssText = 'display:flex;gap:.3rem;justify-content:flex-end;';
+
+                const editBtn = document.createElement('button');
+                editBtn.className        = 'btn btn-sm btn-ghost js-edit-entry';
+                editBtn.dataset.id       = val;
+                editBtn.textContent      = 'Edit';
+
+                const delBtn = document.createElement('button');
+                delBtn.className         = 'btn btn-sm btn-danger js-delete-entry';
+                delBtn.dataset.id        = val;
+                delBtn.textContent       = 'Delete';
+                delBtn.style.whiteSpace  = 'nowrap';
+
+                wrap.appendChild(editBtn);
+                wrap.appendChild(delBtn);
+                return wrap.outerHTML;
+            }
+        }
+    ];
+
+    T.create('#entries-table', {
+        data:         entries,
+        columns,
+        emptyMessage: 'No entries yet. Click "Add Entry" to get started.'
+    });
+
+    // Bind buttons directly (namespaced delegation is broken in Domma)
+    const tableEl = document.querySelector('#entries-table');
+    if (!tableEl) return;
+
+    tableEl.querySelectorAll('.js-edit-entry').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const entry = allEntries.find(en => en.id === btn.dataset.id);
+            if (entry) showEntryModal(entry, null);
+        });
+    });
+
+    tableEl.querySelectorAll('.js-delete-entry').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const confirmed = await E.confirm('Delete this entry?');
+            if (!confirmed) return;
+            try {
+                await api.collections.deleteEntry(currentSlug, btn.dataset.id);
+                allEntries = allEntries.filter(en => en.id !== btn.dataset.id);
+                E.toast('Entry deleted.', { type: 'success' });
+                renderTable(allEntries, { find: sel => ({ get: n => document.querySelector(sel) }) });
+            } catch {
+                E.toast('Failed to delete entry.', { type: 'error' });
+            }
+        });
+    });
+
+    // Row click → detail modal (skip action buttons)
+    tableEl.querySelectorAll('tbody tr').forEach((row, idx) => {
+        const entry = entries[idx];
+        if (!entry) return;
+        row.style.cursor = 'pointer';
+        row.addEventListener('click', (e) => {
+            if (e.target.closest('.js-edit-entry, .js-delete-entry')) return;
+            showDetailModal(entry);
+        });
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Entry modal (add / edit)
+// ---------------------------------------------------------------------------
+
+function showEntryModal(existingEntry, $container) {
+    const isEdit = !!existingEntry;
+    const modal  = E.modal({ title: isEdit ? 'Edit Entry' : 'Add Entry', size: 'md' });
+
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;';
+
+    const fields = currentSchema?.fields || [];
+    const inputs = {};
+
+    fields.forEach(field => {
+        const group = document.createElement('div');
+
+        const lbl = document.createElement('label');
+        lbl.className   = 'form-label';
+        lbl.textContent = field.label || field.name;
+        if (field.required) {
+            const req = document.createElement('span');
+            req.textContent   = ' *';
+            req.style.cssText = 'color:var(--danger,#f87171);';
+            lbl.appendChild(req);
+        }
+        group.appendChild(lbl);
+
+        let input;
+        if (field.type === 'textarea') {
+            input       = document.createElement('textarea');
+            input.rows  = 3;
+            input.value = existingEntry?.data?.[field.name] ?? '';
+        } else if (['select', 'radio', 'checkbox-group'].includes(field.type)) {
+            input       = document.createElement('select');
+            const blank = document.createElement('option');
+            blank.value = '';
+            blank.textContent = '— select —';
+            input.appendChild(blank);
+            (field.options || []).forEach(opt => {
+                const o       = document.createElement('option');
+                o.value       = opt.value;
+                o.textContent = opt.label;
+                if (opt.value === (existingEntry?.data?.[field.name] ?? '')) o.selected = true;
+                input.appendChild(o);
+            });
+        } else if (field.type === 'checkbox') {
+            const checkLabel = document.createElement('label');
+            checkLabel.style.cssText = 'display:flex;align-items:center;gap:.4rem;cursor:pointer;';
+            input       = document.createElement('input');
+            input.type  = 'checkbox';
+            input.checked = !!(existingEntry?.data?.[field.name]);
+            checkLabel.appendChild(input);
+            checkLabel.appendChild(document.createTextNode(field.placeholder || field.label || field.name));
+            group.appendChild(checkLabel);
+            inputs[field.name] = input;
+            wrapper.appendChild(group);
+            return;
+        } else {
+            input       = document.createElement('input');
+            input.type  = field.type === 'email' ? 'email' : field.type === 'number' ? 'number' : 'text';
+            input.value = existingEntry?.data?.[field.name] ?? '';
+            if (field.placeholder) input.placeholder = field.placeholder;
+        }
+
+        input.className = 'form-input';
+        group.appendChild(input);
+        inputs[field.name] = input;
+        wrapper.appendChild(group);
+    });
+
+    const btnWrap = document.createElement('div');
+    btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;';
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className   = 'btn btn-ghost';
+    cancelBtn.textContent = 'Cancel';
+    const saveBtn   = document.createElement('button');
+    saveBtn.className   = 'btn btn-primary';
+    saveBtn.textContent = isEdit ? 'Save Changes' : 'Add Entry';
+    btnWrap.appendChild(cancelBtn);
+    btnWrap.appendChild(saveBtn);
+    wrapper.appendChild(btnWrap);
+
+    modal.element.appendChild(wrapper);
+    modal.open();
+
+    cancelBtn.addEventListener('click', () => modal.close());
+    saveBtn.addEventListener('click', async () => {
+        const data = {};
+        fields.forEach(field => {
+            const el = inputs[field.name];
+            if (!el) return;
+            data[field.name] = field.type === 'checkbox' ? el.checked : el.value;
+        });
+
+        saveBtn.disabled = true;
+        try {
+            if (isEdit) {
+                const updated = await api.collections.updateEntry(currentSlug, existingEntry.id, data);
+                const idx     = allEntries.findIndex(e => e.id === existingEntry.id);
+                if (idx !== -1) allEntries[idx] = updated;
+                E.toast('Entry updated.', { type: 'success' });
+            } else {
+                const created = await api.collections.createEntry(currentSlug, data);
+                allEntries.unshift(created);
+                E.toast('Entry added.', { type: 'success' });
+            }
+            modal.close();
+            renderTable(allEntries, $container || { find: () => ({ get: () => null }) });
+        } catch (err) {
+            E.toast(err.message || 'Failed to save entry.', { type: 'error' });
+            saveBtn.disabled = false;
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Detail modal (read-only)
+// ---------------------------------------------------------------------------
+
+function showDetailModal(entry) {
+    const content = document.createElement('div');
+    const fields  = currentSchema?.fields || [];
+
+    const fieldsSection = document.createElement('div');
+    fieldsSection.style.cssText = 'display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;';
+
+    fields.forEach(field => {
+        const val = entry.data?.[field.name];
+        if (val === undefined || val === null || val === '') return;
+
+        const row = document.createElement('div');
+        row.style.cssText = 'border-bottom:1px solid var(--border-color,#333);padding-bottom:.6rem;';
+
+        const lbl = document.createElement('strong');
+        lbl.textContent   = field.label || field.name;
+        lbl.style.cssText = 'display:block;font-size:.8rem;color:var(--text-muted,#888);margin-bottom:.2rem;';
+
+        const valEl = document.createElement('p');
+        valEl.textContent  = String(val);
+        valEl.style.cssText = 'margin:0;word-break:break-word;';
+
+        row.appendChild(lbl);
+        row.appendChild(valEl);
+        fieldsSection.appendChild(row);
+    });
+
+    const meta = document.createElement('div');
+    meta.style.cssText = 'font-size:.8rem;color:var(--text-muted,#888);display:flex;flex-direction:column;gap:.3rem;border-top:1px solid var(--border-color,#333);padding-top:.75rem;';
+
+    if (entry.meta?.createdAt) {
+        const dateRow = document.createElement('span');
+        dateRow.textContent = `Created: ${D(entry.meta.createdAt).format('DD MMM YYYY HH:mm')}`;
+        meta.appendChild(dateRow);
+    }
+    if (entry.meta?.source) {
+        const srcRow = document.createElement('span');
+        srcRow.textContent = `Source: ${entry.meta.source}`;
+        meta.appendChild(srcRow);
+    }
+
+    content.appendChild(fieldsSection);
+    content.appendChild(meta);
+
+    const detailModal = E.modal({ title: 'Entry Details', size: 'md' });
+    detailModal.element.appendChild(content);
+    detailModal.open();
+}
+
+// ---------------------------------------------------------------------------
+// Import modal
+// ---------------------------------------------------------------------------
+
+function showImportModal($container) {
+    const modal = E.modal({ title: 'Import Entries', size: 'md' });
+
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;';
+
+    const hint = document.createElement('p');
+    hint.textContent   = 'Paste a JSON array of entries. Each item should have a "data" object with field values.';
+    hint.style.cssText = 'font-size:.875rem;color:var(--text-muted,#888);margin:0;';
+    wrapper.appendChild(hint);
+
+    const ta = document.createElement('textarea');
+    ta.className = 'form-input';
+    ta.rows      = 10;
+    ta.placeholder = '[{"data": {"name": "Example"}}, ...]';
+    wrapper.appendChild(ta);
+
+    const resultEl = document.createElement('p');
+    resultEl.style.cssText = 'font-size:.875rem;margin:0;display:none;';
+    wrapper.appendChild(resultEl);
+
+    const btnWrap = document.createElement('div');
+    btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:.5rem;';
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className   = 'btn btn-ghost';
+    cancelBtn.textContent = 'Cancel';
+    const importBtn = document.createElement('button');
+    importBtn.className   = 'btn btn-primary';
+    importBtn.textContent = 'Import';
+    btnWrap.appendChild(cancelBtn);
+    btnWrap.appendChild(importBtn);
+    wrapper.appendChild(btnWrap);
+
+    modal.element.appendChild(wrapper);
+    modal.open();
+
+    cancelBtn.addEventListener('click', () => modal.close());
+    importBtn.addEventListener('click', async () => {
+        let entries;
+        try {
+            entries = JSON.parse(ta.value);
+            if (!Array.isArray(entries)) throw new Error('Must be a JSON array');
+        } catch (err) {
+            resultEl.style.display  = '';
+            resultEl.style.color    = 'var(--danger,#f87171)';
+            resultEl.textContent    = `Invalid JSON: ${err.message}`;
+            return;
+        }
+
+        importBtn.disabled = true;
+        try {
+            const result = await api.collections.import(currentSlug, entries);
+            resultEl.style.display = '';
+            resultEl.style.color   = 'var(--success,#4ade80)';
+            resultEl.textContent   = `Imported ${result.imported} entries. Skipped: ${result.skipped}.`;
+            await loadEntries($container || { find: () => ({ get: () => null, off: () => ({ on: () => {} }) }) });
+            setTimeout(() => modal.close(), 1500);
+        } catch (err) {
+            resultEl.style.display = '';
+            resultEl.style.color   = 'var(--danger,#f87171)';
+            resultEl.textContent   = err.message || 'Import failed.';
+        } finally {
+            importBtn.disabled = false;
+        }
+    });
+}

package/admin/js/views/collections.js

@@ -0,0 +1,153 @@
+/**
+ * Collections List View
+ * Shows all collections with field/entry counts and action buttons.
+ */
+import {api} from '../api.js';
+
+function esc(str) {
+    return String(str)
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export const collectionsView = {
+    templateUrl: '/admin/js/templates/collections.html',
+
+    async onMount($container) {
+        await loadCollections($container);
+
+        $container.find('#create-collection-btn').off('click').on('click', () => {
+            const modal = E.modal({ title: 'New Collection', size: 'sm' });
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:.25rem 0 .5rem;';
+
+            const formContainer = document.createElement('div');
+            F.create(
+                { title: { type: 'string', label: 'Collection Title', placeholder: 'e.g. Products, Blog Posts…', required: true } },
+                {},
+                { showSubmitButton: false }
+            ).renderTo(formContainer);
+            wrapper.appendChild(formContainer);
+
+            const btnWrap = document.createElement('div');
+            btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem;';
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className   = 'btn btn-ghost';
+            cancelBtn.textContent = 'Cancel';
+            const createBtn = document.createElement('button');
+            createBtn.className   = 'btn btn-primary';
+            createBtn.textContent = 'Create';
+            btnWrap.appendChild(cancelBtn);
+            btnWrap.appendChild(createBtn);
+            wrapper.appendChild(btnWrap);
+
+            modal.element.appendChild(wrapper);
+            modal.open();
+
+            const titleInput = formContainer.querySelector('input[name="title"]');
+            setTimeout(() => titleInput?.focus(), 50);
+
+            async function doCreate() {
+                const title = titleInput?.value.trim();
+                if (!title) return;
+                try {
+                    const collection = await api.collections.create({ title });
+                    modal.close();
+                    R.navigate(`/collections/edit/${collection.slug}`);
+                } catch (err) {
+                    E.toast(err.message || 'Failed to create collection.', { type: 'error' });
+                }
+            }
+
+            cancelBtn.addEventListener('click', () => modal.close());
+            createBtn.addEventListener('click', doCreate);
+            titleInput?.addEventListener('keydown', (e) => { if (e.key === 'Enter') doCreate(); });
+        });
+
+        Domma.icons.scan();
+    }
+};
+
+async function loadCollections($container) {
+    let collections = [];
+    try {
+        collections = await api.collections.list();
+    } catch {
+        E.toast('Could not load collections.', { type: 'error' });
+    }
+
+    T.create('#collections-table', {
+        data: collections,
+        columns: [
+            {
+                key:    'title',
+              title: 'Title',
+                render: (val, row) => {
+                    const a = document.createElement('a');
+                    a.href        = `#/collections/${esc(row.slug)}/entries`;
+                    a.textContent = val;
+                    a.style.fontWeight = '600';
+                    return a.outerHTML;
+                }
+            },
+            {
+                key:    'slug',
+              title: 'Slug',
+                render: val => {
+                    const code = document.createElement('code');
+                    code.textContent = val;
+                    return code.outerHTML;
+                }
+            },
+          {key: 'fields', title: 'Field Count', render: val => String(val?.length ?? 0)},
+          {key: 'entryCount', title: 'Entry Count', render: val => String(val ?? 0)},
+            {
+                key:    'slug',
+              title: 'Actions',
+                render: (val) => {
+                    const wrap = document.createElement('div');
+                    wrap.style.cssText = 'display:flex;gap:.4rem;justify-content:flex-end;';
+
+                    const editBtn = document.createElement('a');
+                    editBtn.href        = `#/collections/edit/${esc(val)}`;
+                    editBtn.className   = 'btn btn-sm btn-ghost';
+                    editBtn.textContent = 'Edit Schema';
+
+                    const entriesBtn = document.createElement('a');
+                    entriesBtn.href        = `#/collections/${esc(val)}/entries`;
+                    entriesBtn.className   = 'btn btn-sm btn-ghost';
+                    entriesBtn.textContent = 'Entries';
+
+                    const delBtn = document.createElement('button');
+                    delBtn.className        = 'btn btn-sm btn-danger js-delete-collection';
+                    delBtn.dataset.slug     = val;
+                    delBtn.textContent      = 'Delete';
+
+                    wrap.appendChild(editBtn);
+                    wrap.appendChild(entriesBtn);
+                    wrap.appendChild(delBtn);
+                    return wrap.outerHTML;
+                }
+            }
+        ],
+        emptyMessage: 'No collections yet. Click "New Collection" to get started.'
+    });
+
+    document.querySelectorAll('.js-delete-collection').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const slug      = btn.dataset.slug;
+            const confirmed = await E.confirm(`Delete collection "${slug}" and all its data? This cannot be undone.`);
+            if (!confirmed) return;
+            try {
+                await api.collections.delete(slug);
+                E.toast('Collection deleted.', { type: 'success' });
+                await loadCollections($container);
+            } catch {
+                E.toast('Failed to delete collection.', { type: 'error' });
+            }
+        });
+    });
+
+    Domma.icons.scan();
+}

package/admin/js/views/dashboard.js

@@ -2,7 +2,7 @@
  * Dashboard View
  * Shows page count stats and a recent pages table.
  */
-import { api } from '../api.js';
+import {api} from '../api.js';
 
 export const dashboardView = {
     templateUrl: '/admin/js/templates/dashboard.html',
@@ -31,11 +31,19 @@ export const dashboardView = {
         T.create('#recent-pages-table', {
             data: recent,
             columns: [
-                { key: 'title', label: 'Title' },
-                { key: 'urlPath', label: 'URL' },
-                { key: 'status', label: 'Status', render: (val) => `<span class="badge badge-${val === 'published' ? 'success' : 'warning'}">${val}</span>` },
-                { key: 'updatedAt', label: 'Updated', render: (val) => val ? D(val).format('DD MMM YYYY') : '—' },
-                { key: 'urlPath', label: '', render: (val) => `<a href="#/pages/edit${val}" class="btn btn-sm btn-outline">Edit</a>` }
+              {key: 'title', title: 'Title'},
+              {key: 'urlPath', title: 'URL'},
+              {
+                key: 'status',
+                title: 'Status',
+                render: (val) => `<span class="badge badge-${val === 'published' ? 'success' : 'warning'}">${val}</span>`
+              },
+              {key: 'updatedAt', title: 'Updated', render: (val) => val ? D(val).format('DD MMM YYYY') : '—'},
+              {
+                key: 'urlPath',
+                title: '',
+                render: (val) => `<a href="#/pages/edit${val}" class="btn btn-sm btn-outline">Edit</a>`
+              }
             ],
             emptyMessage: 'No pages yet. <a href="#/pages/new">Create your first page</a>.'
         });