domma-cms 1.6.55 → 1.6.57

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

@@ -69,7 +69,11 @@ export const categoriesView = {
         const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
         const {BASE} = kit;
         const add = kit.viewScope('categories', /^#\/plugins\/blog\/categories\b/);
+        const here = add.here;
         const root = $container.get(0);
+        const slot = root.querySelector('.blog-loading');
+        const {draftState, restoreQuestion, versionOf} = kit.draftLib;
+        const CAT_KEYS = ['name', 'slug', 'description'];
 
         // ---- State ----
         const categories = M.observable([]);
@@ -104,20 +108,27 @@ export const categoriesView = {
         // ---- Server ----
         const byId = (id) => categories.peek().find(c => c.id === id);
 
+        // The first load draws a skeleton; a reload keeps the rows on screen.
+        let loaded = false;
         async function load() {
-            loading.value = true;
+            const work = Promise.all([
+                H.get(`${BASE}/categories`),
+                H.get(`${BASE}/posts`).catch(() => []),
+                kit.sitePath()
+            ]);
             try {
-                const [catsRes, postsRes] = await Promise.all([
-                    H.get(`${BASE}/categories`),
-                    H.get(`${BASE}/posts`).catch(() => [])
-                ]);
-                site = await kit.sitePath();
+                const [catsRes, postsRes, base] = loaded ? await work : await kit.withSkeleton(slot, work);
+                if (!here()) return false;
+                site = base;
+                loaded = true;
                 categories.value = catsRes?.data ?? (Array.isArray(catsRes) ? catsRes : []);
                 posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+                return true;
             } catch {
-                E.toast('Failed to load categories.', {type: 'error'});
+                if (here()) E.toast('Failed to load categories.', {type: 'error'});
+                return false;
             } finally {
-                loading.value = false;
+                if (here()) loading.value = false;
             }
         }
 
@@ -126,13 +137,14 @@ export const categoriesView = {
             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;
+            if (!ok || !here()) return;
             try {
                 await H.delete(`${BASE}/categories/${id}`);
+                if (!here()) return;
                 categories.value = categories.peek().filter(c => c.id !== id);
                 E.toast('Category deleted.', {type: 'success'});
             } catch {
-                E.toast('Failed to delete category.', {type: 'error'});
+                if (here()) E.toast('Failed to delete category.', {type: 'error'});
             }
         }
 
@@ -142,13 +154,55 @@ export const categoriesView = {
         }
 
         // ---- Editor: a slideover ----
-        async function openEditor(cat = null) {
+        // One at a time. Closing it with changes asks; leaving the screen keeps
+        // them as a draft (per category, or one for a new category), offered
+        // back the next time that editor opens. It closes after a save, so it
+        // is locked while saving - typing then would go unsent.
+        const draftKey = (cid) => `category.${cid || 'new'}`;
+
+        async function openEditor(cat = null, {startFrom = null} = {}) {
+            const release = kit.claim('category-editor');
+            if (!release) return;
+            try {
+                await editor(cat, startFrom, release);
+            } catch (err) {
+                release();
+                throw err;
+            }
+        }
+
+        async function editor(cat, startFrom, release) {
+            // A draft from last time for this same category: asked about BEFORE
+            // the panel opens, so the Escape that keeps it cannot also close the
+            // panel. Removed only once answered - leaving while asked keeps it.
+            let picked = startFrom;
+            let pickedWas = '';
+            if (!picked) {
+                const draft = kit.drafts.read(draftKey(cat?.id));
+                if (draft) {
+                    const state = draftState({...draft, id: cat?.id ?? null}, cat, CAT_KEYS);
+                    const throwAway = await kit.askThrowAway(restoreQuestion({what: 'category', name: cat?.name ?? '', state, isNew: !cat}));
+                    if (!here()) { release(); return; }
+                    kit.drafts.drop(draftKey(cat?.id));
+                    if (!throwAway) {
+                        picked = draft.values ?? {};
+                        // A picked-up draft keeps its age: its values are still the older edits.
+                        pickedWas = draft.was ?? '';
+                    }
+                }
+            }
             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 original = {name: cat?.name ?? '', slug: cat?.slug ?? '', description: cat?.description ?? ''};
+            const name = M.observable(original.name);
+            const slug = M.observable(original.slug);
+            const description = M.observable(original.description);
             const saving = M.observable(false);
             const focusName = M.observable(false);
+            let open = true;
+            let was = cat ? versionOf(cat, CAT_KEYS) : '';
+            let baseline = JSON.stringify(original);
+            const values = () => ({name: name.peek(), slug: slug.peek(), description: description.peek()});
+            const isDirty = () => JSON.stringify(values()) !== baseline;
 
             // A new category's slug follows its name until someone edits the slug.
             let slugTouched = Boolean(cat);
@@ -164,24 +218,29 @@ export const categoriesView = {
                 methods: {
                     cancel: () => so.close(),
                     async save() {
+                        if (saving.peek()) return;
                         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;
+                        const unlock = kit.lockWhileSaving(el);
                         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);
+                            kit.drafts.drop(draftKey(cat?.id));
+                            baseline = JSON.stringify(values());
                             E.toast(cat ? 'Category updated.' : 'Category created.', {type: 'success'});
-                            so.close();
-                            await load();
+                            guard.close();
+                            if (here()) await load();
                         } catch (err) {
                             E.toast(err?.message ?? 'Failed to save category.', {type: 'error'});
                         } finally {
                             saving.value = false;
+                            unlock();
                         }
                     }
                 }
@@ -190,16 +249,74 @@ export const categoriesView = {
                 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(); });
+            let unhook = () => {};
+            kit.onceClosed(so, () => { open = false; unhook(); handle.dispose(); disposeHelp(); stopFollow(); release(); });
+            const guard = kit.guardSlideover(so, {dirty: () => !saving.peek() && isDirty()});
+            const keep = () => {
+                if (!isDirty()) return false;
+                kit.drafts.keep(draftKey(cat?.id), {id: cat?.id ?? null, name: original.name, values: values(), was});
+                return true;
+            };
+            unhook = kit.closeOnLeave(so, () => {
+                if (keep()) E.toast('Your unsaved category is kept - open it again to pick it up.', {type: 'info'});
+                guard.close();
+            });
+            const onUnload = (e) => { if (open && isDirty()) { keep(); e.preventDefault(); e.returnValue = ''; } };
+            window.addEventListener('beforeunload', onUnload);
+            const unhookLeave = unhook;
+            unhook = () => { unhookLeave(); window.removeEventListener('beforeunload', onUnload); };
+
+            const put = (v) => {
+                slugTouched = true;
+                name.value = v.name ?? '';
+                slug.value = v.slug ?? '';
+                description.value = v.description ?? '';
+            };
             if (typeof I !== 'undefined' && I.scan) I.scan(el);
             so.open();
-            setTimeout(() => { focusName.value = true; }, 60);
+
+            // A kept draft's changes - or a deleted category's, started again as a new one.
+            if (picked) {
+                put(picked);
+                if (pickedWas) was = pickedWas;
+            }
+            if (open) setTimeout(() => { focusName.value = true; }, 60);
+        }
+
+        /**
+         * Drafts kept for categories deleted since: offered once the list is in.
+         * "Keep them" starts the category again as a new one (asking first if
+         * that would replace another unsaved new category).
+         */
+        async function offerOrphans() {
+            let keys = [];
+            try { keys = Object.keys(localStorage).filter(k => k.includes('blog.draft.category.') && !k.endsWith('.new')); } catch { return; }
+            for (const k of keys) {
+                const cid = k.slice(k.indexOf('blog.draft.category.') + 'blog.draft.category.'.length);
+                if (byId(cid)) continue;
+                const draft = kit.drafts.read(draftKey(cid));
+                if (!draft) continue;
+                const throwAway = await kit.askThrowAway(restoreQuestion({what: 'category', name: draft.name || draft.values?.name || '', state: 'deleted'}));
+                if (!here()) return;
+                if (!throwAway && kit.drafts.read(draftKey(null))) {
+                    const replace = await E.confirm('You also have an unsaved new category. Starting this one again replaces it. Replace it?',
+                        {confirmText: 'Replace it', cancelText: 'Keep both for now'});
+                    if (!here()) return;
+                    if (!replace) continue;              // both drafts stay
+                    kit.drafts.drop(draftKey(null));
+                }
+                kit.drafts.drop(draftKey(cid));
+                if (!throwAway) { await openEditor(null, {startFrom: draft.values ?? {}}); return; }
+            }
         }
 
         // ---- Bindings ----
         const list = root.querySelector('.blog-list');
         root.querySelector('.blog-rows').innerHTML = ROW_TEMPLATE;
-        add(await kit.scanHelp(root));
+        // Overtaken while it loaded: register nothing - the lifetime is the new mount's now.
+        const offHelp = await kit.scanHelp(root);
+        if (!here()) { offHelp(); return; }
+        add(offHelp);
         const handle = M.applyBindings(data, root, {methods: {create: () => openEditor(null)}});
         add(() => handle.dispose());
 
@@ -235,8 +352,9 @@ export const categoriesView = {
             const row = e.target.closest?.('.blog-row');
             if (row && e.key === 'Enter' && e.target === row) openEditor(byId(row.dataset.id));
         });
+        add(kit.menuKeys(list, '.blog-row'));
 
         if (typeof I !== 'undefined' && I.scan) I.scan(root);
-        await load();
+        if (await load() && here()) await offerOrphans();
     }
 };

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

