@things-factory/work-shift 10.1.34 → 10.1.36

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

@@ -1,824 +1,208 @@
 import { __decorate, __metadata } from "tslib";
-import '@operato/input/ox-input-work-shift.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { PageView } from '@operato/shell';
-import { CommonHeaderStyles, DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
-import { coverageProblems, coveredMinutes, cycleOf } from '../shift-coverage';
-const HOUR_MINUTES = 60;
-const DAY_MINUTES = 24 * HOUR_MINUTES;
+import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
+import { revisionText as t, revisionDate, revisionContents, revisionStyles } 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';
 let WorkShift = class WorkShift extends PageView {
     constructor() {
         super(...arguments);
-        this.workShifts = [];
-        /**
-         * 편집기에서 지금 고치고 있는 편성 — **띠와 찾아낸 것은 이것을 본다.**
-         *
-         * 띠는 **저장하기 전에** 편성이 말이 되는지 보라고 만든 자리다. 저장된 값만 보면 저장한 뒤에야
-         * 틈이 보이고, 그때는 이미 그 편성으로 실적이 쌓이기 시작한 뒤다.
-         *
-         * 편집기에 되먹이지 않는다. 되먹이면 글자를 칠 때마다 편집기의 값이 새로 설정되어 커서가 튄다.
-         */
-        this.draft = [];
-        this.revisions = [];
-        /** 예고를 언제부터 적용할까. 비어 있으면 예고 버튼이 눌리지 않는다. */
-        this.announceFrom = '';
-    }
-    static { this.styles = [
-        /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */
-        DocumentPageStyles,
-        ScrollbarStyles,
-        CommonHeaderStyles,
-        css `
-      :host {
-        color: var(--ui-ink);
-      }
-
-      /*
-       * 편집기는 **입력칸이지 이 화면의 내용이 아니다.** 무게를 낮춘다 — 앞서는 화면의 절반을 차지하고
-       * 가장 큰 글씨를 쓰고 있었는데, 정작 사람이 보아야 할 것은 그 아래 배치 띠다.
-       *
-       * 안쪽은 다른 패키지의 그림자 DOM 이라 손대지 못한다. 바깥에서 할 수 있는 것만 한다.
-       */
-      ox-input-work-shift {
-        overflow-y: auto;
-        font-size: var(--ui-t-body);
-      }
-
-      /*
-       * 하루를 가로로 펴서 어디가 비었는지 눈에 보이게 한다.
-       *
-       * 틈은 **칠하지 않고 사선 무늬**로 둔다. 아무것도 없는 것과 「여기가 틈이다」는 눈에 다르게
-       * 보여야 하고, 색으로만 가르면 색을 못 가르는 사람에게 전해지지 않는다.
-       */
-      /* 이 화면의 답이 여기 있다. 다른 것보다 크고 조용하게 둔다. */
-      .band {
-        position: relative;
-        height: 52px;
-        border-radius: var(--ui-r-small);
-        border: 1px solid var(--ui-line);
-        background-color: var(--ui-panel);
-        background-image: repeating-linear-gradient(
-          45deg,
-          transparent 0 5px,
-          var(--ui-line) 5px 6px
-        );
-        overflow: hidden;
-      }
-
-      /*
-       * 조각 안의 글자는 **폭을 재서 가르지 않는다.** overflow: hidden 에 맡기면 넓을 때는 이름과
-       * 시각이, 좁을 때는 이름만, 아주 좁을 때는 아무것도 안 보인다 — 저절로 세 단계가 된다.
-       *
-       * 그래서 조각마다 title 속성을 붙인다. 좁아서 안 보일 때 그것이 유일한 길이다.
-       */
-      .band .piece {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        background-color: var(--ui-accent);
-        color: #fff;
-        font-size: var(--ui-t-small);
-        line-height: 52px;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        /*
-         * 조각끼리 붙어 있으면 한 덩어리로 보인다. 경계를 **조각 안쪽에** 긋는다 — 사이를 벌리면
-         * 그 틈이 「덮이지 않은 시간」으로 읽힌다. 그 둘은 반대되는 사실이다.
-         */
-        box-shadow: inset -2px 0 0 var(--ui-panel), inset 2px 0 0 var(--ui-panel);
-      }
-
-      /* 겹친 조각은 색과 **무늬**로 함께 표시한다 — 색만으로는 못 가르는 사람이 있다. */
-      .band .piece[data-overlap] {
-        background-color: var(--ui-warn);
-        background-image: repeating-linear-gradient(
-          -45deg,
-          transparent 0 4px,
-          rgba(255, 255, 255, 0.35) 4px 6px
-        );
-      }
-
-      /*
-       * 두께가 중요도다. 앞서 표 안에 넣느라 22px 로 눌러 두었더니 **교대 이름이 잘려 읽히지 않았다** —
-       * 이 띠들이 있는 이유가 「그때 편성이 어땠나」를 한눈에 보는 것인데, 읽을 수 없으면 있으나 마나다.
-       */
-      .band[data-variant='scheduled'] {
-        height: 42px;
-      }
-
-      .band[data-variant='past'] {
-        height: 34px;
-      }
-
-      .band[data-variant='scheduled'] .piece {
-        line-height: 42px;
-        font-size: var(--ui-t-small);
-        /* 같은 색을 옅게 — 같은 것인데 아직 안 왔다는 뜻이다. */
-        background-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-panel));
-        color: var(--ui-ink);
-        border: 1px dashed color-mix(in srgb, var(--ui-accent) 70%, transparent);
-        box-sizing: border-box;
-      }
-
-      .band[data-variant='past'] .piece {
-        line-height: 34px;
-        font-size: var(--ui-t-micro);
-        /* 지나간 것은 색을 뺀다. 지금 쓰는 것과 다투지 않게. */
-        background-color: color-mix(in srgb, var(--ui-muted) 45%, var(--ui-panel));
-        color: var(--ui-ink);
-      }
-
-      .ticks {
-        display: flex;
-        justify-content: space-between;
-        font-size: var(--ui-t-micro);
-        color: var(--ui-muted);
-        font-variant-numeric: tabular-nums;
-        margin-top: 2px;
-      }
-
-      /* 아무 말이 없으면 「확인했는데 문제가 없다」와 「아직 안 봤다」가 같아 보인다. */
-      .settled {
-        border-left: 3px solid var(--ui-good);
-        padding: var(--spacing-small) var(--spacing-medium);
-        font-size: var(--ui-t-body);
-        color: var(--ui-muted);
-      }
-
-      .finding {
-        border-left: 3px solid var(--ui-warn);
-        background-color: var(--ui-panel);
-        padding: var(--spacing-small) var(--spacing-medium);
-        font-size: var(--ui-t-body);
-        line-height: 1.7;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: var(--ui-t-body);
-      }
-
-      th {
-        text-align: left;
-        font-weight: 500;
-        font-size: var(--ui-t-micro);
-        color: var(--ui-muted);
-        padding: 4px 8px;
-        border-bottom: 1px solid var(--ui-line);
-      }
-
-      td {
-        padding: 5px 8px;
-        border-bottom: 1px solid var(--ui-panel);
-        vertical-align: top;
-      }
-
-      .quiet {
-        color: var(--ui-muted);
-      }
-
-      /* 한 편성이 한 덩어리다 — 시각과 띠가 붙어 있어야 어느 띠가 언제 것인지 갈린다. */
-      .entry {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        padding: var(--spacing-small) 0;
-        border-bottom: 1px solid var(--ui-line-soft);
-      }
-
-      .entry:last-of-type {
-        border-bottom: none;
-      }
-
-      .entry-head {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-medium);
-        font-size: var(--ui-t-body);
-      }
-
-      .entry-head .when {
-        font-variant-numeric: tabular-nums;
-      }
-
-
-      .entry-head button {
-        margin-left: auto;
-      }
-
-      /* 편집기 바로 아래 — 무엇을 내보내는지가 바로 위에 있다. */
-      /*
-       * 윗쪽은 **고치는 자리**, 아랫쪽은 **보는 자리**다. 그 경계를 선 하나로 그으면 어느 쪽에 속하는지
-       * 애매한 것이 생긴다 — 실제로 적용 줄 위에 선을 두었더니 그 줄이 정보 영역으로 밀려 보였다.
-       * 적용 줄은 위 편집기의 내용을 내보내는 자리이므로 편집에 속한다.
-       *
-       * 선 대신 **면**으로 가른다. 고치는 것은 한 판 위에 함께 얹히고, 보는 것은 바탕 위에 놓인다.
-       */
-      .editing {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-small);
-        padding: var(--spacing-medium);
-        /*
-         * --ui-panel 은 바탕과 거의 같은 색이라 면을 깔아도 경계가 안 보였다. 강조색을 아주 옅게
-         * 섞어 **손대는 자리**임을 드러낸다 — 아래 정보 영역은 바탕 그대로 둔다.
-         */
-        background-color: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-bg));
-        border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);
-        border-radius: var(--ui-r);
-      }
-
-      /* 두 영역 사이는 선이 아니라 **빈 자리**가 가른다. */
-      .info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-large);
-        margin-top: var(--spacing-medium);
-      }
-
-      .howto {
-        margin: 0;
-        padding-left: 1.1em;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        font-size: var(--ui-t-small);
-        color: var(--ui-muted);
-        line-height: 1.6;
-      }
-
-      /* 같은 판 안의 두 부분이라 선을 흐리게 — 가르는 것이 아니라 나누는 것이다. */
-      .apply {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-medium);
-        flex-wrap: wrap;
-        padding: var(--spacing-small) 0 0 0;
-        border-top: 1px solid var(--ui-line-soft);
-      }
-
-      .choice {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: var(--ui-t-body);
-        cursor: pointer;
-      }
-
-      .apply-button {
-        margin-left: auto;
-        background-color: var(--ui-accent) !important;
-        color: #fff !important;
-        border-color: transparent !important;
-        min-height: 36px;
-        padding: 0 var(--spacing-large) !important;
-        font-weight: 600;
-      }
-
-      .apply input[type='datetime-local'],
-      .apply button,
-      table button {
-        font: inherit;
-        padding: 5px 10px;
-        border-radius: var(--ui-r-small);
-        border: 1px solid var(--ui-line);
-        background-color: var(--ui-panel);
-        color: var(--ui-ink);
-      }
-
-      .announce button:not(:disabled),
-      table button {
-        cursor: pointer;
-      }
-
-      .announce button:disabled {
-        opacity: 0.45;
-      }
-    `
-    ]; }
-    /**
-     * 툴바에 동작을 두지 않는다.
-     *
-     * 이 화면의 동작은 **언제부터 쓸지와 함께 정해진다.** 툴바 버튼은 그 선택에서 멀리 떨어져 있어
-     * 이름이 선택을 따라갈 수 없다 — 「수정」이라 적힌 단추가 예고를 하게 된다. 그래서 편집기 바로 아래,
-     * 시점을 고르는 자리 옆에 하나만 둔다.
-     */
-    get context() {
-        return {
-            /*
-       * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다
-       * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.
-       */
-            frame: 'document',
-            title: i18next.t('title.work-shift'),
-            help: 'page/work-shift'
-        };
-    }
-    render() {
-        return html `
-      <div class="page">
-        <!--
-          제목과 동작 바를 여기 두지 않는다 — 셸이 이미 그린다.
-
-          제목은 context.title 이 페이지 제목 줄(또는 상단 앱 바)에 그리고, 동작 바는 contextToolbar
-          자리에 그린다. 여기 또 두면 제목이 위아래로 둘이고 같은 버튼이 두 벌이 된다.
-        -->
-
-        <div class="editing">
-          <header class="page-section-header"><h3>${i18next.t('title.shift-editing')}</h3></header>
-
-          <ox-input-work-shift
-            .value=${this.workShifts}
-            @change=${(event) => (this.draft = [...(event.target?.value ?? [])])}
-          ></ox-input-work-shift>
-
-          ${this.howTo()}
-          ${this.applyBar()}
-        </div>
-
-        ${this.problem ? html `<div class="finding">${this.problem}</div>` : ''} ${this.runningNotice()}
-
-        <div class="info">${this.coverage()} ${this.announcements()} ${this.history()}</div>
-      </div>
-    `;
-    }
-    /**
-     * 이 화면을 쓰는 법 — **보고도 모르는 것 셋만.**
-     *
-     * 화면을 보면 아는 것은 적지 않는다(「이름을 적으십시오」 같은 것). 적는 것은 화면에 답이 없는
-     * 것이다 — 표의 날짜 칸이 무엇을 뜻하는지, 예정한 시각이 오면 누가 무엇을 해야 하는지, 지금 편성이
-     * 어디로 가는지.
-     *
-     * 길어지면 아무도 안 읽는다. 세 줄에서 늘리지 않는다.
-     */
-    howTo() {
-        return html `
-      <ul class="howto">
-        <li>${i18next.t('text.howto-crossing-midnight')}</li>
-        <li>${i18next.t('text.howto-scheduled-applies-itself')}</li>
-        <li>${i18next.t('text.howto-previous-is-kept')}</li>
-      </ul>
-    `;
-    }
-    /**
-     * 이 편성을 **언제부터 쓸까** — 저장과 예고가 같은 결정이라 한 자리에 둔다.
-     *
-     * 앞서 「수정」은 위 툴바에, 「예고」는 화면 맨 아래에 있었다. 둘은 같은 편성을 내보내는 같은 행위이고
-     * **시점만 다르다.** 화면 양 끝에 떨어져 있으면 사람은 그 둘이 다른 일인 줄 안다.
-     *
-     * 시점을 고르는 자리를 편집기 바로 아래에 둔다 — 무엇을 내보내는지가 바로 위에 있다.
-     */
-    applyBar() {
-        const later = Boolean(this.announceFrom);
-        return html `
-      <div class="apply">
-        <span class="quiet">${i18next.t('text.apply-from-when')}</span>
-
-        <label class="choice">
-          <input type="radio" name="when" ?checked=${!later} @change=${() => (this.announceFrom = '')} />
-          ${i18next.t('text.apply-now')}
-        </label>
-
-        <label class="choice">
-          <input type="radio" name="when" ?checked=${later} @change=${this.pickDefaultAnnounceTime} />
-          ${i18next.t('text.apply-later')}
-        </label>
-
-        <input
-          type="datetime-local"
-          .value=${this.announceFrom}
-          @input=${(event) => (this.announceFrom = event.target.value)}
-        />
-
-        <button class="apply-button" @click=${this.apply}>
-          ${i18next.t(later ? 'button.announce-shift' : 'button.apply-now')}
-        </button>
-      </div>
-    `;
-    }
-    /** 「그때부터」를 고르면 시각 칸이 비어 있으면 안 된다 — 비어 있으면 무엇을 고른 것인지 알 수 없다. */
-    pickDefaultAnnounceTime() {
-        if (this.announceFrom) {
-            return;
-        }
-        const from = new Date(Date.now() + 86_400_000);
-        from.setMinutes(0, 0, 0);
-        this.announceFrom = new Date(from.getTime() - from.getTimezoneOffset() * 60_000).toISOString().slice(0, 16);
-    }
-    /** 고른 시점으로 내보낸다. 두 길이 아니라 한 길에 시점이 붙은 것이다. */
-    apply() {
-        return this.announceFrom ? this.announce() : this.updateWorkShift();
-    }
-    /**
-     * 예고분이 이미 적용 중인가.
-     *
-     * 그렇다면 **편집기의 내용은 지금 쓰는 편성이 아니다.** 말하지 않으면 사람이 편집기를 고치고
-     * 저장했는데 아무것도 안 바뀐 것처럼 보인다(저장은 그 예고분을 닫으므로 실제로는 바뀐다).
-     */
-    runningNotice() {
-        const running = this.revisions.find(revision => !revision.effectiveTo && new Date(revision.effectiveFrom) <= new Date());
-        if (!running) {
-            return '';
+        this.message = '';
+        this.busy = false;
+        this.statuses = {};
+        this.dirty = false;
+    }
+    static { this.styles = [DocumentPageStyles, ScrollbarStyles, revisionStyles, css `
+    .page { padding: 20px; display: grid; gap: 20px; min-width: 0; }
+    section { border: 1px solid var(--ui-line); border-radius: 6px; padding: 16px; min-width: 0; }
+    h2 { font-size: 18px; margin: 0 0 12px; }
+    .bar, .fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+    .fields label { display: grid; gap: 5px; flex: 1 1 200px; }
+    input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 4px; background: var(--md-sys-color-surface); color: inherit; box-sizing: border-box; max-width: 100%; }
+    input[type=time] { width: 105px; }
+    .scroll table { min-width: 780px; }
+    .week { display:flex; flex-wrap:wrap; gap:4px; max-width:210px; }
+    .week label { white-space:nowrap; }
+    .current { border-left: 4px solid var(--md-sys-color-primary); }
+    .notice { padding:12px; background:var(--md-sys-color-surface-container); }
+  `]; }
+    get context() { return { title: i18next.t('title.work-shift'), frame: 'document', help: 'page/work-shift' }; }
+    async pageUpdated() { if (this.active && !this.dirty)
+        await this.load(); }
+    current() {
+        const segment = this.overview?.schedule.find((s) => s.state === 'current');
+        return segment && this.overview.revisions.find((r) => r.id === segment.revisionId);
+    }
+    async run(action) {
+        this.busy = true;
+        this.message = '';
+        try {
+            await action();
         }
-        return html `<div class="finding">
-      ${i18next.t('text.announced-set-is-running', { since: day(running.effectiveFrom) })}
-    </div>`;
-    }
-    /**
-     * 지금 화면이 다루고 있는 편성.
-     *
-     * **띠가 보여 준 것과 저장·예고되는 것이 같아야 한다.** 다르면 사람은 띠에서 확인한 편성을 내보낸 줄
-     * 알지만 실제로는 다른 것이 나간다 — 그러면 확인하는 자리를 둔 뜻이 없다.
-     */
-    editing() {
-        return this.draft.length ? this.draft : this.workShifts ?? [];
-    }
-    /** 앞으로 쓸 편성 — 아직 시작하지 않은 것만. */
-    announcements() {
-        const now = new Date();
-        const upcoming = this.revisions
-            .filter(revision => new Date(revision.effectiveFrom) > now)
-            .sort((a, b) => new Date(a.effectiveFrom).getTime() - new Date(b.effectiveFrom).getTime());
-        return html `
-      <section class="page-section">
-        <header class="page-section-header"><h3>${i18next.t('title.shift-announcements')}</h3></header>
-
-        ${upcoming.length
-            ? upcoming.map(revision => html `
-                <div class="entry">
-                  <div class="entry-head">
-                    <span class="when">${i18next.t('field.starts')} ${day(revision.effectiveFrom)}</span>
-                    <button @click=${() => this.cancel(revision.id)}>
-                      ${i18next.t('button.cancel-announcement')}
-                    </button>
-                  </div>
-                  ${this.band(parseShifts(revision.shifts) ?? [], [], 'scheduled')}
-                </div>
-              `)
-            : html `<div class="quiet">${i18next.t('text.no-announcements')}</div>`}
-      </section>
-    `;
-    }
-    /** 편성이 하루를 어떻게 덮나 — 그리고 어디가 비었나. */
-    coverage() {
-        const shifts = this.editing();
-        if (!shifts.length) {
-            return html `<section class="page-section">
-        <header class="page-section-header"><h3>${i18next.t('title.shift-coverage')}</h3></header>
-        <div class="quiet">${i18next.t('text.no-shifts-declared')}</div>
-      </section>`;
+        catch (e) {
+            this.message = e.message;
         }
-        const problems = coverageProblems(shifts);
-        const covered = coveredMinutes(shifts);
-        const cycle = cycleOf(shifts);
-        if (!cycle) {
-            /* 읽을 수 있는 교대가 하나도 없다. 띠를 그리면 빈 띠가 「하루가 다 비었다」로 보인다. */
-            return html `<section class="page-section">
-        <header class="page-section-header"><h3>${i18next.t('title.shift-coverage')}</h3></header>
-        ${problems.map(problem => html `<div class="finding">${this.problemText(problem)}</div>`)}
-      </section>`;
+        finally {
+            this.busy = false;
         }
-        return html `
-      <section class="page-section">
-        <header class="page-section-header"><h3>${i18next.t('title.shift-coverage')}</h3></header>
-        ${this.band(shifts, problems)}
-        ${covered < DAY_MINUTES
-            ? html `<div class="finding">
-              ${i18next.t('text.shift-covers-less-than-a-day', { hours: round(covered / HOUR_MINUTES) })}
-            </div>`
-            : ''}
-        ${problems.map(problem => html `<div class="finding">${this.problemText(problem)}</div>`)}
-        ${!problems.length && covered >= DAY_MINUTES
-            ? html `<div class="settled">${i18next.t('text.shift-covers-the-whole-day')}</div>`
-            : ''}
-      </section>
-    `;
     }
-    /**
-     * 띠 하나 — 지금 편성에도, 예고에도, 이력에도 같은 것을 쓴다.
-     *
-     * 편성을 글자로만 적으면 사람이 시각을 머리로 이어 붙여야 한다. 이력에서 「그때 편성이 어땠나」를
-     * 보는 사람에게 그 수고를 다시 시킬 이유가 없다.
-     */
-    band(shifts, problems = [], variant = 'current') {
-        const cycle = cycleOf(shifts);
-        if (!cycle) {
-            return '';
-        }
-        return html `
-      <div>
-        <div class="band" data-variant=${variant}>${this.pieces(shifts, problems, cycle)}</div>
-        <div class="ticks">
-          ${[0, 6, 12, 18, 24].map(hour => html `<span>${cycleTime(cycle.startMinute + hour * 60)}</span>`)}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * 띠의 조각들 — **한 바퀴 위에 놓는다.**
-     *
-     * 자정을 왼쪽 끝으로 두면 야간 교대가 있는 공장에서 없는 틈이 보이고 있는 틈이 안 보인다. 첫 교대가
-     * 시작하는 시각이 왼쪽 끝이고, 거기서 24시간이 오른쪽 끝이다.
-     */
-    pieces(shifts, problems, cycle) {
-        if (!cycle) {
-            return '';
-        }
-        const overlapping = new Set(problems.filter(p => p.kind === 'overlap').flatMap(p => p.names));
-        return shifts.map(shift => {
-            const from = Number(shift.fromDate ?? 0) * DAY_MINUTES + minutes(shift.fromTime);
-            const to = Number(shift.toDate ?? 0) * DAY_MINUTES + minutes(shift.toTime);
-            if (!Number.isFinite(from) || !Number.isFinite(to) || to <= from) {
-                return '';
-            }
-            const left = Math.max(cycle.startMinute, from);
-            const right = Math.min(cycle.endMinute, to);
-            if (right <= left) {
-                return '';
+    async load() {
+        await this.run(async () => {
+            const result = await client.query({ query: gql `query { workShiftRevisionOverview }`, fetchPolicy: 'no-cache' });
+            if (result.errors?.length)
+                throw new Error(result.errors[0].message);
+            this.overview = result.data.workShiftRevisionOverview;
+            const statuses = {};
+            for (const row of this.overview.revisions.filter((r) => r.activityInstanceId)) {
+                let promise;
+                document.dispatchEvent(new CustomEvent('master-change-status', { detail: { activityInstanceId: row.activityInstanceId, respondWith: (p) => promise = p } }));
+                if (promise)
+                    statuses[row.id] = await promise;
             }
-            const label = `${shift.name} ${hhmm(shift.fromTime)}~${hhmm(shift.toTime)}`;
-            return html `<div
-        class="piece"
-        ?data-overlap=${overlapping.has(shift.name)}
-        style="left:${((left - cycle.startMinute) / DAY_MINUTES) * 100}%; width:${((right - left) / DAY_MINUTES) * 100}%"
-        title=${label}
-      >
-        ${label}
-      </div>`;
+            this.statuses = statuses;
         });
     }
-    problemText(problem) {
-        const span = spanText(problem.fromMinute, problem.toMinute);
-        if (problem.kind === 'gap') {
-            return i18next.t('text.shift-gap', { span, before: problem.names[0], after: problem.names[1] });
-        }
-        if (problem.kind === 'overlap') {
-            return i18next.t('text.shift-overlap', { span, first: problem.names[0], second: problem.names[1] });
-        }
-        return i18next.t('text.shift-not-a-span', { name: problem.names[0] });
-    }
-    /**
-     * 예전 편성.
-     *
-     * **비어 있어도 절을 그린다.** 앞서 없으면 통째로 감췄는데, 이력을 찾으러 온 사람은 그때 비어 있는
-     * 것인지 고장인지 알 길이 없다. 예고 절이 「없습니다」를 적는 것과도 앞뒤가 안 맞았다.
-     */
-    history() {
-        /* 끝난 것만 이력이다. 예고된 것은 위 절에 있다 — 한 표에 섞으면 앞뒤를 못 가른다. */
-        const past = this.revisions.filter(revision => revision.effectiveTo);
-        if (!past.length) {
-            return html `
-        <section class="page-section">
-          <header class="page-section-header"><h3>${i18next.t('title.shift-history')}</h3></header>
-          <div class="quiet">${i18next.t('text.no-shift-history')}</div>
-        </section>
-      `;
-        }
-        return html `
-      <section class="page-section">
-        <header class="page-section-header"><h3>${i18next.t('title.shift-history')}</h3></header>
-        ${past.map(revision => html `
-            <div class="entry">
-              <div class="entry-head">
-                <span class="when">${periodText(revision.effectiveFrom, revision.effectiveTo)}</span>
-                <span class="quiet">${revision.creator?.name ?? ''}</span>
-              </div>
-              ${this.band(parseShifts(revision.shifts) ?? [], [], 'past')}
-            </div>
-          `)}
-      </section>
-    `;
-    }
-    async pageUpdated(changes, after, before) {
-        /* refresh always page revisited */
-        if (this.active) {
+    begin(row = this.current()) {
+        this.draft = { description: row?.description ?? '', timezone: row?.timezone ?? this.overview.timezone,
+            shifts: structuredClone(row?.shifts ?? [{ name: '', fromDate: 0, fromTime: '08:00', toDate: 0, toTime: '16:00', daysOfWeek: '' }]),
+            effectiveFrom: new Date().toISOString(), reason: '' };
+        this.dirty = false;
+    }
+    change(field, value) { this.draft = { ...this.draft, [field]: value }; this.dirty = true; }
+    changeShift(index, field, value) {
+        this.change('shifts', this.draft.shifts.map((s, i) => i === index ? { ...s, [field]: value } : s));
+    }
+    async save() {
+        await this.run(async () => {
+            const { description, timezone, shifts, effectiveFrom, reason } = this.draft;
+            const content = { description, timezone, shifts, effectiveFrom, reason };
+            const editing = !!this.draft.id;
+            const response = await client.mutate({ mutation: editing
+                    ? gql `mutation($revisionId:String!,$editGeneration:Int!,$content:Object!){editWorkShiftDraft(revisionId:$revisionId,editGeneration:$editGeneration,content:$content)}`
+                    : gql `mutation($content:Object!){createWorkShiftDraft(content:$content)}`,
+                variables: { content, ...(editing ? { revisionId: this.draft.id, editGeneration: this.draft.editGeneration } : {}) } });
+            if (response.errors?.length)
+                throw new Error(response.errors[0].message);
+            this.draft = response.data[editing ? 'editWorkShiftDraft' : 'createWorkShiftDraft'];
+            this.dirty = false;
+        });
+        if (!this.message)
             await this.load();
-        }
     }
-    async load() {
-        this.problem = undefined;
-        try {
-            const response = await client.query({
-                query: gql `
-          query {
-            workShifts(sortings: [{ name: "fromDate" }, { name: "fromTime" }]) {
-              items {
-                name
-                fromDate
-                fromTime
-                toDate
-                toTime
-              }
+    async submit() {
+        await this.run(async () => {
+            if (this.overview.approvalRequired) {
+                let promise;
+                document.dispatchEvent(new CustomEvent('master-change-approval', { detail: {
+                        axis: 'workShift', revisionId: this.draft.id, editGeneration: this.draft.editGeneration,
+                        respondWith: (p) => promise = p
+                    } }));
+                if (!promise)
+                    throw new Error(t('approval-unavailable'));
+                await promise;
             }
-            workShiftRevisions(sortings: [{ name: "effectiveFrom", desc: true }], pagination: { limit: 30 }) {
-              items {
-                id
-                effectiveFrom
-                effectiveTo
-                shifts
-                creator {
-                  name
-                }
-              }
+            else {
+                const result = await client.mutate({ mutation: gql `mutation($revisionId:String!,$editGeneration:Int!){publishWorkShiftDraft(revisionId:$revisionId,editGeneration:$editGeneration)}`,
+                    variables: { revisionId: this.draft.id, editGeneration: this.draft.editGeneration } });
+                if (result.errors?.length)
+                    throw new Error(result.errors[0].message);
             }
-          }
-        `,
-                fetchPolicy: 'no-cache'
-            });
-            this.workShifts = response.data.workShifts.items;
-            /* 새로 읽었으면 고치던 것은 없다 — 남겨 두면 저장한 내용이 아닌 것이 띠에 남는다. */
-            this.draft = [];
-            this.revisions = response.data.workShiftRevisions?.items ?? [];
-        }
-        catch (error) {
-            /* 못 읽은 것을 빈 편성으로 두지 않는다 — 「아직 안 정했다」로 읽힌다. */
-            this.problem = i18next.t('text.could-not-read-work-shifts');
-            console.error(error);
-        }
-    }
-    /**
-     * 예고한다 — **위 편집기의 내용을 그 시각부터 쓰겠다는 뜻이다.**
-     *
-     * 편집기의 내용을 그대로 보내므로, 예고하기 전에 편집기가 앞으로 쓸 편성이어야 한다. 그 사실을 버튼
-     * 옆에 적어 둔다.
-     */
-    async announce() {
-        this.problem = undefined;
-        try {
-            await client.mutate({
-                mutation: gql `
-          mutation ($effectiveFrom: DateTimeISO!, $patches: [WorkShiftPatch!]!) {
-            announceWorkShift(effectiveFrom: $effectiveFrom, patches: $patches) {
-              id
-              effectiveFrom
-            }
-          }
-        `,
-                variables: { effectiveFrom: new Date(this.announceFrom), patches: this.editing() }
-            });
-            this.announceFrom = '';
-            await this.load();
-        }
-        catch (error) {
-            /* 서버가 왜 막았는지 그대로 보인다 — 「저장 실패」로 뭉개면 무엇을 고쳐야 할지 알 수 없다. */
-            this.problem = error?.message || i18next.t('text.could-not-announce-work-shifts');
-            console.error(error);
-        }
-    }
-    async cancel(id) {
-        this.problem = undefined;
-        try {
-            await client.mutate({
-                mutation: gql `
-          mutation ($id: String!) {
-            cancelWorkShiftAnnouncement(id: $id)
-          }
-        `,
-                variables: { id }
-            });
+            this.draft = undefined;
+            this.dirty = false;
+        });
+        if (!this.message)
             await this.load();
-        }
-        catch (error) {
-            this.problem = error?.message || i18next.t('text.could-not-cancel-announcement');
-            console.error(error);
-        }
     }
-    async updateWorkShift() {
-        this.problem = undefined;
-        try {
-            await client.mutate({
-                mutation: gql `
-          mutation ($patches: [WorkShiftPatch!]!) {
-            updateMultipleWorkShift(patches: $patches) {
-              name
-              fromDate
-              fromTime
-              toDate
-              toTime
+    rowStatus(row) {
+        const segment = this.overview.schedule.find((s) => s.revisionId === row.id);
+        return segment?.state ?? this.statuses[row.id]?.state ?? (row.frozenAt ? 'pending' : 'draft');
+    }
+    weekdays(row, index) {
+        const days = row.daysOfWeek ? row.daysOfWeek.split(',') : ['0', '1', '2', '3', '4', '5', '6'];
+        return html `<div class="week">${['1', '2', '3', '4', '5', '6', '0'].map(day => html `<label><input type="checkbox" .checked=${days.includes(day)}
+      @change=${(e) => {
+            const next = e.target.checked ? [...days, day] : days.filter(d => d !== day);
+            if (!next.length) {
+                e.target.checked = true;
+                return;
             }
-          }
-        `,
-                variables: { patches: this.editing() }
-            });
-            /* 저장한 것을 그대로 믿지 않고 다시 읽는다 — 이력이 한 줄 늘었는지 이 화면이 보여야 한다. */
-            await this.load();
-        }
-        catch (error) {
-            this.problem = i18next.t('text.could-not-save-work-shifts');
-            console.error(error);
-        }
+            this.changeShift(index, 'daysOfWeek', next.length === 7 ? '' : [...new Set(next)].sort().join(','));
+        }} />${t('weekday-' + day)}</label>`)}</div>`;
+    }
+    render() {
+        const current = this.current(), base = this.draft && this.overview?.revisions.find((r) => r.id === this.draft.baseRevisionId);
+        return html `<div class="page">
+      <div class="bar"><button ?disabled=${this.busy || this.dirty} @click=${() => this.load()}>${t('refresh')}</button>
+        <button ?disabled=${this.busy || !this.overview || !!this.draft} @click=${() => this.begin()}>${t('create-change')}</button></div>
+      ${this.message ? html `<p role="alert">${this.message}</p>` : ''}
+      <section class="current"><h2>${t('current')}</h2>
+        ${current ? html `<p>${t('revision-value', { n: current.revisionNumber })} · ${revisionDate(this.overview.schedule.find((s) => s.state === 'current').validFrom)}</p>${revisionContents(current, 'workShift')}`
+            : html `<p>${t('no-current')}</p>`}
+      </section>
+      ${this.draft ? html `<section><h2>${this.draft.id ? t('revision-value', { n: this.draft.revisionNumber }) : t('new')} · ${t(this.draft.id ? this.rowStatus(this.draft) : 'draft')}</h2>
+        ${this.draft.frozenAt ? revisionContents(this.draft, 'workShift') : html `
+        <div class="fields">${['description', 'timezone', 'reason'].map(field => html `<label>${t(field)}<input aria-label=${field} .value=${this.draft[field] ?? ''} @input=${(e) => this.change(field, e.target.value)} /></label>`)}
+          <label>${t('effectiveFrom')} · ${Intl.DateTimeFormat().resolvedOptions().timeZone}<input aria-label="effectiveFrom" type="datetime-local" .value=${localDateTime(this.draft.effectiveFrom)} @change=${(e) => { try {
+            this.change('effectiveFrom', isoFromLocal(e.target.value));
+        }
+        catch (err) {
+            this.message = err.message;
+        } }} /></label>
+        </div>
+        <div class="scroll"><table><thead><tr>${['name', 'fromDate', 'fromTime', 'toDate', 'toTime', 'daysOfWeek'].map(f => html `<th>${t(f)}</th>`)}<th></th></tr></thead><tbody>
+          ${this.draft.shifts.map((row, index) => html `<tr>
+            <td><input aria-label=${'name-' + index} .value=${row.name} @input=${(e) => this.changeShift(index, 'name', e.target.value)} />
+              <label>${t('description')}<input aria-label=${'description-' + index} .value=${row.description ?? ''} @input=${(e) => this.changeShift(index, 'description', e.target.value)} /></label></td>
+            ${['from', 'to'].map(side => html `<td><select aria-label=${side + 'Date-' + index} .value=${String(row[side + 'Date'])} @change=${(e) => this.changeShift(index, side + 'Date', Number(e.target.value))}>${[-1, 0, 1].map(d => html `<option value=${d}>${t('day-offset-' + d)}</option>`)}</select></td>
+              <td><input aria-label=${side + 'Time-' + index} type="time" .value=${row[side + 'Time']} @input=${(e) => this.changeShift(index, side + 'Time', e.target.value)} /></td>`)}
+            <td>${this.weekdays(row, index)}</td><td><button ?disabled=${this.draft.shifts.length === 1} @click=${() => this.change('shifts', this.draft.shifts.filter((_, i) => i !== index))}>${t('remove')}</button></td>
+          </tr>`)}
+        </tbody></table></div><button @click=${() => this.change('shifts', [...this.draft.shifts, { name: '', fromDate: 0, fromTime: '16:00', toDate: 1, toTime: '00:00', daysOfWeek: '' }])}>${t('add-shift')}</button>
+        <p class="notice">${t('shift-impact')}</p>
+        <div class="bar"><button ?disabled=${this.busy} @click=${() => this.save()}>${t('save-draft')}</button>
+          <button class="primary" ?disabled=${this.busy || this.dirty || !this.draft.id} @click=${() => this.submit()}>${t(this.overview.approvalRequired ? 'request-approval' : 'publish')}</button></div>`}
+        <button ?disabled=${this.busy} @click=${() => { if (!this.dirty || window.confirm(t('discard-changes'))) {
+            this.draft = undefined;
+            this.dirty = false;
+        } }}>${t('close-details')}</button>
+        ${this.draft.id ? html `<ops-master-revision-comparison axis="workShift" .before=${base} .after=${this.draft}></ops-master-revision-comparison>` : ''}
+      </section>` : ''}
+      ${this.overview ? html `<section><h2>${t('history')}</h2>${[...this.overview.revisions].reverse().map((row) => {
+            const period = this.overview.schedule.find((s) => s.revisionId === row.id), status = this.statuses[row.id];
+            return html `<div class="bar"><button ?disabled=${this.dirty} @click=${() => { this.draft = structuredClone(row); this.dirty = false; }}>${t('revision-value', { n: row.revisionNumber })}</button><span class="pill">${t(this.rowStatus(row))}</span>
+          <span>${period ? html `${revisionDate(period.validFrom)} → ${period.validTo ? revisionDate(period.validTo) : t('until-change')}` : html `${t('effectiveFrom')}: ${revisionDate(row.effectiveFrom)}`}</span>
+          ${status?.comment ? html `<span>${status.comment}</span>` : ''}${status?.open ? html `<button @click=${() => status.open()}>${t('approval-detail')}</button>` : ''}
+          <button ?disabled=${this.dirty} @click=${() => this.begin(row)}>${t('create-change')}</button></div>`;
+        })}</section>` : ''}
+    </div>`;
     }
 };
 __decorate([
     state(),
-    __metadata("design:type", Array)
-], WorkShift.prototype, "workShifts", void 0);
+    __metadata("design:type", Object)
+], WorkShift.prototype, "overview", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Array)
+    __metadata("design:type", Object)
 ], WorkShift.prototype, "draft", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Array)
-], WorkShift.prototype, "revisions", void 0);
+    __metadata("design:type", Object)
+], WorkShift.prototype, "message", void 0);
 __decorate([
     state(),
-    __metadata("design:type", String)
-], WorkShift.prototype, "problem", void 0);
+    __metadata("design:type", Object)
+], WorkShift.prototype, "busy", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], WorkShift.prototype, "announceFrom", void 0);
+], WorkShift.prototype, "statuses", void 0);
 WorkShift = __decorate([
     customElement('work-shift')
 ], WorkShift);
-function minutes(time) {
-    const parts = String(time ?? '').split(':');
-    return parts.length < 2 ? NaN : Number(parts[0]) * 60 + Number(parts[1]);
-}
-function round(value) {
-    return Math.round(value * 10) / 10;
-}
-/**
- * 구간 하나를 사람이 읽는 말로.
- *
- * 양쪽이 다 다음 날이면 「익일」을 두 번 적지 않는다 — 「익일 02:00~익일 08:00」은 같은 말을 두 번
- * 하는 것이고, 읽는 사람이 두 날을 오가는 것으로 잘못 본다.
- */
-function spanText(from, to) {
-    if (from === undefined || to === undefined) {
-        return '';
-    }
-    if (from >= 1440 && to >= 1440) {
-        return i18next.t('text.next-day-time', { time: `${plainTime(from)}~${plainTime(to)}` });
-    }
-    return `${cycleTime(from)}~${cycleTime(to)}`;
-}
-/** 24로 접은 시각. 「익일」 표시는 부르는 쪽이 붙인다. */
-function plainTime(minute) {
-    const wrapped = ((minute % 1440) + 1440) % 1440;
-    return `${String(Math.floor(wrapped / 60)).padStart(2, '0')}:${String(wrapped % 60).padStart(2, '0')}`;
-}
-/**
- * 한 바퀴 안의 분을 **사람이 읽는 시각**으로.
- *
- * 한 바퀴는 첫 교대에서 시작하므로 그 안의 분은 24시간을 넘어간다. 그것을 그대로 적으면 `26:00` 이
- * 되는데, 그런 시각은 시계에 없다. 24로 접고 넘어간 것은 「익일」로 적는다.
- */
-function cycleTime(minute) {
-    const text = plainTime(minute);
-    return minute >= 1440 ? i18next.t('text.next-day-time', { time: text }) : text;
-}
-/** 초는 안 적는다 — 교대 경계에 초를 쓰는 공장은 없고, 그 자리를 이름이 쓰는 편이 낫다. */
-function hhmm(time) {
-    const parts = String(time ?? '').split(':');
-    return parts.length < 2 ? String(time ?? '') : `${parts[0]}:${parts[1]}`;
-}
-/**
- * 사용 기간 한 줄 — **같은 날이면 날짜를 두 번 적지 않는다.**
- *
- * 앞서 양쪽에 날짜와 초를 다 적었더니 한 줄이 너무 길어, 두 줄로 나눠 보았다. 그랬더니 옆의 이름이
- * 두 줄 사이에 떠서 더 어색했다. 줄을 나눌 일이 아니라 **적을 것을 줄일 일**이었다.
- *
- * 초는 적지 않는다. 편성이 언제부터 언제까지 쓰였나에 초는 뜻이 없다.
- */
-function periodText(from, to) {
-    if (!from || !to) {
-        return '';
-    }
-    const start = new Date(from);
-    const end = new Date(to);
-    const lang = i18next.language || undefined;
-    const sameDay = start.toDateString() === end.toDateString();
-    const clock = (at) => at.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' });
-    return sameDay
-        ? `${start.toLocaleDateString(lang)} ${clock(start)} ~ ${clock(end)}`
-        : `${start.toLocaleDateString(lang)} ${clock(start)} ~ ${end.toLocaleDateString(lang)} ${clock(end)}`;
-}
-function day(value) {
-    return value ? new Date(value).toLocaleString(i18next.language || undefined) : '';
-}
-/** 저장된 편성은 JSON 문자열로 온다(스칼라). 읽을 수 없으면 없다고 답한다. */
-function parseShifts(value) {
-    if (Array.isArray(value)) {
-        return value;
-    }
-    if (typeof value !== 'string') {
-        return undefined;
-    }
-    try {
-        const parsed = JSON.parse(value);
-        return Array.isArray(parsed) ? parsed : undefined;
-    }
-    catch {
-        return undefined;
-    }
-}
 export { WorkShift };
 //# sourceMappingURL=work-shift.js.map