domma-cms 0.15.0 → 0.16.0

package/plugins/blog/admin/templates/blog.html

@@ -1,10 +1,29 @@
 <div class="view-header d-flex align-items-center justify-content-between mb-4">
-  <h1 class="h3 mb-0">Blog Posts</h1>
+  <h1 class="h3 mb-0"><span data-icon="file-text"></span> Blog Posts</h1>
   <button id="btn-new-post" class="btn btn-primary">
     <span data-icon="plus"></span> New Post
   </button>
 </div>
 
+<div class="grid grid-cols-4 gap-3 mb-4">
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Total</div>
+    <div class="h3 mb-0" id="kpi-total">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Published</div>
+    <div class="h3 mb-0" id="kpi-published">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Drafts</div>
+    <div class="h3 mb-0" id="kpi-drafts">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Scheduled</div>
+    <div class="h3 mb-0" id="kpi-scheduled">—</div>
+  </div></div>
+</div>
+
 <div class="card mb-3">
   <div class="card-body">
     <div class="d-flex gap-2 flex-wrap">
@@ -14,7 +33,11 @@
         <option value="scheduled">Scheduled</option>
         <option value="published">Published</option>
       </select>
-      <input id="filter-search" type="text" class="form-control" style="width:200px;" placeholder="Search posts…">
+      <select id="filter-category" class="form-select" style="width:auto;">
+        <option value="">All categories</option>
+      </select>
+      <input id="filter-search" type="text" class="form-control" style="width:240px;" placeholder="Search title or excerpt…">
+      <button id="filter-reset" class="btn btn-ghost btn-sm">Reset</button>
     </div>
   </div>
 </div>

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

@@ -1,5 +1,5 @@
 /**
- * Blog posts list view.
+ * Blog posts overview — KPI cards + filterable, sortable post table.
  *
  * @module blog/admin/views/blog
  */
