@things-factory/figure-ui 10.1.4 → 10.1.5

package/client/graphql/index.ts

@@ -1,7 +1,15 @@
 import gql from 'graphql-tag'
 import { client } from '@operato/graphql'
 
-import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js'
+import type {
+  Figure,
+  FigureFinding,
+  FigureListResult,
+  FigurePatch,
+  FigureProposal,
+  FigureVersion,
+  NewFigure
+} from '../types.js'
 
 /**
  * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**
@@ -39,6 +47,7 @@ const FIGURE_LIST_FIELDS = `
   description
   category
   state
+  version
   score
   triangles
   groups
@@ -48,17 +57,19 @@ const FIGURE_LIST_FIELDS = `
   updater { id name }
 `
 
+/**
+ * 목록을 가져온다.
+ *
+ * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어
+ * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,
+ * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.
+ */
 export async function fetchFigureList(params: {
   page?: number
   limit?: number
-  search?: string
-  category?: string
-  state?: string
+  filters?: unknown[]
+  sortings?: { name: string; desc?: boolean }[]
 }): Promise<FigureListResult> {
-  const filters: { name: string; operator: string; value: unknown }[] = []
-  if (params.category) filters.push({ name: 'category', operator: 'eq', value: params.category })
-  if (params.state) filters.push({ name: 'state', operator: 'eq', value: params.state })
-
   const response = await client.query({
     query: gql`
       query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -69,9 +80,9 @@ export async function fetchFigureList(params: {
       }
     `,
     variables: {
-      filters,
+      filters: params.filters ?? [],
       pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },
-      sortings: [{ name: 'updatedAt', desc: true }]
+      sortings: params.sortings?.length ? params.sortings : [{ name: 'updatedAt', desc: true }]
     },
     fetchPolicy: 'network-only'
   })
@@ -88,7 +99,6 @@ export async function fetchFigure(id: string): Promise<Figure> {
           ${FIGURE_LIST_FIELDS}
           source
           properties
-          version
         }
       }
     `,
@@ -145,7 +155,7 @@ export async function updateFigure(id: string, patch: FigurePatch): Promise<Save
     mutation: gql`
       mutation ($id: String!, $patch: FigurePatch!) {
         updateFigure(id: $id, patch: $patch) {
-          figure { ${FIGURE_LIST_FIELDS} source version }
+          figure { ${FIGURE_LIST_FIELDS} source }
           violations { code message at }
         }
       }
