@things-factory/work-shift 10.1.248 → 10.1.249

package/dist-client/pages/work-shift.js

@@ -0,0 +1,1144 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/list-state/ox-list-state.js';
+import '@operato/list-state/ox-page-state.js';
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup';
+import { PageView } from '@operato/shell';
+import { ButtonStyles, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { revisionText as rt, revisionDate } from '@things-factory/ops-master/dist-client/pages/master/revision-comparison.js';
+import { localDateTime, isoFromLocal } from '@things-factory/ops-master/dist-client/pages/master/revision-view.js';
+import { clockOf, coverageProblems, timelineOf } from '../shift-coverage';
+import { daysLabel, daysOf, daysValue, draftIssues, groupOverlaps, lengthOf, nextShift, settle, shiftsContent, weekGroups, WEEK } from '../shift-editing';
+import { isBaseline, placeRevisions, reasonOf, timeRange } from '../shift-revisions';
+const DAY_MINUTES = 24 * 60;
+const t = (key, params = {}) => String(i18next.t(key, params));
+/**
+ * 근무 교대 — the shift arrangement in force, what is about to change, and what it was before.
+ *
+ * One arrangement is in force at a time. Changing it means writing a whole new arrangement with a reason and
+ * the moment it takes effect; where the site requires approval, the change goes through ops-master's approval
+ * and takes effect once approved. Work already recorded keeps the shift it was recorded under.
+ *
+ * The rules this screen applies - weekday groups, the end day of a shift, what blocks a save, where each
+ * revision belongs - live in shift-editing.ts, shift-revisions.ts and shift-coverage.ts, with tests.
+ */
+let WorkShift = class WorkShift extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+        this.error = null;
+        this.approvals = {};
+        this.dirty = false;
+        this.busy = false;
+        this.saveError = '';
+        /** A save was tried: from then on every blocking problem is shown, not only the ones a person touched. */
+        this.tried = false;
+        /* ── pieces ────────────────────────────────────────────────────────── */
+        this.dayWord = (offset) => rt('day-offset-' + offset);
+    }
+    static { this.styles = [
+        FormFieldStyles,
+        ButtonStyles,
+        DocumentPageStyles,
+        ScrollbarStyles,
+        css `
+      .arrangement {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large);
+      }
+
+      /* ── the day bar ─────────────────────────────────────────────── */
+      .day-groups {
+        display: grid;
+        grid-template-columns: max-content minmax(0, 1fr);
+        gap: var(--spacing-large) var(--spacing-large);
+        align-items: start;
+      }
+      .day-label {
+        padding-top: 7px;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small);
+        font-weight: 600;
+        white-space: nowrap;
+      }
+      .day-none {
+        padding-top: 7px;
+        color: var(--ui-muted);
+      }
+      .bar {
+        position: relative;
+        height: 32px;
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        background: var(--md-sys-color-surface-container-low);
+        overflow: hidden;
+      }
+      .piece {
+        position: absolute;
+        inset-block: 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+        min-width: 0;
+        padding-inline: var(--spacing-medium);
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: var(--ui-t-small);
+      }
+      .piece[data-kind='shift'] {
+        border-inline-start: 3px solid var(--ui-accent, var(--md-sys-color-primary));
+        border-inline-end: 1px solid var(--md-sys-color-surface-container-lowest);
+        background: color-mix(in srgb, var(--ui-accent, var(--md-sys-color-primary)) 18%, var(--md-sys-color-surface-container-lowest));
+        color: var(--ui-ink);
+      }
+      .piece[data-kind='shift'] strong {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .piece .time {
+        color: var(--ui-muted);
+        font-variant-numeric: tabular-nums;
+      }
+      .piece[data-kind='gap'] {
+        background: repeating-linear-gradient(
+          -45deg,
+          transparent 0 5px,
+          color-mix(in srgb, var(--ui-warn) 35%, transparent) 5px 6px
+        );
+      }
+      .piece[data-kind='overlap'] {
+        background: repeating-linear-gradient(
+          -45deg,
+          color-mix(in srgb, var(--ui-crit) 30%, transparent) 0 4px,
+          transparent 4px 7px
+        );
+      }
+      .midnight {
+        position: absolute;
+        inset-block: 0;
+        border-inline-start: 1px dashed var(--ui-muted);
+      }
+      .axis {
+        position: relative;
+        height: 16px;
+        margin-top: 2px;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-micro);
+        font-variant-numeric: tabular-nums;
+      }
+      .axis span {
+        position: absolute;
+        white-space: nowrap;
+        transform: translateX(-50%);
+      }
+      .axis span:first-child {
+        transform: none;
+      }
+      .axis span:last-child {
+        transform: translateX(-100%);
+      }
+
+      .findings {
+        display: grid;
+        gap: var(--spacing-small);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .findings li {
+        display: flex;
+        gap: var(--spacing-medium);
+        font-variant-numeric: tabular-nums;
+      }
+      .findings li::before {
+        content: '';
+        flex: none;
+        width: 3px;
+        border-radius: 2px;
+        background: var(--ui-warn);
+      }
+      .findings li[data-kind='overlap']::before,
+      .findings li[data-kind='error']::before {
+        background: var(--ui-crit);
+      }
+      .findings .why {
+        display: block;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small);
+      }
+
+      /* ── tables: the grid's look (page-standard §2-1) ───────────────── */
+      .table-scroll {
+        overflow-x: auto;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--md-sys-typescale-label-large-size, 14px);
+      }
+      th {
+        padding: var(--spacing-small) var(--spacing-medium);
+        border-top: 2px solid var(--md-sys-color-primary);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-primary);
+        font-weight: 500;
+        text-align: start;
+        white-space: nowrap;
+      }
+      td {
+        padding: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        vertical-align: top;
+      }
+      td.figure,
+      .figure {
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+      td.reason {
+        min-width: 16em;
+      }
+      td.actions {
+        width: 1%;
+        white-space: nowrap;
+      }
+      td.actions > div {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--spacing-small);
+      }
+      .muted {
+        color: var(--ui-muted);
+      }
+      .shift-lines {
+        display: grid;
+        gap: 2px;
+      }
+      .shift-lines > div {
+        white-space: nowrap;
+      }
+      .shift-lines .figure {
+        color: var(--ui-muted);
+      }
+      .state {
+        display: inline-block;
+        padding: 1px var(--spacing-medium);
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        background: var(--md-sys-color-surface-container-high);
+        font-size: var(--ui-t-micro);
+        font-weight: 600;
+        white-space: nowrap;
+      }
+      .state[data-state='current'] {
+        background: color-mix(in srgb, var(--ui-good) 18%, transparent);
+      }
+      .state[data-state='scheduled'],
+      .state[data-state='pending'],
+      .state[data-state='approved'] {
+        background: color-mix(in srgb, var(--ui-info, var(--md-sys-color-primary)) 18%, transparent);
+      }
+      .state[data-state='rejected'] {
+        background: color-mix(in srgb, var(--ui-crit) 16%, transparent);
+      }
+      tr.detail > td {
+        background: var(--md-sys-color-surface-container-lowest);
+      }
+
+      /* ── the editor ──────────────────────────────────────────────── */
+      .shift-rows {
+        container-type: inline-size;
+        display: grid;
+        margin-bottom: var(--spacing-large);
+      }
+      .shift-row {
+        display: grid;
+        grid-template-columns:
+          minmax(110px, 1fr) minmax(184px, 1.1fr) minmax(190px, 1.1fr) minmax(392px, max-content)
+          minmax(110px, 1fr) max-content;
+        gap: var(--spacing-medium) var(--spacing-large);
+        align-items: start;
+        padding: var(--spacing-medium) 0;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      .shift-row.head {
+        padding-block: var(--spacing-small);
+        border-top: 2px solid var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
+        font-weight: 500;
+      }
+      .shift-row input:not([type='checkbox']),
+      .shift-row select {
+        width: 100%;
+        min-width: 0;
+      }
+      .cell {
+        display: grid;
+        gap: var(--spacing-small);
+        min-width: 0;
+      }
+      .cell-label {
+        display: none;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-micro);
+      }
+      .clock {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+      .clock select {
+        flex: none;
+        width: 72px !important;
+      }
+      .clock input {
+        flex: 1;
+      }
+      .derived {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+      .row-issues {
+        grid-column: 1 / -1;
+        margin: 0;
+        color: var(--ui-crit);
+        font-size: var(--ui-t-small);
+      }
+      .shift-row input[aria-invalid='true'] {
+        border-color: var(--ui-crit);
+      }
+      ox-input-select-buttons {
+        --md-chip-set-gap: 4px;
+      }
+      @container (max-width: 1080px) {
+        .shift-row {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        }
+        .shift-row.head {
+          display: none;
+        }
+        .cell-label {
+          display: block;
+        }
+        .cell.name,
+        .cell.days,
+        .cell.note {
+          grid-column: 1 / -1;
+        }
+        .cell.remove {
+          grid-column: 1 / -1;
+          justify-items: start;
+        }
+      }
+      @container (max-width: 480px) {
+        .shift-row {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+
+      .form-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+        gap: var(--spacing-large);
+      }
+      .field {
+        display: grid;
+        align-content: start;
+        gap: var(--spacing-small);
+        min-width: 0;
+      }
+      .field > span:first-child {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-micro);
+      }
+      .field input,
+      .field select {
+        width: 100%;
+      }
+      .field .error {
+        color: var(--ui-crit);
+        font-size: var(--ui-t-small);
+      }
+      .when {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-medium);
+      }
+      .when input {
+        flex: 1;
+        min-width: 200px;
+      }
+      .alert {
+        margin: 0;
+        padding: var(--spacing-medium) var(--spacing-large);
+        border-inline-start: 3px solid var(--ui-crit);
+        background: color-mix(in srgb, var(--ui-crit) 8%, transparent);
+      }
+
+      @media (max-width: 600px) {
+        .day-groups {
+          grid-template-columns: minmax(0, 1fr);
+          gap: var(--spacing-small);
+        }
+        .piece .time {
+          display: none;
+        }
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            title: t('title.work-shift'),
+            frame: 'document',
+            help: 'page/work-shift',
+            actions: this.actions()
+        };
+    }
+    actions() {
+        if (!this.overview || this.error)
+            return [];
+        if (!this.draft) {
+            return [{ title: t('button.change-shifts'), icon: 'edit', emphasis: { raised: true }, action: () => this.begin() }];
+        }
+        const approval = this.overview.approvalRequired;
+        return [
+            { title: t('button.cancel'), action: () => this.close() },
+            ...(approval ? [{ title: rt('save-draft'), action: () => this.saveDraft() }] : []),
+            {
+                title: approval ? rt('request-approval') : t('button.save'),
+                icon: approval ? 'send' : 'save',
+                emphasis: { raised: true },
+                action: () => this.commit()
+            }
+        ];
+    }
+    async pageUpdated(changes) {
+        if (this.active && changes.active && !this.draft)
+            await this.load();
+    }
+    /* ── data ──────────────────────────────────────────────────────────── */
+    async load() {
+        this.loading = true;
+        this.error = null;
+        try {
+            const result = await client.query({
+                query: gql `
+          query {
+            workShiftRevisionOverview
+          }
+        `,
+                fetchPolicy: 'no-cache'
+            });
+            if (result.errors?.length)
+                throw result.errors[0];
+            this.overview = result.data.workShiftRevisionOverview;
+            this.approvals = await this.readApprovals(this.overview.revisions);
+        }
+        catch (e) {
+            this.error = e;
+        }
+        finally {
+            this.loading = false;
+            this.updateContext();
+        }
+    }
+    /** Approval states come from ops-master's approval flow, one revision at a time. */
+    async readApprovals(revisions) {
+        const approvals = {};
+        for (const row of revisions.filter(r => r.activityInstanceId)) {
+            let promise;
+            document.dispatchEvent(new CustomEvent('master-change-status', {
+                detail: { activityInstanceId: row.activityInstanceId, respondWith: (p) => (promise = p) }
+            }));
+            if (promise)
+                approvals[row.id] = await promise.catch(() => ({ state: 'unknown' }));
+        }
+        return approvals;
+    }
+    get placed() {
+        return placeRevisions(this.overview ?? { revisions: [], schedule: [] }, this.approvals);
+    }
+    /* ── editing ───────────────────────────────────────────────────────── */
+    begin(from) {
+        const base = from ?? this.placed.current?.row;
+        const shifts = base?.shifts ?? this.overview.legacyShifts ?? [];
+        this.draft = {
+            description: base?.description ?? '',
+            timezone: base?.timezone ?? this.overview.timezone,
+            shifts: shifts.length ? shifts.map(shift => settle({ ...shift })) : [nextShift([])],
+            effectiveMode: 'now',
+            effectiveFrom: new Date().toISOString(),
+            reason: ''
+        };
+        this.enterEditor();
+    }
+    resume(row) {
+        this.draft = {
+            id: row.id,
+            editGeneration: row.editGeneration,
+            revisionNumber: row.revisionNumber,
+            description: row.description ?? '',
+            timezone: row.timezone ?? this.overview.timezone,
+            shifts: (row.shifts ?? []).map(shift => settle({ ...shift })),
+            effectiveMode: 'at',
+            effectiveFrom: row.effectiveFrom ?? new Date().toISOString(),
+            reason: row.reason ?? ''
+        };
+        this.enterEditor();
+    }
+    enterEditor() {
+        this.dirty = false;
+        this.tried = false;
+        this.saveError = '';
+        this.updateContext();
+        /* The document frame scrolls the page element itself. */
+        this.scrollTo({ top: 0 });
+    }
+    async close() {
+        if (this.busy)
+            return;
+        if (this.dirty &&
+            !(await OxPrompt.open({
+                type: 'warning',
+                title: rt('discard-question'),
+                confirmButton: { text: rt('discard'), destructive: true },
+                cancelButton: { text: rt('keep-editing') }
+            })))
+            return;
+        this.draft = undefined;
+        this.dirty = false;
+        this.updateContext();
+        await this.load();
+    }
+    change(patch) {
+        this.draft = { ...this.draft, ...patch };
+        this.dirty = true;
+    }
+    changeShift(index, patch) {
+        this.change({ shifts: this.draft.shifts.map((s, i) => (i === index ? settle({ ...s, ...patch }) : s)) });
+    }
+    content() {
+        const { description, timezone, shifts, effectiveMode, effectiveFrom, reason } = this.draft;
+        return {
+            description,
+            timezone,
+            shifts: shiftsContent(shifts),
+            effectiveFrom: effectiveMode === 'now' ? new Date().toISOString() : effectiveFrom,
+            reason: reason.trim()
+        };
+    }
+    async run(work) {
+        if (this.busy)
+            return undefined;
+        this.busy = true;
+        this.saveError = '';
+        try {
+            return await work();
+        }
+        catch (e) {
+            /* The GraphQL client already announces server refusals and network failures; say only what it does not. */
+            if (!(e?.reported || e?.graphQLErrors?.length || e?.networkError))
+                this.saveError = e?.message ?? String(e);
+            return undefined;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async mutate(mutation, variables, field) {
+        const response = await client.mutate({ mutation, variables });
+        if (response.errors?.length)
+            throw Object.assign(new Error(response.errors[0].message), { reported: true });
+        return response.data[field];
+    }
+    /** Saves the editor as a draft and keeps it open. Returns false when it did not save. */
+    async saveDraft(quiet = false) {
+        this.tried = true;
+        if (draftIssues(this.draft).blocking)
+            return false;
+        const saved = await this.run(async () => {
+            const draft = this.draft;
+            const row = draft.id
+                ? await this.mutate(gql `
+              mutation ($revisionId: String!, $editGeneration: Int!, $content: Object!) {
+                editWorkShiftDraft(revisionId: $revisionId, editGeneration: $editGeneration, content: $content)
+              }
+            `, { revisionId: draft.id, editGeneration: draft.editGeneration, content: this.content() }, 'editWorkShiftDraft')
+                : await this.mutate(gql `
+              mutation ($content: Object!) {
+                createWorkShiftDraft(content: $content)
+              }
+            `, { content: this.content() }, 'createWorkShiftDraft');
+            this.draft = { ...draft, id: row.id, editGeneration: row.editGeneration, revisionNumber: row.revisionNumber };
+            this.dirty = false;
+            return true;
+        });
+        if (saved && !quiet)
+            notify({ message: rt('saved') });
+        return !!saved;
+    }
+    /** Puts the change into effect, or asks for approval where the site requires it. */
+    async commit() {
+        this.tried = true;
+        if (draftIssues(this.draft).blocking)
+            return;
+        const approval = this.overview.approvalRequired;
+        if (approval && (this.dirty || !this.draft.id) && !(await this.saveDraft(true)))
+            return;
+        const done = await this.run(async () => {
+            const draft = this.draft;
+            if (approval) {
+                let promise;
+                document.dispatchEvent(new CustomEvent('master-change-approval', {
+                    detail: {
+                        axis: 'workShift',
+                        revisionId: draft.id,
+                        editGeneration: draft.editGeneration,
+                        respondWith: (p) => (promise = p)
+                    }
+                }));
+                if (!promise)
+                    throw new Error(rt('approval-unavailable'));
+                await promise;
+            }
+            else {
+                await this.mutate(gql `
+            mutation ($revisionId: String, $editGeneration: Int, $content: Object!) {
+              saveAndPublishWorkShift(revisionId: $revisionId, editGeneration: $editGeneration, content: $content)
+            }
+          `, { revisionId: draft.id, editGeneration: draft.editGeneration, content: this.content() }, 'saveAndPublishWorkShift');
+            }
+            return true;
+        });
+        if (!done)
+            return;
+        notify({ message: rt(approval ? 'submitted' : 'published') });
+        this.draft = undefined;
+        this.dirty = false;
+        this.updateContext();
+        await this.load();
+    }
+    clock(minute) {
+        return minute >= DAY_MINUTES
+            ? `${this.dayWord(1)} ${clockOf(minute - DAY_MINUTES)}`
+            : minute < 0
+                ? `${this.dayWord(-1)} ${clockOf(minute + DAY_MINUTES)}`
+                : clockOf(minute);
+    }
+    span(from, to) {
+        return `${this.clock(from)} – ${this.clock(to)}`;
+    }
+    hours(minutes) {
+        if (minutes === undefined)
+            return '';
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        return m ? t('text.hours-minutes', { h, m }) : t('text.hours', { h });
+    }
+    daysText(days) {
+        return daysLabel(days, day => rt('weekday-' + day), rt('every-day'));
+    }
+    bar(shifts) {
+        const line = timelineOf(shifts);
+        if (!line)
+            return html `<div class="day-none">${t('text.no-shift-on-these-days')}</div>`;
+        const label = (piece) => piece.kind === 'shift'
+            ? `${piece.names[0]} ${this.span(piece.fromMinute, piece.toMinute)}`
+            : piece.kind === 'gap'
+                ? t('text.shift-gap-span', { span: this.span(piece.fromMinute, piece.toMinute) })
+                : t('text.shift-overlap-span', { span: this.span(piece.fromMinute, piece.toMinute), first: piece.names[0], second: piece.names[1] });
+        return html `<div>
+      <div class="bar" role="img" aria-label=${line.pieces.map(label).join(', ')}>
+        ${line.midnights.map(left => html `<div class="midnight" style="left:${left}%"></div>`)}
+        ${line.pieces.map(piece => html `<div class="piece" data-kind=${piece.kind} style="left:${piece.left}%;width:${piece.width}%" title=${label(piece)}>
+              ${piece.kind === 'shift'
+            ? html `<strong>${piece.names[0]}</strong
+                    ><span class="time">${clockOf(((piece.fromMinute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}–${clockOf(((piece.toMinute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}</span>`
+            : nothing}
+            </div>`)}
+      </div>
+      <div class="axis" aria-hidden="true">
+        ${line.ticks.map((minute, i) => html `<span style="left:${i * 25}%">${clockOf(((minute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}</span>`)}
+      </div>
+    </div>`;
+    }
+    /**
+     * The day bars of an arrangement, one per group of weekdays that run the same shifts, and what is wrong with them.
+     * The editor passes the week's overlaps: they include a Friday night running into Saturday, which no single
+     * day's bar shows, and the server refuses every one of them.
+     */
+    timeline(shifts, weekOverlaps) {
+        const groups = weekGroups(shifts);
+        const findings = groups.flatMap(group => coverageProblems(group.shifts)
+            .filter(problem => problem.kind === 'gap' || (problem.kind === 'overlap' && !weekOverlaps))
+            .map(problem => ({ group, problem })));
+        const firstGap = findings.findIndex(({ problem }) => problem.kind === 'gap');
+        const prefix = (days) => (groups.length > 1 ? `${this.daysText(days)} · ` : '');
+        return html `
+      <div class="day-groups">
+        ${groups.map(group => html `<div class="day-label">${this.daysText(group.days)}</div>
+              ${group.shifts.length ? this.bar(group.shifts) : html `<div class="day-none">${t('text.no-shift-on-these-days')}</div>`}`)}
+      </div>
+      ${findings.length || weekOverlaps?.length
+            ? html `<ul class="findings">
+            ${findings.map(({ group, problem }, index) => problem.kind === 'gap'
+                ? html `<li data-kind="gap">
+                    <span
+                      >${prefix(group.days)}${t('text.shift-gap-span', { span: this.span(problem.fromMinute, problem.toMinute) })}
+                      ${index === firstGap ? html `<span class="why">${t('text.shift-gap-why')}</span>` : nothing}</span
+                    >
+                  </li>`
+                : html `<li data-kind="overlap">
+                    <span
+                      >${prefix(group.days)}${t('text.shift-overlap-span', {
+                    span: this.span(problem.fromMinute, problem.toMinute),
+                    first: problem.names[0],
+                    second: problem.names[1]
+                })}</span
+                    >
+                  </li>`)}
+            ${(weekOverlaps ?? []).map(overlap => html `<li data-kind="error">
+                  <span
+                    >${t('text.shift-overlap-on-days', {
+                days: this.daysText(overlap.days),
+                span: this.span(overlap.fromMinute, overlap.toMinute),
+                first: overlap.names[0],
+                second: overlap.names[1]
+            })}</span
+                  >
+                </li>`)}
+          </ul>`
+            : nothing}
+    `;
+    }
+    shiftTable(shifts) {
+        return html `<div class="table-scroll">
+      <table>
+        <thead>
+          <tr>
+            <th>${t('field.shift')}</th>
+            <th>${t('field.shift-hours')}</th>
+            <th>${rt('daysOfWeek')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${shifts.map(shift => html `<tr>
+                <td>${shift.name}${shift.description ? html `<div class="muted">${shift.description}</div>` : nothing}</td>
+                <td class="figure">${timeRange(shift, this.dayWord)} <span class="muted">· ${this.hours(lengthOf(shift))}</span></td>
+                <td>${this.daysText(daysOf(shift.daysOfWeek))}</td>
+              </tr>`)}
+        </tbody>
+      </table>
+    </div>`;
+    }
+    shiftLines(shifts = []) {
+        return html `<div class="shift-lines">
+      ${shifts.map(shift => html `<div>
+            ${shift.name} <span class="figure">${timeRange(shift, this.dayWord)}</span>
+            ${daysOf(shift.daysOfWeek).length < WEEK.length ? html `<span class="muted">${this.daysText(daysOf(shift.daysOfWeek))}</span>` : nothing}
+          </div>`)}
+    </div>`;
+    }
+    stateTag(state) {
+        return html `<span class="state" data-state=${state}>${rt(state)}</span>`;
+    }
+    period(item) {
+        if (!item.period)
+            return html `<span class="muted">${t('text.from-time', { time: revisionDate(item.row.effectiveFrom) })}</span>`;
+        return item.period.to
+            ? `${revisionDate(item.period.from)} – ${revisionDate(item.period.to)}`
+            : t('text.from-time', { time: revisionDate(item.period.from) });
+    }
+    /* ── view ──────────────────────────────────────────────────────────── */
+    viewCurrent(placed) {
+        const current = placed.current;
+        const legacy = !current ? this.overview.legacyShifts ?? [] : [];
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-current')}</h3></header>
+      ${current
+            ? html `<p class="page-section-note">
+            ${t('text.from-time', { time: revisionDate(current.period.from) })} · ${current.row.timezone}
+          </p>`
+            : nothing}
+      ${current?.row.shifts?.length || legacy.length
+            ? html `<div class="arrangement">
+            ${this.timeline(current?.row.shifts ?? legacy)} ${this.shiftTable(current?.row.shifts ?? legacy)}
+          </div>`
+            : html `<ox-list-state
+            .scale=${{ shown: 0, loaded: 0 }}
+            .emptyNote=${{ icon: 'schedule', title: t('text.no-shifts-declared') }}
+          ></ox-list-state>`}
+    </section>`;
+    }
+    viewScheduled(placed) {
+        if (!placed.scheduled.length)
+            return nothing;
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-announcements')}</h3></header>
+      ${placed.scheduled.map(
+        /* The bar only: the shifts themselves are listed in the history row right below. */
+        item => html `<p class="page-section-note">
+            ${t('text.from-time', { time: revisionDate(item.period.from) })}${item.row.reason ? ` · ${item.row.reason}` : ''}
+          </p>
+          <div class="arrangement">${this.timeline(item.row.shifts ?? [])}</div>`)}
+    </section>`;
+    }
+    /** A person's reason as written; the recorded first arrangement in plain words, with where it came from. */
+    reasonCell(row, approval) {
+        return html `<td class="reason">
+      ${reasonOf(row, t('text.shift-baseline'))}
+      ${isBaseline(row) ? html `<div class="muted">${t('text.shift-baseline-why')}</div>` : nothing}
+      ${approval?.comment ? html `<div class="muted">${approval.comment}</div>` : nothing}
+    </td>`;
+    }
+    viewOpen(placed) {
+        if (!placed.open.length)
+            return nothing;
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-open-changes')}</h3></header>
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>${rt('state')}</th>
+              <th>${rt('effectiveFrom')}</th>
+              <th>${t('field.shift')}</th>
+              <th>${rt('reason')}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${placed.open.map(item => {
+            const approval = this.approvals[item.row.id];
+            const open = this.opened === item.row.id;
+            return html `<tr>
+                  <td>${this.stateTag(item.state)}</td>
+                  <td class="figure">${revisionDate(item.row.effectiveFrom)}</td>
+                  <td>${this.shiftLines(item.row.shifts)}</td>
+                  ${this.reasonCell(item.row, approval)}
+                  <td class="actions">
+                    <div>
+                      ${item.state === 'draft'
+                ? html `<button small @click=${() => this.resume(item.row)}>${t('button.continue-editing')}</button>`
+                : html `<button small quiet @click=${() => (this.opened = open ? undefined : item.row.id)}>
+                            ${open ? t('button.close') : rt('changes')}
+                          </button>`}
+                      ${approval?.open ? html `<button small @click=${() => approval.open()}>${rt('approval-detail')}</button>` : nothing}
+                    </div>
+                  </td>
+                </tr>
+                ${open
+                ? html `<tr class="detail">
+                      <td colspan="5">
+                        <ops-master-revision-comparison
+                          axis="workShift"
+                          .before=${this.overview.revisions.find((r) => r.id === item.row.baseRevisionId)}
+                          .after=${item.row}
+                        ></ops-master-revision-comparison>
+                      </td>
+                    </tr>`
+                : nothing}`;
+        })}
+          </tbody>
+        </table>
+      </div>
+    </section>`;
+    }
+    viewHistory(placed) {
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-history')}</h3></header>
+      ${placed.history.length
+            ? html `<div class="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>${t('field.revision-number')}</th>
+                  <th>${rt('state')}</th>
+                  <th>${t('field.shift-period')}</th>
+                  <th>${t('field.shift')}</th>
+                  <th>${rt('reason')}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                ${placed.history.map(item => {
+                const approval = this.approvals[item.row.id];
+                return html `<tr>
+                    <td class="figure">${item.row.revisionNumber}</td>
+                    <td>${this.stateTag(item.state)}</td>
+                    <td class="figure">${this.period(item)}</td>
+                    <td>${this.shiftLines(item.row.shifts)}</td>
+                    ${this.reasonCell(item.row, approval)}
+                    <td class="actions">
+                      <div>
+                        ${approval?.open ? html `<button small quiet @click=${() => approval.open()}>${rt('approval-detail')}</button>` : nothing}
+                        <button small @click=${() => this.begin(item.row)}>${t('button.change-from-this')}</button>
+                      </div>
+                    </td>
+                  </tr>`;
+            })}
+              </tbody>
+            </table>
+          </div>`
+            : html `<ox-list-state .scale=${{ shown: 0, loaded: 0 }} .emptyNote=${{ title: t('text.no-shift-history') }}></ox-list-state>`}
+    </section>`;
+    }
+    /* ── editor ────────────────────────────────────────────────────────── */
+    issueText(issue) {
+        return t('text.shift-issue-' + issue);
+    }
+    shiftRow(shift, index, issues) {
+        const draft = this.draft;
+        const nameBad = issues.includes('name-missing') || issues.includes('name-duplicate');
+        const timeBad = issues.includes('time-missing') || issues.includes('ends-too-late');
+        const length = lengthOf(shift);
+        return html `<div class="shift-row">
+      <label class="cell name">
+        <span class="cell-label">${rt('name')}</span>
+        <input
+          .value=${shift.name ?? ''}
+          aria-label=${rt('name')}
+          aria-invalid=${nameBad && (this.tried || !!shift.name) ? 'true' : 'false'}
+          ?disabled=${this.busy}
+          @input=${(e) => this.changeShift(index, { name: e.target.value })}
+        />
+      </label>
+      <div class="cell">
+        <span class="cell-label">${t('field.shift-start')}</span>
+        <div class="clock">
+          <select
+            aria-label=${rt('fromDate')}
+            ?disabled=${this.busy}
+            @change=${(e) => this.changeShift(index, { fromDate: Number(e.target.value) })}
+          >
+            ${[-1, 0, 1].map(day => html `<option value=${day} ?selected=${Number(shift.fromDate ?? 0) === day}>${this.dayWord(day)}</option>`)}
+          </select>
+          <input
+            type="time"
+            .value=${String(shift.fromTime ?? '').slice(0, 5)}
+            aria-label=${rt('fromTime')}
+            aria-invalid=${timeBad && this.tried ? 'true' : 'false'}
+            ?disabled=${this.busy}
+            @input=${(e) => this.changeShift(index, { fromTime: e.target.value })}
+          />
+        </div>
+      </div>
+      <div class="cell">
+        <span class="cell-label">${t('field.shift-end')}</span>
+        <div class="clock">
+          <input
+            type="time"
+            .value=${String(shift.toTime ?? '').slice(0, 5)}
+            aria-label=${rt('toTime')}
+            aria-invalid=${timeBad && this.tried ? 'true' : 'false'}
+            ?disabled=${this.busy}
+            @input=${(e) => this.changeShift(index, { toTime: e.target.value })}
+          />
+          <span class="derived"
+            >${shift.toDate ? `${this.dayWord(shift.toDate)} · ` : ''}${this.hours(length)}</span
+          >
+        </div>
+      </div>
+      <div class="cell days">
+        <span class="cell-label">${rt('daysOfWeek')}</span>
+        <ox-input-select-buttons
+          multiple
+          aria-label=${rt('daysOfWeek')}
+          .options=${WEEK.map(day => ({ display: rt('weekday-' + day), value: day }))}
+          .value=${daysOf(shift.daysOfWeek)}
+          ?disabled=${this.busy}
+          @change=${(e) => {
+            const value = daysValue(e.detail ?? []);
+            /* A shift on no day is not a shift: keep the last day chosen. */
+            if (value === undefined)
+                e.target.value = daysOf(shift.daysOfWeek);
+            else
+                this.changeShift(index, { daysOfWeek: value });
+        }}
+        ></ox-input-select-buttons>
+      </div>
+      <label class="cell note">
+        <span class="cell-label">${rt('description')}</span>
+        <input
+          .value=${shift.description ?? ''}
+          aria-label=${rt('description')}
+          ?disabled=${this.busy}
+          @input=${(e) => this.changeShift(index, { description: e.target.value })}
+        />
+      </label>
+      <div class="cell remove">
+        <button
+          small
+          quiet
+          danger
+          ?disabled=${this.busy || draft.shifts.length === 1}
+          aria-label=${`${rt('remove')} ${shift.name || index + 1}`}
+          @click=${() => this.change({ shifts: draft.shifts.filter((_, i) => i !== index) })}
+        >
+          ${rt('remove')}
+        </button>
+      </div>
+      ${issues.length && (this.tried || issues.some(issue => issue === 'name-duplicate' || issue === 'ends-too-late'))
+            ? html `<p class="row-issues">${issues.map(issue => this.issueText(issue)).join(' · ')}</p>`
+            : nothing}
+    </div>`;
+    }
+    editor() {
+        const draft = this.draft;
+        const issues = draftIssues(draft);
+        const timezones = Intl.supportedValuesOf?.('timeZone') ?? [];
+        const zones = timezones.includes(draft.timezone) ? timezones : [draft.timezone, ...timezones];
+        return html `
+      ${this.saveError ? html `<p class="alert" role="alert">${this.saveError}</p>` : nothing}
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${draft.revisionNumber ? rt('revision-value', { n: draft.revisionNumber }) : t('title.shift-new-arrangement')}</h3>
+          <div class="page-section-actions">
+            <button ?disabled=${this.busy} @click=${() => this.change({ shifts: [...draft.shifts, nextShift(draft.shifts)] })}>
+              ${rt('add-shift')}
+            </button>
+          </div>
+        </header>
+        <div class="shift-rows">
+          <div class="shift-row head" aria-hidden="true">
+            <span>${rt('name')}</span><span>${t('field.shift-start')}</span><span>${t('field.shift-end')}</span
+            ><span>${rt('daysOfWeek')}</span><span>${rt('description')}</span><span></span>
+          </div>
+          ${draft.shifts.map((shift, index) => this.shiftRow(shift, index, issues.rows.get(index) ?? []))}
+        </div>
+        <div class="arrangement">
+          ${this.timeline(draft.shifts, groupOverlaps(issues.overlaps))}
+        </div>
+      </section>
+
+      <section class="page-section">
+        <header class="page-section-header"><h3>${t('title.shift-apply')}</h3></header>
+        <div class="form-grid">
+          <div class="field">
+            <span>${rt('effectiveFrom')}</span>
+            <div class="when">
+              <ox-input-select-buttons
+                .options=${[
+            { display: t('text.apply-now'), value: 'now' },
+            { display: t('text.apply-later'), value: 'at' }
+        ]}
+                .value=${draft.effectiveMode}
+                ?disabled=${this.busy}
+                @change=${(e) => {
+            if (!e.detail)
+                e.target.value = draft.effectiveMode;
+            else
+                this.change({ effectiveMode: e.detail });
+        }}
+              ></ox-input-select-buttons>
+              ${draft.effectiveMode === 'at'
+            ? html `<input
+                    type="datetime-local"
+                    aria-label=${rt('effectiveFrom')}
+                    .value=${localDateTime(draft.effectiveFrom)}
+                    ?disabled=${this.busy}
+                    @change=${(e) => {
+                try {
+                    this.change({ effectiveFrom: isoFromLocal(e.target.value) });
+                }
+                catch {
+                    e.target.value = localDateTime(draft.effectiveFrom);
+                }
+            }}
+                  />`
+            : nothing}
+            </div>
+          </div>
+          <label class="field">
+            <span>${rt('reason')}</span>
+            <input
+              .value=${draft.reason}
+              aria-invalid=${issues.reasonMissing && this.tried ? 'true' : 'false'}
+              ?disabled=${this.busy}
+              @input=${(e) => this.change({ reason: e.target.value })}
+            />
+            ${issues.reasonMissing && this.tried ? html `<span class="error">${t('text.shift-issue-reason-missing')}</span>` : nothing}
+          </label>
+          <label class="field">
+            <span>${rt('timezone')}</span>
+            <select ?disabled=${this.busy} @change=${(e) => this.change({ timezone: e.target.value })}>
+              ${zones.map(zone => html `<option value=${zone} ?selected=${zone === draft.timezone}>${zone}</option>`)}
+            </select>
+          </label>
+          <label class="field">
+            <span>${rt('description')}</span>
+            <input .value=${draft.description ?? ''} ?disabled=${this.busy} @input=${(e) => this.change({ description: e.target.value })} />
+          </label>
+        </div>
+      </section>
+    `;
+    }
+    render() {
+        const placed = this.overview ? this.placed : undefined;
+        return html `<ox-page-state .loading=${this.loading && !this.overview} .error=${this.error} @retry=${() => this.load()}>
+      <div class="page">
+        ${placed
+            ? this.draft
+                ? this.editor()
+                : html `${this.viewCurrent(placed)} ${this.viewScheduled(placed)} ${this.viewOpen(placed)} ${this.viewHistory(placed)}`
+            : nothing}
+      </div>
+    </ox-page-state>`;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "overview", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "approvals", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "draft", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "dirty", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "saveError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "tried", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], WorkShift.prototype, "opened", void 0);
+WorkShift = __decorate([
+    customElement('work-shift')
+], WorkShift);
+export { WorkShift };
+//# sourceMappingURL=work-shift.js.map