domma-cms 0.10.0 → 0.12.0

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

@@ -0,0 +1,235 @@
+/**
+ * Blog categories admin view.
+ *
+ * @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';
+
+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.style.display = 'flex';
+            form.style.flexDirection = 'column';
+            form.style.gap = '1rem';
+
+            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 = 'form-control';
+                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.style.display = 'flex';
+            footer.style.justifyContent = 'flex-end';
+            footer.style.gap = '0.5rem';
+            footer.style.marginTop = '0.5rem';
+
+            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());
+
+            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' });
+                }
+            });
+        }
+
+        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();
+        }
+
+        // ---------------------------------------------------------------
+        // 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 style="opacity:0.4;">—</span>'
+                    },
+                    {
+                        key: 'id',
+                        title: 'Actions',
+                        sortable: false,
+                        render: (id) =>
+                            `<div style="display:flex;gap:.4rem;">` +
+                            `<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.'
+            });
+
+            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' });
+                    }
+                }
+            });
+
+            Domma.icons.scan();
+        }
+
+        // ---------------------------------------------------------------
+        // 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' });
+            }
+            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();
+    }
+};

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

@@ -0,0 +1,187 @@
+/**
+ * Blog comments admin view.
+ *
+ * @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';
+
+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() {
+            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 : []);
+            } catch {
+                comments = [];
+                E.toast('Failed to load comments.', { type: 'error' });
+            }
+            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' });
+                        }
+                    }
+                });
+            }
+
+            Domma.icons.scan();
+        }
+
+        async function updateStatus(commentId, status) {
+            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();
+            } catch {
+                E.toast('Failed to update 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();
+    }
+};