@things-factory/worklist 10.0.19 → 10.1.1

package/dist-client/pages/activity-thread/activity-thread-view.js

@@ -1,165 +1,42 @@
 import { __decorate, __metadata } from "tslib";
-import '@things-factory/organization/dist-client/component/approval-line-view.js';
-import gql from 'graphql-tag';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { ActivityThread } from '../../types/activity-thread.js';
-function getSafeFormatter(locale, options) {
-    try {
-        const safeLocale = locale || 'en-US';
-        return new Intl.DateTimeFormat(safeLocale, options);
-    }
-    catch (e) {
-        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
-        return new Intl.DateTimeFormat('en-US', options);
-    }
-}
-const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven, fieldValue } from '../../components/activity-fields.js';
+import { whenText } from '../../when.js';
+/**
+ * 끝난 업무를 읽는 화면 — **완료 목록에서 줄을 눌러 들어온다.**
+ *
+ * ── 무엇이 잘못되고 있었나 (2026-09-06) ────────────────────────────────────
+ * 이 화면은 같은 건을 그리는 세 화면 중 하나인데(업무 상세 · 결재 상세 · 여기), 셋이 서로 다른
+ * 말과 모양을 쓰고 있었다. 같은 값을 보는 사람이 화면을 옮길 때마다 다른 것을 본다.
+ *
+ *   항목 이름     결재 화면은 「승인이 필요한 이유」, 여기는 원문 because
+ *   객체 값       결재 화면은 JSON, 여기는 [object Object]
+ *   시각          결재 화면은 2026. 9. 1. 오전 11:55, 여기는 Tuesday, September 1, 2026 at 11:55 AM
+ *   갈래          결재 화면은 받은 값 · 낼 값으로 갈라 보이고, 여기는 전부 「산출물」 한 표
+ *
+ * 마지막이 특히 나쁘다. because 는 업무를 시작할 때 받은 값인데 「산출물」 밑에 있었다 —
+ * **화면이 값의 성격을 틀리게 말한다.**
+ *
+ * 그래서 셋이 activity-fields 한 벌을 쓰게 했다.
+ *
+ * ── 자기 조회를 하지 않는다 ────────────────────────────────────────────────
+ * 전에는 이 요소가 activityThreadId 를 받아 **스스로 다시 조회했다.** 담고 있는 화면
+ * (activity-thread-view-page)이 이미 같은 건을 조회한 뒤였다. 한 화면을 열면 같은 질의가 두 번
+ * 나갔고, 두 응답이 어긋날 수 있는 자리도 생긴다. 값을 받아 그리기만 한다.
+ */
 let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitElement) {
     static { this.styles = [
         ScrollbarStyles,
+        ActivityFieldsStyles,
         css `
       :host {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        font-size: var(--fontsize-default);
-      }
-
-      :host([state='unassigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='assigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='delegated']) {
-        --worklist-status-color: #8654b0;
-      }
-
-      :host([state='submitted']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='escalated']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='rejected']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-
-      [instance-container] {
-        flex: 1;
-        background-color: var(--md-sys-color-background);
-        border-right: var(--border-dim-color);
-        padding: var(--spacing-large);
-        color: var(--primary-text-color);
-
-        div {
-          margin-bottom: var(--spacing-medium);
-          padding-bottom: var(--spacing-medium);
-          border-bottom: var(--border-dim-color);
-        }
-
-        div label {
-          display: inline-block;
-          margin-right: var(--spacing-medium);
-        }
-      }
-
-      [thread-container] {
-        flex: 2;
-        padding: var(--spacing-large);
-      }
-
-      span[status] {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        margin-right: var(--spacing-small);
-        border-radius: 50%;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      th {
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-        border-top: var(--grid-header-top-border);
-        border-bottom: var(--grid-header-bottom-border);
-        padding: var(--grid-header-padding);
-        text-overflow: ellipsis;
-        font: var(--grid-header-font);
-      }
-
-      td {
-        padding: var(--spacing-small);
-        border-bottom: var(--grid-record-border-bottom);
-      }
-
-      [assignee] {
-        * {
-          vertical-align: middle;
-        }
-        md-icon {
-          opacity: 0.5;
-        }
-      }
-
-      [subtitle] {
         display: block;
-        margin: var(--spacing-large) 0 var(--spacing-small) 0;
-        padding: var(--spacing-small) var(--spacing-medium);
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-variant);
-        font: bold 16px var(--theme-font);
-        border: 2px solid var(--md-sys-color-outline);
-        border-radius: 999px;
-      }
-
-      [thread] div {
-        border-bottom: var(--border-dim-color);
-        padding: var(--spacing-small);
-        text-align: right;
-        overflow: hidden;
-
-        div label {
-          float: left;
-          width: 25%;
-          text-align: left;
-        }
-      }
-
-      [empty] {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: center;
-        color: var(--md-sys-color-on-surface-variant);
-        font: var(--md-sys-typescale-title-medium);
-        opacity: 0.7;
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
       }
 
       @media print {
@@ -171,168 +48,67 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
     `
     ]; }
     render() {
-        if (!this.activityThread) {
-            return html `<div empty>${i18next.t('text.no activity thread info')}</div>`;
+        const thread = this.activityThread;
+        if (!thread) {
+            return nothing;
         }
-        const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = this.activityThread;
-        const { input } = activityInstance;
-        const { name, email } = assignee || {};
-        return html `
-      <div assignee>
-        <md-icon>account_circle</md-icon>
-        <strong>${name}</strong>
-      </div>
-
-      <div thread>
-        <span subtitle>${i18next.t('label.information')}</span>
-        <div>
-          <label>${i18next.t('label.status')}</label>
-          <span status></span>
-          <strong>${i18next.t('label.activity-state-' + state)}</strong>
-        </div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
-        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
-        <div>
-          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
-        </div>
-        <div><label>${i18next.t('field.round')}</label> ${round}</div>
-      </div>
-
-      <div>
-        <span subtitle>${i18next.t('field.artifact')}</span>
-        ${this.renderInOut({ ...input, ...output })}
-      </div>
-    `;
-    }
-    renderInOut(data) {
-        const { activity } = this.activityThread.activityInstance;
-        const { model } = activity || {};
+        const { assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = thread;
+        const { input } = activityInstance || {};
+        const model = activityInstance?.activity?.model;
+        const inputSpec = inputSpecOf(model);
+        const outputSpec = outputSpecOf(model);
         return html `
-      <table>
-        <tr>
-          <th>${i18next.t('label.name')}</th>
-          <th>${i18next.t('label.value')}</th>
-        </tr>
-        ${model?.map(item => html `
-            <tr>
-              <td>${item.name}</td>
-              <td>${item.tag ? data[item.tag] : ''}</td>
-            </tr>
-          `)}
-      </table>
+      <section readonly>
+        <h2>${i18next.t('label.thread-basics')}</h2>
+        <dl class="given">
+          <!-- 이 화면이 부르는 이름은 「담당자」다 — 결재 목록의 칸과 같은 낱말을 쓴다. -->
+          <dt>${i18next.t('field.wl-owner')}</dt>
+          <dd>${fieldValue(assignee?.name)}</dd>
+
+          <dt>${i18next.t('field.assigned-at')}</dt>
+          <dd>${fieldValue(whenText(assignedAt))}</dd>
+
+          <dt>${i18next.t('field.started-at')}</dt>
+          <dd>${fieldValue(whenText(startedAt))}</dd>
+
+          <dt>${i18next.t('field.terminated-at')}</dt>
+          <dd>${fieldValue(whenText(terminatedAt))}</dd>
+
+          <!--
+            차수는 1일 때 적지 않는다. 거의 모든 건이 1차라 그 줄은 아무것도 알려 주지 않고,
+            2차 이상일 때만 「이 건은 한 번 되돌아왔다」는 사실이 된다.
+            결재 목록의 「N차 재상신」 표식과 같은 판단이다(activity-cells 의 approvalMarks).
+          -->
+          ${Number(round) > 1
+            ? html `
+                <dt>${i18next.t('field.round')}</dt>
+                <dd>${round}</dd>
+              `
+            : nothing}
+        </dl>
+      </section>
+
+      ${inputSpec.length
+            ? html `
+            <section readonly>
+              <h2>${i18next.t('label.activity-input')}</h2>
+              ${renderGiven(inputSpec, input)}
+            </section>
+          `
+            : nothing}
+      ${outputSpec.length
+            ? html `
+            <section readonly>
+              <h2>${i18next.t('field.artifact')}</h2>
+              ${renderGiven(outputSpec, output)}
+            </section>
+          `
+            : nothing}
     `;
     }
-    updated(changes) {
-        if (changes.has('activityThreadId')) {
-            this.fetchActivityThread();
-        }
-    }
-    async fetchActivityThread() {
-        const id = this.activityThreadId;
-        const response = await client.query({
-            query: gql `
-        query ($id: String!) {
-          activityThread(id: $id) {
-            state
-            transaction
-            output
-            assignee {
-              id
-              name
-              email
-            }
-            round
-            activityApprovals {
-              round
-              order
-              approver {
-                name
-                email
-              }
-              judgment
-              comment
-              createdAt
-              terminatedAt
-            }
-            assignedAt
-            startedAt
-            terminatedAt
-            updater {
-              id
-              name
-            }
-            activityInstance {
-              id
-              name
-              description
-              state
-              key01
-              key02
-              key03
-              key04
-              key05
-              input
-              output
-              activity {
-                id
-                name
-                description
-                searchKeys {
-                  name
-                  description
-                  inputKey
-                  tKey
-                }
-                model {
-                  name
-                  description
-                  active
-                  tag
-                  inout
-                  type
-                  unit
-                  options
-                  quantifier
-                  spec
-                }
-              }
-              approvalLine {
-                type
-                value
-                approver {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              assignedAt
-              startedAt
-              terminatedAt
-              updatedAt
-            }
-          }
-        }
-      `,
-            variables: {
-                id
-            }
-        });
-        this.activityThread = response.data.activityThread;
-        this.setAttribute('state', this.activityThread?.state || '');
-    }
 };
 __decorate([
-    property({
-        type: String,
-        attribute: 'activity-thread-id'
-    }),
-    __metadata("design:type", String)
-], ActivityThreadView.prototype, "activityThreadId", void 0);
-__decorate([
-    state(),
+    property({ type: Object }),
     __metadata("design:type", ActivityThread)
 ], ActivityThreadView.prototype, "activityThread", void 0);
 ActivityThreadView = __decorate([

package/dist-client/pages/activity-thread/activity-thread-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":";AAAA,OAAO,0EAA0E,CAAA;AAEjF,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAE/D,SAAS,gBAAgB,CAAC,MAAc,EAAE,OAAmC;IAC3E,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,MAAM,IAAI,OAAO,CAAA;QACpC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IACrD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,uCAAuC,MAAM,kCAAkC,EAAE,CAAC,CAAC,CAAA;QAChG,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAClD,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAE1F,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC5D,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmJF;KACF,AAtJY,CAsJZ;IAUD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA,cAAc,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,QAAQ,CAAA;QAC5E,CAAC;QAED,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAC7F,IAAI,CAAC,cAAc,CAAA;QACrB,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAiB,CAAA;QACnC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEtC,OAAO,IAAI,CAAA;;;kBAGG,IAAI;;;;yBAIG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;mBAEpC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;oBAExB,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;mBAG3C,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,UAAU,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;;sBAE3F,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,YAAY,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;;mBAE9F,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;;sBAEjG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,KAAK;;;;yBAItC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;UAC1C,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC;;KAE9C,CAAA;IACH,CAAC;IAED,WAAW,CAAC,IAAI;QACd,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,cAAe,CAAC,gBAAiB,CAAA;QAC3D,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;gBAGC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;gBACvB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;UAE9B,KAAK,EAAE,GAAG,CACV,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;oBAEF,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;;WAEvC,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAEhC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmFT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAA;QAClD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE,CAAC,CAAA;IAC9D,CAAC;;AAvKD;IAJC,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,oBAAoB;KAChC,CAAC;;4DACuB;AAEhB;IAAR,KAAK,EAAE;8BAAkB,cAAc;0DAAA;AA/J7B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAqU9B","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread.js'\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n        font-size: var(--fontsize-default);\n      }\n\n      :host([state='unassigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='delegated']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='submitted']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='escalated']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='rejected']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      [instance-container] {\n        flex: 1;\n        background-color: var(--md-sys-color-background);\n        border-right: var(--border-dim-color);\n        padding: var(--spacing-large);\n        color: var(--primary-text-color);\n\n        div {\n          margin-bottom: var(--spacing-medium);\n          padding-bottom: var(--spacing-medium);\n          border-bottom: var(--border-dim-color);\n        }\n\n        div label {\n          display: inline-block;\n          margin-right: var(--spacing-medium);\n        }\n      }\n\n      [thread-container] {\n        flex: 2;\n        padding: var(--spacing-large);\n      }\n\n      span[status] {\n        width: 15px;\n        height: 15px;\n        background-color: var(--worklist-status-color, tomato);\n        display: inline-block;\n        margin-right: var(--spacing-small);\n        border-radius: 50%;\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n\n      th {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n      }\n\n      td {\n        padding: var(--spacing-small);\n        border-bottom: var(--grid-record-border-bottom);\n      }\n\n      [assignee] {\n        * {\n          vertical-align: middle;\n        }\n        md-icon {\n          opacity: 0.5;\n        }\n      }\n\n      [subtitle] {\n        display: block;\n        margin: var(--spacing-large) 0 var(--spacing-small) 0;\n        padding: var(--spacing-small) var(--spacing-medium);\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-variant);\n        font: bold 16px var(--theme-font);\n        border: 2px solid var(--md-sys-color-outline);\n        border-radius: 999px;\n      }\n\n      [thread] div {\n        border-bottom: var(--border-dim-color);\n        padding: var(--spacing-small);\n        text-align: right;\n        overflow: hidden;\n\n        div label {\n          float: left;\n          width: 25%;\n          text-align: left;\n        }\n      }\n\n      [empty] {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        align-self: center;\n        color: var(--md-sys-color-on-surface-variant);\n        font: var(--md-sys-typescale-title-medium);\n        opacity: 0.7;\n      }\n\n      @media print {\n        :host {\n          display: block;\n          overflow: visible;\n        }\n      }\n    `\n  ]\n\n  @property({\n    type: String,\n    attribute: 'activity-thread-id'\n  })\n  activityThreadId?: string\n\n  @state() activityThread?: ActivityThread\n\n  render() {\n    if (!this.activityThread) {\n      return html`<div empty>${i18next.t('text.no activity thread info')}</div>`\n    }\n\n    const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } =\n      this.activityThread\n    const { input } = activityInstance!\n    const { name, email } = assignee || {}\n\n    return html`\n      <div assignee>\n        <md-icon>account_circle</md-icon>\n        <strong>${name}</strong>\n      </div>\n\n      <div thread>\n        <span subtitle>${i18next.t('label.information')}</span>\n        <div>\n          <label>${i18next.t('label.status')}</label>\n          <span status></span>\n          <strong>${i18next.t('label.activity-state-' + state)}</strong>\n        </div>\n        <div>\n          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n        </div>\n        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n        <div>\n          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n        </div>\n        <div><label>${i18next.t('field.round')}</label> ${round}</div>\n      </div>\n\n      <div>\n        <span subtitle>${i18next.t('field.artifact')}</span>\n        ${this.renderInOut({ ...input, ...output })}\n      </div>\n    `\n  }\n\n  renderInOut(data) {\n    const { activity } = this.activityThread!.activityInstance!\n    const { model } = activity || {}\n\n    return html`\n      <table>\n        <tr>\n          <th>${i18next.t('label.name')}</th>\n          <th>${i18next.t('label.value')}</th>\n        </tr>\n        ${model?.map(\n          item => html`\n            <tr>\n              <td>${item.name}</td>\n              <td>${item.tag ? data[item.tag] : ''}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityThreadId')) {\n      this.fetchActivityThread()\n    }\n  }\n\n  async fetchActivityThread() {\n    const id = this.activityThreadId\n\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          activityThread(id: $id) {\n            state\n            transaction\n            output\n            assignee {\n              id\n              name\n              email\n            }\n            round\n            activityApprovals {\n              round\n              order\n              approver {\n                name\n                email\n              }\n              judgment\n              comment\n              createdAt\n              terminatedAt\n            }\n            assignedAt\n            startedAt\n            terminatedAt\n            updater {\n              id\n              name\n            }\n            activityInstance {\n              id\n              name\n              description\n              state\n              key01\n              key02\n              key03\n              key04\n              key05\n              input\n              output\n              activity {\n                id\n                name\n                description\n                searchKeys {\n                  name\n                  description\n                  inputKey\n                  tKey\n                }\n                model {\n                  name\n                  description\n                  active\n                  tag\n                  inout\n                  type\n                  unit\n                  options\n                  quantifier\n                  spec\n                }\n              }\n              approvalLine {\n                type\n                value\n                approver {\n                  id\n                  name\n                  description\n                  controlNo\n                }\n              }\n              assignedAt\n              startedAt\n              terminatedAt\n              updatedAt\n            }\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activityThread = response.data.activityThread\n    this.setAttribute('state', this.activityThread?.state || '')\n  }\n}\n"]}
+{"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAC9H,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC5D,WAAM,GAAG;QACd,eAAe;QACf,oBAAoB;QACpB,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF,AAjBY,CAiBZ;IAID,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAA;QAElC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,MAAM,CAAA;QACjG,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,IAAK,EAAU,CAAA;QAEjD,MAAM,KAAK,GAAI,gBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAA;QACxD,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;QAEtC,OAAO,IAAI,CAAA;;cAED,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;gBAG9B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAC3B,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC;;gBAE1B,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;gBAC9B,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;;gBAEhC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;gBAC7B,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;;gBAE/B,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;gBAChC,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;;;;;;;YAOtC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAA;sBACI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;sBACxB,KAAK;eACZ;YACH,CAAC,CAAC,OAAO;;;;QAIb,SAAS,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAA;;oBAEM,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;gBACrC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,UAAU,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;oBAEM,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAC/B,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC;;WAEpC;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;AAhE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAkB,cAAc;0DAAA;AApBhD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAqF9B","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven, fieldValue } from '../../components/activity-fields.js'\nimport { whenText } from '../../when.js'\n\n/**\n * 끝난 업무를 읽는 화면 — **완료 목록에서 줄을 눌러 들어온다.**\n *\n * ── 무엇이 잘못되고 있었나 (2026-09-06) ────────────────────────────────────\n * 이 화면은 같은 건을 그리는 세 화면 중 하나인데(업무 상세 · 결재 상세 · 여기), 셋이 서로 다른\n * 말과 모양을 쓰고 있었다. 같은 값을 보는 사람이 화면을 옮길 때마다 다른 것을 본다.\n *\n *   항목 이름     결재 화면은 「승인이 필요한 이유」, 여기는 원문 because\n *   객체 값       결재 화면은 JSON, 여기는 [object Object]\n *   시각          결재 화면은 2026. 9. 1. 오전 11:55, 여기는 Tuesday, September 1, 2026 at 11:55 AM\n *   갈래          결재 화면은 받은 값 · 낼 값으로 갈라 보이고, 여기는 전부 「산출물」 한 표\n *\n * 마지막이 특히 나쁘다. because 는 업무를 시작할 때 받은 값인데 「산출물」 밑에 있었다 —\n * **화면이 값의 성격을 틀리게 말한다.**\n *\n * 그래서 셋이 activity-fields 한 벌을 쓰게 했다.\n *\n * ── 자기 조회를 하지 않는다 ────────────────────────────────────────────────\n * 전에는 이 요소가 activityThreadId 를 받아 **스스로 다시 조회했다.** 담고 있는 화면\n * (activity-thread-view-page)이 이미 같은 건을 조회한 뒤였다. 한 화면을 열면 같은 질의가 두 번\n * 나갔고, 두 응답이 어긋날 수 있는 자리도 생긴다. 값을 받아 그리기만 한다.\n */\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    ActivityFieldsStyles,\n    css`\n      :host {\n        display: block;\n        color: var(--ui-ink, #17242c);\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      @media print {\n        :host {\n          display: block;\n          overflow: visible;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityThread?: ActivityThread\n\n  render() {\n    const thread = this.activityThread\n\n    if (!thread) {\n      return nothing\n    }\n\n    const { assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = thread\n    const { input } = activityInstance || ({} as any)\n\n    const model = (activityInstance as any)?.activity?.model\n    const inputSpec = inputSpecOf(model)\n    const outputSpec = outputSpecOf(model)\n\n    return html`\n      <section readonly>\n        <h2>${i18next.t('label.thread-basics')}</h2>\n        <dl class=\"given\">\n          <!-- 이 화면이 부르는 이름은 「담당자」다 — 결재 목록의 칸과 같은 낱말을 쓴다. -->\n          <dt>${i18next.t('field.wl-owner')}</dt>\n          <dd>${fieldValue(assignee?.name)}</dd>\n\n          <dt>${i18next.t('field.assigned-at')}</dt>\n          <dd>${fieldValue(whenText(assignedAt))}</dd>\n\n          <dt>${i18next.t('field.started-at')}</dt>\n          <dd>${fieldValue(whenText(startedAt))}</dd>\n\n          <dt>${i18next.t('field.terminated-at')}</dt>\n          <dd>${fieldValue(whenText(terminatedAt))}</dd>\n\n          <!--\n            차수는 1일 때 적지 않는다. 거의 모든 건이 1차라 그 줄은 아무것도 알려 주지 않고,\n            2차 이상일 때만 「이 건은 한 번 되돌아왔다」는 사실이 된다.\n            결재 목록의 「N차 재상신」 표식과 같은 판단이다(activity-cells 의 approvalMarks).\n          -->\n          ${Number(round) > 1\n            ? html`\n                <dt>${i18next.t('field.round')}</dt>\n                <dd>${round}</dd>\n              `\n            : nothing}\n        </dl>\n      </section>\n\n      ${inputSpec.length\n        ? html`\n            <section readonly>\n              <h2>${i18next.t('label.activity-input')}</h2>\n              ${renderGiven(inputSpec, input)}\n            </section>\n          `\n        : nothing}\n      ${outputSpec.length\n        ? html`\n            <section readonly>\n              <h2>${i18next.t('field.artifact')}</h2>\n              ${renderGiven(outputSpec, output)}\n            </section>\n          `\n        : nothing}\n    `\n  }\n}\n"]}

package/dist-client/pages/installable-activity/installable-activity-list-page.d.ts

@@ -31,7 +31,7 @@ export declare class ActivityTemplateListPage extends ActivityTemplateListPage_b
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
         total: any;
         records: any;
-    } | undefined>;
+    }>;
     activate(record: any): Promise<void>;
     deactivate(record: any): Promise<void>;
 }

package/dist-client/pages/installable-activity/installable-activity-list-page.js

@@ -13,6 +13,7 @@ import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
 import { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js';
+import { priorityCell } from '../../activity-cells.js';
 let ActivityTemplateListPage = class ActivityTemplateListPage extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
@@ -157,12 +158,10 @@ let ActivityTemplateListPage = class ActivityTemplateListPage extends p13n(local
                 { type: 'number',
                     name: 'priority',
                     header: i18next.t('field.priority'),
-                    record: { editable: false,
-                        renderer: function (value, column, record, rowIndex, field) {
-                            const color = ['', '#98FB98', '#87CEEB', '#FF6B6B', '#8B0000'][value || 0];
-                            const count = new Array(value > 4 ? 4 : value || 0).fill('');
-                            return html `${count.map(() => html `<md-icon style="color:${color};">star</md-icon>`)}`;
-                        }
+                    record: {
+                        editable: false,
+                        align: 'center',
+                        renderer: priorityCell()
                     },
                     width: 60
                 },
@@ -313,10 +312,15 @@ let ActivityTemplateListPage = class ActivityTemplateListPage extends p13n(local
                 sortings
             }
         });
-        if (!response.data) {
-            return;
+        /*
+         * A failed query resolves here — errorPolicy: 'all' — so a bare `return` would hand grist
+         * undefined and the screen would settle as an empty list. Empty and unavailable are different
+         * facts, and the grid can only tell the user about one of them if we say so.
+         */
+        if (response.errors?.length || !response.data?.responses) {
+            throw new Error(`[installableActivityList] ${JSON.stringify(response.errors || 'no data')}`);
         }
-        const { total, items: records } = response.data?.responses;
+        const { total, items: records } = response.data.responses;
         for (var item of records) {
             item.active = item.activity && item.activity.state == 'released';
         }

package/dist-client/pages/installable-activity/installable-activity-list-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"installable-activity-list-page.js","sourceRoot":"","sources":["../../../client/pages/installable-activity/installable-activity-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport './installable-activity-model-item-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { p13n } from '@operato/p13n'\n\nimport { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js'\n\n@customElement('installable-activity-list-page')\nexport class ActivityTemplateListPage extends p13n(localize(i18next)(PageView)) {   static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {         display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: #8b0000;\n        --grid-record-emphasized-color: #ff6b6b;\n }\n\n      ox-grist {         overflow-y: auto;\n        flex: 1;\n }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @property({ type: String }) mode?: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  get context() {     return {       title: i18next.t('title.installable activity list'),\n      search: {         handler: (search: string) => {           this.grist.searchText = search\n },\n        value: this.grist?.searchText || ''\n },\n      filter: {         handler: () => {           this.grist.toggleHeadroom()\n }\n },\n      help: 'worklist/installable-activity',\n      actions: [],\n      toolbar: false\n }\n }\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {     const mode = this.mode\n\n    return html`\n      <ox-grist\n        .mode=${mode}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <ox-context-page-toolbar class=\"actions\" .context=${this.context}></ox-context-page-toolbar>\n        </div>\n\n        <ox-grist-personalizer slot=\"setting\"></ox-grist-personalizer>\n      </ox-grist>\n    `\n }\n\n  async pageInitialized(lifecycle) {     this.gristConfig = {       list: {         thumbnail: 'thumbnail',\n        fields: ['name', 'description'],\n        details: ['provider', 'release']\n },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },\n        {           type: 'gutter',\n          gutterName: 'button',\n          fixed: true,\n          icon: 'reorder',\n          handlers: {             click: (columns, data, column, record, rowIndex) => {               const popup = openPopup(\n                html`\n                  <installable-activity-model-item-list .activity=${record}></installable-activity-model-item-list>\n                `,\n                {                   backdrop: true,\n                  help: 'worklist/activity-model-item-list',\n                  size: 'large',\n                  title: i18next.t('title.activity model item list')\n }\n              )\n              popup.onclosed = () => {                 this.grist?.fetch()\n }\n }\n }\n },\n        {           type: 'gutter',\n          gutterName: 'button',\n          name: 'state',\n          fixed: true,\n          icon: record => (record && record.active ? 'pause' : 'play_arrow'),\n          handlers: {             click: (columns, data, column, record, rowIndex) => {               if (record.active) {                 this.deactivate(record)\n } else {                 this.activate(record)\n }\n }\n }\n },\n        {           type: 'string',\n          name: 'name',\n          fixed: true,\n          header: i18next.t('field.name'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 150\n },\n        {           type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: {             editable: false\n },\n          filter: 'search',\n          width: 200\n },\n        {           type: 'string',\n          name: 'release',\n          header: i18next.t('field.release'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 80\n },\n        {           type: 'string',\n          name: 'provider',\n          header: i18next.t('field.provider'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 120\n },\n        {           type: 'select',\n          name: 'activityType',\n          label: true,\n          header: i18next.t('field.activity-type'),\n          record: {             editable: false,\n            options: ActivityTypes\n },\n          sortable: true,\n          width: 60\n },\n        {           type: 'number',\n          name: 'priority',\n          header: i18next.t('field.priority'),\n          record: {             editable: false,\n            renderer: function (value, column, record, rowIndex, field) {               const color = ['', '#98FB98', '#87CEEB', '#FF6B6B', '#8B0000'][value || 0]\n              const count = new Array(value > 4 ? 4 : value || 0).fill('')\n              return html`${count.map(() => html`<md-icon style=\"color:${color};\">star</md-icon>`)}`\n }\n },\n          width: 60\n },\n        {           type: 'select',\n          name: 'startingType',\n          label: true,\n          header: i18next.t('field.starting-type'),\n          record: {             editable: false,\n            options: ActivityStartingTypes\n },\n          sortable: true,\n          width: 60\n },\n        {           type: 'select',\n          name: 'multiple',\n          header: i18next.t('field.multiple'),\n          record: {             editable: false,\n            options: [\n              { display: 'Single', value: 'single' },\n              { display: 'Parallel', value: 'parallel' },\n              { display: 'Sequential', value: 'sequential' }\n            ]\n },\n          width: 80\n },\n        {           type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: { editable: false },\n          width: 120\n },\n        {           type: 'select',\n          name: 'uiType',\n          label: true,\n          header: i18next.t('field.ui-type'),\n          record: {             editable: false,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'uiSource',\n          header: i18next.t('field.ui-source'),\n          record: {             editable: false,\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.uiType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n },\n        {           type: 'select',\n          name: 'viewType',\n          label: true,\n          header: i18next.t('field.view-type'),\n          record: {             editable: true,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'viewSource',\n          header: i18next.t('field.view-source'),\n          record: {             editable: true,\n            editor: function (value, column, record, rowIndex, field) {               var type = record.viewType !== 'board' ? 'script' : 'board'\n              return getEditor(type)(value, column, record, rowIndex, field)\n },\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.viewType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n },\n        {           type: 'select',\n          name: 'reportType',\n          label: true,\n          header: i18next.t('field.report-type'),\n          record: {             editable: false,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'reportSource',\n          header: i18next.t('field.report-source'),\n          record: {             editable: false,\n            editor: function (value, column, record, rowIndex, field) {               var type = record.reportType !== 'board' ? 'script' : 'board'\n              return getEditor(type)(value, column, record, rowIndex, field)\n },\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.reportType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n }\n      ],\n      rows: {         selectable: false,\n        appendable: false\n },\n      sorters: [\n        {           name: 'name'\n }\n      ]\n }\n }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {     const response = await client.query({       query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: installableActivities(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               activity {                 id\n                state\n }\n              name\n              description\n              provider\n              release\n              activityType\n              priority\n              startingType\n              multiple\n              model {                 name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n }\n              thumbnail\n              uiType\n              uiSource\n              viewType\n              viewSource\n              reportType\n              reportSource\n }\n            total\n }\n }\n      `,\n      variables: {         filters,\n        pagination: { page, limit },\n        sortings\n }\n })\n\n    if (!response.data) {       return\n }\n\n    const { total, items: records } = response.data?.responses\n\n    for (var item of records) {       item.active = item.activity && item.activity.state == 'released'\n }\n\n    return {       total,\n      records\n }\n }\n\n  async activate(record) {     await client.mutate({       mutation: gql`\n        mutation ($name: String!) {           activateInstallableActivity(name: $name) {             name\n }\n }\n      `,\n      variables: {         name: record.name\n }\n })\n\n    this.grist?.fetch()\n }\n\n  async deactivate(record) {     await client.mutate({       mutation: gql`\n        mutation ($name: String!) {           deactivateInstallableActivity(name: $name) {             name\n }\n }\n      `,\n      variables: {         name: record.name\n }\n })\n\n    this.grist?.fetch()\n }\n}\n"]}
+{"version":3,"file":"installable-activity-list-page.js","sourceRoot":"","sources":["../../../client/pages/installable-activity/installable-activity-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport './installable-activity-model-item-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { p13n } from '@operato/p13n'\n\nimport { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js'\n\nimport { priorityCell } from '../../activity-cells.js'\n\n@customElement('installable-activity-list-page')\nexport class ActivityTemplateListPage extends p13n(localize(i18next)(PageView)) {   static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {         display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: #8b0000;\n        --grid-record-emphasized-color: #ff6b6b;\n }\n\n      ox-grist {         overflow-y: auto;\n        flex: 1;\n }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @property({ type: String }) mode?: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  get context() {     return {       title: i18next.t('title.installable activity list'),\n      search: {         handler: (search: string) => {           this.grist.searchText = search\n },\n        value: this.grist?.searchText || ''\n },\n      filter: {         handler: () => {           this.grist.toggleHeadroom()\n }\n },\n      help: 'worklist/installable-activity',\n      actions: [],\n      toolbar: false\n }\n }\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {     const mode = this.mode\n\n    return html`\n      <ox-grist\n        .mode=${mode}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <ox-context-page-toolbar class=\"actions\" .context=${this.context}></ox-context-page-toolbar>\n        </div>\n\n        <ox-grist-personalizer slot=\"setting\"></ox-grist-personalizer>\n      </ox-grist>\n    `\n }\n\n  async pageInitialized(lifecycle) {     this.gristConfig = {       list: {         thumbnail: 'thumbnail',\n        fields: ['name', 'description'],\n        details: ['provider', 'release']\n },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },\n        {           type: 'gutter',\n          gutterName: 'button',\n          fixed: true,\n          icon: 'reorder',\n          handlers: {             click: (columns, data, column, record, rowIndex) => {               const popup = openPopup(\n                html`\n                  <installable-activity-model-item-list .activity=${record}></installable-activity-model-item-list>\n                `,\n                {                   backdrop: true,\n                  help: 'worklist/activity-model-item-list',\n                  size: 'large',\n                  title: i18next.t('title.activity model item list')\n }\n              )\n              popup.onclosed = () => {                 this.grist?.fetch()\n }\n }\n }\n },\n        {           type: 'gutter',\n          gutterName: 'button',\n          name: 'state',\n          fixed: true,\n          icon: record => (record && record.active ? 'pause' : 'play_arrow'),\n          handlers: {             click: (columns, data, column, record, rowIndex) => {               if (record.active) {                 this.deactivate(record)\n } else {                 this.activate(record)\n }\n }\n }\n },\n        {           type: 'string',\n          name: 'name',\n          fixed: true,\n          header: i18next.t('field.name'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 150\n },\n        {           type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: {             editable: false\n },\n          filter: 'search',\n          width: 200\n },\n        {           type: 'string',\n          name: 'release',\n          header: i18next.t('field.release'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 80\n },\n        {           type: 'string',\n          name: 'provider',\n          header: i18next.t('field.provider'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 120\n },\n        {           type: 'select',\n          name: 'activityType',\n          label: true,\n          header: i18next.t('field.activity-type'),\n          record: {             editable: false,\n            options: ActivityTypes\n },\n          sortable: true,\n          width: 60\n },\n        {           type: 'number',\n          name: 'priority',\n          header: i18next.t('field.priority'),\n          record: {\n            editable: false,\n            align: 'center',\n            renderer: priorityCell()\n          },\n          width: 60\n },\n        {           type: 'select',\n          name: 'startingType',\n          label: true,\n          header: i18next.t('field.starting-type'),\n          record: {             editable: false,\n            options: ActivityStartingTypes\n },\n          sortable: true,\n          width: 60\n },\n        {           type: 'select',\n          name: 'multiple',\n          header: i18next.t('field.multiple'),\n          record: {             editable: false,\n            options: [\n              { display: 'Single', value: 'single' },\n              { display: 'Parallel', value: 'parallel' },\n              { display: 'Sequential', value: 'sequential' }\n            ]\n },\n          width: 80\n },\n        {           type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: { editable: false },\n          width: 120\n },\n        {           type: 'select',\n          name: 'uiType',\n          label: true,\n          header: i18next.t('field.ui-type'),\n          record: {             editable: false,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'uiSource',\n          header: i18next.t('field.ui-source'),\n          record: {             editable: false,\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.uiType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n },\n        {           type: 'select',\n          name: 'viewType',\n          label: true,\n          header: i18next.t('field.view-type'),\n          record: {             editable: true,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'viewSource',\n          header: i18next.t('field.view-source'),\n          record: {             editable: true,\n            editor: function (value, column, record, rowIndex, field) {               var type = record.viewType !== 'board' ? 'script' : 'board'\n              return getEditor(type)(value, column, record, rowIndex, field)\n },\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.viewType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n },\n        {           type: 'select',\n          name: 'reportType',\n          label: true,\n          header: i18next.t('field.report-type'),\n          record: {             editable: false,\n            options: ActivityUITypes\n },\n          width: 80\n },\n        {           type: 'string',\n          name: 'reportSource',\n          header: i18next.t('field.report-source'),\n          record: {             editable: false,\n            editor: function (value, column, record, rowIndex, field) {               var type = record.reportType !== 'board' ? 'script' : 'board'\n              return getEditor(type)(value, column, record, rowIndex, field)\n },\n            renderer: function (value, column, record, rowIndex, field) {               var type = record.reportType !== 'board' ? 'script' : 'board'\n              return getRenderer(type)(value, column, record, rowIndex, field)\n }\n },\n          width: 140\n }\n      ],\n      rows: {         selectable: false,\n        appendable: false\n },\n      sorters: [\n        {           name: 'name'\n }\n      ]\n }\n }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {     const response = await client.query({       query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: installableActivities(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               activity {                 id\n                state\n }\n              name\n              description\n              provider\n              release\n              activityType\n              priority\n              startingType\n              multiple\n              model {                 name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n }\n              thumbnail\n              uiType\n              uiSource\n              viewType\n              viewSource\n              reportType\n              reportSource\n }\n            total\n }\n }\n      `,\n      variables: {         filters,\n        pagination: { page, limit },\n        sortings\n }\n })\n\n    /*\n     * A failed query resolves here — errorPolicy: 'all' — so a bare `return` would hand grist\n     * undefined and the screen would settle as an empty list. Empty and unavailable are different\n     * facts, and the grid can only tell the user about one of them if we say so.\n     */\n    if (response.errors?.length || !response.data?.responses) {\n      throw new Error(`[installableActivityList] ${JSON.stringify(response.errors || 'no data')}`)\n    }\n\n    const { total, items: records } = response.data.responses\n\n    for (var item of records) {       item.active = item.activity && item.activity.state == 'released'\n }\n\n    return {       total,\n      records\n }\n }\n\n  async activate(record) {     await client.mutate({       mutation: gql`\n        mutation ($name: String!) {           activateInstallableActivity(name: $name) {             name\n }\n }\n      `,\n      variables: {         name: record.name\n }\n })\n\n    this.grist?.fetch()\n }\n\n  async deactivate(record) {     await client.mutate({       mutation: gql`\n        mutation ($name: String!) {           deactivateInstallableActivity(name: $name) {             name\n }\n }\n      `,\n      variables: {         name: record.name\n }\n })\n\n    this.grist?.fetch()\n }\n}\n"]}

package/dist-client/pages/todo/approval-done-list-page.d.ts

@@ -1,4 +1,5 @@
 import '@operato/data-grist';
+import '@operato/data-grist/ox-filters-form.js';
 import '@operato/context/ox-context-page-toolbar.js';
 import '@operato/input/ox-input-select-buttons.js';
 import { DataGrist, FetchOption } from '@operato/data-grist';