@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/js/passwordPrompt.js

@@ -0,0 +1,75 @@
+/**
+ * A password dialog over the current page, for the two times the admin UI
+ * needs the password without leaving what the admin was doing: signing in
+ * again after a session ends, and confirming an action that cannot be undone.
+ */
+
+import { ApiError } from './api.js';
+import { el, uniqueId } from './dom.js';
+import { t } from './i18n.js';
+import { openModal, VARIANT } from './modal.js';
+import { ERROR_CODE } from './constants.js';
+
+/**
+ * @param {{ title: string, message: string, submitLabel: string,
+ *   submit: (password: string) => Promise<void> }} options
+ * @returns {Promise<boolean>} whether `submit` succeeded; false if cancelled
+ */
+export function promptPassword({ title, message, submitLabel, submit }) {
+    return new Promise((resolve) => {
+        const inputId = uniqueId('password');
+        const input = el('input', {
+            className: 'input',
+            attrs: { id: inputId, type: 'password', autocomplete: 'current-password', required: 'true' },
+        });
+        const error = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+        error.hidden = true;
+        let settled = false;
+
+        const attempt = async () => {
+            if (!input.value) {
+                input.focus();
+                return false;
+            }
+            try {
+                await submit(input.value);
+                settled = true;
+                resolve(true);
+                return true;
+            } catch (failure) {
+                const code = failure instanceof ApiError ? failure.code : ERROR_CODE.SERVER_ERROR;
+                error.textContent = t(`errors.${code}`);
+                error.hidden = false;
+                input.select();
+                return false;
+            }
+        };
+
+        const dialog = openModal({
+            title,
+            body: [
+                el('p', { text: message }),
+                el('label', { className: 'field-label', text: t('login.password'), attrs: { for: inputId } }),
+                input,
+                error,
+            ],
+            actions: [
+                { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+                { label: submitLabel, variant: VARIANT.PRIMARY, onClick: attempt },
+            ],
+            onCancel: () => { if (!settled) resolve(false); },
+            initialFocus: input,
+        });
+
+        // Enter submits, as on the sign-in screen.
+        input.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter') return;
+            event.preventDefault();
+            dialog.querySelector('.modal-actions .btn-primary')?.click();
+        });
+        // A cancel button that closes the dialog is a cancel, too.
+        dialog.querySelector('.modal-actions .btn-secondary')?.addEventListener('click', () => {
+            if (!settled) resolve(false);
+        });
+    });
+}

package/admin/js/table.js

@@ -1,59 +1,11 @@
 /**
- * Pieces shared by every data table: sortable headers, the pager, and the
- * empty and loading states.
+ * Controls shared by the tables: the pager and the segmented control. The
+ * table itself is dataTable.js.
  */
 
-import { clampText } from './clamp.js';
 import { el, replaceChildren } from './dom.js';
-import { formatDate, formatNumber, formatTime } from './format.js';
+import { formatNumber } from './format.js';
 import { t } from './i18n.js';
-import { SORT_ORDER } from './constants.js';
-
-/**
- * A header cell. Sortable headers are buttons, so they are reachable and
- * operable by keyboard, and expose the sort through aria-sort.
- *
- * @param {{ label: string, sortKey?: string, sort?: string, order?: string,
- *   onSort?: (key: string) => void, className?: string }} options
- */
-export function headerCell({ label, sortKey, sort, order, onSort, className = '' }) {
-    if (!sortKey) return el('th', { className, text: label, attrs: { scope: 'col' } });
-
-    const active = sort === sortKey;
-    const ariaSort = active ? (order === SORT_ORDER.ASC ? 'ascending' : 'descending') : 'none';
-    const indicator = active ? (order === SORT_ORDER.ASC ? '▲' : '▼') : '↕';
-
-    return el('th', { className, attrs: { scope: 'col', 'aria-sort': ariaSort } }, [
-        el('button', {
-            className: `sort-btn${active ? ' active' : ''}`,
-            attrs: { type: 'button' },
-            dataset: { sortKey },
-            on: { click: () => onSort(sortKey) },
-        }, [
-            el('span', { text: label }),
-            el('span', { className: 'sort-indicator', text: indicator, attrs: { 'aria-hidden': 'true' } }),
-        ]),
-    ]);
-}
-
-/**
- * A timestamp cell: the date above the time of day, like every other two-line
- * cell, so it never needs the width of both on one line.
- *
- * @param {string|Date} value
- * @param {{ seconds?: boolean }} [options]
- */
-export function timeCell(value, { seconds = false } = {}) {
-    return el('td', { className: 'col-time' }, [
-        clampText(formatDate(value), { className: 'cell-primary' }),
-        clampText(formatTime(value, { seconds }), { className: 'cell-secondary' }),
-    ]);
-}
-
-/** A full-width row for empty or loading states. */
-export function messageRow(columns, text, className = 'table-message') {
-    return el('tr', {}, [el('td', { className, text, attrs: { colspan: String(columns) } })]);
-}
 
 /**
  * Previous / next pagination with a live summary.
@@ -130,5 +82,13 @@ export function createSegmented({ label, options, value, onChange }) {
     }
     render();
 
-    return { element: group, getValue: () => current };
+    return {
+        element: group,
+        getValue: () => current,
+        /** Show a value chosen elsewhere, without reporting it as a change. */
+        setValue(value) {
+            current = value;
+            render();
+        },
+    };
 }