@@ -55,7 +55,9 @@ export const commentsView = {
         const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
         const {BASE} = kit;
         const add = kit.viewScope('comments', /^#\/plugins\/blog\/comments\b/);
+        const here = add.here;
         const root = $container.get(0);
+        const slot = root.querySelector('.blog-loading');
 
         // ---- State ----
         const comments = M.observable([]);
@@ -67,16 +69,6 @@ export const commentsView = {
 
         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(() => {
@@ -126,44 +118,51 @@ export const commentsView = {
         const byId = (id) => comments.peek().find(c => c.id === id);
 
         async function load() {
-            loading.value = true;
             try {
-                const [commentsRes, postsRes, settingsRes] = await Promise.all([
+                const [commentsRes, postsRes, settingsRes] = await kit.withSkeleton(slot, Promise.all([
                     H.get(`${BASE}/comments`),
                     H.get(`${BASE}/posts`).catch(() => []),
                     H.get(`${BASE}/settings`).catch(() => ({}))
-                ]);
+                ]));
+                if (!here()) return;
                 comments.value = commentsRes?.data ?? (Array.isArray(commentsRes) ? commentsRes : []);
                 posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
                 settings.value = settingsRes?.data ?? settingsRes ?? {};
             } catch {
-                E.toast('Failed to load comments.', {type: 'error'});
+                if (here()) E.toast('Failed to load comments.', {type: 'error'});
             } finally {
-                loading.value = false;
+                if (here()) loading.value = false;
             }
         }
 
-        async function setStatus(id, next) {
+        async function setStatus(id, next, {quiet = false} = {}) {
             try {
                 const res = await H.put(`${BASE}/comments/${id}`, {status: next});
                 if (res?.error) throw new Error(res.error);
+                // Moderating moves the "waiting for approval" badge on Blog in the sidebar.
+                kit.pokeSidebar();
+                if (!here()) return true;
                 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'});
+                if (!quiet) E.toast(`Comment marked ${next}.`, {type: 'success'});
+                return true;
             } catch {
-                E.toast('Failed to update comment.', {type: 'error'});
+                if (here()) E.toast('Failed to update comment.', {type: 'error'});
+                return false;
             }
         }
 
         async function remove(id) {
             const ok = await E.confirm('Delete this comment? This cannot be undone.');
-            if (!ok) return;
+            if (!ok || !here()) return;
             try {
                 await H.delete(`${BASE}/comments/${id}`);
+                kit.pokeSidebar();
+                if (!here()) return;
                 comments.value = comments.peek().filter(c => c.id !== id);
                 E.toast('Comment deleted.', {type: 'success'});
             } catch {
-                E.toast('Failed to delete comment.', {type: 'error'});
+                if (here()) E.toast('Failed to delete comment.', {type: 'error'});
             }
         }
 
@@ -171,7 +170,10 @@ export const commentsView = {
         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));
+        // Overtaken while it loaded: register nothing - the lifetime is the new mount's now.
+        const offHelp = await kit.scanHelp(root);
+        if (!here()) { offHelp(); return; }
+        add(offHelp);
         const handle = M.applyBindings(data, root, {
             methods: {
                 settings: () => kit.openSettings().then(() => {}),
@@ -179,8 +181,13 @@ export const commentsView = {
                     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');
+                    if (!ok || !here()) return;
+                    let done = 0;
+                    for (const c of pending) {
+                        if (await setStatus(c.id, 'approved', {quiet: true})) done++;
+                        if (!here()) return;
+                    }
+                    E.toast(`Approved ${done} comment${done === 1 ? '' : 's'}.`, {type: done === pending.length ? 'success' : 'warning'});
                 }
             }
         });
@@ -229,9 +236,11 @@ export const commentsView = {
             const row = e.target.closest?.('.blog-row');
             if (row && e.key === 'Enter' && e.target === row) row.classList.toggle('is-open');
         });
+        add(kit.menuKeys(list, '.blog-row'));
 
         if (typeof I !== 'undefined' && I.scan) I.scan(root);
         await load();
+        if (!here()) return;
         // 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';
     }