domma-cms 0.66.0 → 0.69.3

package/plugins/blog/admin/views/categories.js

@@ -1,230 +1,241 @@
 /**
- * Blog categories admin view.
+ * Blog categories, on the Tool upgrade path.
+ *
+ * A bound list with how many posts use each category, so deleting one is not a
+ * guess. New and Edit open a (resizable) slideover rather than a modal; every
+ * row action is on its context menu (right-click, Shift+F10, or ⋮), including
+ * "Show its posts", which lands on Posts already filtered.
  *
  * @module blog/admin/views/categories
  */
 
-function escapeHtml(s) {
-    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
-const BASE = '/api/plugins/blog';
+// The loader's cache-busting token, passed on so helpers are refetched with this view.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+
+/** One row. In JS, not the template: the router's _.render would eat {{…}}. */
+const ROW_TEMPLATE = `
+<div class="blog-row" data-id="{{id}}" tabindex="0">
+    <span class="blog-row-main">
+        <strong class="blog-row-title">{{name}}</strong>
+        <small class="blog-row-sub">{{description}}</small>
+    </span>
+    <code class="blog-row-slug">{{slug}}</code>
+    <span class="blog-row-count" title="{{countTitle}}">{{count}}</span>
+    <button type="button" class="blog-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+const EDITOR = `
+<div class="blog-panel">
+    <div class="blog-field">
+        <label class="form-label" for="blog-cat-name">Name</label>
+        <input id="blog-cat-name" type="text" class="form-input" data-model="name.value" data-focus="focusName.value">
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-cat-slug">Slug
+            <span data-help="The category's address: /blog/category/<slug>. Filled from the name for a new category. Changing it breaks links to the old address."></span>
+        </label>
+        <input id="blog-cat-slug" type="text" class="form-input font-mono" data-model="slug.value">
+    </div>
+    <div class="blog-field">
+        <label class="form-label" for="blog-cat-desc">Description
+            <span data-help="Shown at the top of the category's page on the site. Optional."></span>
+        </label>
+        <textarea id="blog-cat-desc" class="form-textarea" rows="4" data-model="description.value"></textarea>
+    </div>
+    <div class="blog-panel-actions">
+        <span class="blog-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+            <span data-icon="save" data-icon-size="13"></span> Save
+        </button>
+    </div>
+</div>`;
+
+const slugify = (s) => String(s ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
 
 export const categoriesView = {
     templateUrl: '/plugins/blog/admin/templates/categories.html',
 
     /**
-     * Mount the blog categories view.
-     *
      * @param {object} $container - Domma-wrapped container element
      * @returns {Promise<void>}
      */
     async onMount($container) {
-        let categories = [];
-        let editingId = null;
-        let modal = null;
-        let nameInput = null;
-        let slugInput = null;
-        let descInput = null;
-
-        // ---------------------------------------------------------------
-        // Modal setup (built with DOM APIs - not innerHTML)
-        // ---------------------------------------------------------------
-
-        function buildModal() {
-            const form = document.createElement('div');
-            form.className = 'blog-modal-form';
-
-            const mkField = (labelText, id, tag = 'input', rows) => {
-                const group = document.createElement('div');
-
-                const lbl = document.createElement('label');
-                lbl.className = 'form-label';
-                lbl.textContent = labelText;
-                lbl.setAttribute('for', id);
-                group.appendChild(lbl);
-
-                const el = document.createElement(tag);
-                el.id = id;
-                el.className = tag === 'textarea' ? 'form-textarea' : 'form-input';
-                if (tag === 'textarea' && rows) el.rows = rows;
-                group.appendChild(el);
-
-                return { group, el };
-            };
-
-            const { group: nameGroup, el: nameEl } = mkField('Name', 'cat-name-input');
-            const { group: slugGroup, el: slugEl } = mkField('Slug', 'cat-slug-input');
-            const { group: descGroup, el: descEl } = mkField('Description', 'cat-desc-input', 'textarea', 3);
-
-            form.appendChild(nameGroup);
-            form.appendChild(slugGroup);
-            form.appendChild(descGroup);
-
-            // Footer buttons
-            const footer = document.createElement('div');
-            footer.className = 'blog-modal-actions';
-
-            const cancelBtn = document.createElement('button');
-            cancelBtn.className = 'btn btn-secondary';
-            cancelBtn.textContent = 'Cancel';
-
-            const saveBtn = document.createElement('button');
-            saveBtn.className = 'btn btn-primary';
-            saveBtn.textContent = 'Save';
-
-            footer.appendChild(cancelBtn);
-            footer.appendChild(saveBtn);
-            form.appendChild(footer);
-
-            modal = E.modal({ title: 'Category' });
-            modal.element.appendChild(form);
-
-            nameInput = nameEl;
-            slugInput = slugEl;
-            descInput = descEl;
-
-            // Auto-slug from name
-            nameEl.addEventListener('input', () => {
-                if (!editingId) {
-                    slugEl.value = nameEl.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
-                }
-            });
-
-            cancelBtn.addEventListener('click', () => modal.close());
+        // Not awaited: the cog is chrome, and the screen should not wait on it.
+        import(`./settings-cog.js?v=${ASSET_VERSION}`)
+            .then(m => m.addSettingsCog($container, '.blog-bar'))
+            .catch(() => { /* no cog is better than no screen */ });
+
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const {BASE} = kit;
+        const add = kit.viewScope('categories', /^#\/plugins\/blog\/categories\b/);
+        const root = $container.get(0);
+
+        // ---- State ----
+        const categories = M.observable([]);
+        const posts = M.observable([]);
+        const loading = M.observable(true);
+        let site = '/blog';
+
+        const usage = (id) => posts.peek().filter(p => Array.isArray(p.categories) && p.categories.includes(id)).length;
+
+        const rows = M.observable([]);
+        add(M.effect(() => {
+            posts.value;
+            rows.value = [...categories.value]
+                .sort((a, b) => String(a.name ?? '').localeCompare(String(b.name ?? ''), undefined, {sensitivity: 'base'}))
+                .map(c => {
+                    const n = usage(c.id);
+                    return {
+                        id: c.id, name: c.name || c.slug || 'Unnamed', slug: c.slug ?? '',
+                        description: c.description ?? '',
+                        count: `${n} post${n === 1 ? '' : 's'}`,
+                        countTitle: n ? 'Right-click to show them' : 'No post uses this category'
+                    };
+                });
+        }));
+
+        const data = {
+            rows, loading,
+            isEmpty: M.computed(() => !loading.value && rows.value.length === 0),
+            countText: M.computed(() => loading.value ? '' : `${categories.value.length} categor${categories.value.length === 1 ? 'y' : 'ies'}`)
+        };
+
+        // ---- Server ----
+        const byId = (id) => categories.peek().find(c => c.id === id);
+
+        async function load() {
+            loading.value = true;
+            try {
+                const [catsRes, postsRes] = await Promise.all([
+                    H.get(`${BASE}/categories`),
+                    H.get(`${BASE}/posts`).catch(() => [])
+                ]);
+                site = await kit.sitePath();
+                categories.value = catsRes?.data ?? (Array.isArray(catsRes) ? catsRes : []);
+                posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+            } catch {
+                E.toast('Failed to load categories.', {type: 'error'});
+            } finally {
+                loading.value = false;
+            }
+        }
 
-            saveBtn.addEventListener('click', async () => {
-                const name = nameEl.value.trim();
-                const slug = slugEl.value.trim();
-                if (!name) {
-                    E.toast('Name is required.', { type: 'error' });
-                    return;
-                }
-                const body = { name, slug, description: descInput.value.trim() };
-                try {
-                    if (editingId) {
-                        const res = await H.put(`${BASE}/categories/${editingId}`, body);
-                        if (res.error) throw new Error(res.error);
-                        E.toast('Category updated.', { type: 'success' });
-                    } else {
-                        const res = await H.post(`${BASE}/categories`, body);
-                        if (res.error) throw new Error(res.error);
-                        E.toast('Category created.', { type: 'success' });
-                    }
-                    modal.close();
-                    await reload();
-                } catch (err) {
-                    E.toast(err?.message ?? 'Failed to save category.', { type: 'error' });
-                }
-            });
+        async function remove(id) {
+            const n = usage(id);
+            const ok = await E.confirm(n
+                ? `Delete this category? ${n} post${n === 1 ? ' uses' : 's use'} it and will simply lose it.`
+                : 'Delete this category?');
+            if (!ok) return;
+            try {
+                await H.delete(`${BASE}/categories/${id}`);
+                categories.value = categories.peek().filter(c => c.id !== id);
+                E.toast('Category deleted.', {type: 'success'});
+            } catch {
+                E.toast('Failed to delete category.', {type: 'error'});
+            }
         }
 
-        function openModal(cat = null) {
-            editingId = cat?.id ?? null;
-            if (nameInput) nameInput.value = cat?.name ?? '';
-            if (slugInput) slugInput.value = cat?.slug ?? '';
-            if (descInput) descInput.value = cat?.description ?? '';
-            modal?.open();
+        function showPosts(id) {
+            kit.handOff('category', id);
+            R.navigate('#/plugins/blog/posts');
         }
 
-        // ---------------------------------------------------------------
-        // Table
-        // ---------------------------------------------------------------
-
-        function buildTable() {
-            const tableEl = $container.find('#categories-table').get(0);
-            if (!tableEl) return;
-
-            T.create(tableEl, {
-                data: categories,
-                columns: [
-                    {
-                        key: 'name',
-                        title: 'Name',
-                        sortable: true,
-                        render: (v) => `<strong>${escapeHtml(v)}</strong>`
-                    },
-                    {
-                        key: 'slug',
-                        title: 'Slug',
-                        sortable: true,
-                        render: (v) => `<code>${escapeHtml(v)}</code>`
-                    },
-                    {
-                        key: 'description',
-                        title: 'Description',
-                        sortable: false,
-                        render: (v) => escapeHtml(v) || '<span class="blog-empty-cell">-</span>'
-                    },
-                    {
-                        key: 'id',
-                        title: 'Actions',
-                        sortable: false,
-                        render: (id) =>
-                            `<div class="blog-row-actions">` +
-                            `<button class="btn btn-sm btn-outline cat-edit-btn" data-id="${escapeHtml(id)}">` +
-                            `<span data-icon="edit" data-icon-size="14"></span> Edit</button>` +
-                            `<button class="btn btn-sm btn-danger cat-delete-btn" data-id="${escapeHtml(id)}">` +
-                            `<span data-icon="trash" data-icon-size="14"></span> Delete</button>` +
-                            `</div>`
-                    }
-                ],
-                emptyMessage: 'No categories yet.'
+        // ---- Editor: a slideover ----
+        async function openEditor(cat = null) {
+            const so = E.slideover({title: cat ? 'Edit category' : 'New category', size: 'sm', position: 'right'});
+            const name = M.observable(cat?.name ?? '');
+            const slug = M.observable(cat?.slug ?? '');
+            const description = M.observable(cat?.description ?? '');
+            const saving = M.observable(false);
+            const focusName = M.observable(false);
+
+            // A new category's slug follows its name until someone edits the slug.
+            let slugTouched = Boolean(cat);
+            const stopFollow = M.effect(() => {
+                const n = name.value;
+                if (!slugTouched) slug.value = slugify(n);
             });
 
-            tableEl.addEventListener('click', async (e) => {
-                const editBtn = e.target.closest('.cat-edit-btn');
-                const deleteBtn = e.target.closest('.cat-delete-btn');
-
-                if (editBtn) {
-                    const cat = categories.find((c) => c.id === editBtn.dataset.id);
-                    if (cat) openModal(cat);
-                }
-
-                if (deleteBtn) {
-                    const id = deleteBtn.dataset.id;
-                    const cat = categories.find((c) => c.id === id);
-                    const ok = await E.confirm(`Delete category "${cat?.name ?? id}"?`);
-                    if (!ok) return;
-                    try {
-                        await H.delete(`${BASE}/categories/${id}`);
-                        E.toast('Category deleted.', { type: 'success' });
-                        await reload();
-                    } catch {
-                        E.toast('Failed to delete category.', { type: 'error' });
+            const el = kit.fragment(EDITOR);
+            el.querySelector('#blog-cat-slug').addEventListener('input', () => { slugTouched = true; });
+            const disposeHelp = await kit.scanHelp(el);
+            const handle = M.applyBindings({name, slug, description, saving, focusName}, el, {
+                methods: {
+                    cancel: () => so.close(),
+                    async save() {
+                        const body = {name: name.peek().trim(), slug: slug.peek().trim(), description: description.peek().trim()};
+                        if (!body.name) {
+                            E.toast('Name is required.', {type: 'error'});
+                            return;
+                        }
+                        saving.value = true;
+                        try {
+                            const res = cat
+                                ? await H.put(`${BASE}/categories/${cat.id}`, body)
+                                : await H.post(`${BASE}/categories`, body);
+                            if (res?.error) throw new Error(res.error);
+                            E.toast(cat ? 'Category updated.' : 'Category created.', {type: 'success'});
+                            so.close();
+                            await load();
+                        } catch (err) {
+                            E.toast(err?.message ?? 'Failed to save category.', {type: 'error'});
+                        } finally {
+                            saving.value = false;
+                        }
                     }
                 }
             });
-
-            Domma.icons.scan();
+            el.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && e.target.tagName === 'INPUT') { e.preventDefault(); el.querySelector('.btn-primary').click(); }
+            });
+            so.element.appendChild(el);
+            kit.onceClosed(so, () => { handle.dispose(); disposeHelp(); stopFollow(); });
+            if (typeof I !== 'undefined' && I.scan) I.scan(el);
+            so.open();
+            setTimeout(() => { focusName.value = true; }, 60);
         }
 
-        // ---------------------------------------------------------------
-        // Load
-        // ---------------------------------------------------------------
-
-        async function reload() {
-            try {
-                const res = await H.get(`${BASE}/categories`);
-                if (res.error) throw new Error(res.error);
-                categories = res.data ?? (Array.isArray(res) ? res : []);
-            } catch {
-                categories = [];
-                E.toast('Failed to load categories.', { type: 'error' });
+        // ---- Bindings ----
+        const list = root.querySelector('.blog-list');
+        root.querySelector('.blog-rows').innerHTML = ROW_TEMPLATE;
+        add(await kit.scanHelp(root));
+        const handle = M.applyBindings(data, root, {methods: {create: () => openEditor(null)}});
+        add(() => handle.dispose());
+
+        const menu = E.contextMenu(list, {
+            match: '.blog-row',
+            inherit: false,
+            density: 'compact',
+            items: (row) => {
+                const c = byId(row.dataset.id);
+                if (!c) return [];
+                const n = usage(c.id);
+                return kit.tidy([
+                    {label: 'Edit', icon: 'edit', action: () => openEditor(c)},
+                    {label: `Show its posts (${n})`, icon: 'filter', disabled: n === 0, action: () => showPosts(c.id)},
+                    {label: 'View on site', icon: 'external-link', visible: Boolean(c.slug),
+                        action: () => window.open(`${site}/category/${encodeURIComponent(c.slug)}`, '_blank', 'noopener')},
+                    {type: 'divider'},
+                    {label: 'Delete', icon: 'trash', danger: true, action: () => remove(c.id)}
+                ]);
             }
-            buildTable();
-        }
-
-        // ---------------------------------------------------------------
-        // Wire up
-        // ---------------------------------------------------------------
-
-        buildModal();
-
-        const newBtn = $container.find('#btn-new-category').get(0);
-        if (newBtn) newBtn.addEventListener('click', () => openModal(null));
-
-        await reload();
-        Domma.icons.scan();
+        });
+        add(() => menu?.destroy?.());
+
+        list.addEventListener('click', (e) => {
+            const row = e.target.closest('.blog-row');
+            if (!row) return;
+            const kebab = e.target.closest('.blog-kebab');
+            if (kebab) return kit.openMenuFrom(kebab);
+            openEditor(byId(row.dataset.id));
+        });
+        list.addEventListener('keydown', (e) => {
+            const row = e.target.closest?.('.blog-row');
+            if (row && e.key === 'Enter' && e.target === row) openEditor(byId(row.dataset.id));
+        });
+
+        if (typeof I !== 'undefined' && I.scan) I.scan(root);
+        await load();
     }
 };