domma-cms 0.55.1 → 0.69.3

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

@@ -1,199 +1,328 @@
 /**
- * Blog posts overview - KPI cards + filterable, sortable post table.
+ * Blog posts - the list, on the Tool upgrade path.
+ *
+ * State is domma-reactive observables bound with M.applyBindings; there is no
+ * render function. The four status counts are chips that also filter, which is
+ * what the KPI cards were taking a row of screen for. Everything you can do to
+ * a post is on its context menu (right-click, Shift+F10, or ⋮); a click on the
+ * row opens it.
  *
  * @module blog/admin/views/blog
  */
 
-function escapeHtml(s) {
-    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
+// 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';
 
-const BASE = '/api/plugins/blog';
+const STATUSES = [
+    {key: '', label: 'All'},
+    {key: 'published', label: 'Published'},
+    {key: 'draft', label: 'Drafts'},
+    {key: 'scheduled', label: 'Scheduled'}
+];
 
-const STATUS_BADGE = {
-    draft: 'badge-secondary',
-    scheduled: 'badge-warning',
-    published: 'badge-success'
-};
+/**
+ * One post row - the body of the rows `data-each`. Here, not in blog.html,
+ * because the router renders a templateUrl through `_.render` first, which
+ * would replace every `{{…}}` with nothing. Mustache escapes its values.
+ */
+const ROW_TEMPLATE = `
+<div class="blog-row" data-id="{{id}}" tabindex="0">
+    <span class="blog-row-main">
+        <strong class="blog-row-title">{{title}}</strong>
+        <small class="blog-row-sub">{{sub}}</small>
+    </span>
+    <span class="badge {{badge}}">{{status}}</span>
+    <span class="blog-row-cats">{{cats}}</span>
+    <time class="blog-row-date" title="{{dateTitle}}">{{date}}</time>
+    <button type="button" class="blog-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+const CHIP_TEMPLATE = `<button type="button" class="blog-chip" data-status="{{key}}">{{label}} <b>{{count}}</b></button>`;
+
+const BADGE = {draft: 'badge-secondary', scheduled: 'badge-warning', published: 'badge-success'};
 
 export const blogView = {
     templateUrl: '/plugins/blog/admin/templates/blog.html',
 
     async onMount($container) {
-        let allPosts = [];
-        let categories = [];
-        let postsTable = null;
-
-        function buildTable(data) {
-            const tableEl = $container.find('#posts-table').get(0);
-            if (!tableEl) return;
-
-            if (postsTable) {
-                postsTable.setData(data);
-                Domma.icons.scan(tableEl);
-                return;
-            }
+        // 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 catNameById = (id) => categories.find((c) => c.id === id)?.name ?? '';
-
-            postsTable = T.create(tableEl, {
-                data,
-                columns: [
-                    {
-                        key: 'title',
-                        title: 'Title',
-                        sortable: true,
-                        render: (v, row) =>
-                            `<a href="#/plugins/blog/posts/${escapeHtml(row.id)}" style="font-weight:600;">${escapeHtml(v || 'Untitled')}</a>`
-                    },
-                    {
-                        key: 'status',
-                        title: 'Status',
-                        sortable: true,
-                        render: (v) => {
-                            const cls = STATUS_BADGE[v] || 'badge-secondary';
-                            return `<span class="badge ${cls}">${escapeHtml(v ?? 'draft')}</span>`;
-                        }
-                    },
-                    {
-                        key: 'categories',
-                        title: 'Categories',
-                        sortable: false,
-                        render: (val) => Array.isArray(val) && val.length
-                            ? val.map((id) => `<span class="badge badge-secondary mr-1">${escapeHtml(catNameById(id) || id)}</span>`).join('')
-                            : '<span style="opacity:0.4;">-</span>'
-                    },
-                    {
-                        key: 'publishedAt',
-                        title: 'Published',
-                        sortable: true,
-                        render: (v) => v
-                            ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).format('DD MMM YYYY'))}</span>`
-                            : '<span style="opacity:0.4;">-</span>'
-                    },
-                    {
-                        key: 'id',
-                        title: 'Actions',
-                        sortable: false,
-                        render: (id, row) => {
-                            const slug = escapeHtml(row.slug || '');
-                            const viewLink = row.status === 'published' && slug
-                                ? `<a href="/blog/${slug}" target="_blank" class="btn btn-sm btn-outline" title="View on site"><span data-icon="external-link" data-icon-size="14"></span></a>`
-                                : '';
-                            return `<div style="display:flex;gap:.4rem;">` +
-                                `<button class="btn btn-sm btn-outline post-edit-btn" data-id="${escapeHtml(id)}"><span data-icon="edit" data-icon-size="14"></span></button>` +
-                                viewLink +
-                                `<button class="btn btn-sm btn-danger post-delete-btn" data-id="${escapeHtml(id)}"><span data-icon="trash" data-icon-size="14"></span></button>` +
-                                `</div>`;
-                        }
-                    }
-                ],
-                emptyMessage: 'No posts found.'
-            });
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const {BASE} = kit;
+        const add = kit.viewScope('posts', /^#\/plugins\/blog(\/posts)?\/?$/);
+        const root = $container.get(0);
 
-            tableEl.addEventListener('click', async (e) => {
-                const editBtn = e.target.closest('.post-edit-btn');
-                const deleteBtn = e.target.closest('.post-delete-btn');
+        // ---- State ----
+        const posts = M.observable([]);
+        const categories = M.observable([]);
+        const status = M.observable('');
+        const category = M.observable(kit.takeHandOff('category') || '');
+        const query = M.observable('');
+        const sort = M.observable('newest');
+        const loading = M.observable(true);
+        let site = '/blog';
 
-                if (editBtn) {
-                    R.navigate('#/plugins/blog/posts/' + editBtn.dataset.id);
-                }
+        const catName = (id) => categories.peek().find(c => c.id === id)?.name ?? id;
+        const when = (p) => p.publishedAt || p.updatedAt || p.createdAt || '';
 
-                if (deleteBtn) {
-                    const id = deleteBtn.dataset.id;
-                    const post = allPosts.find((p) => p.id === id);
-                    const ok = await E.confirm(`Delete "${post?.title ?? 'this post'}"?`);
-                    if (!ok) return;
-                    try {
-                        await H.delete(`${BASE}/posts/${id}`);
-                        E.toast('Post deleted.', { type: 'success' });
-                        await reload();
-                    } catch {
-                        E.toast('Failed to delete post.', { type: 'error' });
-                    }
-                }
+        const categoryOptions = M.computed(() => categories.value.map(c => ({id: c.id, name: c.name ?? c.slug ?? c.id})));
+
+        // Plain observables fed by effects: the admin's Domma never re-renders
+        // a data-each whose source is a computed.
+        const rows = M.observable([]);
+        const chips = M.observable([]);
+        add(M.effect(() => {
+            const term = query.value.trim().toLowerCase();
+            const list = posts.value.filter(p =>
+                (!status.value || p.status === status.value)
+                && (!category.value || (Array.isArray(p.categories) && p.categories.includes(category.value)))
+                && (!term || [p.title, p.excerpt, p.slug].some(v => String(v ?? '').toLowerCase().includes(term))));
+            const order = {
+                newest: (a, b) => String(when(b)).localeCompare(String(when(a))),
+                oldest: (a, b) => String(when(a)).localeCompare(String(when(b))),
+                title: (a, b) => String(a.title ?? '').localeCompare(String(b.title ?? ''), undefined, {sensitivity: 'base'})
+            }[sort.value];
+            categories.value;   // re-label when categories arrive
+            rows.value = [...list].sort(order).map(p => {
+                const at = when(p);
+                const label = p.status === 'published' ? 'Published' : p.status === 'scheduled' ? 'Scheduled for' : 'Updated';
+                return {
+                    id: p.id,
+                    title: p.title || 'Untitled',
+                    sub: `${p.sample ? 'Sample · ' : ''}/${p.slug || ''}${p.excerpt ? ' · ' + String(p.excerpt).slice(0, 90) : ''}`,
+                    status: p.status ?? 'draft',
+                    badge: BADGE[p.status] || 'badge-secondary',
+                    cats: (p.categories || []).map(catName).join(', '),
+                    date: at ? D(at).format('DD MMM YYYY') : '',
+                    dateTitle: at ? `${label} ${D(at).format('DD MMM YYYY HH:mm')}` : ''
+                };
             });
+        }));
+        add(M.effect(() => {
+            const all = posts.value;
+            chips.value = STATUSES.map(s => ({
+                key: s.key || 'all', label: s.label,
+                count: s.key ? all.filter(p => (p.status ?? 'draft') === s.key).length : all.length
+            }));
+        }));
+        // The active chip, marked without re-rendering the list.
+        add(M.effect(() => {
+            const active = status.value || 'all';
+            chips.value;
+            queueMicrotask(() => root.querySelectorAll('.blog-chip').forEach(c =>
+                c.classList.toggle('is-active', c.dataset.status === active)));
+        }));
+
+        const filtered = M.computed(() => Boolean(status.value || category.value || query.value.trim()));
+        const data = {
+            rows, chips, query, category, categoryOptions, sort, loading,
+            hasRows: M.computed(() => rows.value.length > 0),
+            isEmpty: M.computed(() => !loading.value && rows.value.length === 0),
+            emptyText: M.computed(() => filtered.value ? 'No posts match these filters.' : 'No posts yet - New post starts one, or ⋮ adds some samples to look at.'),
+            canReset: filtered
+        };
+
+        // ---- Server ----
+        const byId = (id) => posts.peek().find(p => p.id === id);
 
-            Domma.icons.scan(tableEl);
+        async function load() {
+            loading.value = true;
+            try {
+                const [postsRes, catsRes] = await Promise.all([
+                    H.get(`${BASE}/posts`),
+                    H.get(`${BASE}/categories`).catch(() => [])
+                ]);
+                site = await kit.sitePath();
+                // GET /posts sends a BARE ARRAY; `.data` is only for a wrapped reply.
+                posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+                categories.value = catsRes?.data ?? (Array.isArray(catsRes) ? catsRes : []);
+            } catch {
+                E.toast('Failed to load posts.', {type: 'error'});
+            } finally {
+                loading.value = false;
+            }
         }
 
-        function refreshKpis() {
-            const counts = { total: allPosts.length, published: 0, draft: 0, scheduled: 0 };
-            for (const p of allPosts) {
-                if (p.status === 'published') counts.published++;
-                else if (p.status === 'scheduled') counts.scheduled++;
-                else counts.draft++;
+        /** Replace one post in place, as a NEW array, from a route's reply. */
+        const upsert = (post) => {
+            const list = posts.peek();
+            posts.value = list.some(p => p.id === post.id) ? list.map(p => (p.id === post.id ? post : p)) : [post, ...list];
+        };
+
+        async function publish(id) {
+            try {
+                upsert(await H.post(`${BASE}/posts/${id}/publish`, {}));
+                E.toast('Post published.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to publish.', {type: 'error'});
             }
-            $container.find('#kpi-total').text(counts.total);
-            $container.find('#kpi-published').text(counts.published);
-            $container.find('#kpi-drafts').text(counts.draft);
-            $container.find('#kpi-scheduled').text(counts.scheduled);
         }
 
-        function applyFilters() {
-            const status = $container.find('#filter-status').val() || '';
-            const cat    = $container.find('#filter-category').val() || '';
-            const query  = ($container.find('#filter-search').val() || '').toString().toLowerCase().trim();
-
-            let filtered = allPosts;
-            if (status) filtered = filtered.filter((p) => p.status === status);
-            if (cat)    filtered = filtered.filter((p) => Array.isArray(p.categories) && p.categories.includes(cat));
-            if (query) {
-                filtered = filtered.filter((p) =>
-                    (p.title ?? '').toLowerCase().includes(query) ||
-                    (p.excerpt ?? '').toLowerCase().includes(query)
-                );
+        async function unpublish(id) {
+            try {
+                upsert(await H.put(`${BASE}/posts/${id}`, {status: 'draft'}));
+                E.toast('Post moved back to drafts.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to unpublish.', {type: 'error'});
             }
-            buildTable(filtered);
         }
 
-        function populateCategoryFilter() {
-            const select = $container.find('#filter-category').get(0);
-            if (!select) return;
-            for (const cat of categories) {
-                const opt = document.createElement('option');
-                opt.value = cat.id;
-                opt.textContent = cat.name ?? cat.slug ?? cat.id;
-                select.appendChild(opt);
+        async function duplicate(id) {
+            const p = byId(id);
+            if (!p) return;
+            try {
+                const copy = await H.post(`${BASE}/posts`, {
+                    title: `${p.title || 'Untitled'} (copy)`,
+                    slug: `${p.slug || 'post'}-copy-${Date.now().toString(36)}`,
+                    content: p.content ?? '', excerpt: p.excerpt ?? '', featuredImage: p.featuredImage ?? null,
+                    categories: p.categories ?? [], tags: p.tags ?? [], template: p.template ?? '', status: 'draft'
+                });
+                upsert(copy);
+                E.toast('Copied as a draft.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to duplicate.', {type: 'error'});
             }
         }
 
-        async function reload() {
+        async function remove(id) {
+            const p = byId(id);
+            // No title in the prompt: E.confirm is not promised to escape it.
+            const ok = await E.confirm(p?.status === 'published'
+                ? 'Delete this published post? Its page goes offline and links to it will break.'
+                : 'Delete this post? This cannot be undone.');
+            if (!ok) return;
             try {
-                const [postsRes, catsRes] = await Promise.all([
-                    H.get(`${BASE}/posts`),
-                    H.get(`${BASE}/categories`).catch(() => ({ data: [] }))
-                ]);
-                if (postsRes.error) throw new Error(postsRes.error);
-                allPosts = postsRes.data ?? [];
-                categories = catsRes.data ?? catsRes ?? [];
+                await H.delete(`${BASE}/posts/${id}`);
+                posts.value = posts.peek().filter(x => x.id !== id);
+                E.toast('Post deleted.', {type: 'success'});
             } catch {
-                allPosts = [];
-                categories = [];
-                E.toast('Failed to load posts.', { type: 'error' });
+                E.toast('Failed to delete post.', {type: 'error'});
             }
-            refreshKpis();
-            populateCategoryFilter();
-            applyFilters();
         }
 
-        $container.find('#btn-new-post').on('click', () => R.navigate('#/plugins/blog/posts/new'));
-        $container.find('#filter-status').on('change', applyFilters);
-        $container.find('#filter-category').on('change', applyFilters);
-        $container.find('#filter-reset').on('click', () => {
-            $container.find('#filter-status').val('');
-            $container.find('#filter-category').val('');
-            $container.find('#filter-search').val('');
-            applyFilters();
+        async function copyLink(p) {
+            try {
+                await navigator.clipboard.writeText(`${location.origin}${site}/${p.slug}`);
+                E.toast('Link copied.', {type: 'success'});
+            } catch {
+                E.toast('The browser would not allow copying.', {type: 'error'});
+            }
+        }
+
+        // ---- Bindings ----
+        // Refs and help BEFORE binding: data-if lifts elements out of the document.
+        const list = root.querySelector('.blog-list');
+        root.querySelector('.blog-rows').innerHTML = ROW_TEMPLATE;
+        root.querySelector('.blog-chips').innerHTML = CHIP_TEMPLATE;
+        add(await kit.scanHelp(root));
+        const handle = M.applyBindings(data, root, {
+            methods: {
+                create: () => R.navigate('#/plugins/blog/posts/new'),
+                reset() {
+                    status.value = '';
+                    category.value = '';
+                    query.value = '';
+                }
+            }
+        });
+        add(() => handle.dispose());
+
+        root.querySelector('.blog-chips').addEventListener('click', (e) => {
+            const chip = e.target.closest('.blog-chip');
+            if (chip) status.value = chip.dataset.status === 'all' ? '' : chip.dataset.status;
+        });
+
+        // ---- Context menu: every action on a post ----
+        const menu = E.contextMenu(list, {
+            match: '.blog-row',
+            inherit: false,
+            density: 'compact',
+            items: (row) => {
+                const p = byId(row.dataset.id);
+                if (!p) return [];
+                const live = p.status === 'published';
+                return kit.tidy([
+                    {label: 'Edit', icon: 'edit', action: () => R.navigate(`#/plugins/blog/posts/${p.id}`)},
+                    {label: 'View on site', icon: 'external-link', visible: live && Boolean(p.slug),
+                        action: () => window.open(`${site}/${encodeURIComponent(p.slug)}`, '_blank', 'noopener')},
+                    {label: 'Copy link', icon: 'link', visible: live && Boolean(p.slug), action: () => copyLink(p)},
+                    {type: 'divider'},
+                    {label: 'Publish now', icon: 'check-circle', visible: !live, action: () => publish(p.id)},
+                    {label: 'Unpublish', icon: 'eye-off', visible: p.status !== 'draft', action: () => unpublish(p.id)},
+                    {label: 'Duplicate as draft', icon: 'copy', action: () => duplicate(p.id)},
+                    {type: 'divider'},
+                    {label: 'Delete', icon: 'trash', danger: true, action: () => remove(p.id)}
+                ]);
+            }
         });
+        add(() => menu?.destroy?.());
 
-        let searchTimer = null;
-        $container.find('#filter-search').on('input', () => {
-            clearTimeout(searchTimer);
-            searchTimer = setTimeout(applyFilters, 250);
+        // ---- The bar's ⋮: the blog as a whole ----
+        // Adding and removing samples is admin-only on the server; ask it who
+        // this is rather than trusting whatever the browser cached at login.
+        let isAdmin = false;
+        H.get('/api/auth/me')
+            .then(me => { isAdmin = ['admin', 'super-admin'].includes((me?.data ?? me)?.role); })
+            .catch(() => { /* not shown, then */ });
+        const samples = () => posts.peek().filter(p => p.sample === true).length;
+        const barMenu = E.contextMenu(root.querySelector('.blog-bar-end'), {
+            match: '.blog-more',
+            inherit: false,
+            density: 'compact',
+            items: () => kit.tidy([
+                {label: 'View the blog', icon: 'external-link', action: () => window.open(site, '_blank', 'noopener')},
+                {label: 'Edit layouts in Blocks', icon: 'layout', action: () => R.navigate('#/blocks')},
+                {type: 'divider'},
+                {label: 'Add sample posts', icon: 'file-plus', visible: isAdmin && !samples(), action: addSamples},
+                {label: `Remove ${samples()} sample post${samples() === 1 ? '' : 's'}…`, icon: 'trash', danger: true,
+                    visible: isAdmin && samples() > 0, action: removeSamples}
+            ])
+        });
+        add(() => barMenu?.destroy?.());
+        root.querySelector('.blog-bar-end').addEventListener('click', (e) => {
+            const more = e.target.closest('.blog-more');
+            if (more) kit.openMenuFrom(more);
+        });
+
+        async function addSamples() {
+            try {
+                const res = await H.post(`${BASE}/samples`, {});
+                if (res?.error) throw new Error(res.error);
+                E.toast(res.added ? `Added ${res.added} sample posts. Remove them from ⋮ whenever you like.` : 'The sample posts are already here.', {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(err?.message ?? 'Could not add the sample posts.', {type: 'error'});
+            }
+        }
+
+        async function removeSamples() {
+            if (!(await E.confirm('Remove the sample posts, and any sample category nothing else uses? Your own posts are not touched.'))) return;
+            try {
+                const res = await H.delete(`${BASE}/samples`);
+                if (res?.error) throw new Error(res.error);
+                E.toast(`Removed ${res.posts} sample posts.`, {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(err?.message ?? 'Could not remove the sample posts.', {type: 'error'});
+            }
+        }
+
+        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);
+            R.navigate(`#/plugins/blog/posts/${row.dataset.id}`);
+        });
+        list.addEventListener('keydown', (e) => {
+            const row = e.target.closest?.('.blog-row');
+            if (row && e.key === 'Enter' && e.target === row) R.navigate(`#/plugins/blog/posts/${row.dataset.id}`);
         });
 
-        await reload();
-        Domma.icons.scan();
+        if (typeof I !== 'undefined' && I.scan) I.scan(root);
+        await load();
     }
 };