improved UX in dashboard

2026-05-28 11:29:14 +02:00
parent b049a9ab9f
commit 9cf67e765f
8 changed files with 876 additions and 247 deletions
--- a/website/css/style.css
+++ b/website/css/style.css
@ -342,12 +342,100 @@ code {
    gap: 8px;
 }

-/* Questionnaire card grid */
+/* Questionnaire dashboard root (not .q-grid — avoids grid layout on nested cards) */
+.q-dashboard-root {
+    display: block;
+    width: 100%;
+}
+
+/* Questionnaire dashboard — category sections with horizontal card rows */
+.q-dashboard-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    width: 100%;
+}
+
+.q-category-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    min-width: 0;
+}
+
+.q-category-title {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: .02em;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--border);
+}
+
+.q-category-title .category-title-input {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    width: 100%;
+    max-width: 480px;
+}
+
+.category-german-input {
+    width: 100%;
+    min-width: 140px;
+    max-width: 320px;
+    padding: 6px 10px;
+    font-size: .9rem;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: inherit;
+}
+
+.category-german-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--primary-subtle);
+}
+
+.category-german-input:disabled {
+    opacity: .6;
+}
+
+/* Category rows: horizontal flow, wrap when the line is full */
+.q-category-grid {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: stretch;
+    align-content: flex-start;
+    gap: 16px;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+}
+
+.q-category-grid > .q-card {
+    flex: 0 0 300px;
+    width: 300px;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+}
+
+/* Questionnaire card grid (legacy / other pages) */
 .q-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
 }
+
+.q-card .drag-handle {
+    margin-right: 6px;
+    cursor: grab;
+    color: var(--text-secondary);
+}
 .q-card {
    background: var(--surface);
    border: 1px solid var(--border);
@ -751,12 +839,27 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
    .q-grid { grid-template-columns: 1fr; }
 }

+@media (max-width: 520px) {
+    .q-category-grid > .q-card {
+        flex: 1 1 100%;
+        width: 100%;
+    }
+}
+
 /* Role badges */
 .badge-admin      { background: var(--badge-admin-bg); color: var(--badge-admin-fg); }
 .badge-supervisor { background: var(--badge-supervisor-bg); color: var(--badge-supervisor-fg); }
 .badge-coach      { background: var(--badge-coach-bg); color: var(--badge-coach-fg); }
 .badge-you        { background: var(--badge-you-bg); color: var(--badge-you-fg); font-size: .7rem; }

