domma-cms 0.6.15 → 0.6.20

package/plugins/todo/admin/templates/todo.html

@@ -0,0 +1,164 @@
+<div class="p-4">
+    <div class="card">
+        <div class="card-body">
+
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-lg font-semibold" style="margin:0;">
+                    <span data-icon="check-square" data-icon-size="20" style="vertical-align:middle;margin-right:8px;"></span>
+                    Todo
+                </h2>
+                <button id="clear-completed-btn" class="btn btn-sm btn-danger">
+                    <span data-icon="trash" data-icon-size="14"></span>
+                    Clear Completed
+                </button>
+            </div>
+
+            <!-- Add new todo row -->
+            <div class="flex gap-2 mb-4" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input
+                    type="text"
+                    id="todo-input"
+                    class="form-input"
+                    placeholder="What needs to be done?"
+                    autocomplete="off"
+                    style="flex:1;min-width:200px;"
+                />
+                <select id="priority-input" class="form-input" style="width:130px;">
+                    <option value="highest">Highest</option>
+                    <option value="high">High</option>
+                    <option value="medium" selected>Medium</option>
+                    <option value="low">Low</option>
+                    <option value="lowest">Lowest</option>
+                </select>
+                <input type="date" id="due-date-input" class="form-input" title="Due date (optional)"
+                       style="width:145px;"/>
+                <button id="add-todo-btn" class="btn btn-primary">
+                    <span data-icon="plus" data-icon-size="14"></span>
+                    Add
+                </button>
+            </div>
+
+            <!-- Filter bar -->
+            <div id="filter-bar" class="flex gap-2 mb-4" style="display:flex;gap:8px;flex-wrap:wrap;">
+                <button class="btn btn-sm filter-btn active" data-filter="all">All</button>
+                <button class="btn btn-sm filter-btn" data-filter="not-started">Not Started</button>
+                <button class="btn btn-sm filter-btn" data-filter="in-progress">In Progress</button>
+                <button class="btn btn-sm filter-btn" data-filter="completed">Completed</button>
+            </div>
+
+            <!-- Todo list -->
+            <ul id="todo-list" style="list-style:none;padding:0;margin:0;"></ul>
+
+            <!-- Empty state -->
+            <div id="empty-state" style="display:none;text-align:center;padding:40px 0;color:var(--dm-text-muted);">
+                <span data-icon="check-circle" data-icon-size="48" style="display:block;margin-bottom:12px;opacity:0.4;"></span>
+                <p style="margin:0;font-size:0.95rem;">No tasks yet. Add one above to get started.</p>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<style>
+.todo-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 0;
+    border-bottom: 1px solid var(--dm-border);
+}
+
+.todo-item:last-child {
+    border-bottom: none;
+}
+.todo-item.completed .todo-text {
+    text-decoration: line-through;
+    opacity: 0.45;
+}
+
+.todo-checkbox {
+    flex-shrink: 0;
+}
+
+.todo-text {
+    flex: 1;
+    min-width: 0;
+    word-break: break-word;
+    font-size: 0.9rem;
+}
+
+.todo-selects {
+    display: flex;
+    gap: 5px;
+    flex-shrink: 0;
+}
+
+.todo-select-pill {
+    appearance: none;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: 999px;
+    padding: 2px 10px 2px 8px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    cursor: pointer;
+    outline: none;
+}
+
+.todo-select-pill:focus {
+    box-shadow: 0 0 0 2px var(--dm-primary-soft, rgba(99, 102, 241, .3));
+}
+.todo-actions {
+    display: flex;
+    gap: 3px;
+    flex-shrink: 0;
+}
+.filter-btn.active {
+    background: var(--dm-primary);
+    color: #fff;
+    border-color: var(--dm-primary);
+}
+
+/* Status pill colours */
+.status-pill-not-started {
+    background: var(--dm-gray-200, #e5e7eb);
+    color: var(--dm-gray-700, #374151);
+}
+
+.status-pill-in-progress {
+    background: #dbeafe;
+    color: #2563eb;
+}
+
+.status-pill-completed {
+    background: #dcfce7;
+    color: #16a34a;
+}
+
+/* Priority pill colours */
+.priority-pill-highest {
+    background: #fee2e2;
+    color: #b91c1c;
+}
+
+.priority-pill-high {
+    background: #ffedd5;
+    color: #c2410c;
+}
+
+.priority-pill-medium {
+    background: #fef9c3;
+    color: #a16207;
+}
+
+.priority-pill-low {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+
+.priority-pill-lowest {
+    background: #f3f4f6;
+    color: #6b7280;
+}
+</style>

package/plugins/todo/admin/views/todo.js

@@ -0,0 +1,328 @@
+// ============================================================
+// Todo plugin admin view
+// Uses auth-aware api() helper for all API calls (Bearer token from S.get('auth_token'))
+// Uses $container.find() for all DOM queries
+// Note: innerHTML usage below escapes all user-supplied text via escapeHtml()
+// ============================================================
+
+const STATUS = {
+    NOT_STARTED: 'not-started',
+    IN_PROGRESS: 'in-progress',
+    COMPLETED: 'completed'
+};
+
+const PRIORITY = {
+    HIGHEST: 'highest',
+    HIGH: 'high',
+    MEDIUM: 'medium',
+    LOW: 'low',
+    LOWEST: 'lowest'
+};
+
+function formatStatus(status) {
+    return status.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
+function formatPriority(priority) {
+    return priority.charAt(0).toUpperCase() + priority.slice(1);
+}
+
+/** Escape user-supplied text before inserting into HTML markup */
+function escapeHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+async function api(url, method = 'GET', body) {
+    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
+    if (body !== undefined) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+    const res = await fetch(url, opts);
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({error: res.statusText}));
+        throw new Error(err.error || res.statusText);
+    }
+    const text = await res.text();
+    return text ? JSON.parse(text) : {};
+}
+
+export const todoView = {
+    templateUrl: '/plugins/todo/admin/templates/todo.html',
+
+    async onMount($container) {
+        // ---- State ----
+        let todos = [];
+        let activeFilter = 'all';
+
+        // ---- Fetch ----
+        async function loadTodos() {
+            try {
+                const res = await api('/api/plugins/todo/items');
+                todos = Array.isArray(res) ? res : (res.data ?? []);
+            } catch (err) {
+                E.toast('Failed to load todos', { type: 'error' });
+                todos = [];
+            }
+        }
+
+        // ---- Render ----
+        function render() {
+            const listEl = $container.find('#todo-list').get(0);
+            const emptyEl = $container.find('#empty-state').get(0);
+
+            const filtered = activeFilter === 'all'
+                ? todos
+                : todos.filter((t) => t.status === activeFilter);
+
+            if (filtered.length === 0) {
+                // Safe: no user content, only static markup
+                listEl.textContent = '';
+                emptyEl.style.display = 'block';
+                return;
+            }
+
+            emptyEl.style.display = 'none';
+
+            // Build markup — all user values run through escapeHtml()
+            const rows = filtered.map((todo) => {
+                const isCompleted = todo.status === STATUS.COMPLETED;
+                const safeText = escapeHtml(todo.text);
+                const safeId   = escapeHtml(todo.id);
+
+                const statusClass = `status-pill-${escapeHtml(todo.status)}`;
+                const priorityClass = `priority-pill-${escapeHtml(todo.priority)}`;
+
+                let dueBadge = '';
+                if (todo.dueAt) {
+                    const due = new Date(todo.dueAt);
+                    const today = new Date();
+                    today.setHours(0, 0, 0, 0);
+                    const overdue = !isCompleted && due < today;
+                    const dueLabel = D(todo.dueAt).format('D MMM');
+                    dueBadge = `<span class="badge ${overdue ? 'badge-danger' : 'badge-outline'}" style="font-size:0.68rem;padding:1px 6px;flex-shrink:0;" title="Due ${escapeHtml(dueLabel)}">${overdue ? '⚠ ' : ''}${escapeHtml(dueLabel)}</span>`;
+                }
+
+                return `<li class="todo-item${isCompleted ? ' completed' : ''}" data-id="${safeId}">
+                    <input type="checkbox" class="form-check-input todo-checkbox" ${isCompleted ? 'checked' : ''} />
+                    <span class="todo-text">${safeText}${dueBadge ? ' ' + dueBadge : ''}</span>
+                    <div class="todo-selects">
+                        <select class="todo-select-pill status-select ${statusClass}" data-id="${safeId}" title="Status">
+                            <option value="not-started"${todo.status === 'not-started' ? ' selected' : ''}>Not Started</option>
+                            <option value="in-progress"${todo.status === 'in-progress' ? ' selected' : ''}>In Progress</option>
+                            <option value="completed"${todo.status === 'completed' ? ' selected' : ''}>Completed</option>
+                        </select>
+                        <select class="todo-select-pill priority-select ${priorityClass}" data-id="${safeId}" title="Priority">
+                            <option value="highest"${todo.priority === 'highest' ? ' selected' : ''}>Highest</option>
+                            <option value="high"${todo.priority === 'high' ? ' selected' : ''}>High</option>
+                            <option value="medium"${todo.priority === 'medium' ? ' selected' : ''}>Medium</option>
+                            <option value="low"${todo.priority === 'low' ? ' selected' : ''}>Low</option>
+                            <option value="lowest"${todo.priority === 'lowest' ? ' selected' : ''}>Lowest</option>
+                        </select>
+                    </div>
+                    <div class="todo-actions">
+                        <button class="btn btn-sm btn-ghost edit-todo" data-id="${safeId}" title="Edit">
+                            <span data-icon="edit" data-icon-size="13"></span>
+                        </button>
+                        <button class="btn btn-sm btn-danger delete-todo" data-id="${safeId}" title="Delete">
+                            <span data-icon="trash" data-icon-size="13"></span>
+                        </button>
+                    </div>
+                </li>`;
+            }).join('');
+
+            listEl.innerHTML = rows;
+            Domma.icons.scan(listEl);
+        }
+
+        // ---- Add todo ----
+        async function addTodo() {
+            const $input    = $container.find('#todo-input');
+            const $priority = $container.find('#priority-input');
+            const $due = $container.find('#due-date-input');
+            const text      = $input.get(0).value.trim();
+            const priority  = $priority.get(0).value;
+            const dueAt = $due.get(0)?.value || null;
+
+            if (!text) {
+                E.toast('Please enter a task', { type: 'warning' });
+                return;
+            }
+
+            try {
+                const item = await api('/api/plugins/todo/items', 'POST', {
+                    text,
+                    priority,
+                    status: STATUS.NOT_STARTED,
+                    dueAt
+                });
+                todos.push(item);
+                $input.get(0).value    = '';
+                $priority.get(0).value = PRIORITY.MEDIUM;
+                if ($due.get(0)) $due.get(0).value = '';
+                render();
+                E.toast('Task added', { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to add task', { type: 'error' });
+            }
+        }
+
+        // ---- Toggle (checkbox) ----
+        async function toggleTodo(id) {
+            const todo = todos.find((t) => t.id === id);
+            if (!todo) return;
+
+            const newStatus = todo.status === STATUS.COMPLETED ? STATUS.NOT_STARTED : STATUS.COMPLETED;
+            try {
+                const updated = await api(`/api/plugins/todo/items/${id}`, 'PUT', {status: newStatus});
+                Object.assign(todo, updated);
+                render();
+                E.toast(newStatus === STATUS.COMPLETED ? 'Task completed' : 'Task reopened', { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to update task', { type: 'error' });
+            }
+        }
+
+        // ---- Edit todo text ----
+        async function editTodo(id) {
+            const todo = todos.find((t) => t.id === id);
+            if (!todo) return;
+
+            const newText = await E.prompt('Edit your task:', { inputValue: todo.text });
+            if (!newText || !newText.trim()) return;
+
+            try {
+                const updated = await api(`/api/plugins/todo/items/${id}`, 'PUT', {text: newText.trim()});
+                Object.assign(todo, updated);
+                render();
+                E.toast('Task updated', { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to update task', { type: 'error' });
+            }
+        }
+
+        // ---- Delete single ----
+        async function deleteTodo(id) {
+            const confirmed = await E.confirm('Delete this task?');
+            if (!confirmed) return;
+
+            try {
+                await api(`/api/plugins/todo/items/${id}`, 'DELETE');
+                todos = todos.filter((t) => t.id !== id);
+                render();
+                E.toast('Task deleted', { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to delete task', { type: 'error' });
+            }
+        }
+
+        // ---- Update status ----
+        async function updateStatus(id, status) {
+            const todo = todos.find((t) => t.id === id);
+            if (!todo) return;
+
+            try {
+                const updated = await api(`/api/plugins/todo/items/${id}`, 'PUT', {status});
+                Object.assign(todo, updated);
+                render();
+                E.toast(`Status: ${formatStatus(status)}`, { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to update status', { type: 'error' });
+            }
+        }
+
+        // ---- Update priority ----
+        async function updatePriority(id, priority) {
+            const todo = todos.find((t) => t.id === id);
+            if (!todo) return;
+
+            try {
+                const updated = await api(`/api/plugins/todo/items/${id}`, 'PUT', {priority});
+                Object.assign(todo, updated);
+                render();
+                E.toast(`Priority: ${formatPriority(priority)}`, { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to update priority', { type: 'error' });
+            }
+        }
+
+        // ---- Clear completed ----
+        async function clearCompleted() {
+            const hasCompleted = todos.some((t) => t.status === STATUS.COMPLETED);
+            if (!hasCompleted) {
+                E.toast('No completed tasks to clear', { type: 'warning' });
+                return;
+            }
+
+            const confirmed = await E.confirm('Clear all completed tasks?');
+            if (!confirmed) return;
+
+            try {
+                await api('/api/plugins/todo/completed', 'DELETE');
+                todos = todos.filter((t) => t.status !== STATUS.COMPLETED);
+                render();
+                E.toast('Completed tasks cleared', { type: 'success' });
+            } catch (err) {
+                E.toast('Failed to clear completed tasks', { type: 'error' });
+            }
+        }
+
+        // ---- Event bindings ----
+
+        $container.find('#add-todo-btn').get(0).addEventListener('click', addTodo);
+
+        $container.find('#todo-input').get(0).addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') addTodo();
+        });
+
+        $container.find('#clear-completed-btn').get(0).addEventListener('click', clearCompleted);
+
+        // Filter buttons — direct addEventListener to avoid namespaced delegation issues
+        $container.find('#filter-bar').get(0).querySelectorAll('.filter-btn').forEach((btn) => {
+            btn.addEventListener('click', () => {
+                activeFilter = btn.dataset.filter;
+                $container.find('#filter-bar').get(0).querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('active'));
+                btn.classList.add('active');
+                render();
+            });
+        });
+
+        // Todo list — native event delegation on the list element
+        const listEl = $container.find('#todo-list').get(0);
+
+        listEl.addEventListener('change', (e) => {
+            const target = e.target;
+            const id = target.dataset.id ?? target.closest('.todo-item')?.dataset.id;
+            if (!id) return;
+
+            if (target.classList.contains('todo-checkbox')) {
+                toggleTodo(id);
+            } else if (target.classList.contains('status-select')) {
+                // Update pill colour immediately
+                target.className = target.className.replace(/status-pill-\S+/, `status-pill-${target.value}`);
+                updateStatus(id, target.value);
+            } else if (target.classList.contains('priority-select')) {
+                target.className = target.className.replace(/priority-pill-\S+/, `priority-pill-${target.value}`);
+                updatePriority(id, target.value);
+            }
+        });
+
+        listEl.addEventListener('click', (e) => {
+            const editBtn   = e.target.closest('.edit-todo');
+            const deleteBtn = e.target.closest('.delete-todo');
+
+            if (editBtn)   editTodo(editBtn.dataset.id);
+            if (deleteBtn) deleteTodo(deleteBtn.dataset.id);
+        });
+
+        // ---- Initial load ----
+        await loadTodos();
+        render();
+        Domma.icons.scan($container.get(0));
+    }
+};

package/plugins/todo/config.js

@@ -0,0 +1,7 @@
+export default {
+    scope: 'user',
+    defaultPriority: 'medium',
+    maxPerUser: 500,
+    // storage.adapter: 'mongodb' uses config/connections.json; 'file' uses local JSON
+    storage: {adapter: 'mongodb', connection: 'default'}
+};

package/plugins/todo/data/todos.json

@@ -0,0 +1 @@
+[]

package/plugins/todo/plugin.js

@@ -0,0 +1,155 @@
+import defaultConfig from './config.js';
+import {
+    listEntries,
+    createEntry,
+    updateEntry,
+    deleteEntry,
+    getEntry,
+    getCollection,
+    createCollection
+} from '../../server/services/collections.js';
+
+const SLUG = 'todos';
+const STORAGE = defaultConfig.storage ?? {adapter: 'file'};
+
+const FIELDS = [
+    {name: 'text', label: 'Task', type: 'text', required: true},
+    {name: 'status', label: 'Status', type: 'text', required: false},
+    {name: 'priority', label: 'Priority', type: 'text', required: false},
+    {name: 'dueAt', label: 'Due Date', type: 'text', required: false},
+    {name: 'userId', label: 'User ID', type: 'text', required: false}
+];
+
+/**
+ * Lifecycle: create the todos collection (MongoDB-backed) on plugin enable.
+ */
+export async function onEnable({services: {collections}}) {
+    const existing = await collections.getCollection(SLUG).catch(() => null);
+    if (existing) return;
+    await collections.createCollection({
+        title: 'Todos',
+        slug: SLUG,
+        description: 'Todo items managed by the Todo plugin.',
+        fields: FIELDS,
+        storage: STORAGE
+    });
+}
+
+/**
+ * Lifecycle: remove the todos collection on plugin disable.
+ */
+export async function onDisable({services: {collections}}) {
+    await collections.deleteCollection(SLUG).catch(() => {
+    });
+}
+
+/** Flatten a collection entry into the shape the admin view expects. */
+function toTodo(entry) {
+    return {
+        id: entry.id,
+        ...entry.data,
+        createdAt: entry.meta.createdAt,
+        updatedAt: entry.meta.updatedAt
+    };
+}
+
+export default async function todoPlugin(fastify, options) {
+    const { authenticate } = options.auth;
+    const config = {...defaultConfig, ...(options.settings || {})};
+    const scope = config.scope ?? 'user';
+    const storage = config.storage ?? STORAGE;
+
+    // Auto-create the collection if it doesn't exist yet.
+    const existing = await getCollection(SLUG).catch(() => null);
+    if (!existing) {
+        await createCollection({
+            title: 'Todos',
+            slug: SLUG,
+            description: 'Todo items managed by the Todo plugin.',
+            fields: FIELDS,
+            storage
+        }).catch(err => fastify.log.warn(`[todo] Collection setup: ${err.message}`));
+    }
+
+    function userId(request) {
+        return scope === 'user' ? (request.user?.id ?? request.user?.sub ?? null) : null;
+    }
+
+    async function loadAll(uid) {
+        const {entries} = await listEntries(SLUG, {limit: 10000, sort: 'createdAt', order: 'asc'});
+        let items = entries.map(toTodo);
+        if (uid) items = items.filter(t => t.userId === uid);
+        return items;
+    }
+
+    /** GET /api/plugins/todo/items */
+    fastify.get('/items', { preHandler: [authenticate] }, async (request, reply) => {
+        const uid = userId(request);
+        const { status } = request.query;
+        let items = await loadAll(uid);
+        if (status) items = items.filter(t => t.status === status);
+        return reply.send(items);
+    });
+
+    /** POST /api/plugins/todo/items */
+    fastify.post('/items', { preHandler: [authenticate] }, async (request, reply) => {
+        const uid = userId(request);
+        const { text, priority, status } = request.body ?? {};
+
+        if (!text || typeof text !== 'string' || !text.trim()) {
+            return reply.code(400).send({ error: 'text is required' });
+        }
+
+        const {dueAt} = request.body ?? {};
+        const entry = await createEntry(SLUG, {
+            text: text.trim(),
+            status: status ?? 'not-started',
+            priority: priority ?? config.defaultPriority ?? 'medium',
+            dueAt: dueAt ?? null,
+            userId: uid ?? null
+        }, {createdBy: uid, source: 'admin'});
+
+        return reply.code(201).send(toTodo(entry));
+    });
+
+    /** PUT /api/plugins/todo/items/:id */
+    fastify.put('/items/:id', { preHandler: [authenticate] }, async (request, reply) => {
+        const uid = userId(request);
+        const { id } = request.params;
+        const patch = request.body ?? {};
+
+        const entry = await getEntry(SLUG, id);
+        if (!entry) return reply.code(404).send({error: 'Todo not found'});
+        if (uid && entry.data.userId !== uid) return reply.code(404).send({error: 'Todo not found'});
+
+        const merged = {...entry.data};
+        for (const key of ['text', 'status', 'priority', 'dueAt']) {
+            if (key in patch) merged[key] = key === 'text' ? String(patch[key]).trim() : patch[key];
+        }
+
+        const updated = await updateEntry(SLUG, id, merged);
+        return reply.send(toTodo(updated));
+    });
+
+    /** DELETE /api/plugins/todo/completed — must be registered before /:id */
+    fastify.delete('/completed', {preHandler: [authenticate]}, async (request, reply) => {
+        const uid = userId(request);
+        const all = await loadAll(uid);
+        const completed = all.filter(t => t.status === 'completed');
+        await Promise.all(completed.map(t => deleteEntry(SLUG, t.id)));
+        return reply.send({success: true, removed: completed.length});
+    });
+
+    /** DELETE /api/plugins/todo/items/:id */
+    fastify.delete('/items/:id', { preHandler: [authenticate] }, async (request, reply) => {
+        const uid = userId(request);
+        const { id } = request.params;
+
+        const entry = await getEntry(SLUG, id);
+        if (!entry) return reply.code(404).send({error: 'Todo not found'});
+        if (uid && entry.data.userId !== uid) return reply.code(404).send({error: 'Todo not found'});
+
+        await deleteEntry(SLUG, id);
+        return reply.send({ success: true });
+    });
+}

package/plugins/todo/plugin.json

@@ -0,0 +1,23 @@
+{
+  "name": "todo",
+  "displayName": "Todo",
+  "version": "1.0.0",
+  "description": "Personal task manager with priorities and status tracking.",
+  "author": "Darryl Waterhouse",
+  "date": "2026-03-24",
+  "icon": "check-square",
+  "admin": {
+    "sidebar": [
+      { "id": "todo", "text": "Todo", "icon": "check-square", "url": "#/plugins/todo", "section": "#/plugins/todo" }
+    ],
+    "routes": [
+      { "path": "/plugins/todo", "view": "plugin-todo", "title": "Todo - Domma CMS" }
+    ],
+    "views": {
+      "plugin-todo": {
+        "entry": "todo/admin/views/todo.js",
+        "exportName": "todoView"
+      }
+    }
+  }
+}