@@ -19,29 +19,23 @@ const STATUS_BADGE = {
 export const blogView = {
     templateUrl: '/plugins/blog/admin/templates/blog.html',
 
-    /**
-     * Mount the blog posts list view.
-     *
-     * @param {object} $container - Domma-wrapped container element
-     * @returns {Promise<void>}
-     */
     async onMount($container) {
         let allPosts = [];
+        let categories = [];
         let postsTable = null;
 
-        // ---------------------------------------------------------------
-        // Table
-        // ---------------------------------------------------------------
-
         function buildTable(data) {
             const tableEl = $container.find('#posts-table').get(0);
             if (!tableEl) return;
 
             if (postsTable) {
                 postsTable.setData(data);
+                Domma.icons.scan(tableEl);
                 return;
             }
 
+            const catNameById = (id) => categories.find((c) => c.id === id)?.name ?? '';
+
             postsTable = T.create(tableEl, {
                 data,
                 columns: [
@@ -62,10 +56,12 @@ export const blogView = {
                         }
                     },
                     {
-                        key: 'authorId',
-                        title: 'Author',
+                        key: 'categories',
+                        title: 'Categories',
                         sortable: false,
-                        render: (v) => escapeHtml(v) || '—'
+                        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',
@@ -79,19 +75,22 @@ export const blogView = {
                         key: 'id',
                         title: 'Actions',
                         sortable: false,
-                        render: (id) =>
-                            `<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> Edit</button>` +
-                            `<button class="btn btn-sm btn-danger post-delete-btn" data-id="${escapeHtml(id)}">` +
-                            `<span data-icon="trash" data-icon-size="14"></span> Delete</button>` +
-                            `</div>`
+                        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.'
             });
 
-            // Event delegation for action buttons
             tableEl.addEventListener('click', async (e) => {
                 const editBtn = e.target.closest('.post-edit-btn');
                 const deleteBtn = e.target.closest('.post-delete-btn');
@@ -115,21 +114,30 @@ export const blogView = {
                 }
             });
 
-            Domma.icons.scan();
+            Domma.icons.scan(tableEl);
         }
 
-        // ---------------------------------------------------------------
-        // Filter
-        // ---------------------------------------------------------------
+        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++;
+            }
+            $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 statusEl = $container.find('#filter-status').get(0);
-            const searchEl = $container.find('#filter-search').get(0);
-            const status = statusEl?.value ?? '';
-            const query = (searchEl?.value ?? '').toLowerCase().trim();
+            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) ||
@@ -139,44 +147,52 @@ export const blogView = {
             buildTable(filtered);
         }
 
-        // ---------------------------------------------------------------
-        // Load
-        // ---------------------------------------------------------------
+        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 reload() {
             try {
-                const res = await H.get(`${BASE}/posts`);
-                if (res.error) throw new Error(res.error);
-                allPosts = res.data ?? [];
+                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 ?? [];
             } catch {
                 allPosts = [];
+                categories = [];
                 E.toast('Failed to load posts.', { type: 'error' });
             }
+            refreshKpis();
+            populateCategoryFilter();
             applyFilters();
         }
 
-        // ---------------------------------------------------------------
-        // Event bindings
-        // ---------------------------------------------------------------
-
-        const newPostBtn = $container.find('#btn-new-post').get(0);
-        if (newPostBtn) newPostBtn.addEventListener('click', () => R.navigate('#/plugins/blog/posts/new'));
-
-        const filterStatus = $container.find('#filter-status').get(0);
-        if (filterStatus) filterStatus.addEventListener('change', 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();
+        });
 
-        const filterSearch = $container.find('#filter-search').get(0);
-        if (filterSearch) {
-            let searchTimer = null;
-            filterSearch.addEventListener('input', () => {
-                clearTimeout(searchTimer);
-                searchTimer = setTimeout(applyFilters, 250);
-            });
-        }
+        let searchTimer = null;
+        $container.find('#filter-search').on('input', () => {
+            clearTimeout(searchTimer);
+            searchTimer = setTimeout(applyFilters, 250);
+        });
 
-        // ---------------------------------------------------------------
-        // Initial load
-        // ---------------------------------------------------------------
         await reload();
         Domma.icons.scan();
     }

package/plugins/blog/admin/views/post-editor.js

@@ -17,29 +17,17 @@ const BASE = '/api/plugins/blog';
 export const postEditorView = {
     templateUrl: '/plugins/blog/admin/templates/post-editor.html',
 
-    /**
-     * Mount the post editor view.
-     *
-     * @param {object} $container - Domma-wrapped container element
-     * @returns {Promise<void>}
-     */
     async onMount($container) {
-        // Resolve post id from router params
         const id = R.current?.params?.id !== 'new' ? R.current?.params?.id : null;
         const isEdit = Boolean(id);
 
         let post = null;
         let categories = [];
         let selectedCategoryIds = [];
-
-        // ---------------------------------------------------------------
-        // Load data
-        // ---------------------------------------------------------------
+        let featuredImageUrl = '';
 
         try {
-            const [catsRes] = await Promise.all([
-                H.get(`${BASE}/categories`).catch(() => ({ data: [] }))
-            ]);
+            const catsRes = await H.get(`${BASE}/categories`).catch(() => ({ data: [] }));
             categories = catsRes.data ?? catsRes ?? [];
         } catch {
             categories = [];
@@ -57,10 +45,6 @@ export const postEditorView = {
             }
         }
 
-        // ---------------------------------------------------------------
-        // DOM refs
-        // ---------------------------------------------------------------
-
         const titleEl       = $container.find('#editor-title').get(0);
         const postTitleEl   = $container.find('#post-title').get(0);
         const postSlugEl    = $container.find('#post-slug').get(0);
@@ -75,10 +59,8 @@ export const postEditorView = {
         const scheduleEl    = $container.find('#schedule-picker').get(0);
         const schedAtEl     = $container.find('#post-scheduled-at').get(0);
         const catsListEl    = $container.find('#categories-checklist').get(0);
-
-        // ---------------------------------------------------------------
-        // Populate
-        // ---------------------------------------------------------------
+        const imagePreviewEl = $container.find('#featured-image-preview').get(0);
+        const clearImageBtn = $container.find('#btn-clear-image').get(0);
 
         if (titleEl) titleEl.textContent = isEdit ? 'Edit Post' : 'New Post';
 
@@ -88,19 +70,33 @@ export const postEditorView = {
             if (excerptEl)   excerptEl.value   = post.excerpt ?? '';
             if (contentEl)   contentEl.value   = post.content ?? '';
             if (tagsEl)      tagsEl.value      = Array.isArray(post.tags) ? post.tags.join(', ') : (post.tags ?? '');
-            if (seoTitleEl)  seoTitleEl.value  = post.seoTitle ?? '';
-            if (seoDescEl)   seoDescEl.value   = post.seoDescription ?? '';
+            if (seoTitleEl)  seoTitleEl.value  = post.seo?.title ?? '';
+            if (seoDescEl)   seoDescEl.value   = post.seo?.description ?? '';
             if (statusBadge) statusBadge.textContent = post.status ?? 'draft';
-            selectedCategoryIds = Array.isArray(post.categoryIds) ? [...post.categoryIds] : [];
+            selectedCategoryIds = Array.isArray(post.categories) ? [...post.categories] : [];
+            featuredImageUrl = post.featuredImage ?? '';
+            renderImagePreview();
         } else {
-            // New post: enable auto-slug by default
             if (slugAutoEl) slugAutoEl.checked = true;
         }
 
-        // Build categories checklist using DOM APIs (not innerHTML — interactive elements)
+        function renderImagePreview() {
+            if (!imagePreviewEl) return;
+            while (imagePreviewEl.firstChild) imagePreviewEl.removeChild(imagePreviewEl.firstChild);
+            if (featuredImageUrl) {
+                const img = document.createElement('img');
+                img.src = featuredImageUrl;
+                img.alt = 'Featured image';
+                img.style.cssText = 'max-width:100%;border-radius:.25rem;display:block;margin-bottom:.5rem;';
+                imagePreviewEl.appendChild(img);
+                if (clearImageBtn) clearImageBtn.style.display = '';
+            } else {
+                if (clearImageBtn) clearImageBtn.style.display = 'none';
+            }
+        }
+
         if (catsListEl) {
             while (catsListEl.firstChild) catsListEl.removeChild(catsListEl.firstChild);
-
             if (categories.length === 0) {
                 const p = document.createElement('p');
                 p.className = 'text-muted small';
@@ -134,27 +130,22 @@ export const postEditorView = {
             }
         }
 
-        // ---------------------------------------------------------------
-        // Collect form values
-        // ---------------------------------------------------------------
-
         function collectValues() {
             return {
-                title: postTitleEl?.value?.trim() ?? '',
-                slug: postSlugEl?.value?.trim() ?? '',
-                excerpt: excerptEl?.value?.trim() ?? '',
-                content: contentEl?.value ?? '',
-                tags: (tagsEl?.value ?? '').split(',').map((t) => t.trim()).filter(Boolean),
-                categoryIds: selectedCategoryIds,
-                seoTitle: seoTitleEl?.value?.trim() ?? '',
-                seoDescription: seoDescEl?.value?.trim() ?? ''
+                title:         postTitleEl?.value?.trim() ?? '',
+                slug:          postSlugEl?.value?.trim() ?? '',
+                excerpt:       excerptEl?.value?.trim() ?? '',
+                content:       contentEl?.value ?? '',
+                tags:          (tagsEl?.value ?? '').split(',').map((t) => t.trim()).filter(Boolean),
+                categories:    [...selectedCategoryIds],
+                featuredImage: featuredImageUrl || null,
+                seo: {
+                    title:       seoTitleEl?.value?.trim() ?? '',
+                    description: seoDescEl?.value?.trim() ?? ''
+                }
             };
         }
 
-        // ---------------------------------------------------------------
-        // Save helpers
-        // ---------------------------------------------------------------
-
         async function doSave(extra = {}) {
             const body = { ...collectValues(), ...extra };
             if (!body.title) {
@@ -162,37 +153,25 @@ export const postEditorView = {
                 return null;
             }
             try {
-                let saved;
-                if (isEdit) {
-                    const res = await H.put(`${BASE}/posts/${id}`, body);
-                    if (res.error) throw new Error(res.error);
-                    saved = res.data ?? res;
-                } else {
-                    const res = await H.post(`${BASE}/posts`, body);
-                    if (res.error) throw new Error(res.error);
-                    saved = res.data ?? res;
-                }
-                return saved;
+                const res = isEdit
+                    ? await H.put(`${BASE}/posts/${id}`, body)
+                    : await H.post(`${BASE}/posts`, body);
+                if (res.error) throw new Error(res.error);
+                return res.data ?? res;
             } catch (err) {
                 E.toast(err?.message ?? 'Failed to save post.', { type: 'error' });
                 return null;
             }
         }
 
-        // ---------------------------------------------------------------
-        // Event bindings
-        // ---------------------------------------------------------------
-
-        // Auto-slug from title
         if (postTitleEl) {
             postTitleEl.addEventListener('input', () => {
-                if (slugAutoEl?.checked) {
-                    if (postSlugEl) postSlugEl.value = slugify(postTitleEl.value);
+                if (slugAutoEl?.checked && postSlugEl) {
+                    postSlugEl.value = slugify(postTitleEl.value);
                 }
             });
         }
 
-        // Slug-auto checkbox
         if (slugAutoEl) {
             slugAutoEl.addEventListener('change', () => {
                 if (!slugAutoEl.checked && isEdit && post?.status === 'published') {
@@ -200,13 +179,12 @@ export const postEditorView = {
                 } else {
                     if (slugWarnEl) slugWarnEl.style.display = 'none';
                 }
-                if (slugAutoEl.checked && postTitleEl) {
-                    if (postSlugEl) postSlugEl.value = slugify(postTitleEl.value);
+                if (slugAutoEl.checked && postTitleEl && postSlugEl) {
+                    postSlugEl.value = slugify(postTitleEl.value);
                 }
             });
         }
 
-        // SEO panel toggle
         const seoToggle = $container.find('#seo-toggle').get(0);
         const seoPanel  = $container.find('#seo-panel').get(0);
         if (seoToggle && seoPanel) {
@@ -215,19 +193,17 @@ export const postEditorView = {
             });
         }
 
-        // Save draft
         const saveDraftBtn = $container.find('#btn-save-draft').get(0);
         if (saveDraftBtn) {
             saveDraftBtn.addEventListener('click', async () => {
                 const saved = await doSave({ status: 'draft' });
                 if (saved) {
                     E.toast('Draft saved.', { type: 'success' });
-                    R.navigate('#/plugins/blog');
+                    R.navigate('#/plugins/blog/posts');
                 }
             });
         }
 
-        // Publish now
         const publishBtn = $container.find('#btn-publish').get(0);
         if (publishBtn) {
             publishBtn.addEventListener('click', async () => {
@@ -238,22 +214,18 @@ export const postEditorView = {
                     const res = await H.post(`${BASE}/posts/${savedId}/publish`);
                     if (res.error) throw new Error(res.error);
                     E.toast('Post published.', { type: 'success' });
-                    R.navigate('#/plugins/blog');
+                    R.navigate('#/plugins/blog/posts');
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to publish post.', { type: 'error' });
                 }
             });
         }
 
-        // Schedule
         const scheduleBtn = $container.find('#btn-schedule').get(0);
         if (scheduleBtn) {
             scheduleBtn.style.display = '';
             scheduleBtn.addEventListener('click', async () => {
-                // Toggle schedule picker visibility
                 if (scheduleEl) scheduleEl.style.display = scheduleEl.style.display === 'none' ? '' : 'none';
-
-                // If picker is now visible, wait for user to confirm
                 if (scheduleEl && scheduleEl.style.display !== 'none') return;
 
                 const publishedAt = schedAtEl?.value;
@@ -270,22 +242,69 @@ export const postEditorView = {
                     const res = await H.post(`${BASE}/posts/${savedId}/schedule`, { publishedAt });
                     if (res.error) throw new Error(res.error);
                     E.toast('Post scheduled.', { type: 'success' });
-                    R.navigate('#/plugins/blog');
+                    R.navigate('#/plugins/blog/posts');
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to schedule post.', { type: 'error' });
                 }
             });
         }
 
-        // Pick image (TBD)
         const pickImageBtn = $container.find('#btn-pick-image').get(0);
         if (pickImageBtn) {
-            pickImageBtn.addEventListener('click', () => {
-                console.log('media picker TBD');
-                E.toast('Media picker coming soon.', { type: 'info' });
+            pickImageBtn.addEventListener('click', () => openMediaPicker());
+        }
+        if (clearImageBtn) {
+            clearImageBtn.addEventListener('click', () => {
+                featuredImageUrl = '';
+                renderImagePreview();
             });
         }
 
+        async function openMediaPicker() {
+            let media = [];
+            try {
+                const res = await H.get('/api/media');
+                media = (res.data ?? res ?? []).filter((m) => /\.(png|jpe?g|gif|webp|svg)$/i.test(m.name || m.url || ''));
+            } catch {
+                E.toast('Could not load media library.', { type: 'error' });
+                return;
+            }
+
+            const grid = document.createElement('div');
+            grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:.75rem;padding:.5rem;';
+
+            if (!media.length) {
+                const p = document.createElement('p');
+                p.className = 'text-muted p-3';
+                p.textContent = 'No images uploaded yet. Use the Media admin to upload one first.';
+                grid.appendChild(p);
+            } else {
+                media.forEach((m) => {
+                    const tile = document.createElement('button');
+                    tile.type = 'button';
+                    tile.style.cssText = 'border:1px solid var(--dm-border,#333);background:transparent;border-radius:.25rem;padding:.25rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;';
+                    const img = document.createElement('img');
+                    img.src = m.url;
+                    img.alt = m.name;
+                    img.style.cssText = 'width:100%;height:90px;object-fit:cover;border-radius:.15rem;';
+                    const cap = document.createElement('span');
+                    cap.textContent = m.name;
+                    cap.style.cssText = 'font-size:.7rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;';
+                    tile.appendChild(img);
+                    tile.appendChild(cap);
+                    tile.addEventListener('click', () => {
+                        featuredImageUrl = m.url;
+                        renderImagePreview();
+                        slideover.close();
+                    });
+                    grid.appendChild(tile);
+                });
+            }
+
+            const slideover = E.slideover({ title: 'Pick Featured Image', size: 'lg', position: 'right', content: grid });
+            slideover.open();
+        }
+
         Domma.icons.scan();
     }
 };