domma-cms 1.6.55 → 1.6.57

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

@@ -55,10 +55,17 @@ export const bookingView = {
         const here = () => location.hash === mountedFor && root.isConnected;
         const {tab, id, query} = where();
 
+        // The first load: a skeleton (core's loading.js) in a slot that goes when the screen draws.
+        root.innerHTML = '';
+        const slot = document.createElement('div');
+        slot.className = 'bk-note bk-loading-slot dm-loading-slot';
+        slot.textContent = 'Loading…';
+        root.appendChild(slot);
         let boot;
         try {
-            boot = await api.bootstrap();
+            boot = await kit.whileLoading(slot, api.bootstrap(), kit.SHAPES.rows);
         } catch (err) {
+            if (!here()) return;
             root.innerHTML = '';
             const p = document.createElement('p');
             p.className = 'bk-error';
@@ -110,6 +117,8 @@ export const bookingView = {
 
         const ctx = {
             kit, scope, here, root: body, container, boot, settings: boot.settings, id, query,
+            /** Like scope, but answers the remover: a panel lets go of the screen when it closes first. */
+            hold: (fn) => lifetime.add(fn),
             /** Tidy the address (a deep link done with) without leaving the screen. */
             replaceHash(h) { history.replaceState(null, '', h); mountedFor = location.hash; },
             tz: boot.settings.timeZone,
@@ -199,7 +208,7 @@ export const bookingView = {
                 const c = await api.contactByEmail(query.email).catch(() => null);
                 if (c?.id) Object.assign(prefill, {contactId: c.id, name: c.name || prefill.name, phone: c.phone});
             }
-            if (!ROUTE.test(location.hash)) return;
+            if (!here()) return;
             if (wantAction) runAction(wantAction, prefill);
             else ctx.newBooking(prefill);
         }

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

@@ -85,7 +85,7 @@ export async function mount(root, ctx) {
   <input type="search" class="form-input bk-search" placeholder="Search name, email, service…" aria-label="Search bookings" data-model="query.value">
   <span data-help-title="Bookings" data-help="Every booking, newest changes included. Click one to open it; right-click (or ⋮, or Shift+F10) to move it, mark it done or a no-show, or cancel it. Cancelled bookings free their time and can then be deleted."></span>
 </div>
-<p class="bk-note" data-bind-hidden="!loading.value">Loading…</p>
+<div class="bk-note bk-loading-slot dm-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
 <p class="bk-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
 <p class="bk-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
 <div class="bk-list" data-each="rows.value key=id"></div>`;
@@ -99,13 +99,18 @@ export async function mount(root, ctx) {
         if (b) filter.value = b.dataset.filter;
     });
 
+    // The first load shows a skeleton in the slot; a reload keeps the list on screen.
+    let first = true;
     async function load() {
         try {
-            const list = await api.bookings.list();
+            const slot = first ? view.querySelector('.bk-loading-slot') : null;
+            first = false;
+            const list = await (slot ? kit.whileLoading(slot, api.bookings.list(), kit.SHAPES.rows) : api.bookings.list());
             if (!here()) return;
             all.value = Array.isArray(list) ? list : [];
             error.value = '';
         } catch (err) {
+            if (!here()) return;
             error.value = `The bookings could not load: ${errText(err)}`;
         } finally {
             loading.value = false;

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

@@ -12,7 +12,7 @@
  * that works the geometry out in JS (diary-layout.js); the markup only binds.
  */
 
-import {STATUS_LABEL, V, api, copy, errText, esc, openPanel, store, wireRows} from '../lib/kit.js';
+import {STATUS_LABEL, V, api, claim, copy, errText, esc, openPanel, store, wireRows} from '../lib/kit.js';
 import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, mergeWindows, 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';
@@ -66,6 +66,8 @@ export async function mount(root, ctx) {
     /** Class sessions drawn as one block: key -> their bookings. */
     const sessions = new Map();
     const loading = M.observable(true);
+    // Only the first load hides the grid behind a skeleton; moving a day or a week keeps it on screen.
+    const firstLoad = M.observable(true);
     const error = M.observable('');
     const label = M.observable('');
     // What the grid shows, as rows for the keyed lists.
@@ -107,7 +109,8 @@ export async function mount(root, ctx) {
   <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 class="bk-note bk-loading-slot dm-loading-slot" data-bind-hidden="!firstLoad.value || !hasBookables.value">Loading…</div>
+<div class="bk-diary-wrap" data-part="grid" tabindex="-1" data-bind-hidden="firstLoad.value && hasBookables.value">
   <div class="bk-empty" data-bind-hidden="hasBookables.value"><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-on-click="addPerson"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>
@@ -127,7 +130,7 @@ export async function mount(root, ctx) {
     const cancelledBox = card.querySelector('[data-part="cancelled"]');
     scope(kit.helpPopovers(card, {position: 'bottom'}));
     const model = {
-        view, label, error, hasBookables, hasServices, heads, hours, cols, gridCols, gridH, steps, checklistOn,
+        view, label, error, firstLoad, hasBookables, hasServices, heads, hours, cols, gridCols, gridH, steps, checklistOn,
         hideChecklist() { store.set(CHECKLIST_KEY, true); checklistOn.value = false; },
         step(s) { s.go(); },
         addPerson: () => ctx.go('people', 'new'),
@@ -202,14 +205,15 @@ export async function mount(root, ctx) {
         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});
+            const slot = firstLoad.peek() && hasBookables.peek() ? card.querySelector('.bk-loading-slot') : null;
+            const list = await (slot ? kit.whileLoading(slot, api.bookings.list({from, to}), kit.SHAPES.table) : 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)}`;
+            if (my === seq && here()) error.value = `The diary could not load: ${errText(err)}`;
         } finally {
-            if (my === seq) loading.value = false;
+            if (my === seq) { loading.value = false; firstLoad.value = false; }
         }
     }
     ctx.onBookingsChanged = () => { if (here()) load(); };
@@ -330,6 +334,8 @@ export async function mount(root, ctx) {
     /** A class: who is in it, each opening their booking. */
     async function openSession(list) {
         if (!list.length) return;
+        const release = claim('session');
+        if (!release) return;
         const first = list[0];
         const s = wallClock(first.startAt, ctx.tz);
         const e = wallClock(first.endAt, ctx.tz);
@@ -337,6 +343,7 @@ export async function mount(root, ctx) {
         panel = await openPanel({
             title: `${first.serviceName}, ${s.time}-${e.time}`,
             size: 'sm',
+            ctx, release,
             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)}">

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

@@ -9,7 +9,7 @@
  */
 
 import {
-    STATUS_LABEL, STATUS_TONE, api, dateLabel, errText, esc, fmtDateTime, isClash, minutesLabel, openPanel, refreshBadge
+    STATUS_LABEL, STATUS_TONE, api, claim, dateLabel, errText, esc, fmtDateTime, isClash, minutesLabel, openPanel, refreshBadge
 } from '../lib/kit.js';
 import {atWallClock, isDate, toMinutes, wallClock} from '/plugins/booking/public/lib/time.js';
 import {answerRows, placesLabel, sourceLabel, withNames} from '../lib/details.js';
@@ -70,6 +70,8 @@ export async function setStatus(ctx, b, status) {
 
 /** Cancel, with a reason and whether to email the customer. Resolves the booking, or null. */
 export function cancelBooking(ctx, b) {
+    const release = claim(`cancel:${b.id}`);
+    if (!release) return Promise.resolve(null);
     return new Promise((resolve) => {
         const reason = M.observable('');
         const notify = M.observable(Boolean(b.email) && ctx.boot.mailReady);
@@ -78,6 +80,7 @@ export function cancelBooking(ctx, b) {
         openPanel({
             title: 'Cancel booking',
             size: 'sm',
+            ctx, release,
             model: {reason, notify},
             html: `<div class="bk-form">
   <p><strong>${esc(b.serviceName)}</strong> for <strong>${esc(b.name)}</strong><br><span class="bk-muted">${esc(timeRange(b, ctx.tz))}</span></p>
@@ -110,7 +113,11 @@ export function cancelBooking(ctx, b) {
                     }
                 }
             }
-        }).then(p => { panel = p; });
+        }).then(p => { panel = p; if (!p) resolve(null); }, (err) => {
+            // The panel could not be built (openPanel has released its claim and tidied up).
+            E.toast(`That could not open: ${errText(err)}`, {type: 'error'});
+            resolve(null);
+        });
     });
 }
 
@@ -207,6 +214,12 @@ function timePicker(ctx, {date, time = '', ignore = ''}) {
     return {
         el, load,
         value: () => ({date: dateIn.value, time: timeIn.value}),
+        /** Put a date and time back (a draft), and look up that day's free times. */
+        set({date: d, time: t} = {}) {
+            if (isDate(d)) dateIn.value = d;
+            timeIn.value = typeof t === 'string' ? t : '';
+            load();
+        },
         startAt() {
             if (!isDate(dateIn.value) || !Number.isFinite(toMinutes(timeIn.value))) return '';
             return atWallClock(dateIn.value, timeIn.value, ctx.tz).toISOString();
@@ -238,9 +251,12 @@ export async function newBooking(ctx, prefill = {}) {
         const ok = await E.confirm(!boot.bookables.length
             ? 'Add who or what can be booked first - a person or a room - then a service they provide.<br><br>Go to People &amp; rooms now?'
             : 'Add a service first - what can be booked, for how long, and with whom.<br><br>Go to Services now?');
-        if (ok) ctx.go(!boot.bookables.length ? 'people' : 'services', 'new');
+        if (ok && ctx.here()) ctx.go(!boot.bookables.length ? 'people' : 'services', 'new');
         return null;
     }
+    // One New booking at a time: a second click (or a click in the Diary) while it is open does nothing.
+    const release = claim('new-booking');
+    if (!release) return null;
     const fromBookable = prefill.bookableId ? services.filter(s => s.bookables.includes(prefill.bookableId)) : [];
     const f = {
         serviceId: M.observable(prefill.serviceId || fromBookable[0]?.id || (services.length === 1 ? services[0].id : '')),
@@ -253,7 +269,9 @@ export async function newBooking(ctx, prefill = {}) {
         notify: M.observable(boot.mailReady && boot.settings.sendConfirmation !== false),
         saving: M.observable(false)
     };
-    const contactId = prefill.contactId || '';
+    // The contact it was opened from; a restored draft brings back its own.
+    let contactId = prefill.contactId || '';
+    const contactName = M.observable(contactId ? (prefill.name || prefill.email || '') : '');
     const providers = M.observable([]);
     const updateProviders = () => {
         const svc = boot.services.find(s => s.id === f.serviceId.peek());
@@ -268,15 +286,37 @@ export async function newBooking(ctx, prefill = {}) {
     let panel = null;
     let made = null;
     let sections = null;
+    // Set in before(): put a service and a person back as if picked (the selects are drawn by hand).
+    let pickService = () => {};
+    const prefilled = Boolean(prefill.contactId || prefill.email || prefill.name || prefill.date || prefill.time || prefill.serviceId || prefill.bookableId);
 
     return new Promise((resolve) => {
         openPanel({
             title: 'New booking',
             size: 'md',
-            model: {...f, providers},
+            ctx, release,
+            model: {...f, providers, contactName},
             dirty: () => !made && (typed() !== opened || Boolean(sections?.dirty())),
-            html: `<div class="bk-form">
-  ${contactId ? `<p class="bk-note"><span data-icon="user" data-icon-size="13"></span> From your contact <strong>${esc(prefill.name || prefill.email)}</strong>.</p>` : ''}
+            // Extension sections (Booking Pro's questions) are not in the draft: the section contract has
+            // values() but no way to put values back. What Booking's own form holds is.
+            draft: {
+                key: 'new-booking', kind: 'a new booking', label: () => f.name.peek(), prefilled,
+                values: () => ({serviceId: f.serviceId.peek(), bookableId: f.bookableId.peek(), ...picker.value(),
+                    name: f.name.peek(), email: f.email.peek(), phone: f.phone.peek(), notes: f.notes.peek(),
+                    staffNote: f.staffNote.peek(), notify: f.notify.peek(), contactId, contactName: contactName.peek()}),
+                apply(v, el) {
+                    for (const k of ['name', 'email', 'phone', 'notes', 'staffNote']) if (typeof v[k] === 'string') f[k].value = v[k];
+                    if (typeof v.notify === 'boolean') f.notify.value = v.notify;
+                    contactId = typeof v.contactId === 'string' ? v.contactId : '';
+                    contactName.value = contactId ? String(v.contactName || '') : '';
+                    pickService(String(v.serviceId || ''), String(v.bookableId || ''));
+                    picker.set({date: v.date, time: v.time});
+                    const box = el.querySelector('[data-bool="notify"]');
+                    if (box) box.checked = f.notify.peek();
+                }
+            },
+            html: `<div class="bk-form bk-new-booking">
+  <p class="bk-note" data-bind-hidden="!contactName.value"><span data-icon="user" data-icon-size="13"></span> From your contact <strong data-bind-text="contactName.value"></strong>.</p>
   <div class="bk-grid">
     <div><label class="form-label">Service <span data-help-title="Service" data-help="What is being booked. Its length and buffers decide which times are free."></span></label>
       <select class="form-select" data-part="service"><option value="">Choose…</option>${services.map(s => `<option value="${esc(s.id)}">${esc(s.name)} (${esc(minutesLabel(s.duration))})${s.active === false ? ' - off' : ''}</option>`).join('')}</select></div>
@@ -319,6 +359,16 @@ export async function newBooking(ctx, prefill = {}) {
                     f.serviceId.value = svcSel.value; updateProviders(); drawWith(); picker.load({service: svcSel.value, with: withSel.value});
                     sections.serviceChanged(serviceNow());
                 });
+                pickService = (serviceId, bookableId) => {
+                    // A service that has gone (or been switched off) since is left unpicked.
+                    svcSel.value = serviceId;
+                    f.serviceId.value = svcSel.value;
+                    updateProviders();
+                    f.bookableId.value = providers.peek().some(p => p.id === bookableId) ? bookableId : '';
+                    drawWith();
+                    picker.load({service: svcSel.value, with: withSel.value});
+                    sections.serviceChanged(serviceNow());
+                };
                 withSel.addEventListener('change', () => { f.bookableId.value = withSel.value; picker.load({service: svcSel.value, with: withSel.value}); });
                 const box = el.querySelector('[data-bool="notify"]');
                 box.checked = f.notify.peek();
@@ -364,13 +414,19 @@ export async function newBooking(ctx, prefill = {}) {
                     }
                 }
             }
-        }).then(p => { panel = p; });
+        }).then(p => { panel = p; if (!p) resolve(null); }, (err) => {
+            // The panel could not be built (openPanel has released its claim and tidied up).
+            E.toast(`That could not open: ${errText(err)}`, {type: 'error'});
+            resolve(null);
+        });
     });
 }
 
 // ---- Move ------------------------------------------------------------------------
 
 export function moveBooking(ctx, b) {
+    const release = claim(`move:${b.id}`);
+    if (!release) return Promise.resolve(null);
     const svc = ctx.boot.services.find(s => s.id === b.serviceId);
     const list = svc ? ctx.boot.bookables.filter(x => svc.bookables.includes(x.id)) : ctx.boot.bookables.filter(x => x.id === b.bookableId);
     const at = wallClock(b.startAt, ctx.tz);
@@ -383,6 +439,7 @@ export function moveBooking(ctx, b) {
         openPanel({
             title: 'Move booking',
             size: 'md',
+            ctx, release,
             model: {withId, notify},
             dirty: () => !moved && (picker.value().date !== at.date || picker.value().time !== at.time || withId.peek() !== b.bookableId),
             html: `<div class="bk-form">
@@ -423,15 +480,22 @@ export function moveBooking(ctx, b) {
                     }
                 }
             }
-        }).then(p => { panel = p; });
+        }).then(p => { panel = p; if (!p) resolve(null); }, (err) => {
+            // The panel could not be built (openPanel has released its claim and tidied up).
+            E.toast(`That could not open: ${errText(err)}`, {type: 'error'});
+            resolve(null);
+        });
     });
 }
 
 // ---- One booking ------------------------------------------------------------------
 
 export async function openBooking(ctx, id) {
+    const release = claim(`booking:${id}`);
+    if (!release) return null;
     let b;
-    try { b = await api.bookings.get(id); } catch (err) { E.toast(`That booking could not be opened: ${errText(err)}`, {type: 'error'}); return; }
+    try { b = await api.bookings.get(id); } catch (err) { release(); if (ctx.here()) E.toast(`That booking could not be opened: ${errText(err)}`, {type: 'error'}); return null; }
+    if (!ctx.here()) { release(); return null; }
     const staffNote = M.observable(b.staffNote || '');
     const saved = M.observable(b.staffNote || '');
     const tone = `is-${STATUS_TONE[b.status] || 'muted'}`;
@@ -450,8 +514,14 @@ export async function openBooking(ctx, id) {
     panel = await openPanel({
         title: `${b.serviceName}: ${b.name}`,
         size: 'md',
+        ctx, release,
         model: {staffNote, saved},
         dirty: () => staffNote.peek() !== saved.peek(),
+        draft: {
+            key: `note:${b.id}`, label: `staff note for ${b.name}`, was: b.updatedAt || '',
+            values: () => ({staffNote: staffNote.peek()}),
+            apply: (v) => { if (typeof v.staffNote === 'string') staffNote.value = v.staffNote; }
+        },
         cleanup: () => sections?.destroy(),
         before: (el) => {
             sections = mountSections(el.querySelector('[data-part="ext"]'), 'bookingPanel', {boot: ctx.boot, booking: b,
@@ -499,9 +569,12 @@ export async function openBooking(ctx, id) {
 </div>`,
         methods: {
             async save() {
+                // What was sent is what is saved (the form is locked meanwhile, but say so plainly).
+                const sent = staffNote.peek();
                 try {
-                    await api.bookings.update(b.id, {staffNote: staffNote.peek()});
-                    saved.value = staffNote.peek();
+                    const next = await api.bookings.update(b.id, {staffNote: sent});
+                    saved.value = sent;
+                    panel?.rebase(next?.updatedAt);
                     E.toast('Note saved.', {type: 'success'});
                     changed(ctx);
                 } catch (err) {

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

@@ -7,7 +7,8 @@
  * weekly opening hours (several windows a day) and days off.
  */
 
-import {COLOUR_LABEL, KIND_LABEL, api, errText, esc, openPanel, wireRows} from '../lib/kit.js';
+import {COLOUR_LABEL, KIND_LABEL, allDrafts, api, ask, claim, dropDraft, errText, esc, openPanel, wireRows} from '../lib/kit.js';
+import {orphanDrafts, restoreText, usableDraft} from '../lib/drafts.js';
 import {cleanBookable} from '/plugins/booking/public/lib/clean.js';
 import {DAY_KEYS, isDate, toMinutes} from '/plugins/booking/public/lib/time.js';
 
@@ -143,7 +144,10 @@ export async function mount(root, ctx) {
         } catch (err) { E.toast(errText(err), {type: 'error', duration: 8000}); }
     }
 
-    async function edit(b) {
+    /** `initial`: a draft to start from (one of a person or room deleted since). */
+    async function edit(b, initial = null) {
+        const release = claim(`bookable:${b?.id || 'new'}`);
+        if (!release) return;
         const start = b || cleanBookable({name: ''}).data;
         const f = {};
         for (const k of ['name', 'kind', 'description', 'userId', 'email', 'colour']) f[k] = M.observable(start[k] ?? '');
@@ -169,6 +173,21 @@ export async function mount(root, ctx) {
         panel = await openPanel({
             title: b ? `Edit ${b.name}` : 'Add a person or room',
             size: 'lg',
+            ctx, release,
+            draft: {
+                key: `bookable:${b?.id || 'new'}`, label: () => f.name.peek() || b?.name || '', was: b?.updatedAt || '', initial,
+                values: () => ({f: Object.fromEntries(Object.entries(f).map(([k, o]) => [k, o.peek()])),
+                    bools: Object.fromEntries(Object.entries(bools).map(([k, o]) => [k, o.peek()])), hours: hoursOut(), daysOff: daysOffOut()}),
+                apply(v, el) {
+                    for (const [k, val] of Object.entries(v.f || {})) if (f[k] && typeof val === 'string') f[k].value = val;
+                    for (const [k, val] of Object.entries(v.bools || {})) if (bools[k] && typeof val === 'boolean') bools[k].value = val;
+                    for (const box of el.querySelectorAll('[data-bool]')) box.checked = bools[box.dataset.bool].peek();
+                    const hours = v.hours && typeof v.hours === 'object' ? v.hours : {};
+                    for (const d of days.peek()) d.windows.value = (Array.isArray(hours[d.id]) ? hours[d.id] : []).map(windowRow);
+                    daysOff.value = (Array.isArray(v.daysOff) ? v.daysOff : []).map(offRow);
+                    rescan();
+                }
+            },
             model: {
                 ...f, saving, isPerson, days, daysOff,
                 addWindow(day) {
@@ -269,11 +288,31 @@ export async function mount(root, ctx) {
                 }
             }
         });
+        if (panel && initial?.from) dropDraft(initial.from);
     }
 
     if (ctx.id && here()) {
         if (ctx.id === 'new') edit(null);
         else if (byId(ctx.id)) edit(byId(ctx.id));
         ctx.replaceHash('#/plugins/booking/people');
+    } else {
+        offerOrphan();
+    }
+
+    /** Changes left on a person or room deleted since: offered back as a new one, once asked. */
+    async function offerOrphan() {
+        const map = allDrafts();
+        // A new one's unsaved draft is offered first (when New is opened): starting the orphan as new
+        // now would write over it. The orphan waits until that one is saved or discarded.
+        if (usableDraft(map['bookable:new'])) return;
+        const [o] = orphanDrafts(map, 'bookable:', people.peek().map(x => x.id));
+        if (!o) return;
+        // Discard is the confirm button: Escape (Cancel) - and leaving - keep the work.
+        const discard = await ask(esc(restoreText('deleted', {label: o.draft.label, at: o.draft.at})),
+            {title: 'Unsaved changes', confirmText: 'Discard them', cancelText: 'Add them as new'}, ctx);
+        if (!here()) return;   // left while asked: the draft stays
+        if (discard) { dropDraft(o.key); return; }
+        // Its old key goes once the new panel holds it (edit drops `from` after opening).
+        edit(null, {...o.draft, from: o.key});
     }
 }

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

@@ -6,7 +6,8 @@
  * `#/plugins/booking/services/new` opens a new one; `/services/<id>` one.
  */
 
-import {COLOUR_LABEL, api, copy, errText, esc, minutesLabel, openPanel, wireRows} from '../lib/kit.js';
+import {COLOUR_LABEL, allDrafts, api, ask, claim, copy, dropDraft, errText, esc, minutesLabel, openPanel, wireRows} from '../lib/kit.js';
+import {orphanDrafts, restoreText, usableDraft} from '../lib/drafts.js';
 import {cleanService} from '/plugins/booking/public/lib/clean.js';
 import {mountSections} from '../lib/extension-sections.js';
 
@@ -102,11 +103,14 @@ export async function mount(root, ctx) {
         } catch (err) { E.toast(errText(err), {type: 'error', duration: 8000}); }
     }
 
-    async function edit(s) {
+    /** `initial`: a draft to start from (one of a service deleted since). */
+    async function edit(s, initial = null) {
         if (!s && !boot.bookables.length) {
-            if (await E.confirm('A service needs someone or something to provide it. Add a person or room first?')) ctx.go('people', 'new');
+            if (await E.confirm('A service needs someone or something to provide it. Add a person or room first?') && here()) ctx.go('people', 'new');
             return;
         }
+        const release = claim(`service:${s?.id || 'new'}`);
+        if (!release) return;
         const start = s || cleanService({name: '', bookables: boot.bookables.filter(b => b.active !== false).length === 1 ? [boot.bookables.find(b => b.active !== false).id] : []}).data;
         const f = {};
         for (const k of ['name', 'slug', 'description', 'duration', 'bufferBefore', 'bufferAfter', 'step', 'maxAdvanceDays', 'colour']) f[k] = M.observable(start[k] ?? '');
@@ -125,8 +129,26 @@ export async function mount(root, ctx) {
         panel = await openPanel({
             title: s ? `Edit ${s.name}` : 'New service',
             size: 'md',
+            ctx, release,
             model: {...f, saving, shortcode},
             dirty: () => snapshot() !== opened || Boolean(sections?.dirty()),
+            // Booking Pro's section (places, questions…) is not in the draft: the section contract has
+            // values() but no way to put them back. Booking's own fields, ticks and providers are.
+            draft: {
+                key: `service:${s?.id || 'new'}`, label: () => f.name.peek() || s?.name || '', was: s?.updatedAt || '', initial,
+                values: () => ({f: Object.fromEntries(Object.entries(f).map(([k, o]) => [k, o.peek()])),
+                    bools: Object.fromEntries(Object.entries(bools).map(([k, o]) => [k, o.peek()])), picked: [...picked]}),
+                apply(v, el) {
+                    for (const [k, val] of Object.entries(v.f || {})) if (f[k] && (typeof val === 'string' || typeof val === 'number')) f[k].value = val;
+                    for (const [k, val] of Object.entries(v.bools || {})) if (bools[k] && typeof val === 'boolean') bools[k].value = val;
+                    for (const box of el.querySelectorAll('[data-bool]')) box.checked = bools[box.dataset.bool].peek();
+                    // Providers deleted since are left out.
+                    picked.clear();
+                    const live = new Set(boot.bookables.map(b => b.id));
+                    for (const id of Array.isArray(v.picked) ? v.picked : []) if (live.has(id)) picked.add(id);
+                    for (const box of el.querySelectorAll('[data-part="picks"] input')) box.checked = picked.has(box.value);
+                }
+            },
             cleanup: () => sections?.destroy(),
             html: `<div class="bk-form">
   <div class="bk-grid">
@@ -212,11 +234,31 @@ export async function mount(root, ctx) {
                 }
             }
         });
+        if (panel && initial?.from) dropDraft(initial.from);
     }
 
     if (ctx.id && here()) {
         if (ctx.id === 'new') edit(null);
         else if (byId(ctx.id)) edit(byId(ctx.id));
         ctx.replaceHash('#/plugins/booking/services');
+    } else {
+        offerOrphan();
+    }
+
+    /** Changes left on a service that has been deleted since: offered back as a new one, once asked. */
+    async function offerOrphan() {
+        const map = allDrafts();
+        // A new one's unsaved draft is offered first (when New is opened): starting the orphan as new
+        // now would write over it. The orphan waits until that one is saved or discarded.
+        if (usableDraft(map['service:new'])) return;
+        const [o] = orphanDrafts(map, 'service:', services.peek().map(x => x.id));
+        if (!o) return;
+        // Discard is the confirm button: Escape (Cancel) - and leaving - keep the work.
+        const discard = await ask(esc(restoreText('deleted', {label: o.draft.label, at: o.draft.at})),
+            {title: 'Unsaved changes', confirmText: 'Discard them', cancelText: 'Start a new service'}, ctx);
+        if (!here()) return;   // left while asked: the draft stays
+        if (discard) { dropDraft(o.key); return; }
+        // Its old key goes once the new panel holds it (edit drops `from` after opening).
+        edit(null, {...o.draft, from: o.key});
     }
 }

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

@@ -5,7 +5,8 @@
  * per-field messages shown beside the field.
  */
 
-import {api, copy, errText, esc, openPanel, store} from '../lib/kit.js';
+import {api, claim, copy, errText, esc, openPanel, store} from '../lib/kit.js';
+import {fingerprint} from '../lib/drafts.js';
 import {isDate} from '/plugins/booking/public/lib/time.js';
 
 const SECTIONS = [
@@ -36,8 +37,12 @@ function zones(current) {
 
 export async function openSettings(ctx, section = 'page') {
     store.set('booking.settings-seen', true);
+    // One settings panel: the cog clicked twice while they load opens it once.
+    const release = claim('settings');
+    if (!release) return;
     let info;
-    try { info = await api.settings.get(); } catch (err) { E.toast(`Settings did not load: ${errText(err)}`, {type: 'error'}); return; }
+    try { info = await api.settings.get(); } catch (err) { release(); if (ctx.here()) E.toast(`Settings did not load: ${errText(err)}`, {type: 'error'}); return; }
+    if (!ctx.here()) { release(); return; }
     const s = info.settings;
     const f = {};
     for (const [k, v] of Object.entries(s)) if (k !== 'closures') f[k] = M.observable(v);
@@ -149,7 +154,22 @@ export async function openSettings(ctx, section = 'page') {
         size: 'md',
         html,
         model,
+        ctx, release,
         dirty: () => snapshot() !== opened,
+        // Settings carry no updatedAt: `was` is a fingerprint of them as loaded, so a save made
+        // elsewhere since shows up as a change.
+        draft: {
+            key: 'settings', label: 'Booking settings', was: fingerprint(s),
+            values: () => ({f: Object.fromEntries(Object.entries(f).map(([k, o]) => [k, o.peek()])), closures: closuresOut()}),
+            apply(v, el) {
+                for (const [k, val] of Object.entries(v.f || {})) {
+                    if (f[k] && ['string', 'number', 'boolean'].includes(typeof val) && typeof val === typeof f[k].peek()) f[k].value = val;
+                    else if (f[k] && typeof f[k].peek() === 'number' && typeof val === 'string') f[k].value = val;   // a number typed is text
+                }
+                for (const box of el.querySelectorAll('[data-bool]')) box.checked = Boolean(f[box.dataset.bool].peek());
+                closures.value = (Array.isArray(v.closures) ? v.closures : []).map(closureRow);
+            }
+        },
         before: (el) => {
             for (const box of el.querySelectorAll('[data-bool]')) {
                 box.checked = Boolean(f[box.dataset.bool].peek());

package/plugins/booking/plugin.json

@@ -1,11 +1,11 @@
 {
   "name": "booking",
   "displayName": "Booking",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "tier": "free",
   "description": "Let people book appointments with you or your team, and rooms or equipment, from a booking page on your site. Opening hours, days off and buffers; confirmation and reminder emails with a link to change or cancel; a diary in the admin. Book straight from a contact or an email.",
   "author": "Domma CMS",
-  "date": "2026-10-13",
+  "date": "2026-10-15",
   "icon": "clipboard-check",
   "uses": {
     "contacts": "Customers become contacts; Book… on a contact and a Bookings panel on the contact card",