@things-factory/figure-ui 10.1.4 → 10.1.6

package/client/modeller/figure-history-panel.ts

@@ -0,0 +1,477 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
+import type { FigureGateFinding, FigureInspection, FigureVersion } from '../types.js'
+
+/**
+ * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ *
+ * ## 왜 저장 옆이 아니라 여기인가
+ *
+ * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
+ * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ *
+ * ## 저장하지 않은 것이 있으면 발행하지 않는다
+ *
+ * 발행은 **저장된 것**을 내보낸다. 화면에 고친 것이 남아 있는 채로 발행하면, 저작자가 보고 있는
+ * 것과 약속한 것이 다르다. 그래서 막고, 왜 막혔는지 적는다.
+ *
+ * ## 되돌리기는 초안으로 돌아온다
+ *
+ * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
+ */
+@customElement('figure-history-panel')
+export class FigureHistoryPanel extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: auto;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    :host([off]) {
+      display: none;
+    }
+
+    section {
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    h3 {
+      margin: 0 0 6px 0;
+      font-size: var(--ui-t-micro, 11px);
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    /* 지금 무엇인가 — 발행을 누르기 전에 읽는 한 줄 */
+    div[now] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    span[state] {
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-sys-color-secondary-container);
+    }
+
+    span[state][released] {
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
+    }
+
+    span[ver] {
+      font-family: var(--mono-font, monospace);
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    input,
+    button {
+      font: var(--input-field-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    input[note] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 5px 8px;
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+
+    button[release] {
+      width: 100%;
+      margin-top: 6px;
+      padding: 6px 0;
+      font-weight: 700;
+      color: var(--ui-on-accent, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    button[release][disabled] {
+      opacity: 0.45;
+      cursor: default;
+    }
+
+    /* 왜 못 누르는지 — 눌러 보고 알게 하지 않는다 */
+    p[why] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    p[failed] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-error);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 4px 8px;
+      align-items: baseline;
+      padding: 7px 0;
+      border-bottom: 1px dashed var(--md-sys-color-outline-variant);
+    }
+
+    li:last-child {
+      border-bottom: 0;
+    }
+
+    li span[no] {
+      font-family: var(--mono-font, monospace);
+      font-weight: 700;
+    }
+
+    li span[when] {
+      grid-column: 2 / 4;
+      font-size: 0.7rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li span[comment] {
+      grid-column: 1 / 4;
+      line-height: 1.5;
+    }
+
+    li button[revert] {
+      padding: 2px 8px;
+      color: var(--md-sys-color-on-surface);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    li button[revert]:hover {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+
+    /*
+      게이트 사유. 막는 것은 색으로도 말하고, 알리는 것은 조용히 둔다 — 둘을 같은 톤으로 두면
+      「이 중 어느 것이 발행을 막았나」를 사람이 다시 세어야 한다.
+    */
+    ul[gate] {
+      margin: var(--spacing-small, 6px) 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    li[head] {
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-error);
+    }
+
+    li[head][quiet] {
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li[finding] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 3px;
+      padding: 3px 6px;
+      font-size: 0.72rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-surface-container);
+      border-radius: 4px;
+    }
+
+    li[finding][blocking] {
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+    }
+
+    li[finding] code[where] {
+      font-family: var(--mono-font, monospace);
+      font-size: 0.68rem;
+      opacity: 0.85;
+    }
+
+    /* 왜 나쁜지는 곁글로 — 읽어야 하지만 잰 것보다 먼저 눈에 들 필요는 없다 */
+    li[finding] span[why-line] {
+      opacity: 0.8;
+    }
+
+    /* 무엇을 바꾸면 되나 — 이 줄이 실제로 사람이 할 일이다. 연장 표를 달아 눈에 걸리게 한다 */
+    li[finding] span[how-line] {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      padding-top: 2px;
+      font-weight: 600;
+    }
+    li[finding] span[how-line] md-icon {
+      --md-icon-size: 13px;
+      flex: none;
+      margin-top: 1px;
+    }
+
+    p[quiet] {
+      margin: 0;
+      line-height: 1.6;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+  `
+  ]
+
+  /** 지금 열려 있는 도형. 없으면(새로 만드는 중) 발행할 것이 없다. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureState?: 'draft' | 'released'
+  @property({ type: Number }) figureVersion = 0
+  /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
+  @property({ type: Boolean }) dirty = false
+
+  @state() private versions: FigureVersion[] = []
+  @state() private busy = false
+  @state() private failure = ''
+  /**
+   * 발행 판정. **저장된 정본에 대한 것**이라 저장할 때마다 다시 묻는다(`figureVersion` 이 아니라
+   * `dirty` 가 풀리는 순간이 그때다).
+   */
+  @state() private inspection?: FigureInspection
+
+  updated(changes: Map<string, unknown>) {
+    if (changes.has('figureId') || changes.has('figureVersion')) {
+      void this.reload()
+    }
+
+    /*
+      저장이 끝난 순간(dirty 가 풀림) 정본이 바뀌었으니 판정을 다시 묻는다. 저작 중(dirty)에는
+      묻지 않는다 — 서버에 있는 것은 저장 전 정본이라, 그 답은 화면에 있는 것과 다른 것을 말한다.
+    */
+    if (changes.has('figureId') || changes.has('dirty')) {
+      void this.inspect()
+    }
+  }
+
+  private async inspect() {
+    if (!this.figureId || this.dirty) {
+      this.inspection = undefined
+      return
+    }
+
+    try {
+      this.inspection = await inspectFigure(this.figureId)
+    } catch (e) {
+      /* 판정을 못 받은 것을 「통과」로 두지 않는다 — 모르는 것이다. 단추는 서버가 막는다. */
+      this.inspection = undefined
+      this.failure = (e as Error).message
+    }
+  }
+
+  private async reload() {
+    if (!this.figureId) {
+      this.versions = []
+      return
+    }
+
+    try {
+      this.versions = await fetchFigureVersions(this.figureId)
+      this.failure = ''
+    } catch (e) {
+      this.failure = (e as Error).message
+    }
+  }
+
+  render() {
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.release')}</h3>
+        ${this.figureId ? this.renderRelease() : html`<p quiet>${i18next.t('figure.text.save-the-figure-before-releasing')}</p>`}
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.released-versions')}</h3>
+        ${this.versions.length
+          ? html`<ul>
+              ${this.versions.map(version => this.renderVersion(version))}
+            </ul>`
+          : html`<p quiet>${i18next.t('figure.text.nothing-released-yet')}</p>`}
+      </section>
+    `
+  }
+
+  private renderRelease() {
+    const released = this.figureState === 'released'
+
+    /*
+      게이트가 막는 것과 알리는 것을 함께 낸다. **막는 것은 단추를 잠근다** — 눌러 보고 서버에게
+      거절당하는 것으로 알게 하지 않는다. 알리는 것은 잠그지 않고 그대로 보여 준다.
+    */
+    const blocking = (this.inspection?.findings ?? []).filter(finding => finding.blocking)
+    const advisory = (this.inspection?.findings ?? []).filter(finding => !finding.blocking)
+
+    /*
+      ── 「발행되나」에 **한 번만** 답한다 ─────────────────────────────────────
+      전에는 막는 목록의 머리가 「이것들이 발행을 막습니다」, 알리는 목록의 머리가 「발행은 되지만
+      확인해 보십시오」였다. 두 줄이 나란히 서서 화면이 「막힌다」와 「된다」를 함께 말했고, 사람이
+      「그래서 되는 건가」를 되물었다.
+
+      답은 이 한 줄이 하고, 아래 목록들은 **이유**일 뿐이다 — 그래서 목록 머리는 문장이 아니라
+      이름씨다(「고쳐야 하는 것」·「막지는 않는 것」).
+    */
+    const why = this.dirty
+      ? i18next.t('figure.text.release-needs-a-save-first')
+      : released
+        ? i18next.t('figure.text.already-released-edit-to-release-again')
+        : blocking.length
+          ? i18next.t('figure.text.cannot-release-now')
+          : ''
+
+    return html`
+      <div now>
+        <span state ?released=${released}>${i18next.t(released ? 'figure.label.figure-released' : 'figure.label.draft')}</span>
+        <span ver>${i18next.t('figure.text.version-number', { version: this.figureVersion ?? 0 })}</span>
+      </div>
+
+      <input note placeholder=${i18next.t('figure.text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
+
+      <button release ?disabled=${!!why || this.busy} @click=${() => this.release()}>
+        ${this.busy ? i18next.t('figure.text.releasing') : i18next.t('figure.button.release-figure')}
+      </button>
+
+      ${why ? html`<p why>${why}</p>` : nothing}
+      ${blocking.length
+        ? html`<ul gate>
+            <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+            ${blocking.map(finding => this.renderFinding(finding, true))}
+          </ul>`
+        : nothing}
+      ${advisory.length
+        ? html`<ul gate>
+            <li head quiet>${i18next.t('figure.text.does-not-block')}</li>
+            ${advisory.map(finding => this.renderFinding(finding, false))}
+          </ul>`
+        : nothing}
+      ${this.failure ? html`<p failed>${this.failure}</p>` : nothing}
+    `
+  }
+
+  /**
+   * 사유 한 줄 — **잰 것 · 왜 · 어떻게** 셋을 함께 말한다.
+   *
+   * 잰 것만 보여 줬더니 「1 조각이 2 조각으로 갈라진다」에서 사람이 멈췄다. 왜 나쁜지도, 무엇을
+   * 바꾸면 되는지도 알 수 없었다. 그 셋은 형식(`figure-model` 의 gate)이 만들고 여기서는 자리만
+   * 준다 — 화면이 문장을 지으면 서버가 거절할 때와 다른 말을 하게 된다.
+   */
+  private renderFinding(finding: FigureGateFinding, blocking: boolean) {
+    return html`
+      <li finding ?blocking=${blocking}>
+        <span msg>${finding.message}</span>
+        ${finding.at ? html`<code where>${finding.at}</code>` : nothing}
+        ${finding.why ? html`<span why-line>${finding.why}</span>` : nothing}
+        ${finding.how ? html`<span how-line><md-icon>build</md-icon>${finding.how}</span>` : nothing}
+      </li>
+    `
+  }
+
+  private renderVersion(version: FigureVersion) {
+    return html`
+      <li>
+        <span no>${i18next.t('figure.text.version-number', { version: version.version })}</span>
+        <span when>
+          ${version.updatedAt ? new Date(version.updatedAt).toLocaleString() : ''}
+          ${version.updater?.name ? ` · ${version.updater.name}` : ''}
+        </span>
+        <button revert ?disabled=${this.busy} @click=${() => this.revert(version.version)}>
+          ${i18next.t('figure.button.revert')}
+        </button>
+        ${version.comment ? html`<span comment>${version.comment}</span>` : nothing}
+      </li>
+    `
+  }
+
+  private async release() {
+    const input = this.renderRoot.querySelector('input[note]') as HTMLInputElement
+    const comment = input?.value?.trim()
+
+    this.busy = true
+    this.failure = ''
+
+    try {
+      const figure = await releaseFigure(this.figureId!, comment || undefined)
+      if (input) input.value = ''
+      /* 정본을 든 자리가 갱신한다 — 여기서 페이지 상태를 고쳐 쓰지 않는다. */
+      this.dispatchEvent(new CustomEvent('figure-released', { detail: { figure }, bubbles: true, composed: true }))
+      await this.reload()
+      await this.inspect()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async revert(version: number) {
+    /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
+    if (!confirm(i18next.t('figure.text.revert-to-version-confirm', { version }))) {
+      return
+    }
+
+    this.busy = true
+    this.failure = ''
+
+    try {
+      const result = await revertFigureVersion(this.figureId!, version)
+      this.dispatchEvent(new CustomEvent('figure-reverted', { detail: result, bubbles: true, composed: true }))
+      await this.reload()
+      /*
+        **되돌리면 정본이 바뀌므로 판정도 바뀐다.** 이것을 안 하면 옛 판의 사유가 새 정본 위에
+        남아 화면이 거짓말한다 — 되돌리기는 `dirty` 도 `figureVersion` 도 건드리지 않으므로
+        `updated` 의 감시로는 다시 묻지 않는다.
+      */
+      await this.inspect()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+}