@@ -207,3 +217,68 @@ export async function proposeFigure(request: {
 
   return unwrap<FigureProposal>(response, 'proposeFigure')
 }
+
+/**
+ * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ *
+ * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
+ * 발행을 푼다(초안으로 돌아온다).
+ */
+export async function releaseFigure(id: string, comment?: string): Promise<Figure> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ReleaseFigure($id: String!, $comment: String) {
+        releaseFigure(id: $id, comment: $comment) {
+          id
+          version
+          state
+          updatedAt
+        }
+      }
+    `,
+    variables: { id, comment }
+  })
+
+  return unwrap<Figure>(response, 'releaseFigure')
+}
+
+/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */
+export async function revertFigureVersion(id: string, version: number): Promise<SaveResult> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation RevertFigureVersion($id: String!, $version: Float!) {
+        revertFigureVersion(id: $id, version: $version) {
+          figure { ${FIGURE_LIST_FIELDS} source }
+          violations { code message at }
+        }
+      }
+    `,
+    variables: { id, version }
+  })
+
+  return unwrap<SaveResult>(response, 'revertFigureVersion')
+}
+
+/** 발행된 판들 — 최근 것부터 열 개. */
+export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
+  const response = await client.query({
+    query: gql`
+      query FigureVersions($id: String!) {
+        figureVersions(id: $id) {
+          version
+          comment
+          state
+          updatedAt
+          updater { id name }
+          score
+          triangles
+          groups
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []
+}

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

@@ -0,0 +1,324 @@
+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 { fetchFigureVersions, releaseFigure, revertFigureVersion } from '../graphql/index.js'
+import type { FigureVersion } from '../types.js'
+
+/**
+ * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ *
+ * ## 왜 저장 옆이 아니라 여기인가
+ *
+ * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
+ * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ *
+ * ## 저장하지 않은 것이 있으면 발행하지 않는다
+ *
+ * 발행은 **저장된 것**을 내보낸다. 화면에 고친 것이 남아 있는 채로 발행하면, 저작자가 보고 있는
+ * 것과 약속한 것이 다르다. 그래서 막고, 왜 막혔는지 적는다.
+ *
+ * ## 되돌리기는 초안으로 돌아온다
+ *
+ * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
+ */
+@customElement('figure-history-panel')
+export class FigureHistoryPanel extends localize(i18next)(LitElement) {
+  static styles = 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;
+    }
+
+    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 = ''
+
+  updated(changes: Map<string, unknown>) {
+    if (changes.has('figureId') || changes.has('figureVersion')) {
+      void this.reload()
+    }
+  }
+
+  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('label.release')}</h3>
+        ${this.figureId ? this.renderRelease() : html`<p quiet>${i18next.t('text.save-the-figure-before-releasing')}</p>`}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.released-versions')}</h3>
+        ${this.versions.length
+          ? html`<ul>
+              ${this.versions.map(version => this.renderVersion(version))}
+            </ul>`
+          : html`<p quiet>${i18next.t('text.nothing-released-yet')}</p>`}
+      </section>
+    `
+  }
+
+  private renderRelease() {
+    const released = this.figureState === 'released'
+    /* 막는 이유는 하나씩 말한다. 「발행할 수 없습니다」로 뭉치면 무엇을 하면 되는지 모른다. */
+    const why = this.dirty
+      ? i18next.t('text.release-needs-a-save-first')
+      : released
+        ? i18next.t('text.already-released-edit-to-release-again')
+        : ''
+
+    return html`
+      <div now>
+        <span state ?released=${released}>${i18next.t(released ? 'label.released' : 'label.draft')}</span>
+        <span ver>${i18next.t('text.version-number', { version: this.figureVersion ?? 0 })}</span>
+      </div>
+
+      <input note placeholder=${i18next.t('text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
+
+      <button release ?disabled=${!!why || this.busy} @click=${() => this.release()}>
+        ${this.busy ? i18next.t('text.releasing') : i18next.t('button.release')}
+      </button>
+
+      ${why ? html`<p why>${why}</p>` : nothing}
+      ${this.failure ? html`<p failed>${this.failure}</p>` : nothing}
+    `
+  }
+
+  private renderVersion(version: FigureVersion) {
+    return html`
+      <li>
+        <span no>${i18next.t('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('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()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async revert(version: number) {
+    /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
+    if (!confirm(i18next.t('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()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+}

package/client/modeller/figure-side.ts

@@ -1,6 +1,7 @@
 import './figure-inspector.js'
 import './figure-report.js'
 import './figure-settings.js'
+import './figure-history-panel.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -12,7 +13,7 @@ import type { BoardModel, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 
-type Tab = 'properties' | 'verdict' | 'view'
+type Tab = 'properties' | 'verdict' | 'view' | 'history'
 
 /**
  * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
@@ -117,6 +118,11 @@ export class FigureSide extends localize(i18next)(LitElement) {
     곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
   */
   @property({ type: String }) figureName = ''
+  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureState?: 'draft' | 'released'
+  @property({ type: Number }) figureVersion = 0
+  @property({ type: Boolean }) dirty = false
 
   @property({ type: Object }) board?: BoardModel
   @property({ type: Array }) parts: PartModel[] = []
@@ -135,6 +141,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
         ${this.renderTab('properties', i18next.t('label.properties'))}
         ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}
         ${this.renderTab('view', i18next.t('label.view'))}
+        ${this.renderTab('history', i18next.t('label.history'))}
       </div>
 
       <figure-inspector
@@ -152,6 +159,17 @@ export class FigureSide extends localize(i18next)(LitElement) {
       ></figure-report>
 
       <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>
+
+      <!--
+        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.
+      -->
+      <figure-history-panel
+        ?off=${this.tab !== 'history'}
+        .figureId=${this.figureId}
+        .figureState=${this.figureState}
+        .figureVersion=${this.figureVersion}
+        .dirty=${this.dirty}
+      ></figure-history-panel>
     `
   }