@things-factory/figure-ui 10.1.5 → 10.1.7

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

@@ -1,5 +1,6 @@
 import '@operato/data-grist'
 import '@material/web/icon/icon.js'
+import '../viewparts/figure-thumb.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -35,12 +36,21 @@ const CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'
 const RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const DRAFT = 'color: var(--md-sys-color-tertiary);'
-const badge = (low: boolean) =>
-  `padding: 0 6px; border-radius: var(--md-sys-shape-corner-small, 4px); font-weight: 700; ${
-    low
-      ? 'color: var(--md-sys-color-on-error, #fff); background-color: var(--md-sys-color-error);'
-      : 'color: var(--md-sys-color-on-primary-container); background-color: var(--md-sys-color-primary-container);'
-  }`
+/**
+ * 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다.
+ *
+ * **`inline-flex` 를 쓰지 않는다.** 썼더니 점이 뜨는 카드에서만 이 값이 옆의 두 값과 밑줄이
+ * 어긋났다 — inline-flex 상자의 밑줄은 **첫 항목**에서 오는데, 첫 항목이 글자 없는 점이라
+ * 밑줄이 없어 브라우저가 상자 아래를 밑줄로 삼는다. 점이 없는 카드(50 이상)는 멀쩡했으므로
+ * 한 줄에 세 값이 나란히 설 때만 눈에 띄었다.
+ *
+ * 그냥 인라인으로 두면 이 상자의 밑줄이 곧 숫자의 밑줄이라 옆의 둘과 맞는다. 점은 제 몫으로
+ * 글자 가운데에 맞춘다.
+ */
+const SCORE = 'font-variant-numeric: tabular-nums;'
+const LOW_DOT =
+  'display: inline-block; width: 5px; height: 5px; margin-right: 4px; vertical-align: middle; ' +
+  'border-radius: 50%; background-color: var(--md-sys-color-error);'
 
 /*
  * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는
@@ -78,6 +88,44 @@ export class FigureListPage extends FigureListPageBase {
         width: 100%;
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
+        /* 떠 있는 단추의 기준 상자 */
+        position: relative;
+      }
+
+      /*
+        ── 만들기 단추 ────────────────────────────────────────────────────────
+        이 화면의 주된 동작 하나. 목록 위에 떠 있고 자리를 먹지 않는다.
+
+        글자를 함께 둔다(extended FAB). 아이콘만 두면 처음 온 사람은 + 표가 무엇을 만드는지
+        모른다 — 이 화면에서 만들 수 있는 것이 무엇인지가 그 글자다.
+      */
+      button[fab] {
+        position: absolute;
+        right: var(--spacing-large, 12px);
+        bottom: var(--spacing-large, 12px);
+        z-index: 10;
+
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 18px 10px 14px;
+        font: var(--label-font, inherit);
+        font-size: 0.82rem;
+        font-weight: 600;
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border: none;
+        /* 떠 있는 것의 모서리는 알약이다 — 담는 면(6px)을 따르지 않는다 */
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+        cursor: pointer;
+      }
+      button[fab]:hover {
+        color: var(--md-sys-color-on-primary, #fff);
+        background-color: var(--md-sys-color-primary);
+      }
+      button[fab] md-icon {
+        --md-icon-size: 20px;
       }
 
       /* 격자가 바깥에 요구하는 것은 확정된 높이 하나뿐이다 — 스크롤은 격자가 안에서 한다 */
@@ -90,12 +138,18 @@ export class FigureListPage extends FigureListPageBase {
         ── 그림이 주인공인 카탈로그 ────────────────────────────────────────
         카드 기본값은 글이 많은 목록(직원·결재함)에 맞춰져 있다. 여기서는 사람이 먼저 보는 것이
         형상 그림이므로, 그림 칸을 비율로 잡아 카드 폭이 달라져도 그림이 나란히 읽히게 한다.
+
+        그림은 카드 끝까지 닿는다 — 위쪽 모서리만 카드와 같은 6px 로 깎아 한 장처럼 보이게 하고,
+        그림 안에 얹히는 초안 표시·삭제는 figure-thumb 이 그린다.
       */
       ox-grist {
         --data-card-min-width: 240px;
+        --data-card-record-card-border-radius: 6px;
+        --data-card-record-card-padding: 0;
         --data-card-thumbnail-height: auto;
         --data-card-thumbnail-aspect: 4 / 3;
-        --data-card-thumbnail-padding: var(--spacing-small);
+        --data-card-thumbnail-padding: 0;
+        --data-card-thumbnail-radius: 6px 6px 0 0;
         --data-card-thumbnail-background: var(--md-sys-color-surface-container);
 
         /*
@@ -111,6 +165,13 @@ export class FigureListPage extends FigureListPageBase {
 
         /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */
         --data-card-detail-direction: row;
+
+        /*
+          맨 위로 가는 화살표를 만들기 단추 **위로** 올린다. 둘 다 오른쪽 아래에 떠 있으므로
+          그냥 두면 겹친다 — 단추(36px + 아래 여백 12px) 위에 12px 을 띄운 자리다.
+        */
+        --data-card-fab-position-vertical: 64px;
+        --data-list-fab-position-vertical: 64px;
       }
     `
   ]
@@ -123,25 +184,26 @@ export class FigureListPage extends FigureListPageBase {
 
   get context() {
     return {
-      title: i18next.t('title.figures'),
+      title: i18next.t('figure.title.figures'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
         },
         value: this.grist?.searchText || '',
-        placeholder: i18next.t('text.search-figure-by-name-or-type')
+        placeholder: i18next.t('figure.text.search-figure')
       },
       filter: {
         handler: () => {
           this.grist.toggleHeadroom()
         }
-      },
-      actions: [
-        {
-          title: i18next.t('button.new-figure'),
-          action: () => this.openModeller()
-        }
-      ]
+      }
+      /*
+        **만들기는 `actions` 가 아니라 FAB 이다.**
+
+        `context.actions` 로 두면 페이지 바닥 줄에 글자 단추로 서는데, 그 줄은 「지금 화면에 대해
+        할 일」을 늘어놓는 자리다. 만들기는 이 화면의 유일한 주된 동작이므로 줄에 섞이지 않고
+        떠 있어야 한다. 카드를 가리지 않는 오른쪽 아래, 손이 가는 자리다(아래 render 의 [fab]).
+      */
     }
   }
 
@@ -149,6 +211,7 @@ export class FigureListPage extends FigureListPageBase {
     return html`
       <ox-grist
         mode="CARD"
+        @search-tag=${(e: CustomEvent) => this.findByTag(e.detail.tag)}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
@@ -161,9 +224,28 @@ export class FigureListPage extends FigureListPageBase {
 
         <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
+
+      <button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>
+        <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}
+      </button>
     `
   }
 
+  /**
+   * 카드의 태그 알약을 눌렀다 — **그 태그로 목록을 거른다.**
+   *
+   * 검색창에 그 말을 채워 넣는다. 격자에 조건만 걸고 창을 비워 두면 저작자는 **왜 목록이
+   * 줄었는지 모른 채** 보게 되고, 되돌리려면 무엇을 지워야 하는지도 알 수 없다.
+   *
+   * 서버가 `tags` 뿐 아니라 이름·타입·설명·분류를 함께 훑으므로, 그 말이 다른 칸에 든 도형도
+   * 같이 온다. 태그만 정확히 거르는 것이 아니라 **찾기**다.
+   */
+  private findByTag(tag: string) {
+    this.grist.searchText = tag
+    /* 창의 값은 `context` 에서 나온다 — 다시 알려야 헤더가 새 값을 그린다. */
+    this.updateContext()
+  }
+
   async pageInitialized() {
     this.gristConfig = {
       /*
@@ -179,44 +261,42 @@ export class FigureListPage extends FigureListPageBase {
       */
       emptyNote: {
         icon: 'deployed_code',
-        title: i18next.t('text.no-figure-yet'),
-        description: i18next.t('text.what-a-figure-is')
+        title: i18next.t('figure.text.no-figure-yet'),
+        description: i18next.t('figure.text.what-a-figure-is')
       },
 
       list: {
+        /* 그림 칸은 그 컬럼의 renderer 가 그린다 — 그림 없을 때의 안내까지 `figure-thumb` 안이다 */
         thumbnail: 'thumbnail',
-        /* 그림이 없는 카드도 자리는 지킨다 — 빈 사각형으로 두지 않고 왜 없는지 말한다 */
-        emptyThumbnail: {
-          icon: 'deployed_code',
-          label: i18next.t('text.thumbnail-not-made-yet')
-        },
         fields: ['name', 'type'],
         /*
-          **카드에는 고를 때 쓰는 것만 싣는다.**
+          ── 무게를 모른 채 고르게 두지 않는다 ────────────────────────────────
+          이름과 그림만 실으면 저작자는 **이 형상이 무거운지 모른 채** 고른다. 그것을 저작면에
+          들어가서야 아는 것은 늦다. 그래서 격자로 옮기기 전 손 카드가 실었던 셋을 그대로 싣는다 —
+          몇 개까지 놓을 수 있나(배치 한도) · 성숙도 · 삼각형 수.
 
-          배치 한도·성숙도·삼각형 수·수정일시까지 실어 봤더니 카드가 명세표가 되었다. 카탈로그에서
-          사람이 하는 일은 「이거다」를 고르는 것이고, 그때 보는 것은 그림과 이름이다.
+          한 줄에 뉜다(`--data-card-detail-direction: row`). 이름표는 달지 않는다 — 값 자체가
+          「625개까지」·「삼각형 440개」로 읽히고, 성숙도만 숫자 하나여서 손이 갔을 때 이름이 뜬다.
 
-          숫자는 **하나만** 남긴다 — 성숙도다. 셋 중 이것 하나가 나머지를 요약한다(배치 한도와
-          삼각형 수는 무게 한 가지만 말하는데, 성숙도는 무게·식별성·상태 표현까지 여러 축을 합친
-          값이다). 그 축별 내역과 나머지 숫자는 표 모드의 칸과 저작면에 있다.
-
-          이름표는 달지 않는다. 성숙도는 색과 숫자로 읽히고, 상태는 발행된 것에 아무 말도 하지
-          않는다(그것이 예사다) — 초안일 때만 「초안」이 뜬다.
+          상태는 이 줄에 없다. 그림 위 초안 표시가 그 일을 한다(`figure-thumb`) — 발행된 것에는
+          아무 말도 하지 않으므로 빈 칸이 생기지 않는다.
         */
-        details: ['state', 'score'],
-        /* 삭제는 손이 갈 때만 나온다 — 고르려고 보는 자리에 되돌릴 수 없는 조작을 띄우지 않는다 */
-        gutters: 'hover'
+        details: ['capacity', 'score', 'triangles']
       },
 
       columns: [
         { type: 'gutter', gutterName: 'sequence', fixed: true },
         {
+          /*
+            표 모드에서만 쓰는 삭제 칸. 카드에서는 `figure-thumb` 이 그림 위에 그리므로
+            `forList: false` 로 내린다 — 카드 아래 단추 줄은 감춰도 자리가 남는다.
+          */
           type: 'gutter',
           gutterName: 'button',
           icon: 'delete',
-          title: i18next.t('button.delete'),
+          title: i18next.t('figure.button.delete-figure'),
           danger: true,
+          forList: false,
           width: 40,
           handlers: {
             click: (_columns: any, _data: any, _column: any, record: Figure) => this.removeFigure(record)
@@ -225,7 +305,7 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'string',
           name: 'name',
-          header: i18next.t('label.name'),
+          header: i18next.t('figure.label.name'),
           record: { editable: false },
           filter: 'search',
           sortable: true,
@@ -238,7 +318,7 @@ export class FigureListPage extends FigureListPageBase {
           */
           type: 'string',
           name: 'type',
-          header: i18next.t('label.type'),
+          header: i18next.t('figure.label.figure-type'),
           record: {
             editable: false,
             renderer: (value: string) => html`<code>${value}</code>`
@@ -247,10 +327,35 @@ export class FigureListPage extends FigureListPageBase {
           sortable: true,
           width: 160
         },
+        {
+          /*
+            태그 — **카드에서 곁줄로 보이고 검색에 걸린다.**
+
+            서버가 이미 `type`·`name`·`description`·`category`·`tags` 를 함께 훑는다. 그런데
+            화면에는 태그가 어디에도 안 보여서, 저작자가 적은 태그가 **자기 눈에 돌아오지 않았다** —
+            적어 둔 것이 쓰이는지 알 수 없으면 아무도 적지 않는다.
+
+            정렬은 걸지 않는다. 배열이라 무엇을 기준으로 줄을 세우는지 답할 수 없다.
+
+            **카드에서는 이 컬럼이 그리지 않는다.** 본문에 한 줄로 두었더니 태그가 있는 카드만
+            높아져 격자가 어긋났다 — 개수가 도형마다 다르므로 본문에 두는 한 남는 문제다.
+            카드에서는 `figure-thumb` 이 그림 위에 얹는다. 여기 남은 것은 표 모드의 칸이다.
+          */
+          type: 'string',
+          name: 'tags',
+          header: i18next.t('figure.label.tags'),
+          record: {
+            editable: false,
+            renderer: (value: string[] | null) => (value || []).join(' · ')
+          },
+          filter: 'search',
+          sortable: false,
+          width: 180
+        },
         {
           type: 'string',
           name: 'state',
-          header: i18next.t('label.state'),
+          header: i18next.t('figure.label.state'),
           record: {
             editable: false,
             /*
@@ -263,25 +368,31 @@ export class FigureListPage extends FigureListPageBase {
             */
             renderer: (value: string, _column: any, record: Figure, _rowIndex: number, field: Element) => {
               if (value !== 'released') {
-                return html`<span style=${DRAFT}>${i18next.t('label.draft')}</span>`
+                return html`<span style=${DRAFT}>${i18next.t('figure.label.draft')}</span>`
               }
 
               /* 표에서는 칸이 비면 안 된다. 카드에서만 입을 다문다 — 그리는 자리가 알려 준다. */
               return field?.tagName === 'OX-CARD-FIELD'
                 ? ''
                 : html`<span style=${RELEASED}
-                    >${i18next.t('label.released')}
-                    ${record.version ? i18next.t('text.version-number', { version: record.version }) : ''}</span
+                    >${i18next.t('figure.label.figure-released')}
+                    ${record.version ? i18next.t('figure.text.version-number', { version: record.version }) : ''}</span
                   >`
             }
           },
-          /* 전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다 */
+          /*
+            전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다.
+
+            이름표는 비워 둔다. 단추에 「초안」·「발행됨」이라고 적혀 있으니 그 앞의 「상태」는
+            같은 말을 한 번 더 하는 것이고, 걸러 보기 줄에서 자리만 먹는다.
+          */
           filter: {
             type: 'select-buttons',
             operator: 'in',
+            label: '',
             options: [
-              { display: i18next.t('label.draft'), value: 'draft' },
-              { display: i18next.t('label.released'), value: 'released' }
+              { display: i18next.t('figure.label.draft'), value: 'draft' },
+              { display: i18next.t('figure.label.figure-released'), value: 'released' }
             ]
           },
           width: 120
@@ -295,8 +406,7 @@ export class FigureListPage extends FigureListPageBase {
           */
           type: 'string',
           name: 'capacity',
-          header: i18next.t('label.capacity'),
-          label: true,
+          header: i18next.t('figure.label.placement-limit'),
           sortable: false,
           record: {
             editable: false,
@@ -304,10 +414,10 @@ export class FigureListPage extends FigureListPageBase {
               const capacity = capacityFrom(record.groups ?? 0, record.triangles ?? 0)
 
               return capacity
-                ? html`<span style=${CAPACITY} title=${i18next.t('text.reuse-score-explained')}>
-                    ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
+                ? html`<span style=${CAPACITY} title=${i18next.t('figure.text.reuse-score-explained')}>
+                    ${i18next.t('figure.text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
                   </span>`
-                : html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
+                : html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`
             }
           },
           width: 120
@@ -315,23 +425,27 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'float',
           name: 'score',
-          header: i18next.t('label.maturity'),
+          header: i18next.t('figure.label.maturity'),
           record: {
             editable: false,
             /*
-              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 색과 손이 갔을 때
-              뜨는 말이 알려 준다.
+              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 손이 갔을 때 뜨는
+              말이 알려 준다.
 
-              아직 재지 않은 것을 **0 으로 보여 주지 않는다.** 0 은 「가볍다」는 뜻이 되어 버린다.
-              등급 문자(A~D)도 여기서 만들지 않는다 — 경계는 `figure-model` 이 정하고 그것을
-              화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
+              색칠한 배지로 두지 않는다. 지금 카탈로그의 열넷 중 열셋이 0 점이라(선언된 묶음 한도
+              3 을 넘긴다) 붉은 덩어리가 카드마다 서면 목록이 시끄럽고, 그러면서 아무것도 가르지
+              못한다. 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.
+
+              아직 재지 않은 것을 0 으로 보여 주지 않는다 — 0 은 「가볍다」는 뜻이 되어 버린다.
+              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` 가 정하고,
+              화면이 그것을 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
             */
             renderer: (value: number | null) =>
               value == null
-                ? html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
-                : html`<span style=${badge(value < ATTENTION_BELOW)} title=${i18next.t('label.maturity')}
-                    >${Math.round(value)}</span
-                  >`
+                ? html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`
+                : html`<span style=${SCORE} title=${i18next.t('figure.label.maturity')}>
+                    ${value < ATTENTION_BELOW ? html`<i style=${LOW_DOT}></i>` : ''}${Math.round(value)}
+                  </span>`
           },
           sortable: true,
           width: 90
@@ -339,11 +453,16 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'integer',
           name: 'triangles',
-          header: i18next.t('label.triangles'),
-          label: true,
+          header: i18next.t('figure.label.triangles'),
           record: {
             editable: false,
-            renderer: (value: number | null) => (value == null ? '' : value.toLocaleString())
+            /*
+              카드에서는 이름표 없이 서므로 숫자만 두면 옆의 성숙도와 구별되지 않는다. 무엇의
+              수인지 값이 스스로 말하게 한다 — 표 모드에서는 머리글이 그 일을 하므로 겹치지만,
+              그 겹침이 카드에서 뜻을 잃는 것보다 낫다.
+            */
+            renderer: (value: number | null) =>
+              value == null ? '' : i18next.t('figure.text.triangle-count', { count: value })
           },
           sortable: true,
           width: 110
@@ -351,16 +470,35 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'integer',
           name: 'groups',
-          header: i18next.t('label.budget-groups'),
+          header: i18next.t('figure.label.budget-groups'),
           record: { editable: false },
           hidden: true,
           width: 0
         },
         {
+          /*
+            **카드의 그림 칸 전체를 이 renderer 가 그린다.**
+
+            기본 image renderer 는 그림만 그리고, 그 위에 얹혀야 하는 것(초안 표시·삭제)은 카드
+            아래 gutter 줄로 밀린다. 격자로 옮기기 전 손 카드가 그것을 그림 위에 두었고 그 편이
+            맞다 — 그래서 그림 칸을 `figure-thumb` 에게 넘긴다. hover 가 필요해 컴포넌트여야
+            하는 사연은 그 파일에 적혀 있다.
+
+            `renderEmpty` — 그림이 아직 없는 것도 자리를 지킨다. 그 카드에도 초안 표시와 삭제가
+            있어야 하고, 「그림 없음」이라고 말하는 것도 `figure-thumb` 이 한다.
+          */
           type: 'image',
           name: 'thumbnail',
           header: i18next.t('field.thumbnail'),
-          record: { editable: false, align: 'center', wide: true },
+          record: {
+            editable: false,
+            align: 'center',
+            wide: true,
+            renderEmpty: true,
+            renderer: (_value: unknown, _column: any, record: Figure) => html`
+              <figure-thumb .figure=${record} @remove=${() => this.removeFigure(record)}></figure-thumb>
+            `
+          },
           hidden: true,
           width: 160
         },
@@ -459,7 +597,7 @@ export class FigureListPage extends FigureListPageBase {
   /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
   private async removeFigure(figure: Figure) {
     // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다
-    const message = i18next.t('text.delete-figure-confirm', { name: figure.name })
+    const message = i18next.t('figure.text.delete-figure-confirm', { name: figure.name })
     if (!confirm(message)) {
       return
     }