@things-factory/figure-ui 10.1.3

package/client/pages/figure-list-page.ts

@@ -0,0 +1,274 @@
+import '@material/web/icon/icon.js'
+import '../viewparts/figure-card.js'
+
+import { css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { navigate, PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { deleteFigure, fetchFigureList } from '../graphql/index.js'
+import type { Figure } from '../types.js'
+
+const FigureListPageBase = localize(i18next)(PageView) as typeof PageView
+
+/**
+ * Figure 목록.
+ *
+ * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다.
+ * 대신 **저작자가 목록에서 판단할 수 있어야 하는 것**은 카드에 실는다 — 무게(삼각형
+ * 수)와 재활용 점수다. 그것을 저작면에 들어가서야 알면 늦다.
+ */
+@customElement('figure-list-page')
+export class FigureListPage extends FigureListPageBase {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      /* 걸러 보기 줄 */
+      div[filters] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      input[search] {
+        flex: 1;
+        min-width: 0;
+        max-width: 320px;
+        padding: 6px 10px;
+        font: var(--input-field-font, inherit);
+        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[state] {
+        padding: 5px 12px;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[state][selected] {
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border-color: transparent;
+      }
+
+      span[count] {
+        margin-left: auto;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 카드 격자 */
+      div[cards] {
+        flex: 1;
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        align-content: start;
+      }
+
+      /* ── 아무것도 없을 때 ──────────────────────────────────────────────
+         이 자리가 이 화면에서 가장 중요하다. 처음 온 사람은 여기서 이 도구가
+         무엇을 만드는 것인지 알게 된다. 「데이터 없음」으로 끝내지 않는다. */
+      div[empty] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        text-align: center;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[empty] md-icon {
+        --md-icon-size: 48px;
+        color: var(--md-sys-color-outline-variant);
+      }
+      div[empty] h2 {
+        margin: 0;
+        font: var(--theme-font, inherit);
+        font-size: var(--ui-t-title, 15px);
+        color: var(--md-sys-color-on-surface);
+      }
+      div[empty] p {
+        margin: 0;
+        max-width: 34em;
+        line-height: 1.6;
+      }
+      div[empty] button {
+        margin-top: var(--spacing-medium, 8px);
+        padding: 8px 18px;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-primary, #fff);
+        background-color: var(--md-sys-color-primary);
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+    `
+  ]
+
+  @state() private figures: Figure[] = []
+  @state() private total = 0
+  @state() private search = ''
+  @state() private stateFilter = ''
+  @state() private loaded = false
+
+  get context() {
+    return {
+      title: i18next.t('title.figures'),
+      actions: [
+        {
+          title: i18next.t('button.new-figure'),
+          action: () => this.openModeller()
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <div filters>
+        <input
+          search
+          type="search"
+          .value=${this.search}
+          placeholder=${i18next.t('text.search-figure-by-name-or-type')}
+          @change=${(e: Event) => {
+            this.search = (e.target as HTMLInputElement).value
+            this.reload()
+          }}
+        />
+        ${[
+          { value: '', label: i18next.t('label.all') },
+          { value: 'draft', label: i18next.t('label.draft') },
+          { value: 'released', label: i18next.t('label.released') }
+        ].map(
+          option => html`
+            <button
+              state
+              ?selected=${this.stateFilter === option.value}
+              @click=${() => {
+                this.stateFilter = option.value
+                this.reload()
+              }}
+            >
+              ${option.label}
+            </button>
+          `
+        )}
+        ${this.loaded ? html`<span count>${i18next.t('text.figure-count', { count: this.total })}</span>` : ''}
+      </div>
+
+      ${!this.loaded
+        ? html``
+        : this.figures.length === 0
+          ? this.renderEmpty()
+          : html`
+              <div cards>
+                ${this.figures.map(
+                  figure => html`
+                    <figure-card
+                      .figure=${figure}
+                      @open=${() => this.openModeller(figure.id)}
+                      @remove=${() => this.removeFigure(figure)}
+                    ></figure-card>
+                  `
+                )}
+              </div>
+            `}
+    `
+  }
+
+  /**
+   * 빈 화면.
+   *
+   * 걸러 보기 때문에 비었는지, 아직 만든 것이 없어서 비었는지를 **가른다.** 같은
+   * 문구를 쓰면 사용자가 검색어를 지워 볼 생각을 못 한다.
+   */
+  private renderEmpty() {
+    const filtered = !!this.search || !!this.stateFilter
+
+    if (filtered) {
+      return html`
+        <div empty>
+          <md-icon>search_off</md-icon>
+          <h2>${i18next.t('text.no-figure-matches-the-filter')}</h2>
+          <p>${i18next.t('text.try-clearing-the-search-or-state-filter')}</p>
+          <button
+            @click=${() => {
+              this.search = ''
+              this.stateFilter = ''
+              this.reload()
+            }}
+          >
+            ${i18next.t('button.clear-filters')}
+          </button>
+        </div>
+      `
+    }
+
+    return html`
+      <div empty>
+        <md-icon>deployed_code</md-icon>
+        <h2>${i18next.t('text.no-figure-yet')}</h2>
+        <p>${i18next.t('text.what-a-figure-is')}</p>
+        <button @click=${() => this.openModeller()}>${i18next.t('button.new-figure')}</button>
+      </div>
+    `
+  }
+
+  async pageUpdated(changes: Record<string, unknown>, lifecycle: Record<string, unknown>) {
+    if (this.active) {
+      await this.reload()
+    }
+  }
+
+  private async reload() {
+    const { items, total } = await fetchFigureList({
+      search: this.search || undefined,
+      state: this.stateFilter || undefined
+    })
+
+    this.figures = items
+    this.total = total
+    this.loaded = true
+  }
+
+  private openModeller(id?: string) {
+    navigate(id ? `figure-modeller/${id}` : 'figure-modeller')
+  }
+
+  /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
+  private async removeFigure(figure: Figure) {
+    // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다
+    const message = i18next.t('text.delete-figure-confirm', { name: figure.name })
+    if (!confirm(message)) {
+      return
+    }
+
+    await deleteFigure(figure.id)
+    await this.reload()
+  }
+}