domma-cms 0.102.1 → 0.104.0

package/plugins/booking/admin/views/diary.js

@@ -0,0 +1,374 @@
+/**
+ * Booking › Diary.
+ *
+ * A day (one column per person or room) or a week (one column per day), in
+ * the business's time zone. Opening hours are the light bands; outside them
+ * is shaded. A booking is a block: click opens it, right-click / ⋮ /
+ * Shift+F10 is its menu. Click an empty time to book it. The first time
+ * round, a checklist says what to set up.
+ */
+
+import {STATUS_LABEL, V, api, copy, errText, esc, openPanel, store, wireRows} from '../lib/kit.js';
+import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, minuteAt, placeOf} from '../lib/diary-layout.js';
+import {withNames} from '../lib/details.js';
+import {addDays, atWallClock, fromMinutes, isDate, wallClock} from '/plugins/booking/public/lib/time.js';
+import {windowsOn} from '/plugins/booking/public/lib/slots.js';
+
+const PX_PER_MIN = 1;   // an hour is 60px
+const VIEW_KEY = 'booking.diary-view';
+const CANCELLED_KEY = 'booking.diary-cancelled';
+const CHECKLIST_KEY = 'booking.checklist-hidden';
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, boot} = ctx;
+    const panels = await import(`/plugins/booking/admin/views/panels.js?v=${V}`);
+    if (!here()) return undefined;
+
+    const view = M.observable(store.get(VIEW_KEY) === 'week' ? 'week' : 'day');
+    const date = M.observable(boot.today);
+    const showCancelled = M.observable(store.get(CANCELLED_KEY) === true);
+    const bookings = M.observable([]);
+    /** Class sessions drawn as one block: key -> their bookings. */
+    const sessions = new Map();
+    const loading = M.observable(true);
+    const error = M.observable('');
+    const label = M.observable('');
+    scope(M.effect(() => store.set(VIEW_KEY, view.value)));
+    scope(M.effect(() => store.set(CANCELLED_KEY, showCancelled.value)));
+
+    root.innerHTML = '';
+    const card = document.createElement('div');
+    card.className = 'bk-card bk-diary';
+    card.innerHTML = `
+<div class="bk-checklist" data-part="checklist" hidden></div>
+<div class="bk-bar">
+  <div class="bk-seg" role="group" aria-label="View">
+    <button type="button" data-view="day" data-bind-class="view.value === 'day' && 'is-on'">Day</button>
+    <button type="button" data-view="week" data-bind-class="view.value === 'week' && 'is-on'">Week</button>
+  </div>
+  <div class="bk-seg" role="group" aria-label="Move">
+    <button type="button" data-step="-1" title="Earlier" aria-label="Earlier"><span data-icon="chevron-left" data-icon-size="12"></span></button>
+    <button type="button" data-step="0">Today</button>
+    <button type="button" data-step="1" title="Later" aria-label="Later"><span data-icon="chevron-right" data-icon-size="12"></span></button>
+  </div>
+  <input type="date" class="form-input bk-date" aria-label="Go to date" data-part="date">
+  <strong class="bk-when" data-bind-text="label.value"></strong>
+  <span class="bk-spacer"></span>
+  <label class="bk-check"><input type="checkbox" data-part="cancelled"> Show cancelled</label>
+  <span data-help-title="The Diary" data-help="Bookings in your business's time zone (${esc(ctx.tz)}). Hatched times are outside opening hours. Click a booking to open it; right-click it (or ⋮, or Shift+F10) for Move, Done, No-show and Cancel. Click an empty time to book it. Keys: ← → earlier and later, T today, D day, W week."></span>
+</div>
+<p class="bk-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+<div class="bk-diary-wrap" data-part="grid" tabindex="-1"></div>`;
+    root.appendChild(card);
+    const gridBox = card.querySelector('[data-part="grid"]');
+    const dateIn = card.querySelector('[data-part="date"]');
+    const cancelledBox = card.querySelector('[data-part="cancelled"]');
+    const checklist = card.querySelector('[data-part="checklist"]');
+    scope(kit.helpPopovers(card, {position: 'bottom'}));
+    const bindings = M.applyBindings({view, label, error}, card);
+    scope(() => bindings.dispose());
+    I.scan(card);
+
+    cancelledBox.checked = showCancelled.peek();
+    cancelledBox.addEventListener('change', () => { showCancelled.value = cancelledBox.checked; });
+    dateIn.value = date.peek();
+    dateIn.addEventListener('change', () => { if (isDate(dateIn.value)) date.value = dateIn.value; });
+
+    const step = (n) => {
+        if (n === 0) { date.value = boot.today; return; }
+        date.value = addDays(date.peek(), n * (view.peek() === 'week' ? 7 : 1));
+    };
+    card.querySelector('.bk-bar').addEventListener('click', (e) => {
+        const v = e.target.closest('[data-view]');
+        if (v) view.value = v.dataset.view;
+        const s = e.target.closest('[data-step]');
+        if (s) step(Number(s.dataset.step));
+    });
+    const onKey = (e) => {
+        if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+        if (e.target.closest('input, textarea, select, [contenteditable], .dm-slideover, [role="dialog"]')) return;
+        if (!root.isConnected) return;
+        const k = e.key.toLowerCase();
+        if (e.key === 'ArrowLeft') step(-1);
+        else if (e.key === 'ArrowRight') step(1);
+        else if (k === 't') step(0);
+        else if (k === 'd') view.value = 'day';
+        else if (k === 'w') view.value = 'week';
+        else return;
+        e.preventDefault();
+    };
+    document.addEventListener('keydown', onKey);
+    scope(() => document.removeEventListener('keydown', onKey));
+
+    // ---- The first-run checklist --------------------------------------------------
+
+    function drawChecklist() {
+        const steps = [
+            {done: boot.bookables.length > 0, text: 'Add who or what can be booked - a person or a room', go: () => ctx.go('people', 'new')},
+            {done: boot.services.length > 0, text: 'Add a service: what can be booked, for how long, and with whom', go: () => ctx.go('services', 'new')},
+            {done: store.get('booking.settings-seen') === true, text: boot.mailReady ? 'Check the settings: your booking page, notice rules and emails' : 'Check the settings - and set up outgoing mail, or no confirmation emails are sent',
+                go: () => { store.set('booking.settings-seen', true); ctx.openSettings(); drawChecklist(); }},
+            {done: store.get('booking.link-shared') === true, text: `Share your booking page: ${location.origin}${ctx.settings.bookingPath}`,
+                go: () => { store.set('booking.link-shared', true); copy(`${location.origin}${ctx.settings.bookingPath}`, 'Booking page address copied'); drawChecklist(); }}
+        ];
+        const left = steps.filter(s => !s.done).length;
+        if (!left || store.get(CHECKLIST_KEY) === true) { checklist.hidden = true; return; }
+        checklist.hidden = false;
+        checklist.innerHTML = `
+<header><h3><span data-icon="clipboard-list" data-icon-size="15"></span> Getting started</h3>
+  <button type="button" class="btn btn-xs btn-ghost" data-hide title="Hide this list">Hide</button></header>
+<ol>${steps.map((s, i) => `<li class="${s.done ? 'is-done' : ''}"><span data-icon="${s.done ? 'check-circle' : 'circle'}" data-icon-size="14"></span>
+  <button type="button" class="bk-link" data-step-i="${i}">${esc(s.text)}</button></li>`).join('')}</ol>`;
+        I.scan(checklist);
+        checklist.onclick = (e) => {
+            if (e.target.closest('[data-hide]')) { store.set(CHECKLIST_KEY, true); checklist.hidden = true; return; }
+            const i = e.target.closest('[data-step-i]')?.dataset.stepI;
+            if (i !== undefined) steps[Number(i)].go();
+        };
+    }
+    drawChecklist();
+
+    // ---- Loading ----------------------------------------------------------------
+
+    const dates = () => datesFor(view.peek(), date.peek());
+    let seq = 0;
+    async function load() {
+        const ds = dates();
+        const my = ++seq;
+        loading.value = true;
+        try {
+            const from = atWallClock(ds[0], 0, ctx.tz).toISOString();
+            const to = atWallClock(addDays(ds[ds.length - 1], 1), 0, ctx.tz).toISOString();
+            const list = await api.bookings.list({from, to});
+            if (my !== seq || !here()) return;
+            bookings.value = Array.isArray(list) ? list : [];
+            error.value = '';
+        } catch (err) {
+            if (my === seq) error.value = `The diary could not load: ${errText(err)}`;
+        } finally {
+            if (my === seq) loading.value = false;
+        }
+    }
+    ctx.onBookingsChanged = () => { if (here()) load(); };
+    scope(() => { ctx.onBookingsChanged = () => {}; });
+    scope(M.effect(() => { view.value; date.value; dateIn.value = date.value; load(); }));
+
+    // ---- Drawing ---------------------------------------------------------------
+
+    function columns() {
+        const ds = dates();
+        const active = boot.bookables.filter(b => b.active !== false);
+        if (view.peek() === 'week') {
+            return ds.map(d => ({key: d, date: d, title: dayLabel(d), today: d === boot.today, windows: mergeWindows(active.flatMap(b => windowsOn(b, d, ctx.settings.closures)))}));
+        }
+        const d = ds[0];
+        const used = new Set(bookings.peek().flatMap(b => (Array.isArray(b.holds) && b.holds.length ? b.holds : [b.bookableId])));
+        const shown = boot.bookables.filter(b => b.active !== false || used.has(b.id));
+        return shown.map(b => ({key: b.id, date: d, bookableId: b.id, title: b.name, colour: b.colour, kind: b.kind, today: d === boot.today,
+            windows: windowsOn(b, d, ctx.settings.closures)}));
+    }
+
+    function draw() {
+        const list = bookings.value.filter(b => showCancelled.value || b.status !== 'cancelled');
+        const ds = datesFor(view.value, date.value);
+        label.value = view.value === 'week' ? `${dayLabel(ds[0])} - ${dayLabel(ds[6])} ${ds[6].slice(0, 4)}` : `${dayLabel(ds[0])} ${ds[0].slice(0, 4)}`;
+        const cols = columns();
+        gridBox.innerHTML = '';
+        if (!boot.bookables.length) {
+            gridBox.innerHTML = `<div class="bk-empty"><span data-icon="users" data-icon-size="28"></span>
+  <p><strong>Add who or what can be booked.</strong><br>A person (for appointments) or a room or thing - each with their opening hours.</p>
+  <button type="button" class="btn btn-sm btn-primary" data-go="people"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>`;
+            gridBox.querySelector('[data-go]').onclick = () => ctx.go('people', 'new');
+            I.scan(gridBox);
+            return;
+        }
+        const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
+        sessions.clear();
+        const placed = list.map(b => ({b, ...placeOf(b, ctx.tz)})).filter(p => ds.includes(p.date));
+        const {from, to} = gridHours(boot.bookables.filter(b => b.active !== false), ds, placed);
+        const height = (to - from) * PX_PER_MIN;
+
+        const grid = document.createElement('div');
+        grid.className = `bk-diary-grid is-${view.value}`;
+        grid.style.setProperty('--bk-cols', String(cols.length));
+        grid.style.setProperty('--bk-h', `${height}px`);
+        grid.style.setProperty('--bk-hour', `${60 * PX_PER_MIN}px`);
+
+        // Heads
+        const head = document.createElement('div');
+        head.className = 'bk-diary-head';
+        head.appendChild(document.createElement('span'));
+        for (const c of cols) {
+            const h = document.createElement('div');
+            h.className = `bk-col-head${c.today && view.value === 'week' ? ' is-today' : ''}`;
+            if (c.colour) h.dataset.colour = c.colour;
+            h.innerHTML = `${c.kind ? `<span data-icon="${c.kind === 'resource' ? 'box' : 'user'}" data-icon-size="13"></span> ` : ''}<span>${esc(c.title)}</span>`;
+            if (view.value === 'week') { h.classList.add('bk-link-head'); h.title = 'Show this day'; h.onclick = () => { date.value = c.date; view.value = 'day'; }; }
+            head.appendChild(h);
+        }
+        grid.appendChild(head);
+
+        // Time gutter + columns
+        const bodyRow = document.createElement('div');
+        bodyRow.className = 'bk-diary-body';
+        const gutter = document.createElement('div');
+        gutter.className = 'bk-gutter';
+        for (let m = from; m < to; m += 60) {
+            const t = document.createElement('span');
+            t.style.top = `${(m - from) * PX_PER_MIN}px`;
+            t.textContent = fromMinutes(m);
+            gutter.appendChild(t);
+        }
+        bodyRow.appendChild(gutter);
+
+        const nowWall = wallClock(Date.now(), ctx.tz);
+        for (const c of cols) {
+            const col = document.createElement('div');
+            col.className = 'bk-col';
+            col.dataset.date = c.date;
+            if (c.bookableId) col.dataset.bookable = c.bookableId;
+            col.title = 'Click an empty time to book it';
+            for (const w of c.windows) {
+                const band = document.createElement('div');
+                band.className = 'bk-open';
+                const bandTop = (Math.max(w.from, from) - from) * PX_PER_MIN;
+                band.style.top = `${bandTop}px`;
+                // Keep its hour lines on the column's.
+                band.style.backgroundPositionY = `${-bandTop}px`;
+                band.style.height = `${(Math.min(w.to, to) - Math.max(w.from, from)) * PX_PER_MIN}px`;
+                col.appendChild(band);
+            }
+            if (c.date === nowWall.date && nowWall.minutes >= from && nowWall.minutes <= to) {
+                const line = document.createElement('div');
+                line.className = 'bk-now';
+                line.style.top = `${(nowWall.minutes - from) * PX_PER_MIN}px`;
+                col.appendChild(line);
+            }
+            const dayBookings = placed.filter(p => p.date === c.date).map(p => p.b);
+            const items = columnItems(dayBookings, {bookableId: c.bookableId || ''}).map(it => ({...it, ...placeOf(it.b, ctx.tz)}));
+            for (const p of layoutColumn(items)) {
+                const b = p.b;
+                const el = document.createElement('div');
+                el.className = `bk-block is-${b.status}${p.companion ? ' is-companion' : ''}${p.session ? ' is-session' : ''}`;
+                if (p.session) {
+                    sessions.set(p.key, p.bookings);
+                    el.dataset.id = `session:${p.key}`;
+                } else {
+                    el.dataset.id = b.id;
+                }
+                el.dataset.colour = colours.get(b.bookableId) || 'grey';
+                el.tabIndex = 0;
+                el.setAttribute('role', 'button');
+                const top = (Math.max(p.startMin, from) - from) * PX_PER_MIN;
+                el.style.top = `${top}px`;
+                el.style.height = `${Math.max(18, (Math.min(p.endMin, to) - Math.max(p.startMin, from)) * PX_PER_MIN - 2)}px`;
+                el.style.left = `calc(${(p.lane / p.lanes) * 100}% + 2px)`;
+                el.style.width = `calc(${100 / p.lanes}% - 4px)`;
+                const s = wallClock(b.startAt, ctx.tz).time;
+                const e = wallClock(b.endAt, ctx.tz).time;
+                const time = view.value === 'week' ? esc(s) : `${esc(s)}-${esc(e)}`;
+                const statusNote = b.status !== 'confirmed' ? ` · ${esc({completed: 'done', 'no-show': 'no-show', cancelled: 'cancelled', pending: 'pending'}[b.status] || b.status)}` : '';
+                if (p.session) {
+                    // A class: one block for everyone in it.
+                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+<strong>${time} ${esc(b.serviceName)} · ${p.bookings.length} booked</strong><small>${p.companion ? `with ${esc(b.bookableName)}` : esc(p.bookings.map(x => x.name).join(', '))}${view.value === 'week' && b.bookableName ? ` · ${esc(b.bookableName)}` : ''}</small>`;
+                    el.title = `${s}-${e} ${b.serviceName}: ${p.bookings.length} booked${b.bookableName ? ` (with ${withNames(b)})` : ''}`;
+                } else if (p.companion) {
+                    // Held along with someone else's booking (a court with the trainer).
+                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)} · with ${esc(b.bookableName)}${statusNote}</small>`;
+                    el.title = `${s}-${e} ${b.serviceName}: ${b.name} - held with ${b.bookableName}'s booking`;
+                } else {
+                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)}${view.value === 'week' && b.bookableName ? ` · ${esc(withNames(b))}` : b.alsoNames?.length ? ` · with ${esc(b.alsoNames.join(', '))}` : ''}${statusNote}</small>`;
+                    el.title = `${s}-${e} ${b.serviceName}: ${b.name}${withNames(b) ? ` (with ${withNames(b)})` : ''}`;
+                }
+                col.appendChild(el);
+            }
+            bodyRow.appendChild(col);
+        }
+        grid.appendChild(bodyRow);
+        gridBox.appendChild(grid);
+        if (!boot.services.length) {
+            const tip = document.createElement('p');
+            tip.className = 'bk-note';
+            tip.innerHTML = 'Next: <button type="button" class="bk-link">add a service</button> - what can be booked, for how long, and with whom.';
+            tip.querySelector('button').onclick = () => ctx.go('services', 'new');
+            gridBox.prepend(tip);
+        }
+    }
+    scope(M.effect(draw));
+
+    // A click on an empty time books it.
+    gridBox.addEventListener('click', (e) => {
+        if (e.target.closest('.bk-block')) return;
+        const col = e.target.closest('.bk-col');
+        if (!col) return;
+        const rect = col.getBoundingClientRect();
+        const {from} = gridHours(boot.bookables.filter(b => b.active !== false), datesFor(view.peek(), date.peek()),
+            bookings.peek().map(b => placeOf(b, ctx.tz)).filter(p => datesFor(view.peek(), date.peek()).includes(p.date)));
+        const minute = minuteAt(e.clientY - rect.top, {from, pxPerMin: PX_PER_MIN});
+        ctx.newBooking({date: col.dataset.date, time: fromMinutes(minute), bookableId: col.dataset.bookable || ''});
+    });
+
+    const byId = (id) => bookings.peek().find(b => b.id === id);
+    const sessionOf = (id) => (id.startsWith('session:') ? sessions.get(id.slice(8)) || [] : null);
+
+    /** A class: who is in it, each opening their booking. */
+    async function openSession(list) {
+        if (!list.length) return;
+        const first = list[0];
+        const s = wallClock(first.startAt, ctx.tz);
+        const e = wallClock(first.endAt, ctx.tz);
+        let panel = null;
+        panel = await openPanel({
+            title: `${first.serviceName}, ${s.time}-${e.time}`,
+            size: 'sm',
+            html: `<div class="bk-form">
+  <p class="bk-muted">${esc(dayLabel(s.date))}${first.bookableName ? ` · with ${esc(withNames(first))}` : ''} · ${list.length} booked</p>
+  <div class="bk-list bk-session-list">${list.map(b => `<button type="button" class="bk-row" data-open="${esc(b.id)}">
+    <span class="bk-main"><strong>${esc(b.name)}</strong><small>${esc([b.email, b.phone].filter(Boolean).join(' · '))}</small></span>
+    <span class="bk-chip">${esc(STATUS_LABEL[b.status] || b.status)}</span></button>`).join('')}</div>
+</div>`,
+            after: (el) => {
+                el.addEventListener('click', (ev) => {
+                    const row = ev.target.closest('[data-open]');
+                    if (!row) return;
+                    panel?.close(true);
+                    ctx.openBooking(row.dataset.open);
+                });
+                setTimeout(() => el.querySelector('[data-open]')?.focus(), 60);
+            }
+        });
+    }
+
+    wireRows(gridBox, {
+        match: '.bk-block',
+        openMenuAt: kit.openMenuAt,
+        scope,
+        main: (id) => { const list = sessionOf(id); return list ? openSession(list) : ctx.openBooking(id); },
+        items: (id) => {
+            const list = sessionOf(id);
+            if (!list) return panels.bookingMenu(ctx, byId(id));
+            return [
+                {label: `Everyone in it (${list.length})`, icon: 'users', action: () => openSession(list)},
+                {type: 'divider'},
+                ...list.map(b => ({label: `Open ${b.name}`, icon: 'external-link', action: () => ctx.openBooking(b.id)}))
+            ];
+        }
+    });
+
+    return () => {};
+}
+
+function mergeWindows(list) {
+    const sorted = [...list].sort((a, b) => a.from - b.from);
+    const out = [];
+    for (const w of sorted) {
+        const last = out[out.length - 1];
+        if (last && w.from <= last.to) last.to = Math.max(last.to, w.to);
+        else out.push({...w});
+    }
+    return out;
+}
+