domma-cms 0.55.1 → 0.69.3

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

@@ -1,187 +1,236 @@
 /**
- * Blog comments admin view.
+ * Blog comments, on the Tool upgrade path.
+ *
+ * Every comment is loaded once and filtered in the browser, so each status
+ * carries its count - "Pending 3" is the whole point of a moderation screen,
+ * and the old tabs could not say it (nor reach Rejected at all). Rows show the
+ * post's title rather than its id; a click expands the full comment in place;
+ * moderation is on the row's context menu (right-click, Shift+F10, or ⋮).
  *
  * @module blog/admin/views/comments
  */
 
-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';
+
+const STATUSES = [
+    {key: 'pending', label: 'Pending'},
+    {key: 'approved', label: 'Approved'},
+    {key: 'rejected', label: 'Rejected'},
+    {key: 'spam', label: 'Spam'},
+    {key: 'all', label: 'All'}
+];
+
+/** One row. In JS, not the template: the router's _.render would eat {{…}}. */
+const ROW_TEMPLATE = `
+<div class="blog-row blog-comment" data-id="{{id}}" tabindex="0">
+    <span class="blog-row-main">
+        <strong class="blog-row-title">{{author}} <small class="blog-row-sub-inline">{{email}}</small></strong>
+        <span class="blog-comment-text">{{body}}</span>
+        <small class="blog-row-sub">on {{post}}</small>
+    </span>
+    <span class="badge {{badge}}">{{status}}</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 = {pending: 'badge-warning', approved: 'badge-success', rejected: 'badge-secondary', spam: 'badge-danger'};
 
 export const commentsView = {
     templateUrl: '/plugins/blog/admin/templates/comments.html',
 
     /**
-     * Mount the blog comments view.
-     *
      * @param {object} $container - Domma-wrapped container element
      * @returns {Promise<void>}
      */
     async onMount($container) {
-        let currentTab = 'pending';
-        let comments = [];
-        let commentsTable = null;
-
-        // ---------------------------------------------------------------
-        // Load + render
-        // ---------------------------------------------------------------
-
-        async function loadComments() {
+        // 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('comments', /^#\/plugins\/blog\/comments\b/);
+        const root = $container.get(0);
+
+        // ---- State ----
+        const comments = M.observable([]);
+        const posts = M.observable([]);
+        const status = M.observable('pending');
+        const query = M.observable('');
+        const loading = M.observable(true);
+        const settings = M.observable({});
+
+        const postTitle = (id) => posts.peek().find(p => p.id === id)?.title || 'a deleted post';
+
+        // Moderating moves the "waiting for approval" badge on Blog in the sidebar. An
+        // event rather than the admin's sidebarCount(): a plugin must not
+        // import admin/ statically.
+        add(M.effect(() => {
+            comments.value;
+            if (!loading.peek()) {
+                window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: '#/plugins/blog'}}));
+            }
+        }));
+
+        const rows = M.observable([]);
+        const chips = M.observable([]);
+        add(M.effect(() => {
+            const term = query.value.trim().toLowerCase();
+            posts.value;
+            rows.value = comments.value
+                .filter(c => (status.value === 'all' || c.status === status.value)
+                    && (!term || [c.authorName, c.authorEmail, c.body].some(v => String(v ?? '').toLowerCase().includes(term))))
+                .map(c => ({
+                    id: c.id,
+                    author: c.authorName || 'Anonymous',
+                    email: c.authorEmail || '',
+                    body: c.body || '',
+                    post: postTitle(c.postId),
+                    status: c.status || 'pending',
+                    badge: BADGE[c.status] || 'badge-secondary',
+                    date: c.createdAt ? D(c.createdAt).fromNow() : '',
+                    dateTitle: c.createdAt ? D(c.createdAt).format('DD MMM YYYY HH:mm') : ''
+                }));
+        }));
+        add(M.effect(() => {
+            const all = comments.value;
+            chips.value = STATUSES.map(s => ({
+                ...s, count: s.key === 'all' ? all.length : all.filter(c => c.status === s.key).length
+            }));
+        }));
+        add(M.effect(() => {
+            const active = status.value;
+            chips.value;
+            queueMicrotask(() => root.querySelectorAll('.blog-chip').forEach(c =>
+                c.classList.toggle('is-active', c.dataset.status === active)));
+        }));
+
+        const data = {
+            rows, chips, query, loading,
+            pendingCount: M.computed(() => comments.value.filter(c => c.status === 'pending').length),
+            isEmpty: M.computed(() => !loading.value && rows.value.length === 0),
+            emptyText: M.computed(() => query.value.trim()
+                ? 'No comments match the search.'
+                : status.value === 'pending' ? 'Nothing waiting for moderation.' : `No ${status.value === 'all' ? '' : status.value + ' '}comments.`),
+            commentsOff: M.computed(() => settings.value.commentsEnabled === false),
+            moderationText: M.computed(() => settings.value.commentModeration === false
+                ? 'New comments appear straight away.' : 'New comments wait here for approval.')
+        };
+
+        // ---- Server ----
+        const byId = (id) => comments.peek().find(c => c.id === id);
+
+        async function load() {
+            loading.value = true;
             try {
-                const res = await H.get(`${BASE}/comments?status=${encodeURIComponent(currentTab)}`);
-                if (res.error) throw new Error(res.error);
-                comments = res.data ?? (Array.isArray(res) ? res : []);
+                const [commentsRes, postsRes, settingsRes] = await Promise.all([
+                    H.get(`${BASE}/comments`),
+                    H.get(`${BASE}/posts`).catch(() => []),
+                    H.get(`${BASE}/settings`).catch(() => ({}))
+                ]);
+                comments.value = commentsRes?.data ?? (Array.isArray(commentsRes) ? commentsRes : []);
+                posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+                settings.value = settingsRes?.data ?? settingsRes ?? {};
             } catch {
-                comments = [];
-                E.toast('Failed to load comments.', { type: 'error' });
+                E.toast('Failed to load comments.', {type: 'error'});
+            } finally {
+                loading.value = false;
             }
-            buildTable();
         }
 
-        function buildTable() {
-            const tableEl = $container.find('#comments-table').get(0);
-            if (!tableEl) return;
-
-            if (commentsTable) {
-                commentsTable.setData(comments);
-                Domma.icons.scan();
-                return;
-            }
-
-            commentsTable = T.create(tableEl, {
-                data: comments,
-                columns: [
-                    {
-                        key: 'authorName',
-                        title: 'Author',
-                        sortable: true,
-                        render: (v) => `<strong>${escapeHtml(v)}</strong>`
-                    },
-                    {
-                        key: 'authorEmail',
-                        title: 'Email',
-                        sortable: false,
-                        render: (v) => v
-                            ? `<a href="mailto:${escapeHtml(v)}">${escapeHtml(v)}</a>`
-                            : '<span style="opacity:0.4;">-</span>'
-                    },
-                    {
-                        key: 'body',
-                        title: 'Comment',
-                        sortable: false,
-                        render: (v) => {
-                            const preview = String(v ?? '').slice(0, 80);
-                            const ellipsis = String(v ?? '').length > 80 ? '\u2026' : '';
-                            return `<span style="font-size:0.87rem;">${escapeHtml(preview)}${ellipsis}</span>`;
-                        }
-                    },
-                    {
-                        key: 'postId',
-                        title: 'Post',
-                        sortable: false,
-                        render: (v) => v
-                            ? `<a href="#/plugins/blog/posts/${escapeHtml(v)}">${escapeHtml(v)}</a>`
-                            : '<span style="opacity:0.4;">-</span>'
-                    },
-                    {
-                        key: 'createdAt',
-                        title: 'Date',
-                        sortable: true,
-                        render: (v) => v
-                            ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).fromNow())}</span>`
-                            : '<span style="opacity:0.4;">-</span>'
-                    },
-                    {
-                        key: 'id',
-                        title: 'Actions',
-                        sortable: false,
-                        render: (id) => {
-                            const btns = [];
-                            if (currentTab !== 'approved') {
-                                btns.push(`<button class="btn btn-sm btn-success comment-approve-btn" data-id="${escapeHtml(id)}">Approve</button>`);
-                            }
-                            if (currentTab !== 'spam') {
-                                btns.push(`<button class="btn btn-sm btn-warning comment-spam-btn" data-id="${escapeHtml(id)}">Spam</button>`);
-                            }
-                            if (currentTab !== 'rejected') {
-                                btns.push(`<button class="btn btn-sm btn-outline comment-reject-btn" data-id="${escapeHtml(id)}">Reject</button>`);
-                            }
-                            btns.push(`<button class="btn btn-sm btn-danger comment-delete-btn" data-id="${escapeHtml(id)}">` +
-                                `<span data-icon="trash" data-icon-size="14"></span></button>`);
-                            return `<div style="display:flex;gap:.3rem;flex-wrap:wrap;">${btns.join('')}</div>`;
-                        }
-                    }
-                ],
-                emptyMessage: `No ${currentTab} comments.`
-            });
-
-            // Event delegation - attach once
-            if (!tableEl.dataset.listenerAttached) {
-                tableEl.dataset.listenerAttached = '1';
-                tableEl.addEventListener('click', async (e) => {
-                    const approveBtn = e.target.closest('.comment-approve-btn');
-                    const rejectBtn  = e.target.closest('.comment-reject-btn');
-                    const spamBtn    = e.target.closest('.comment-spam-btn');
-                    const deleteBtn  = e.target.closest('.comment-delete-btn');
-
-                    if (approveBtn) await updateStatus(approveBtn.dataset.id, 'approved');
-                    if (rejectBtn)  await updateStatus(rejectBtn.dataset.id, 'rejected');
-                    if (spamBtn)    await updateStatus(spamBtn.dataset.id, 'spam');
-
-                    if (deleteBtn) {
-                        const ok = await E.confirm('Delete this comment?');
-                        if (!ok) return;
-                        try {
-                            await H.delete(`${BASE}/comments/${deleteBtn.dataset.id}`);
-                            E.toast('Comment deleted.', { type: 'success' });
-                            await loadComments();
-                        } catch {
-                            E.toast('Failed to delete comment.', { type: 'error' });
-                        }
-                    }
-                });
+        async function setStatus(id, next) {
+            try {
+                const res = await H.put(`${BASE}/comments/${id}`, {status: next});
+                if (res?.error) throw new Error(res.error);
+                const updated = res?.data ?? res;
+                comments.value = comments.peek().map(c => (c.id === id ? {...c, ...(updated?.id ? updated : {status: next})} : c));
+                E.toast(`Comment marked ${next}.`, {type: 'success'});
+            } catch {
+                E.toast('Failed to update comment.', {type: 'error'});
             }
-
-            Domma.icons.scan();
         }
 
-        async function updateStatus(commentId, status) {
+        async function remove(id) {
+            const ok = await E.confirm('Delete this comment? This cannot be undone.');
+            if (!ok) return;
             try {
-                const res = await H.put(`${BASE}/comments/${commentId}`, { status });
-                if (res.error) throw new Error(res.error);
-                E.toast(`Comment marked as ${status}.`, { type: 'success' });
-                await loadComments();
+                await H.delete(`${BASE}/comments/${id}`);
+                comments.value = comments.peek().filter(c => c.id !== id);
+                E.toast('Comment deleted.', {type: 'success'});
             } catch {
-                E.toast('Failed to update comment.', { type: 'error' });
+                E.toast('Failed to delete comment.', {type: 'error'});
             }
         }
 
-        // ---------------------------------------------------------------
-        // Tab switching
-        // ---------------------------------------------------------------
-
-        const tabList = $container.find('.tab-list').get(0);
-        if (tabList) {
-            tabList.addEventListener('click', async (e) => {
-                const tab = e.target.closest('.tab-item');
-                if (!tab) return;
-                currentTab = tab.dataset.tab;
-
-                // Update active class
-                tabList.querySelectorAll('.tab-item').forEach((t) => {
-                    t.classList.toggle('active', t === tab);
-                });
-
-                await loadComments();
-            });
-        }
-
-        // ---------------------------------------------------------------
-        // Initial load
-        // ---------------------------------------------------------------
-        await loadComments();
-        Domma.icons.scan();
+        // ---- Bindings ----
+        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: {
+                settings: () => kit.openSettings().then(() => {}),
+                async approveAll() {
+                    const pending = comments.peek().filter(c => c.status === 'pending');
+                    if (!pending.length) return;
+                    const ok = await E.confirm(`Approve all ${pending.length} pending comment${pending.length === 1 ? '' : 's'}?`);
+                    if (!ok) return;
+                    for (const c of pending) await setStatus(c.id, 'approved');
+                }
+            }
+        });
+        add(() => handle.dispose());
+
+        root.querySelector('.blog-chips').addEventListener('click', (e) => {
+            const chip = e.target.closest('.blog-chip');
+            if (chip) status.value = chip.dataset.status;
+        });
+
+        const menu = E.contextMenu(list, {
+            match: '.blog-row',
+            inherit: false,
+            density: 'compact',
+            items: (row) => {
+                const c = byId(row.dataset.id);
+                if (!c) return [];
+                const s = c.status;
+                return kit.tidy([
+                    {label: 'Approve', icon: 'check-circle', visible: s !== 'approved', action: () => setStatus(c.id, 'approved')},
+                    {label: 'Back to pending', icon: 'clock', visible: s !== 'pending', action: () => setStatus(c.id, 'pending')},
+                    {label: 'Reject', icon: 'x-circle', visible: s !== 'rejected', action: () => setStatus(c.id, 'rejected')},
+                    {label: 'Mark as spam', icon: 'alert-triangle', visible: s !== 'spam', action: () => setStatus(c.id, 'spam')},
+                    {type: 'divider'},
+                    {label: 'Open the post', icon: 'edit', visible: Boolean(c.postId) && posts.peek().some(p => p.id === c.postId),
+                        action: () => R.navigate(`#/plugins/blog/posts/${c.postId}`)},
+                    {label: 'Reply by email', icon: 'mail', visible: Boolean(c.authorEmail),
+                        action: () => { location.href = `mailto:${encodeURIComponent(c.authorEmail)}`; }},
+                    {type: 'divider'},
+                    {label: 'Delete', icon: 'trash', danger: true, action: () => remove(c.id)}
+                ]);
+            }
+        });
+        add(() => menu?.destroy?.());
+
+        // A click expands the comment in place; ⋮ opens the menu.
+        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);
+            row.classList.toggle('is-open');
+        });
+        list.addEventListener('keydown', (e) => {
+            const row = e.target.closest?.('.blog-row');
+            if (row && e.key === 'Enter' && e.target === row) row.classList.toggle('is-open');
+        });
+
+        if (typeof I !== 'undefined' && I.scan) I.scan(root);
+        await load();
+        // Landing with nothing pending shows everything, rather than an empty screen.
+        if (!comments.peek().some(c => c.status === 'pending') && comments.peek().length) status.value = 'all';
     }
 };