Room booking

/**
 * Room booking - a real CMS collection, read and written from the page.
 *
 * Three Domma CMS collections do all the storage: `rooms` (published read-only
 * over the API), `bookings` (public read *and* public create), and the
 * reference between them, which the CMS validates on write. There is no
 * back-end code behind this demo. There is no endpoint written for it. The
 * schemas say what may be read and by whom, and this file talks to the result.
 *
 * The reactive part is the interesting part: the room, the date and the
 * bookings that came back are the only state here. Everything the page shows -
 * which hours are free, how long you may book for, what it will cost, whether
 * the form may be submitted - is a `computed` over those, so no piece of this
 * can show you an answer that disagrees with another piece.
 */

import {
    observable, observableArray, computed, effect, applyBindings
} from '../domma-reactive.esm.js';

import {collection, money, buildQuery} from '../cms.js';

const rooms = collection('rooms');
const bookings = collection('bookings');

/** Today, as the `<input type="date">` wants it. */
function today() {
    return new Date().toISOString().slice(0, 10);
}

/** 9 → "09:00" */
function clock(hour) {
    return `${String(hour).padStart(2, '0')}:00`;
}

export async function mount(element) {
    // ---------------------------------------------------------------- state
    // Everything that is genuinely input. Six cells; the rest is derived.
    const roomList = observableArray([]);
    const roomId = observable('');
    const date = observable(today());
    const dayBookings = observableArray([]);
    const selectedHour = observable(null);
    const loading = observable(false);
    const error = observable('');
    const lastQuery = observable('');

    const hours = observable(1);
    const people = observable(2);
    const name = observable('');
    const email = observable('');
    const notes = observable('');
    const naming = observable(false);
    const saving = observable(false);
    const confirmation = observable(null);

    // ------------------------------------------------------------- derived
    const room = computed(() => roomList.value.find(r => r.id === roomId.value) || null);

    const features = computed(() => String(room.value?.features || '')
        .split(',')
        .map(s => s.trim())
        .filter(Boolean)
        .map((label, id) => ({id, label})));

    /**
     * The hours the room is open, each marked with whether something already
     * covers it.
     *
     * This reads `room` and `dayBookings` and nothing else, so it recomputes
     * when the room changes or when the diary comes back from the API - and
     * sits still when you type your name into the form. The list is rebuilt
     * wholesale on purpose: `data-each="slots key=hour"` reconciles by key, so
     * the buttons that are still there keep their actual DOM nodes.
     */
    const slots = computed(() => {
        const current = room.value;
        if (!current) return [];

        const taken = new Set();
        for (const booking of dayBookings.value) {
            if (booking.status === 'cancelled') continue;
            for (let h = 0; h < Number(booking.hours || 1); h++) {
                taken.add(Number(booking.startHour) + h);
            }
        }

        const out = [];
        for (let hour = Number(current.openHour); hour < Number(current.closeHour); hour++) {
            out.push({hour, label: clock(hour), taken: taken.has(hour)});
        }
        return out;
    });

    /** How many consecutive free hours start at the chosen one, capped at four. */
    const maxHours = computed(() => {
        if (selectedHour.value === null) return 0;
        const free = new Map(slots.value.map(s => [s.hour, !s.taken]));
        let run = 0;
        while (run < 4 && free.get(selectedHour.value + run)) run++;
        return run;
    });

    const durations = computed(() => Array.from({length: maxHours.value}, (_, i) => ({
        hours: i + 1,
        label: i === 0 ? '1 hour' : `${i + 1} hours`
    })));

    const total = computed(() => Number(room.value?.pricePerHour || 0) * Number(hours.value || 0));

    /**
     * Validation as derived state rather than as a step someone remembers to
     * run. The list of problems is a `computed`; the button's disabled state is
     * a `computed` over that. There is no "validate()" to call at the wrong
     * moment, and no way for the message list and the button to disagree.
     */
    const problems = computed(() => {
        const out = [];
        if (name.value.trim().length < 2) out.push('We need a name to put the booking under.');
        if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value)) out.push('That email address does not look right.');
        if (Number(people.value) < 1) out.push('One person minimum.');
        if (room.value && Number(people.value) > Number(room.value.capacity)) {
            out.push(`${room.value.name} holds ${room.value.capacity}. Try a bigger room.`);
        }
        if (Number(hours.value) > maxHours.value) out.push('That runs into a booking someone else has.');
        return out.map((text, id) => ({id, text}));
    });

    const ready = computed(() => problems.value.length === 0 && !saving.value);

    const diary = computed(() => [...dayBookings.value]
        .sort((a, b) => a.startHour - b.startHour)
        .map(b => ({
            id: b.id,
            when: `${clock(b.startHour)} - ${clock(Number(b.startHour) + Number(b.hours))}`,
            // No name here, and not by omission: `name` and `email` are absent
            // from the collection's read allow-list, so the API never sent them.
            who: `${b.people} ${Number(b.people) === 1 ? 'person' : 'people'}`,
            status: b.status
        })));

    // Labels, so the template holds no formatting logic of its own.
    const priceLabel = computed(() => `${money(room.value?.pricePerHour || 0)} an hour`);
    const dayLabel = computed(() => window.D(date.value).format('dddd D MMMM'));
    const freeLabel = computed(() => {
        const free = slots.value.filter(s => !s.taken).length;
        return `${free} of ${slots.value.length} hours free`;
    });
    const chosenLabel = computed(() => selectedHour.value === null
        ? 'Your booking'
        : `${clock(selectedHour.value)} in the ${room.value?.name}`);
    const totalLabel = computed(() => `${hours.value} × ${money(room.value?.pricePerHour || 0)} = ${money(total.value)}`);
    const submitLabel = computed(() => (saving.value ? 'Booking…' : `Book ${hours.value === 1 ? 'the hour' : `${hours.value} hours`}`));

    /**
     * The only place this app talks to the server, and it is an effect.
     *
     * `roomId` and `date` are read synchronously, before the first `await` -
     * that is what makes them this effect's dependencies. Change either and the
     * diary is refetched; change anything else and nothing happens here.
     *
     * The request is filtered server-side through the CMS filter DSL, so the
     * page asks for one room on one day rather than fetching the diary and
     * sifting it in the browser.
     */
    let requestToken = 0;

    effect(() => {
        const currentRoom = roomId.value;
        const currentDate = date.value;
        if (!currentRoom || !currentDate) return;

        const query = {filter: {roomId: currentRoom, date: currentDate}, limit: 100, sort: 'startHour', order: 'asc'};
        lastQuery.value = `GET /api/v1/bookings${buildQuery(query)}`;

        // A stale response must never overwrite a fresh one - the room can
        // change while a request is in flight.
        const token = ++requestToken;
        loading.value = true;
        error.value = '';

        bookings.list(query)
            .then(({items}) => {
                if (token !== requestToken) return;
                dayBookings.set(items);
                selectedHour.value = null;
            })
            .catch(err => {
                if (token !== requestToken) return;
                error.value = `Could not load the diary: ${err.message}`;
            })
            .finally(() => {
                if (token === requestToken) loading.value = false;
            });
    });

    // Keep the requested length inside what is actually free.
    effect(() => {
        if (hours.value > maxHours.value) hours.value = Math.max(1, maxHours.value);
    });

    /**
     * Writing. `POST /api/v1/bookings` with the fields the schema declares -
     * the CMS validates the required ones, checks that `roomId` really is a
     * room, and stores the entry. The new booking is pushed into the same
     * array the diary and the slot grid read, so both update from one write.
     */
    async function save() {
        if (!ready.value) return;
        saving.value = true;
        error.value = '';

        try {
            const created = await bookings.create({
                roomId: roomId.value,
                date: date.value,
                startHour: selectedHour.value,
                hours: Number(hours.value),
                name: name.value.trim(),
                email: email.value.trim(),
                people: Number(people.value),
                notes: notes.value.trim(),
                status: 'pending'
            });

            dayBookings.push({...created, id: created.id});

            confirmation.value = {
                line: `${clock(selectedHour.value)} for ${hours.value === 1 ? 'an hour' : `${hours.value} hours`} `
                    + `in the ${room.value.name}, ${dayLabel.value}. ${money(total.value)} on the day.`
            };

            selectedHour.value = null;
            notes.value = '';
            window.E.toast('Booking saved to the CMS.', {type: 'success'});
        } catch (err) {
            error.value = err.message || 'The booking was refused.';
            window.E.toast(error.value, {type: 'error'});
        } finally {
            saving.value = false;
        }
    }

    // ------------------------------------------------------------ view model
    const app = {
        rooms: roomList, roomId, date, loading, error, lastQuery,
        room, features, slots, durations, diary, problems, ready,
        selectedHour, hours, people, name, email, notes, naming, confirmation,
        priceLabel, dayLabel, freeLabel, chosenLabel, totalLabel, submitLabel,

        choose(slot) {
            if (slot.taken) return;
            selectedHour.value = slot.hour;
            hours.value = 1;
            naming.value = name.value.trim() === '';   // caret into the first empty field
            confirmation.value = null;
        },

        // A DOM event fires outside every effect, which is why an expression may
        // call a method here and nowhere else. Returning false calls
        // preventDefault(), so the form never navigates.
        submit() {
            save();
            return false;
        }
    };

    applyBindings(app, element);

    // The room list arrives after the bindings are live, which is the normal
    // case rather than a special one: `data-options` rebuilds and `data-model`
    // re-applies the selection it was waiting for.
    try {
        const [{items: roomItems}, {items: soonest}] = await Promise.all([
            rooms.list({limit: 50, sort: 'name', order: 'asc'}),
            // The next day that already has something in the diary, so the demo
            // opens on a day with something to see. `_gte` is the same filter
            // DSL the search above uses.
            bookings.list({filter: {date_gte: today()}, sort: 'date', order: 'asc', limit: 1})
        ]);

        roomList.set(roomItems);

        const opening = soonest[0];
        roomId.value = opening?.roomId || roomItems[0]?.id || '';
        if (opening?.date) date.value = opening.date;
    } catch (err) {
        error.value = `Could not load the rooms: ${err.message}`;
    }
}