package/admin/js/viewDialogs.js

@@ -5,7 +5,9 @@
 import { el, uniqueId } from './dom.js';
 import { openModal, VARIANT } from './modal.js';
 import { createListbox } from './listbox.js';
-import { formatDateTime, orNone } from './format.js';
+import { formatDateTime, formatDuration, orNone } from './format.js';
+import { regionName } from './charts.js';
+import { valueLabel } from './overview.js';
 import { t, tOr } from './i18n.js';
 import {
     DEVICE_SIZE_FIELD,
@@ -14,7 +16,7 @@ import {
     JSON_INDENT,
     NOTE_ROWS,
     TEXT_FIELDS,
-    VIEW_DETAIL_FIELDS,
+    VIEW_DETAIL_GROUPS,
 } from './constants.js';
 
 const DATE_FIELDS = new Set(['timestamp', 'adminModifiedAt', 'deletedAt']);
@@ -23,24 +25,38 @@ const DATE_FIELDS = new Set(['timestamp', 'adminModifiedAt', 'deletedAt']);
 function displayValue(field, value) {
     if (DATE_FIELDS.has(field)) return formatDateTime(value);
     if (field === 'isUnique') return value ? t('common.yes') : t('common.no');
-    if (field === 'sourceType' && value) return tOr(`sources.${value}`, value);
-    if (field === EVENT_DATA_FIELD) return value === null || value === undefined ? t('common.none') : JSON.stringify(value, null, JSON_INDENT);
+    if (value === null || value === undefined || value === '') return t('common.none');
+    if (field === 'sourceType') return tOr(`sources.${value}`, value);
+    if (field === 'deviceSize') return tOr(`deviceSizes.${value}`, value);
+    if (field === 'deviceType') return valueLabel('deviceType', value);
+    if (field === 'language') return valueLabel('language', value);
+    if (field === 'eventType') return valueLabel('eventType', value);
+    if (field === 'country') return `${regionName(value)} (${value})`;
+    if (field === 'engagedMs') return formatDuration(value);
+    if (field === 'scrollDepth') return t('details.scrolled', { percent: value });
+    if (field === EVENT_DATA_FIELD) return JSON.stringify(value, null, JSON_INDENT);
     return orNone(value);
 }
 
-/** Read-only view of every field. */
+/** Read-only view of every field, grouped: the view, its page, source, visitor, engagement, and admin changes. */
 export function openDetails(view) {
-    const list = el('dl', { className: 'detail-list' });
-    for (const field of VIEW_DETAIL_FIELDS) {
-        const value = displayValue(field, view[field]);
-        const valueNode = field === EVENT_DATA_FIELD
-            ? el('pre', { className: 'detail-json', text: value })
-            : el('span', { className: 'detail-value', text: value });
-        list.append(el('dt', { text: t(`fields.${field}`) }), el('dd', {}, [valueNode]));
-    }
+    const body = el('div', { className: 'detail-groups' }, VIEW_DETAIL_GROUPS.map((group) => {
+        const list = el('dl', { className: 'detail-list' });
+        for (const field of group.fields) {
+            const value = displayValue(field, view[field]);
+            const valueNode = field === EVENT_DATA_FIELD && view[field] !== null && view[field] !== undefined
+                ? el('pre', { className: 'detail-json', text: value })
+                : el('span', { className: 'detail-value', text: value });
+            list.append(el('dt', { text: t(`fields.${field}`) }), el('dd', {}, [valueNode]));
+        }
+        return el('section', { className: 'detail-group' }, [
+            el('h3', { className: 'detail-group-title', text: t(`details.groups.${group.key}`) }),
+            list,
+        ]);
+    }));
     openModal({
         title: t('details.title'),
-        body: list,
+        body,
         actions: [{ label: t('common.close'), variant: VARIANT.SECONDARY }],
         wide: true,
     });