+/* Dashboard — category keys panel */
+.category-keys-table code {
+    font-size: .8rem;
+}
+table.data-table tbody tr.row-orphan-category td {
+    background: color-mix(in srgb, var(--surface-hover) 60%, transparent);
+}
+
 /* Assignment page — client table sized to rows (max 50); coach panel matches */
 .assign-page {
    display: flex;
--- a/website/js/pages/dashboard.js
+++ b/website/js/pages/dashboard.js
@ -9,7 +9,8 @@ export async function dashboardPage() {
            <h1>Questionnaires</h1>
            <div class="actions" id="headerActions"></div>
        </div>
-        <div id="qGrid" class="q-grid"><div class="spinner"></div></div>
+        <div id="qGrid" class="q-dashboard-root"><div class="spinner"></div></div>
+        <div id="categoryKeysPanel"></div>
    `;

    if (canEdit()) {
@ -23,35 +24,216 @@ export async function dashboardPage() {

    try {
        const data = await apiGet('questionnaires.php');
-        renderGrid(data.questionnaires || []);
+        const categoryKeys = data.categoryKeys || [];
+        renderGrid(data.questionnaires || [], categoryKeys);
+        renderCategoryKeysPanel(categoryKeys);
+        bindCategoryLabelEditors();
    } catch (e) {
        showToast(e.message, 'error');
        document.getElementById('qGrid').innerHTML = `<p class="error-text">${e.message}</p>`;
    }
 }

-function renderGrid(questionnaires) {
-    const grid = document.getElementById('qGrid');
+function renderCategoryKeysPanel(categoryKeys) {
+    const panel = document.getElementById('categoryKeysPanel');
+    if (!panel) return;

-    if (!questionnaires.length) {
-        grid.innerHTML = `
-            <div class="empty-state" style="grid-column:1/-1">
-                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-                <h3>No questionnaires yet</h3>
-                <p>Create your first questionnaire to get started.</p>
-            </div>
-        `;
+    if (!canEdit()) {
+        panel.innerHTML = '';
        return;
    }

-    grid.innerHTML = questionnaires.map(q => {
-        const stateClass = `badge-${(q.state || 'draft').toLowerCase().replace(/\s+/g, '_')}`;
-        const showPts = parseInt(q.showPoints || 0, 10);
-        return `
+    if (!categoryKeys.length) {
+        panel.innerHTML = `
+            <div class="card category-keys-card" style="margin-top:16px">
+                <h3 style="margin:0 0 8px;font-size:1rem">Category keys</h3>
+                <p class="data-toolbar-hint" style="margin:0">
+                    Set a category key on a questionnaire (editor → settings) to group it on the app opening screen.
+                    German group titles can be edited below once a key is in use.
+                </p>
+            </div>`;
+        return;
+    }
+
+    panel.innerHTML = `
+        <div class="card category-keys-card" style="margin-top:16px">
+            <h3 style="margin:0 0 8px;font-size:1rem">Category keys</h3>
+            <p class="data-toolbar-hint" style="margin:0 0 12px">
+                German labels for the app opening screen. Other languages: <a href="#/translations">Translations</a>.
+                Delete removes the key from questionnaires, all translations, and catalog defaults.
+            </p>
+            <div class="table-wrapper" style="max-height:none">
+                <table class="data-table category-keys-table">
+                    <thead>
+                        <tr>
+                            <th>Category key</th>
+                            <th>App string key</th>
+                            <th>German label</th>
+                            <th>Questionnaires</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${categoryKeys.map(row => `
+                            <tr class="${row.orphaned ? 'row-orphan-category' : ''}">
+                                <td><code>${esc(row.categoryKey)}</code></td>
+                                <td><code class="data-toolbar-hint">${esc(row.stringKey)}</code></td>
+                                <td class="category-label-cell">
+                                    <input type="text" class="category-german-input"
+                                        data-category-key="${esc(row.categoryKey)}"
+                                        value="${esc(row.germanLabel || '')}"
+                                        placeholder="German label"
+                                        aria-label="German label for ${esc(row.categoryKey)}">
+                                </td>
+                                <td>${row.orphaned
+                                    ? '<span class="data-toolbar-hint">unused</span>'
+                                    : esc(String(row.questionnaireCount))}</td>
+                                <td style="text-align:right;white-space:nowrap">
+                                    <button type="button" class="btn btn-sm btn-danger delete-cat-key-btn"
+                                        data-key="${esc(row.categoryKey)}"
+                                        data-count="${row.questionnaireCount}">Delete</button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        </div>`;
+
+    panel.querySelectorAll('.delete-cat-key-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const key = btn.dataset.key;
+            const count = parseInt(btn.dataset.count || '0', 10);
+            let msg = `Delete category key "${key}"?\n\nThis removes all translations and catalog defaults for questionnaire_group_${key}.`;
+            if (count > 0) {
+                msg += `\n\n${count} questionnaire(s) will have their category key cleared.`;
+            }
+            if (!confirm(msg)) return;
+            btn.disabled = true;
+            try {
+                const result = await apiPost('questionnaires.php', { action: 'deleteCategoryKey', categoryKey: key });
+                const cleared = result.questionnairesCleared ?? count;
+                showToast(
+                    cleared
+                        ? `Deleted "${key}" and cleared ${cleared} questionnaire(s)`
+                        : `Deleted "${key}"`,
+                    'success'
+                );
+                await dashboardPage();
+            } catch (err) {
+                showToast(err.message, 'error');
+                btn.disabled = false;
+            }
+        });
+    });
+}
+
+function categoryGermanInputHTML(categoryKey, label) {
+    if (!canEdit() || !categoryKey) {
+        return esc(label);
+    }
+    return `<input type="text" class="category-german-input category-title-input"
+        data-category-key="${esc(categoryKey)}"
+        value="${esc(label)}"
+        aria-label="German category title">`;
+}
+
+function bindCategoryLabelEditors() {
+    if (!canEdit()) return;
+
+    document.querySelectorAll('.category-german-input').forEach(input => {
+        input.dataset.lastSaved = input.value.trim();
+
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                input.blur();
+            }
+        });
+
+        input.addEventListener('blur', () => saveCategoryGermanLabel(input));
+    });
+}
+
+async function saveCategoryGermanLabel(input) {
+    const categoryKey = input.dataset.categoryKey?.trim();
+    const label = input.value.trim();
+    if (!categoryKey) return;
+
+    const prev = input.dataset.lastSaved ?? '';
+    if (label === prev) return;
+
+    if (!label) {
+        showToast('German label cannot be empty', 'error');
+        input.value = prev;
+        return;
+    }
+
+    input.disabled = true;
+    try {
+        await apiPost('questionnaires.php', {
+            action: 'updateCategoryLabel',
+            categoryKey,
+            germanLabel: label,
+        });
+        input.dataset.lastSaved = label;
+        syncCategoryGermanInputs(categoryKey, label);
+        showToast('Category label saved', 'success');
+    } catch (err) {
+        showToast(err.message, 'error');
+        input.value = prev;
+    } finally {
+        input.disabled = false;
+    }
+}
+
+function syncCategoryGermanInputs(categoryKey, label) {
+    document.querySelectorAll('.category-german-input').forEach(el => {
+        if (el.dataset.categoryKey === categoryKey) {
+            el.value = label;
+            el.dataset.lastSaved = label;
+        }
+    });
+}
+
+const UNCATEGORIZED = '__uncategorized__';
+
+function groupQuestionnairesByCategory(questionnaires, categoryKeys) {
+    const labelByKey = Object.fromEntries(
+        (categoryKeys || [])
+            .filter(r => !r.orphaned)
+            .map(r => [r.categoryKey, r.germanLabel || r.categoryKey])
+    );
+
+    const sorted = [...questionnaires].sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0));
+    const buckets = new Map();
+
+    for (const q of sorted) {
+        const key = (q.categoryKey || '').trim() || UNCATEGORIZED;
+        if (!buckets.has(key)) buckets.set(key, []);
+        buckets.get(key).push(q);
+    }
+
+    const sections = [...buckets.entries()].map(([key, items]) => ({
+        categoryKey: key === UNCATEGORIZED ? '' : key,
+        title: key === UNCATEGORIZED ? 'Uncategorized' : (labelByKey[key] || key),
+        items,
+        sortKey: Math.min(...items.map(q => q.orderIndex ?? 0)),
+    }));
+
+    sections.sort((a, b) => a.sortKey - b.sortKey);
+    return sections;
+}
+
+function renderQuestionnaireCard(q) {
+    const stateClass = `badge-${(q.state || 'draft').toLowerCase().replace(/\s+/g, '_')}`;
+    const showPts = parseInt(q.showPoints || 0, 10);
+    return `
        <div class="q-card" data-id="${q.questionnaireID}" draggable="${canEdit()}">
            <div class="q-card-header">
                <div class="q-card-title">
-                    ${canEdit() ? '<span class="drag-handle" title="Drag to reorder" style="margin-right:6px;cursor:grab;color:var(--text-secondary)">&#x2630;</span>' : ''}
+                    ${canEdit() ? '<span class="drag-handle" title="Drag to reorder" aria-label="Drag to reorder">&#x2630;</span>' : ''}
                    ${esc(q.name)}
                </div>
                <span class="badge ${stateClass}">${esc(q.state || 'draft')}</span>
@ -67,9 +249,36 @@ function renderGrid(questionnaires) {
                <a href="#/questionnaire/${q.questionnaireID}/results" class="btn btn-sm">Results</a>
                ${getRole() === 'admin' ? `<button class="btn btn-sm btn-danger delete-q-btn" data-id="${q.questionnaireID}">Delete</button>` : ''}
            </div>
-        </div>
+        </div>`;
+}
+
+function renderGrid(questionnaires, categoryKeys = []) {
+    const grid = document.getElementById('qGrid');
+
+    if (!questionnaires.length) {
+        grid.innerHTML = `
+            <div class="empty-state">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+                <h3>No questionnaires yet</h3>
+                <p>Create your first questionnaire to get started.</p>
+            </div>
        `;
-    }).join('');
+        return;
+    }
+
+    const sections = groupQuestionnairesByCategory(questionnaires, categoryKeys);
+
+    grid.innerHTML = `
+        <div class="q-dashboard-groups">
+            ${sections.map(section => `
+                <section class="q-category-group" data-category="${esc(section.categoryKey)}">
+                    <h2 class="q-category-title">${categoryGermanInputHTML(section.categoryKey, section.title)}</h2>
+                    <div class="q-category-grid">
+                        ${section.items.map(q => renderQuestionnaireCard(q)).join('')}
+                    </div>
+                </section>
+            `).join('')}
+        </div>`;

    grid.querySelectorAll('.q-card').forEach(card => {
        card.addEventListener('click', (e) => {
@ -95,49 +304,67 @@ function renderGrid(questionnaires) {
    if (canEdit()) initGridDrag(questionnaires);
 }

-function initGridDrag(questionnaires) {
-    const grid = document.getElementById('qGrid');
-    if (!grid) return;
-    let dragItem = null;
+function collectDashboardCardOrder() {
+    const ids = [];
+    document.querySelectorAll('.q-category-group').forEach(section => {
+        section.querySelectorAll('.q-category-grid .q-card').forEach(card => {
+            ids.push(card.dataset.id);
+        });
+    });
+    return ids;
+}

-    grid.addEventListener('dragstart', (e) => {
+function initGridDrag(questionnaires) {
+    const root = document.getElementById('qGrid');
+    if (!root) return;
+    let dragItem = null;
+    let dragRow = null;
+
+    root.addEventListener('dragstart', (e) => {
        const card = e.target.closest('.q-card');
        if (!card || !e.target.closest('.drag-handle')) { e.preventDefault(); return; }
        dragItem = card;
+        dragRow = card.closest('.q-category-grid');
        card.style.opacity = '0.5';
        e.dataTransfer.effectAllowed = 'move';
    });

-    grid.addEventListener('dragover', (e) => {
+    root.addEventListener('dragover', (e) => {
        e.preventDefault();
-        if (!dragItem) return;
-        const cards = [...grid.querySelectorAll('.q-card:not([style*="opacity"])')];
-        const afterCard = cards.reduce((closest, child) => {
-            const box = child.getBoundingClientRect();
-            const offset = e.clientY - box.top - box.height / 2;
-            if (offset < 0 && offset > closest.offset) return { offset, element: child };
-            return closest;
-        }, { offset: Number.NEGATIVE_INFINITY }).element;
+        if (!dragItem || !dragRow) return;

-        if (afterCard) grid.insertBefore(dragItem, afterCard);
-        else grid.appendChild(dragItem);
+        const row = e.target.closest('.q-category-grid');
+        if (!row || row !== dragRow) return;
+
+        const cards = [...row.querySelectorAll('.q-card')].filter(c => c !== dragItem);
+        let insertBefore = null;
+        for (const child of cards) {
+            const box = child.getBoundingClientRect();
+            if (e.clientX < box.left + box.width / 2) {
+                insertBefore = child;
+                break;
+            }
+        }
+        if (insertBefore) row.insertBefore(dragItem, insertBefore);
+        else row.appendChild(dragItem);
    });

-    grid.addEventListener('dragend', async () => {
+    root.addEventListener('dragend', async () => {
        if (!dragItem) return;
        dragItem.style.opacity = '';
-        const newOrder = [...grid.querySelectorAll('.q-card')].map(el => el.dataset.id);
+        const newOrder = collectDashboardCardOrder();
        dragItem = null;
+        dragRow = null;

        for (let i = 0; i < newOrder.length; i++) {
            const id = newOrder[i];
-            const q = questionnaires.find(q => q.questionnaireID === id);
+            const q = questionnaires.find(x => x.questionnaireID === id);
            if (q && parseInt(q.orderIndex, 10) !== i) {
                try {
                    await apiPut('questionnaires.php', { questionnaireID: id, orderIndex: i });
                    q.orderIndex = i;
-                } catch (e) {
-                    showToast(e.message, 'error');
+                } catch (err) {
+                    showToast(err.message, 'error');
                    return;
                }
            }