domma-cms 0.31.0 → 0.32.2

package/plugins/surveys/admin/views/audience.js

@@ -0,0 +1,301 @@
+/**
+ * Surveys plugin — shared audience view.
+ *
+ * Manages survey contacts and audience groups, plus an import action that pulls
+ * the audience from the Contacts plugin.
+ *
+ * @module surveys/admin/views/audience
+ */
+
+const BASE = '/api/plugins/surveys';
+
+/**
+ * Authenticated JSON fetch helper. Mirrors plugins/contacts/admin/views/contacts.js.
+ *
+ * @param {string} url
+ * @param {string} [method]
+ * @param {object} [body]
+ * @returns {Promise<*>}
+ */
+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) : {};
+}
+
+/**
+ * Escape HTML special characters to prevent XSS in render strings.
+ *
+ * @param {*} str
+ * @returns {string}
+ */
+function esc(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+export const audienceView = {
+    templateUrl: '/plugins/surveys/admin/templates/audience.html',
+
+    /**
+     * Mount the audience view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        let contacts = [];
+        let groups = [];
+        let table = null;
+
+        async function load() {
+            const [c, g] = await Promise.all([
+                api(`${BASE}/contacts`).catch(() => []),
+                api(`${BASE}/groups`).catch(() => [])
+            ]);
+            contacts = Array.isArray(c) ? c : [];
+            groups = Array.isArray(g) ? g : [];
+        }
+
+        // ---- Contacts table ----------------------------------------------
+        function buildTable() {
+            const tableEl = $container.find('#audience-table').get(0);
+            const emptyEl = $container.find('#audience-empty').get(0);
+
+            if (!contacts.length) {
+                if (tableEl) tableEl.style.display = 'none';
+                if (emptyEl) emptyEl.style.display = 'block';
+                return;
+            }
+            if (emptyEl) emptyEl.style.display = 'none';
+            if (tableEl) tableEl.style.display = '';
+
+            if (table) {
+                table.setData(contacts);
+            } else {
+                // Render functions return HTML strings; delete uses delegated
+                // listener below (not inline onclick) so we can await E.confirm.
+                table = T.create($container.find('#audience-table').get(0), {
+                    data: contacts,
+                    columns: [
+                        {key: 'name', title: 'Name', sortable: true, render: (v) => esc(v) || '—'},
+                        {
+                            key: 'email', title: 'Email', sortable: true,
+                            render: (v) => v ? `<a href="mailto:${esc(v)}">${esc(v)}</a>` : '—'
+                        },
+                        {
+                            key: 'groups', title: 'Groups', sortable: false,
+                            render: (v) => {
+                                if (!Array.isArray(v) || !v.length) return '—';
+                                return v.map((g) => `<span class="badge badge-primary" style="margin-right:2px;">${esc(g)}</span>`).join('');
+                            }
+                        },
+                        {
+                            key: 'id', title: 'Actions', sortable: false,
+                            render: (id) =>
+                                `<button class="btn btn-sm btn-danger contact-del" data-id="${esc(id)}">` +
+                                `<span data-icon="trash" data-icon-size="14"></span> Delete</button>`
+                        }
+                    ],
+                    emptyMessage: 'No contacts.'
+                });
+
+                const container = $container.find('#audience-table').get(0);
+                if (container) {
+                    container.addEventListener('click', async (e) => {
+                        const btn = e.target.closest('.contact-del');
+                        if (!btn) return;
+                        const id = btn.dataset.id;
+                        const contact = contacts.find((c) => c.id === id);
+                        const ok = await E.confirm(`Delete "${contact?.name || contact?.email || 'this contact'}"?`);
+                        if (!ok) return;
+                        try {
+                            await api(`${BASE}/contacts/${encodeURIComponent(id)}`, 'DELETE');
+                            E.toast('Contact deleted.', {type: 'success'});
+                            await refresh();
+                        } catch (err) {
+                            E.toast(err?.message ?? 'Failed to delete contact.', {type: 'error'});
+                        }
+                    });
+                }
+            }
+            Domma.icons.scan();
+        }
+
+        // ---- Groups panel -------------------------------------------------
+        function buildGroups() {
+            const listEl = $container.find('#groups-list').get(0);
+            if (!listEl) return;
+            while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
+
+            if (!groups.length) {
+                const p = document.createElement('p');
+                p.className = 'text-muted';
+                p.textContent = 'No groups yet.';
+                listEl.appendChild(p);
+                return;
+            }
+            groups.forEach((g) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'padding:0.4rem 0;border-bottom:1px solid var(--dm-border);';
+                const badge = document.createElement('span');
+                badge.className = 'badge badge-primary';
+                badge.textContent = g.name; // textContent — safe
+                row.appendChild(badge);
+                if (g.description) {
+                    const desc = document.createElement('div');
+                    desc.className = 'text-muted';
+                    desc.style.fontSize = '0.8rem';
+                    desc.textContent = g.description;
+                    row.appendChild(desc);
+                }
+                listEl.appendChild(row);
+            });
+        }
+
+        // ---- Add-contact modal (light-DOM projection) ---------------------
+        function openContactModal() {
+            const modal = E.modal({title: 'Add Contact', size: 'md'});
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:0.25rem 0 0.5rem;';
+
+            const formContainer = document.createElement('div');
+            wrapper.appendChild(formContainer);
+
+            // Canonical F.create: (blueprintObject, defaultsObject, opts).renderTo(el).
+            // Blueprint is keyed by field name; placeholder/hint live under
+            // formConfig (proven shape — collection-entries.js). We supply our own
+            // buttons (below) and read values from the DOM on save, so the modal's
+            // HTML sanitiser never strips an interactive submit button.
+            F.create(
+                {
+                    name: {type: 'string', label: 'Name', formConfig: {placeholder: 'Full name'}},
+                    email: {
+                        type: 'string', label: 'Email', required: true,
+                        formConfig: {placeholder: 'email@example.com'}
+                    },
+                    groups: {
+                        type: 'multiselect', label: 'Groups',
+                        options: groups.map((g) => ({value: g.name, label: g.name})),
+                        formConfig: {hint: 'Hold Ctrl/Cmd to select multiple.'}
+                    }
+                },
+                {},
+                {layout: 'stacked', columns: 1, showSubmitButton: false}
+            ).renderTo(formContainer);
+
+            const btnWrap = document.createElement('div');
+            btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.75rem;';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'btn btn-outline';
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.addEventListener('click', () => modal.close());
+
+            const saveBtn = document.createElement('button');
+            saveBtn.className = 'btn btn-primary';
+            saveBtn.textContent = 'Save contact';
+            saveBtn.addEventListener('click', async () => {
+                const nameEl = formContainer.querySelector('[name="name"]');
+                const emailEl = formContainer.querySelector('[name="email"]');
+                const groupsEl = formContainer.querySelector('[name="groups"]');
+                const email = (emailEl?.value ?? '').trim();
+                if (!email) {
+                    E.toast('Email is required.', {type: 'error'});
+                    return;
+                }
+                const selectedGroups = groupsEl
+                    ? Array.from(groupsEl.selectedOptions).map((o) => o.value)
+                    : [];
+                try {
+                    await api(`${BASE}/contacts`, 'POST', {
+                        name: (nameEl?.value ?? '').trim(),
+                        email,
+                        groups: selectedGroups
+                    });
+                    E.toast('Contact added.', {type: 'success'});
+                    modal.close();
+                    await refresh();
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to add contact.', {type: 'error'});
+                }
+            });
+
+            btnWrap.appendChild(cancelBtn);
+            btnWrap.appendChild(saveBtn);
+            wrapper.appendChild(btnWrap);
+
+            // Project the assembled DOM into the modal's light DOM so the
+            // interactive buttons survive (E.modal().setContent strips them).
+            modal.element.appendChild(wrapper);
+            modal.open();
+            Domma.icons.scan();
+        }
+
+        // ---- Refresh ------------------------------------------------------
+        async function refresh() {
+            await load();
+            buildTable();
+            buildGroups();
+        }
+
+        // ---- Wiring -------------------------------------------------------
+        const addContactBtn = $container.find('#add-contact').get(0);
+        if (addContactBtn) addContactBtn.addEventListener('click', openContactModal);
+
+        const backBtn = $container.find('#back-surveys').get(0);
+        if (backBtn) backBtn.addEventListener('click', () => { location.hash = '#/plugins/surveys'; });
+
+        const importBtn = $container.find('#import-contacts').get(0);
+        if (importBtn) {
+            importBtn.addEventListener('click', async () => {
+                const ok = await E.confirm('Import all contacts from the Contacts plugin?');
+                if (!ok) return;
+                try {
+                    const res = await api(`${BASE}/import-from-contacts`, 'POST', {});
+                    E.toast(`Imported ${res?.imported ?? 0} contact(s).`, {type: 'success'});
+                    await refresh();
+                } catch (err) {
+                    E.toast(err?.message ?? 'Import failed.', {type: 'error'});
+                }
+            });
+        }
+
+        const addGroupBtn = $container.find('#add-group').get(0);
+        const newGroupInput = $container.find('#new-group-name').get(0);
+        async function addGroup() {
+            const name = (newGroupInput?.value ?? '').trim();
+            if (!name) return;
+            try {
+                await api(`${BASE}/groups`, 'POST', {name});
+                if (newGroupInput) newGroupInput.value = '';
+                E.toast('Group added.', {type: 'success'});
+                await refresh();
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to add group.', {type: 'error'});
+            }
+        }
+        if (addGroupBtn) addGroupBtn.addEventListener('click', addGroup);
+        if (newGroupInput) {
+            newGroupInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') addGroup();
+            });
+        }
+
+        await refresh();
+        Domma.icons.scan();
+    }
+};

package/plugins/surveys/admin/views/results.js

@@ -0,0 +1,172 @@
+/**
+ * Surveys plugin — results / statistics dashboard.
+ *
+ * Renders a response-rate summary, then per-question cards: distribution bars
+ * for choice/rating fields and a tidy answer list for free-text fields. Authed
+ * CSV/JSON export.
+ *
+ * @module surveys/admin/views/results
+ */
+
+import {renderDistribution} from '/plugins/surveys/public/dist-shared.mjs';
+
+const BASE = '/api/plugins/surveys';
+
+/** Authenticated JSON fetch helper. Mirrors plugins/contacts/admin/views/contacts.js. */
+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) : {};
+}
+
+/** Escape HTML special characters. */
+function esc(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+const TYPE_LABEL = {choice: 'Multiple choice', rating: 'Rating', text: 'Free text'};
+
+/** Total answers represented by a field's aggregation. */
+function answerCount(f) {
+    if (f.type === 'text') return Array.isArray(f.responses) ? f.responses.length : 0;
+    return Array.isArray(f.items) ? f.items.reduce((n, i) => n + (i.value || 0), 0) : 0;
+}
+
+export const resultsView = {
+    templateUrl: '/plugins/surveys/admin/templates/results.html',
+
+    async onMount($container) {
+        const root = $container.find('.survey-results-plugin').get(0) || $container.get(0);
+        const hashMatch = location.hash.match(/^#\/plugins\/surveys\/results\/(.+)$/);
+        const slug = hashMatch ? decodeURIComponent(hashMatch[1]) : null;
+        if (!slug) {
+            E.toast('No survey specified.', {type: 'error'});
+            location.hash = '#/plugins/surveys';
+            return;
+        }
+
+        // ---- Load survey (for title/status) + stats -----------------------
+        let survey = null;
+        let stats = null;
+        try {
+            [survey, stats] = await Promise.all([
+                api(`${BASE}/surveys/${encodeURIComponent(slug)}`).catch(() => null),
+                api(`${BASE}/surveys/${encodeURIComponent(slug)}/stats`)
+            ]);
+        } catch (err) {
+            E.toast(err?.message ?? 'Failed to load results.', {type: 'error'});
+            return;
+        }
+
+        const health = stats?.health ?? {invited: 0, completed: 0, responseRate: 0};
+        const invited = health.invited ?? 0;
+        const completed = health.completed ?? 0;
+        const rate = health.responseRate ?? 0;
+        const outstanding = Math.max(0, invited - completed);
+
+        // ---- Header -------------------------------------------------------
+        const titleEl = root.querySelector('#results-title');
+        if (titleEl) titleEl.textContent = `Results — ${survey?.title || slug}`;
+        const subEl = root.querySelector('#results-sub');
+        if (subEl) {
+            const statusBadge = survey?.status ? ` · ${survey.status}` : '';
+            const modeBadge = survey?.mode === 'anonymous' ? ' · anonymous' : '';
+            subEl.textContent = `${completed} of ${invited} invited have responded${statusBadge}${modeBadge}.`;
+        }
+
+        // ---- Summary cards ------------------------------------------------
+        const kpi = (num, label) =>
+            `<div class="card"><div class="card-body"><div class="sr-kpi-num">${esc(num)}</div><div class="sr-kpi-lbl">${esc(label)}</div></div></div>`;
+        $container.find('#summary').html(
+            `<div class="card"><div class="card-body">
+                <div class="sr-rate-num">${esc(rate)}%</div>
+                <div class="sr-kpi-lbl">Response rate</div>
+                <div class="sr-rate-bar"><div class="sr-rate-fill" data-pct="${Math.min(100, rate)}" style="width:${Math.min(100, rate)}%"></div></div>
+            </div></div>` +
+            kpi(invited, 'Invited') +
+            kpi(completed, 'Completed') +
+            kpi(outstanding, 'Awaiting response')
+        );
+
+        // ---- Per-question cards -------------------------------------------
+        const fields = Array.isArray(stats?.fields) ? stats.fields : [];
+        let questionsHtml;
+
+        if (!completed && !fields.some((f) => answerCount(f) > 0)) {
+            questionsHtml = `<div class="card"><div class="card-body"><p class="sr-empty">No responses yet — once people complete the survey, their answers appear here.</p></div></div>`;
+        } else {
+            questionsHtml = fields.map((f, idx) => {
+                const n = answerCount(f);
+                const meta = `${TYPE_LABEL[f.type] || f.type} · ${n} answer${n === 1 ? '' : 's'}`;
+                let body;
+                if (f.type === 'choice' || f.type === 'rating') {
+                    const items = Array.isArray(f.items) ? f.items : [];
+                    const bars = items.length ? renderDistribution(items) : `<p class="sr-empty">No answers.</p>`;
+                    const avg = (f.type === 'rating' && typeof f.average !== 'undefined')
+                        ? `<p class="sr-avg">Average <strong>${esc(f.average)}</strong></p>` : '';
+                    body = avg + bars;
+                } else {
+                    const responses = (Array.isArray(f.responses) ? f.responses : [])
+                        .map((r) => (Array.isArray(r) ? r.join(', ') : r))
+                        .filter((r) => String(r ?? '').trim() !== '');
+                    body = responses.length
+                        ? `<div class="sr-quotes">` + responses.map((r) => `<div class="sr-quote">${esc(r)}</div>`).join('') + `</div>`
+                        : `<p class="sr-empty">No answers.</p>`;
+                }
+                return `<div class="card mb-3"><div class="card-body">
+                    <div class="sr-q-head">
+                        <span class="sr-q-num">${idx + 1}</span>
+                        <span class="sr-q-label">${esc(f.label || f.field)}</span>
+                        <span class="sr-q-meta">${esc(meta)}</span>
+                    </div>
+                    ${body}
+                </div></div>`;
+            }).join('');
+        }
+        $container.find('#questions').html(questionsHtml);
+
+        // Bar widths: set from data-pct via JS so they survive even if the admin's
+        // HTML sanitiser strips the inline width style.
+        root.querySelectorAll('[data-pct]').forEach((el) => {
+            const p = Number(el.getAttribute('data-pct'));
+            el.style.width = `${Math.max(0, Math.min(100, Number.isFinite(p) ? p : 0))}%`;
+        });
+
+        // ---- Authed blob export -------------------------------------------
+        async function exportAs(format) {
+            try {
+                const res = await fetch(`${BASE}/surveys/${encodeURIComponent(slug)}/export?format=${format}`, {
+                    headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+                });
+                if (!res.ok) throw new Error(res.statusText);
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${slug}.${format}`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            } catch (err) {
+                E.toast(err?.message ?? 'Export failed.', {type: 'error'});
+            }
+        }
+
+        root.querySelector('#export-csv')?.addEventListener('click', () => exportAs('csv'));
+        root.querySelector('#export-json')?.addEventListener('click', () => exportAs('json'));
+        root.querySelector('#back-surveys')?.addEventListener('click', () => { location.hash = '#/plugins/surveys'; });
+
+        if (typeof Domma !== 'undefined' && Domma.icons) Domma.icons.scan();
+    }
+};