@things-factory/ops-master 10.1.34 → 10.1.36

package/dist-client/pages/master/revision-workspace.js

@@ -0,0 +1,752 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist/ox-grist.js';
+import gql from 'graphql-tag';
+import { html, css, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { OxPrompt } from '@operato/popup';
+import { IDENTITY, MasterPageBase } from './master-page-base.js';
+import { requestMasterChangeApproval, masterChangeStatus } from '../../master-change-approval.js';
+import { revisionText as t, revisionDate as date, revisionStyles } from './revision-comparison.js';
+import { materialRevisionFields } from './material-revision-fields.js';
+import { localDateTime, isoFromLocal } from './revision-view.js';
+/** Shared workflow, not shared domain payload. Both consumers keep their existing page/URL identities. */
+export class RevisionWorkspace extends MasterPageBase {
+    constructor() {
+        super(...arguments);
+        this.newName = '';
+        this.busy = false;
+        this.dirty = false;
+        this.failure = '';
+        this.message = '';
+        this.statuses = {};
+        this.serial = 0;
+    }
+    static { this.styles = [
+        ...MasterPageBase.styles,
+        revisionStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+      ox-grist {
+        flex: 1;
+        min-height: 240px;
+      }
+      ox-grist[hidden] {
+        display: none;
+      }
+      .workspace {
+        overflow: auto;
+        flex: 1;
+        padding: 20px 24px;
+      }
+      .bar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .bar h2 {
+        margin: 8px 0;
+        font-size: var(--ui-t-title, 20px);
+        flex: 1;
+        overflow-wrap: anywhere;
+      }
+      .summary {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+        gap: 16px;
+        margin: 20px 0;
+      }
+      .card {
+        padding: 16px;
+        border: 1px solid var(--ui-line);
+        border-radius: 6px;
+        background: var(--md-sys-color-surface);
+      }
+      .card h3 {
+        margin: 0 0 10px;
+      }
+      .card p {
+        margin: 8px 0;
+      }
+      .current {
+        border-inline-start: 4px solid var(--md-sys-color-primary);
+      }
+      .fields {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+        gap: 16px;
+        margin: 16px 0;
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        font-size: var(--ui-t-small, 13px);
+      }
+      input,
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 8px;
+        border: 1px solid var(--ui-line);
+        border-radius: 4px;
+        font: inherit;
+        background: var(--md-sys-color-surface);
+        color: inherit;
+      }
+      td input {
+        min-width: 100px;
+      }
+      textarea {
+        min-height: 70px;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin-top: 20px;
+        align-items: center;
+      }
+      .notice {
+        padding: 12px;
+        background: var(--md-sys-color-surface-container);
+        border-radius: 4px;
+      }
+      .failure {
+        padding: 12px;
+        border-inline-start: 4px solid var(--md-sys-color-error);
+        color: var(--md-sys-color-error);
+      }
+      .empty {
+        padding: 24px;
+      }
+      .hint {
+        font-size: var(--ui-t-small, 13px);
+      }
+      .editor {
+        border-top: 1px solid var(--ui-line);
+        margin-top: 20px;
+        padding-top: 12px;
+      }
+      @media (max-width: 700px) {
+        .workspace {
+          padding: 12px;
+        }
+        .summary {
+          grid-template-columns: 1fr;
+        }
+        .fields {
+          grid-template-columns: 1fr;
+        }
+      }
+    `
+    ]; }
+    get recipe() {
+        return this.axis === 'recipeDefinition';
+    }
+    get material() { return this.axis === 'materialDefinition'; }
+    get names() {
+        if (this.material)
+            return { noun: 'material', list: 'materialDefinitions', overview: 'materialDefinitionRevisions', subject: 'materialId', create: 'createMaterialDefinitionDraft', edit: 'editMaterialDefinitionDraft', publish: 'publishMaterialDefinitionDraft' };
+        return this.recipe
+            ? {
+                noun: 'recipe',
+                list: 'recipeDefinitions',
+                overview: 'recipeRevisions',
+                subject: 'recipeId',
+                create: 'createRecipeDraft',
+                edit: 'editRecipeDraft',
+                publish: 'publishRecipeDraft'
+            }
+            : {
+                noun: 'spec',
+                list: 'testSpecifications',
+                overview: 'testSpecificationRevisions',
+                subject: 'specId',
+                create: 'createTestSpecificationDraft',
+                edit: 'editTestSpecificationDraft',
+                publish: 'publishTestSpecificationDraft'
+            };
+    }
+    get spec() {
+        return {
+            key: this.axis,
+            title: this.material ? 'material' : this.recipe ? 'recipe' : 'test-specification',
+            help: 'ops-master/' + (this.material ? 'material-definition' : this.recipe ? 'recipe-definition' : 'test-specification'),
+            query: this.names.list,
+            mutation: this.material ? 'updateMultipleMaterialDefinition' : this.recipe ? 'updateMultipleRecipeDefinition' : 'updateMultipleTestSpecification',
+            columns: [
+                ...IDENTITY,
+                ...(this.material ? [
+                    { name: 'rootClasses', label: 'material-type', type: 'list', width: 120 },
+                    { name: 'classPath', label: 'class-lineage', type: 'list', width: 180 },
+                    { name: 'madeBy', label: 'made-by', type: 'list', width: 180 },
+                    { name: 'usedIn', label: 'used-in', type: 'list', width: 180 }
+                ] : []),
+                { name: 'revisionNumber', label: 'revision', type: 'number' },
+                { name: 'effectiveStart', label: 'effective-start', type: 'date' }
+            ].map(column => ({ ...column, readonly: true }))
+        };
+    }
+    get pathSegmentNarrowsList() {
+        return false;
+    }
+    get context() {
+        return {
+            ...super.context,
+            importable: undefined,
+            exportable: this.overview || this.draft ? undefined : super.context.exportable,
+            search: this.overview || this.draft ? undefined : super.context.search,
+            description: t('purpose'),
+            actions: this.draft && !this.draft.frozenAt
+                ? [
+                    {
+                        title: t(this.approvalRequired ? 'request-approval' : 'publish'),
+                        icon: 'done',
+                        emphasis: { raised: true },
+                        disabled: this.busy || this.approvalRequired === undefined,
+                        action: () => this.submit()
+                    }
+                ]
+                : this.overview || this.draft
+                    ? []
+                    : [
+                        {
+                            title: t(this.material ? 'new-material' : this.recipe ? 'new-recipe' : 'new-spec'),
+                            icon: 'add',
+                            emphasis: { raised: true },
+                            action: () => this.startNew()
+                        }
+                    ]
+        };
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (this.active && ['overview', 'draft', 'busy', 'approvalRequired'].some(key => changes.has(key)))
+            this.updateContext();
+    }
+    configOf() {
+        const config = super.configOf();
+        return { ...config, rows: { ...config.rows, appendable: false, selectable: { multiple: false } } };
+    }
+    async pageInitialized() {
+        await super.pageInitialized();
+        await this.openResource(this.lifecycle?.resourceId);
+    }
+    async pageUpdated(changes, after, before) {
+        await super.pageUpdated();
+        if (after?.resourceId !== before?.resourceId)
+            await this.openResource(after?.resourceId);
+    }
+    async openResource(key) {
+        if (!key)
+            return;
+        await this.run(async () => {
+            const response = await client.query({
+                query: gql(`query($filters:[Filter!]){${this.names.list}(filters:$filters){items{id}}}`),
+                variables: { filters: [{ name: 'name', operator: 'eq', value: key }] },
+                fetchPolicy: 'no-cache'
+            });
+            this.assert(response);
+            const row = response.data[this.names.list].items[0];
+            if (row)
+                await this.load(row.id);
+        });
+    }
+    assert(response) {
+        if (response.errors?.length)
+            throw new Error(response.errors.map((e) => e.message).join('\n'));
+        if (!response.data)
+            throw new Error(t('no-response'));
+    }
+    async run(work) {
+        if (this.busy)
+            return;
+        this.busy = true;
+        this.failure = '';
+        try {
+            await work();
+        }
+        catch (error) {
+            this.failure = error.message;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async canLeave() {
+        return (!this.dirty ||
+            !!(await OxPrompt.open({
+                title: t('unsaved'),
+                text: t('discard-question'),
+                confirmButton: { text: t('discard') },
+                cancelButton: { text: t('keep-editing') }
+            })));
+    }
+    blank() {
+        return {
+            version: '1',
+            description: '',
+            materialDefinitionName: '',
+            effectiveFrom: new Date().toISOString(),
+            reason: '',
+            materialClassIds: [], properties: [], testSpecificationIds: [],
+            criteria: [],
+            inputs: [],
+            outputs: []
+        };
+    }
+    async policy() {
+        const response = await client.query({
+            query: gql `
+        query ($axis: String!) {
+          masterChangePolicy(axis: $axis)
+        }
+      `,
+            variables: { axis: this.axis },
+            fetchPolicy: 'no-cache'
+        });
+        this.assert(response);
+        this.approvalRequired = response.data.masterChangePolicy.approvalRequired;
+    }
+    async startNew() {
+        if (!(await this.canLeave()))
+            return;
+        await this.run(async () => {
+            ++this.serial;
+            this.overview = undefined;
+            this.draft = this.blank();
+            this.newName = '';
+            this.dirty = false;
+            this.message = '';
+            await this.policy();
+        });
+    }
+    async pick(event) {
+        const row = event.detail?.records?.[0] ?? event.detail?.added?.[0];
+        if (!row?.id || !(await this.canLeave()))
+            return;
+        await this.run(async () => {
+            this.draft = undefined;
+            this.dirty = false;
+            this.message = '';
+            await this.load(row.id);
+        });
+    }
+    async load(id) {
+        const serial = ++this.serial;
+        const response = await client.query({
+            query: gql(`query($id:String!){${this.names.overview}(${this.names.subject}:$id)}`),
+            variables: { id },
+            fetchPolicy: 'no-cache'
+        });
+        this.assert(response);
+        if (serial !== this.serial)
+            return;
+        this.overview = response.data[this.names.overview];
+        await this.policy();
+        const statuses = {};
+        await Promise.all(this.overview.revisions
+            .filter((row) => row.activityInstanceId)
+            .map(async (row) => {
+            try {
+                statuses[row.id] = await masterChangeStatus(this, row.activityInstanceId);
+            }
+            catch (error) {
+                statuses[row.id] = { state: 'unknown', comment: error.message };
+            }
+        }));
+        if (serial === this.serial)
+            this.statuses = statuses;
+    }
+    get currentSegment() {
+        return this.overview?.schedule.find((s) => s.state === 'current');
+    }
+    get current() {
+        return this.overview?.revisions.find((r) => r.id === this.currentSegment?.revisionId);
+    }
+    get comparisonBase() {
+        if (this.draft?.id && (!this.dirty || this.draft.frozenAt))
+            return this.overview?.revisions.find((r) => r.id === this.draft.baseRevisionId);
+        const at = this.draft?.effectiveFrom;
+        const segment = this.overview?.schedule.find((s) => s.validFrom <= at && (!s.validTo || at < s.validTo));
+        return this.overview?.revisions.find((r) => r.id === segment?.revisionId);
+    }
+    stateOf(row) {
+        const segment = this.overview?.schedule.find((s) => s.revisionId === row.id);
+        return (segment?.state ??
+            (row.activityInstanceId ? (this.statuses[row.id]?.state ?? 'unknown') : row.frozenAt ? 'approved' : 'draft'));
+    }
+    async openRevision(row, fork = false) {
+        if (!(await this.canLeave()))
+            return;
+        this.draft = structuredClone(row ?? this.blank());
+        if (fork)
+            this.draft = {
+                ...this.draft,
+                id: undefined,
+                revisionNumber: undefined,
+                frozenAt: undefined,
+                activityInstanceId: undefined,
+                editGeneration: undefined,
+                baseRevisionId: undefined,
+                effectiveFrom: new Date().toISOString(),
+                reason: ''
+            };
+        this.dirty = false;
+        this.message = '';
+        await this.updateComplete;
+        this.renderRoot.querySelector('.editor')?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+    change(field, value) {
+        this.draft = { ...this.draft, [field]: value };
+        this.dirty = true;
+        this.message = '';
+    }
+    line(section, index, field, value) {
+        const rows = this.draft[section].map((row) => ({ ...row, limit: { ...row.limit } }));
+        const numeric = ['qty', 'minimum', 'maximum'].includes(field);
+        const next = numeric ? (value === '' ? undefined : Number(value)) : value;
+        if (section === 'criteria' && ['minimum', 'maximum', 'uom'].includes(field))
+            rows[index].limit[field] = next;
+        else
+            rows[index][field] = next;
+        this.change(section, rows);
+    }
+    async save() {
+        await this.run(async () => {
+            await this.persist();
+            this.message = t('saved');
+        });
+    }
+    async persist() {
+        if (!this.draft || this.draft.frozenAt)
+            return;
+        const invalid = this.renderRoot.querySelector('input:invalid,textarea:invalid');
+        if (invalid) {
+            invalid.reportValidity();
+            throw new Error(t('required-fields'));
+        }
+        const { version, description, criteria, inputs, outputs, materialDefinitionName, route, effectiveFrom, reason } = this.draft;
+        const content = this.material
+            ? { description, materialClassIds: this.draft.materialClassIds, properties: this.draft.properties, testSpecificationIds: this.draft.testSpecificationIds, effectiveFrom, reason }
+            : this.recipe
+                ? { description, inputs, outputs, materialDefinitionName, route: route || null, effectiveFrom, reason }
+                : { version, description, criteria, effectiveFrom, reason };
+        const n = this.names;
+        const response = this.draft.id
+            ? await client.mutate({
+                mutation: gql(`mutation($id:String!,$generation:Int!,$content:Object!){${n.edit}(revisionId:$id,editGeneration:$generation,content:$content)}`),
+                variables: { id: this.draft.id, generation: this.draft.editGeneration, content }
+            })
+            : await client.mutate({
+                mutation: gql(`mutation($subject:String,$name:String,$content:Object!){${n.create}(${n.subject}:$subject,name:$name,content:$content)}`),
+                variables: { subject: this.overview?.[n.subject], name: this.overview ? undefined : this.newName, content }
+            });
+        this.assert(response);
+        this.draft = response.data[n.edit] ?? response.data[n.create];
+        this.dirty = false;
+        await this.load(this.draft[n.subject]);
+        await this.grist?.fetch();
+    }
+    async submit() {
+        await this.run(async () => {
+            await this.persist();
+            if (!this.draft?.id || this.draft.frozenAt)
+                return;
+            await this.policy();
+            if (this.approvalRequired)
+                await requestMasterChangeApproval(this, {
+                    axis: this.axis,
+                    revisionId: this.draft.id,
+                    editGeneration: this.draft.editGeneration
+                });
+            else {
+                const response = await client.mutate({
+                    mutation: gql(`mutation($id:String!,$generation:Int!){${this.names.publish}(revisionId:$id,editGeneration:$generation)}`),
+                    variables: { id: this.draft.id, generation: this.draft.editGeneration }
+                });
+                this.assert(response);
+            }
+            const id = this.draft.id;
+            await this.load(this.draft[this.names.subject]);
+            this.draft = this.overview.revisions.find((r) => r.id === id);
+            await this.grist?.fetch();
+            this.message = t(this.approvalRequired ? 'submitted' : 'published');
+        });
+    }
+    content(row, editable = false) {
+        if (this.material)
+            return materialRevisionFields(row, editable ? (field, value) => this.change(field, value) : undefined);
+        return (this.recipe ? ['inputs', 'outputs'] : ['criteria']).map(section => {
+            const fields = section === 'criteria'
+                ? ['id', 'description', 'evaluatedPropertyId', 'minimum', 'maximum', 'uom', 'expression']
+                : section === 'inputs'
+                    ? ['material', 'qty', 'operation']
+                    : ['material', 'qty'];
+            return html `<h3>${t(section)}</h3>
+        <div class="scroll">
+          <table>
+            <thead>
+              <tr>
+                ${fields.map(field => html `<th>${t(field)}</th>`)}${editable ? html `<th>${t('actions')}</th>` : nothing}
+              </tr>
+            </thead>
+            <tbody>
+              ${(row[section] ?? []).map((line, index) => html `<tr>
+                    ${fields.map(field => {
+                const value = section === 'criteria' && ['minimum', 'maximum', 'uom'].includes(field)
+                    ? line.limit?.[field]
+                    : line[field];
+                return html `<td>
+                        ${editable ? html `<input aria-label=${t(section) + ' ' + (index + 1) + ' ' + t(field)} .value=${String(value ?? '')} type=${['qty', 'minimum', 'maximum'].includes(field) ? 'number' : 'text'} step="any" ?required=${['id', 'material', 'qty', 'evaluatedPropertyId'].includes(field)} @input=${(e) => this.line(section, index, field, e.target.value)} />` : (value ?? '—')}
+                      </td>`;
+            })}${editable
+                ? html `<td>
+                            <button
+                              aria-label=${t('remove-row', { n: index + 1 })}
+                              @click=${() => this.change(section, row[section].filter((_, i) => i !== index))}
+                            >
+                              ${t('remove')}
+                            </button>
+                          </td>`
+                : nothing}
+                  </tr>`)}
+            </tbody>
+          </table>
+        </div>
+        ${editable ? html `<button @click=${() => this.change(section, [...row[section], section === 'criteria' ? { id: '', description: '', limit: {} } : { lineKey: crypto.randomUUID(), material: '', qty: 1 }])}>${t('add-' + section)}</button>` : nothing}
+        ${section === 'criteria' && row.criteria?.some((c) => c.expression) ? html `<p class="notice">${t('expression-preserved')}</p>` : nothing}`;
+        });
+    }
+    status(row) {
+        const state = this.stateOf(row), decision = this.statuses[row.id];
+        return html `<span class="pill">${t(state)}</span
+      >${decision?.who ? html `<span> · ${decision.who}</span>` : ''}${decision?.comment ? html `<p>${decision.comment}</p>` : ''}${decision?.open ? html `<button @click=${() => decision.open()}>${t('approval-detail')}</button>` : ''}`;
+    }
+    render() {
+        const current = this.current;
+        const next = this.overview?.schedule.filter((s) => s.state === 'scheduled') ?? [];
+        const changes = this.overview?.revisions.filter((r) => !this.overview.schedule.some((s) => s.revisionId === r.id)) ?? [];
+        const readonly = !!this.draft?.frozenAt || this.busy;
+        return html ` <ox-grist
+        ?hidden=${!!this.overview || !!this.draft}
+        .mode=${this.mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        @select-record-change=${this.pick.bind(this)}
+      ></ox-grist>
+      ${this.overview || this.draft
+            ? html `<main class="workspace" aria-busy=${this.busy}>
+              <div class="bar">
+                <button
+                  ?disabled=${this.busy}
+                  @click=${async () => {
+                if (await this.canLeave()) {
+                    this.overview = undefined;
+                    this.draft = undefined;
+                    this.dirty = false;
+                    await this.grist?.fetch();
+                }
+            }}
+                >
+                  ${t('back-list')}
+                </button>
+                <h2>${this.overview?.name ?? t(this.material ? 'new-material' : this.recipe ? 'new-recipe' : 'new-spec')}</h2>
+                ${this.overview
+                ? html `<button
+                          ?disabled=${this.busy}
+                          @click=${() => this.run(async () => {
+                    this.message = '';
+                    await this.load(this.overview[this.names.subject]);
+                    await this.grist?.fetch();
+                })}
+                        >
+                          ${t('refresh')}</button
+                        ><button
+                          class="primary"
+                          ?disabled=${this.busy}
+                          @click=${() => this.openRevision(current, true)}
+                        >
+                          ${t('create-change')}
+                        </button>`
+                : ''}
+              </div>
+              ${this.overview
+                ? html `<div class="summary">
+                        <section class="card current">
+                          <h3>${t('current')}</h3>
+                          ${current
+                    ? html `<strong>${t('revision-value', { n: current.revisionNumber })}</strong>
+                                  <p>
+                                    ${date(this.currentSegment.validFrom)} →
+                                    ${this.currentSegment.validTo ? date(this.currentSegment.validTo) : t('until-change')}
+                                  </p>
+                                  <button @click=${() => this.openRevision(current)}>${t('view-current')}</button>`
+                    : html `<p>${t('no-current')}</p>`}
+                        </section>
+                        <section class="card">
+                          <h3>${t('changes-in-progress')} · ${changes.length}</h3>
+                          ${changes.length ? changes.map((row) => html `<p><button @click=${() => this.openRevision(row)}>${t('revision-value', { n: row.revisionNumber })}</button> ${this.status(row)}</p>`) : html `<p class="muted">${t('no-drafts')}</p>`}
+                        </section>
+                        <section class="card">
+                          <h3>${t('scheduled')}</h3>
+                          ${next.length
+                    ? next.map((segment) => {
+                        const row = this.overview.revisions.find((r) => r.id === segment.revisionId);
+                        return html `<p>
+                                    <button @click=${() => this.openRevision(row)}>
+                                      ${t('revision-value', { n: row.revisionNumber })}
+                                    </button>
+                                    · ${date(segment.validFrom)}
+                                  </p>`;
+                    })
+                    : html `<p class="muted">${t('no-scheduled')}</p>`}
+                        </section>
+                      </div>
+                      ${!this.draft && current
+                    ? html `<h3>${t('current-content')}</h3>
+                              <p>${current.description}</p>
+                              ${this.content(current)}`
+                    : ''}
+                      <details>
+                        <summary>${t('history')}</summary>
+                        <table>
+                          <thead>
+                            <tr>
+                              <th>${t('revision')}</th>
+                              <th>${t('state')}</th>
+                              <th>${t('effectiveFrom')}</th>
+                              <th>${t('reason')}</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            ${[...this.overview.revisions].reverse().map((row) => html `<tr>
+                                  <td><button @click=${() => this.openRevision(row)}>${row.revisionNumber}</button></td>
+                                  <td>${this.status(row)}</td>
+                                  <td>${date(row.effectiveFrom)}</td>
+                                  <td>${row.reason}</td>
+                                </tr>`)}
+                          </tbody>
+                        </table>
+                      </details>`
+                : ''}
+              ${this.draft
+                ? html `<section class="editor">
+                      <div class="bar">
+                        <h3>
+                          ${this.draft.id ? t('revision-value', { n: this.draft.revisionNumber }) : t('new-change')}
+                        </h3>
+                        ${this.draft.id ? this.status(this.draft) : ''}<button
+                          ?disabled=${this.busy}
+                          @click=${async () => {
+                    if (await this.canLeave()) {
+                        this.draft = undefined;
+                        this.dirty = false;
+                    }
+                }}
+                        >
+                          ${t('close-editor')}
+                        </button>
+                      </div>
+                      <p class="notice">${t(this.material ? 'material-impact' : this.recipe ? 'recipe-impact' : 'spec-impact')}</p>
+                      <div class="fields">
+                        ${!this.overview
+                    ? html `<label
+                                >${t('name')}<input
+                                  required
+                                  .value=${this.newName}
+                                  @input=${(e) => {
+                        this.newName = e.target.value;
+                        this.dirty = true;
+                    }}
+                              /></label>`
+                    : ''}
+                        ${['description', ...(this.material ? [] : this.recipe ? ['materialDefinitionName', 'route'] : ['version'])].map(field => html `<label>${t(field)}<input ?disabled=${readonly} ?required=${field === 'materialDefinitionName' || field === 'version'} .value=${this.draft[field] ?? ''} @input=${(e) => this.change(field, e.target.value)} /></label>`)}
+                        <label
+                          >${t('effectiveFrom')}<input
+                            type="datetime-local"
+                            required
+                            ?disabled=${readonly}
+                            .value=${localDateTime(this.draft.effectiveFrom)}
+                            @change=${(e) => {
+                    try {
+                        this.change('effectiveFrom', isoFromLocal(e.target.value));
+                    }
+                    catch {
+                        this.failure = t('invalid-date');
+                    }
+                }}
+                          /><span class="muted hint"
+                            >${t('time-zone')} · ${Intl.DateTimeFormat().resolvedOptions().timeZone}</span
+                          ></label
+                        >
+                        <label
+                          >${t('reason')}<textarea
+                            required
+                            ?disabled=${readonly}
+                            .value=${this.draft.reason ?? ''}
+                            @input=${(e) => this.change('reason', e.target.value)}
+                          ></textarea>
+                        </label>
+                      </div>
+                      ${this.content(this.draft, !readonly)}
+                      <ops-master-revision-comparison
+                        .axis=${this.axis}
+                        .before=${this.comparisonBase}
+                        .after=${this.draft}
+                      ></ops-master-revision-comparison>
+                      <div class="actions">
+                        ${this.draft.frozenAt ? html `<button ?disabled=${this.busy} @click=${() => this.openRevision(this.draft, true)}>${t('create-change')}</button>` : html `<button ?disabled=${this.busy} @click=${() => this.save()}>${t('save-draft')}</button>`}${this.dirty ? html `<span>${t('unsaved')}</span>` : ''}
+                      </div>
+                    </section>`
+                : ''}
+              ${this.message ? html `<p role="status" class="notice">${this.message}</p>` : ''}${this.failure ? html `<p role="alert" class="failure">${this.failure}</p>` : ''}
+            </main>`
+            : this.failure
+                ? html `<p role="alert" class="failure">${this.failure}</p>`
+                : nothing}`;
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "overview", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "draft", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "newName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "dirty", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "failure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "message", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "approvalRequired", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RevisionWorkspace.prototype, "statuses", void 0);
+//# sourceMappingURL=revision-workspace.js.map