@things-factory/worklist 10.1.27 → 10.1.28

package/dist-client/pages/activity-catalog/activity-catalog-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-catalog-page.js","sourceRoot":"","sources":["../../../client/pages/activity-catalog/activity-catalog-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/list-state/ox-page-state.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\n * 업무 카탈로그 — **업무함에 올라오는 일이 무슨 일인지 읽는 자리.**\n *\n * ── 첫 판을 다시 만든 이유 (2026-09-08) ───────────────────────────────────\n * 처음 만든 화면은 사용자가 읽을 것이 없었다. 네 줄 중 세 줄이 「…선언되지 않았습니다」였고, 업무\n * 설명은 영어로 나왔고, 다크 테마에서는 글자가 뭉개졌다. 「덮는 시험」처럼 아무도 쓰지 않는 말을\n * 지어내기까지 했다. 개발자 덤프를 사용자 화면이라고 부른 셈이다.\n *\n * 그래서 층을 진짜로 가른다.\n *\n * - **사용자가 읽는 것**: 이 업무가 무엇이고, 여기서 쓰이고 있나. 그것만 크게.\n * - **개발 정보**: 어디까지 됐나 · 시험. **값이 있을 때만** 접어서 아래에 둔다. 없는 것을 줄줄이\n *   적지 않는다 — 빈 줄을 나열하는 것은 정직한 게 아니라 아무 말도 안 하는 것이다.\n *\n * 여전히 판단하지 않고 선언을 그린다. 어디까지 됐는지는 화면이 실행 중에 알 수 없고, 그 업무를\n * 등록한 모듈이 자기 코드 옆에 적는다(ActivityReadiness).\n */\nconst CatalogFetch = gql`\n  query {\n    responses: installableActivities {\n      items {\n        name\n        label\n        labelTKey\n        description\n        guide\n        guideTKeys\n        category\n        activityType\n        provider\n        release\n        approvalSteps\n        uiType\n        viewType\n        viewSource\n        model {\n          inout\n          hidden\n        }\n        activity {\n          id\n          decisionKeys {\n            role\n          }\n        }\n        readiness {\n          stage\n          gaps\n          tests\n          notes\n          lastRun {\n            passed\n            total\n            at\n            command\n          }\n        }\n      }\n      total\n    }\n  }\n`\n\n/**\n * 카드에 보이는 이름. 정렬도 이 글자로 한다 — 보이는 글자와 정렬 기준이 다르면 목록이 뒤섞여 보인다.\n *\n * 번역 키는 서버가 `name` 에서 계산해 보낸다(labelTKey). 화면은 키 규칙을 모른다. label 이 없으면\n * name 이다 — name 은 콜백을 찾는 키라 번역하지 않는다.\n */\nfunction shownName(one: any): string {\n  if (!one?.label) return String(one?.name ?? '')\n  return one.labelTKey ? String(i18next.t(one.labelTKey, { defaultValue: one.label })) : String(one.label)\n}\n\n/**\n * 카드 차례 — **쓸 수 있는 것이 위.**\n *\n * 사용자는 지금 도는 업무를 보러 오고, 우리는 남은 것을 보러 온다. 두 독자를 한 화면에 두면서\n * 순서로 가른다: 위쪽은 실제로 오는 업무, 아래쪽은 아직 없는 것과 여기 두지 않기로 한 것.\n *\n * **「업무함 아님」은 「예정」과 붙여 두지 않는다.** 섞이면 판단이 약속으로 읽힌다 — 안 만들기로\n * 정한 것이 곧 될 것처럼 보인다.\n */\nconst STAGE_ORDER = ['working', 'partial', 'declared', 'planned', 'not-worklist']\n\n/**\n * 전선에서 온 단계를 **선언된 값으로 되돌린다.**\n *\n * `readiness.stage` 는 `@Field(type => ActivityReadinessStage)` 로 선언돼 있고, registerEnumType 은\n * enum 을 **key 로** 공개한다. 그래서 전선에 오는 것은 `Working` · `Planned` · `NotWorklist` 이고\n * 값(`working` · `planned` · `not-worklist`)이 아니다.\n *\n * 소문자로만 내리면 넷은 우연히 맞고 하나가 틀린다 — `NotWorklist` 가 `notworklist` 가 되는데\n * 값에는 하이픈이 있다. 그 하나 때문에 화면에서 세 가지가 한꺼번에 어긋났다: 원시 i18n 키가 그대로\n * 뜨고, 단계별 수에서 그 넷이 빠지고, 차례가 「예정」보다 위로 올라가 **판단이 약속처럼** 보였다.\n *\n * 오늘 아침 organization 에서 같은 것을 고쳤다(`participation` 이 `Reference` 로 와서 `reference`\n * 와 비교하면 언제나 거짓이던 것). 글자만 다르지 같은 함정이라, 여기서도 **경계에서 한 번 되돌린다.**\n * 비교하는 자리마다 소문자를 부르는 대신 이 함수 하나를 지난다.\n */\nfunction canonicalStage(raw?: string): string {\n  const flat = String(raw || '')\n    .toLowerCase()\n    .replace(/[^a-z]/g, '')\n\n  return STAGE_ORDER.find(stage => stage.replace(/[^a-z]/g, '') === flat) || ''\n}\n\nfunction stageRank(stage?: string): number {\n  const at = STAGE_ORDER.indexOf(canonicalStage(stage))\n\n  /* 선언이 없는 것은 도는 것들 뒤, 예정 앞에 둔다 — 모른다는 것이 「없다」는 아니다. */\n  return at < 0 ? STAGE_ORDER.indexOf('declared') : at\n}\n\n@customElement('activity-catalog-page')\nexport class ActivityCatalogPage extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      /*\n       * 색은 전부 테마 토큰으로 쓴다. 첫 판은 흰 카드와 연회색 글자를 값으로 박아서 다크 테마에서\n       * 글자가 배경에 묻혔다.\n       */\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%;\n        overflow: auto;\n        padding: var(--spacing-large, 12px);\n\n        background-color: var(--md-sys-color-background);\n        color: var(--md-sys-color-on-background);\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      /* 단계별 수. 설명이 아니라 자료라서 둔다 — 개발 기간에 이 수가 남은 일을 말한다. */\n      [counts] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px 14px;\n\n        margin: 0 0 12px 0;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      [counts] b {\n        color: var(--md-sys-color-on-surface, #1d1b20);\n      }\n\n      [failed] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n\n        padding: 8px 10px;\n        border-radius: 6px;\n\n        background-color: var(--md-sys-color-error-container, #ffdad6);\n        color: var(--md-sys-color-on-error-container, #410002);\n      }\n\n      ul {\n        display: grid;\n        gap: 10px;\n\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      /*\n       * 카드는 **바탕보다 밝다** — 페이지에서 떠 있어야 스물여섯 장이 줄로 읽힌다.\n       *\n       * 처음엔 surface 를 썼는데, 이 테마에서 그 값이 background 와 **같다**(실측: 라이트 둘 다\n       * rgb(238 241 243), 다크 둘 다 rgb(13 18 22)). 그래서 카드가 1px 테두리로만 구분됐다.\n       *\n       * surface-container-low 가 두 테마에서 **같은 방향**으로 갈린다 — 라이트 246 248 249,\n       * 다크 20 27 33, 둘 다 바탕보다 밝다. surface-container-high 는 라이트에서 오히려 어두워져\n       * 카드가 눌린 것처럼 읽힌다. 뜨는 것과 눌리는 것은 다른 말이라 방향이 뒤집히면 안 된다.\n       */\n      li {\n        padding: 12px 14px;\n        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n        border-radius: 6px;\n\n        background-color: var(--md-sys-color-surface-container-low, #f6f8f9);\n        color: var(--md-sys-color-on-surface, #1d1b20);\n      }\n\n      .head {\n        display: flex;\n        align-items: baseline;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n\n      .name {\n        font-size: var(--ui-t-title, 15px);\n        font-weight: 600;\n      }\n\n      /* 여기서 쓰이나 — 사용자에게 이 카드에서 가장 실질적인 사실이다. */\n      .use {\n        padding: 1px 7px;\n        border-radius: 999px;\n        font-size: 11px;\n        white-space: nowrap;\n\n        background-color: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n      }\n\n      .use[idle] {\n        background-color: var(--md-sys-color-surface-variant, #e7e0ec);\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /* 이 업무가 무엇인가. 카드에서 가장 먼저 읽히는 줄이다. */\n      .guide {\n        margin: 8px 0 0 0;\n        line-height: 1.55;\n      }\n\n      .guide p {\n        margin: 0 0 4px 0;\n      }\n\n      .unwritten {\n        margin: 8px 0 0 0;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /*\n       * 개발 정보. 값이 있을 때만 그린다. 사용자에게는 접힌 한 줄로만 보이고, 열면 우리가 볼 것이\n       * 나온다.\n       */\n      /*\n       * 단계 표. **철자를 하나만 쓴다.**\n       *\n       * 앞 판은 단계마다 boolean 속성을 뒀다. 그러면 하이픈 없는 두 번째 철자가 생기고\n       * (notworklist) i18n 키(label.readiness-not-worklist)와 어긋난다. 값 하나를 data-stage 에\n       * 실으면 선택자 · 키 꼬리 · 서버 enum 값이 **같은 글자**가 된다.\n       *\n       * 색과 말로 함께 말한다 — 색만 쓰면 색을 못 가리는 사람에게 아무 말도 하지 않는다.\n       */\n      .stage {\n        padding: 1px 7px;\n        border-radius: 999px;\n        font-size: 11px;\n        white-space: nowrap;\n\n        background-color: var(--md-sys-color-surface-variant, #e7e0ec);\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      .stage[data-stage='working'] {\n        background-color: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n      }\n\n      .stage[data-stage='partial'],\n      .stage[data-stage='declared'] {\n        background-color: var(--md-sys-color-tertiary-container, #ffd8e4);\n        color: var(--md-sys-color-on-tertiary-container, #31111d);\n      }\n\n      /* 여기 두지 않기로 한 것. 테두리만 두어 만들 것들과 섞이지 않게 한다. */\n      .stage[data-stage='not-worklist'] {\n        background-color: transparent;\n        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n      }\n\n      details {\n        margin-top: 10px;\n        padding-top: 8px;\n        border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n      }\n\n      summary {\n        cursor: pointer;\n        border-radius: 4px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /*\n       * 키보드로 여기 왔을 때 어디에 있는지 보여야 한다.\n       *\n       * summary 는 눌리는 것이라 tab 이 멈추는 자리다. 내가 이 절을 만들면서 표시를 안 줘서\n       * plant 의 접근성 래칫 시험이 「포커스가 안 보이는 자리 7 → 8」로 잡아냈다. 화면을 하나\n       * 더할 때마다 한 칸씩 늘어나는 것을 막는 시험이고, 허용 수를 올려 통과시킬 자리가 아니다.\n       */\n      summary:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary, #6750a4);\n        outline-offset: 2px;\n      }\n\n      dl {\n        display: grid;\n        grid-template-columns: max-content 1fr;\n        gap: 4px 12px;\n\n        margin: 8px 0 0 0;\n      }\n\n      dt {\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      dd {\n        margin: 0;\n      }\n\n      code {\n        font-family: var(--ui-font-mono, monospace);\n        font-size: 12px;\n        word-break: break-all;\n      }\n\n      div[empty] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n\n      div[empty] .title {\n        font-size: var(--ui-t-title, 15px);\n      }\n\n      div[empty] .why {\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      @media (max-width: 480px) {\n        dl {\n          grid-template-columns: 1fr;\n          gap: 0;\n        }\n\n        dt {\n          margin-top: 6px;\n        }\n      }\n    `\n  ]\n\n  @state() items: any[] = []\n  @state() loaded = false\n  @state() failed = false\n  /** Why the catalog could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */\n  @state() loadError: unknown = null\n\n  get context() {\n    return {\n      title: i18next.t('title.activity catalog'),\n      help: 'worklist/activity-catalog-page'\n    }\n  }\n\n  render() {\n    /* Loading showed a blank page; a failure had its own box. Both are the shared page state now. */\n    return html`<ox-page-state\n      .loading=${!this.loaded}\n      .error=${this.loadError}\n      @retry=${() => this.retry()}\n      >${this.loaded && !this.loadError ? this.renderCatalog() : ''}</ox-page-state\n    >`\n  }\n\n  private retry() {\n    this.failed = false\n    this.loadError = null\n    this.loaded = false\n    this.fetch()\n  }\n\n  private renderCatalog() {\n    if (!this.items.length) {\n      return html`<div empty>\n        <span class=\"title\">${i18next.t('text.no-installable-activity')}</span>\n        <span class=\"why\">${i18next.t('text.no-installable-activity-why')}</span>\n      </div>`\n    }\n\n    return html`\n      <div counts>\n        ${STAGE_ORDER.map(stage => {\n          const n = this.items.filter(one => canonicalStage(one.readiness?.stage) == stage).length\n          return n ? html`<span>${i18next.t('label.readiness-' + stage)} <b>${n}</b></span>` : ''\n        })}\n      </div>\n\n      <ul>\n        ${this.items.map(one => this.renderOne(one))}\n      </ul>\n    `\n  }\n\n  private renderOne(one: any) {\n    const stage = canonicalStage(one.readiness?.stage)\n\n    /*\n     * 아직 만들지 않은 것은 **설치될 수가 없다.** 그런 카드에 「아직 사용 안 함」을 붙이면 「예정」과\n     * 같은 말을 두 번 하는 것이고, 읽는 사람은 둘이 다른 뜻인 줄 알고 두 번 읽는다.\n     */\n    const registered = !!stage && stage != 'planned' && stage != 'not-worklist'\n    const inUse = !!one.activity?.id\n\n    return html`<li>\n      <div class=\"head\">\n        <!--\n          이름은 label 이 있으면 label 이다. name 은 콜백을 찾는 키라서 사람이 읽는 말이 아닐 수\n          있다 — 한국어 스물셋 사이에 「MES Disposition Approval」 하나가 그렇게 떴다.\n        -->\n        <span class=\"name\">${shownName(one)}</span>\n\n        <!--\n          단계를 카드 머리에 둔다.\n          한 판에서 이것을 개발 정보 안으로 옮겼다가 되돌렸다. 업무가 마흔을 넘고 그중 대부분이 아직\n          안 만든 것이면, 접힌 절 안에 든 단계는 하나씩 펼쳐야 아는 값이 된다. 그러면 목록이 다\n          같아 보인다.\n        -->\n        ${stage\n          ? html`<span class=\"stage\" data-stage=${stage}>${i18next.t('label.readiness-' + stage)}</span>`\n          : ''}\n        ${registered\n          ? html`<span class=\"use\" ?idle=${!inUse}\n              >${inUse ? i18next.t('text.activity-in-use-here') : i18next.t('text.activity-not-in-use-here')}</span\n            >`\n          : ''}\n      </div>\n\n      ${this.renderGuide(one)} ${registered ? this.renderApprovers(one) : ''} ${this.renderBuild(one)}\n    </li>`\n  }\n\n  /**\n   * 이 업무가 무엇인가.\n   *\n   * `guide` 가 그 자리다 — 받는 사람의 말로 쓴 문장이다. 번역은 서버가 줄마다 계산해 보낸 `guideTKeys` 로\n   * 찾고, 번역이 없으면 문장이 그대로 나간다. `description` 은\n   * 우리끼리 쓰는 영어 한 줄이라 여기에 그대로 내지 않는다. 한국어 화면에서 영어 한 줄은 설명이\n   * 아니다.\n   *\n   * 없으면 **한 줄로** 없다고 말한다. 없는 것을 여러 줄로 늘리지 않는다.\n   */\n  private renderGuide(one: any) {\n    const keys: string[] = one.guideTKeys || []\n    const lines: string[] = (one.guide || []).map((line: string, n: number) =>\n      keys[n] ? String(i18next.t(keys[n], { defaultValue: line })) : line\n    )\n\n    if (!lines.length) {\n      return html`<p class=\"unwritten\">${i18next.t('text.activity-guide-unwritten')}</p>`\n    }\n\n    return html`<div class=\"guide\">${lines.map(line => html`<p>${line}</p>`)}</div>`\n  }\n\n  /**\n   * 이 공장이 이 단계를 쓰나 — **결재선에 결재자가 있나.**\n   *\n   * 결재선은 양식이 아니라 그 현장이 정하는 것이라, 같은 업무가 어느 공장에서는 결재를 받고 어느\n   * 공장에서는 그냥 지나간다. 그 사실이 지금까지 기동 로그 한 줄에만 있었다.\n   *\n   * **사람 수가 아니라 단계 수다** — 역할로 걸린 한 단계는 여러 사람이 본다. 그리고 비어 있다는 것이\n   * 무슨 일을 뜻하는지는 업무마다 달라서(상신이 막히거나, 확인 없이 지나가거나) 여기서 결과를 말하지\n   * 않는다. 그건 그 업무의 설명이 할 말이다.\n   *\n   * 「아직 사용 안 함」인 카드에는 그리지 않는다 — 세워지지 않은 양식에 결재선이 있을 수 없다.\n   */\n  private renderApprovers(one: any) {\n    if (!one.activity?.id) {\n      return ''\n    }\n\n    const steps = one.approvalSteps\n\n    return html`<dl>\n      <dt>${i18next.t('field.approval-line')}</dt>\n      <dd>\n        ${typeof steps != 'number'\n          ? html`<span class=\"unwritten\">${i18next.t('text.approval-line-unknown')}</span>`\n          : steps > 0\n            ? i18next.t('text.approval-line-steps', { n: steps })\n            : html`<span class=\"unwritten\">${i18next.t('text.approval-line-empty')}</span>`}\n      </dd>\n    </dl>`\n  }\n\n  /**\n   * 개발 정보 — **값이 있을 때만.**\n   *\n   * 첫 판은 값이 없어도 「…선언되지 않았습니다」를 네 줄 그렸다. 사용자에게는 뜻 없는 벽이고 우리에게도\n   * 아무 정보가 아니다. 아무것도 없으면 이 절 자체를 그리지 않는다 — 그 업무가 카탈로그에 「개발 정보\n   * 없음」으로 남는 것은 화면 위쪽의 목적을 방해하지 않는다.\n   */\n  private renderBuild(one: any) {\n    const readiness = one.readiness || {}\n    const stage = canonicalStage(readiness.stage)\n    const run = readiness.lastRun\n    const hasRun = run && typeof run.total == 'number'\n\n    const built = this.renderBuilt(one)\n\n    if (!stage && !built && !readiness.tests?.length && !hasRun && !readiness.notes && !readiness.gaps?.length) {\n      return ''\n    }\n\n    return html`<details>\n      <summary>${i18next.t('label.activity-build-info')}${stage ? ` · ${i18next.t('label.readiness-' + stage)}` : ''}</summary>\n      <dl>\n        ${built ? html`<dt>${i18next.t('field.what-is-built')}</dt>\n              <dd>${built}</dd>` : ''}\n        ${readiness.gaps?.length\n          ? html`<dt>${i18next.t('field.readiness-gaps')}</dt>\n              <dd>${readiness.gaps.join(' · ')}</dd>`\n          : ''}\n        ${readiness.tests?.length\n          ? html`<dt>${i18next.t('field.covering-tests')}</dt>\n              <dd>${readiness.tests.map((test: string) => html`<div><code>${test}</code></div>`)}</dd>`\n          : ''}\n        ${hasRun\n          ? html`<dt>${i18next.t('field.last-test-run')}</dt>\n              <dd>${this.renderRun(run)}</dd>`\n          : ''}\n        ${readiness.notes\n          ? html`<dt>${i18next.t('field.readiness-notes')}</dt>\n              <dd>${readiness.notes}</dd>`\n          : ''}\n      </dl>\n    </details>`\n  }\n\n  /**\n   * 무엇이 실제로 서 있나 — **선언과 정의를 가르는 줄이다.**\n   *\n   * 이 화면은 단계 이름 하나로 「계획」·「동작함」만 말했다. 그런데 사용자가 카탈로그를 보고 물은 것은\n   * 「화면 설정도 없이 이게 정의냐」였고, 화면이 그 칸을 안 보이니 세는 사람이 파일을 열어야 했다.\n   * 액티비티가 서려면 주고받는 값과 화면과 콜백이 있어야 하고, 선언만 된 항목에는 그중 아무것도 없다.\n   *\n   * 설치되지 않은 항목에는 그리지 않는다. 45건에 「없음 · 없음 · 없음」을 세 줄씩 붙이면 그 자체가\n   * 벽이고, 무엇이 없는지는 그 항목의 gaps 가 이미 사람 말로 적고 있다.\n   */\n  private renderBuilt(one: any) {\n    if (!one.activity?.id) {\n      return ''\n    }\n\n    const model = (one.model || []).filter((item: any) => !item?.hidden)\n    const taking = model.filter((item: any) => item?.inout == 'in' || item?.inout == 'inout').length\n    const giving = model.filter((item: any) => item?.inout == 'out' || item?.inout == 'inout').length\n    const decisions = (one.activity?.decisionKeys || []).length\n\n    /*\n     * 결재 화면이 무엇으로 그려지나. 전용 요소는 이름까지 적는다 — 「전용 화면이 있다」만으로는 어느\n     * 것인지 못 찾고, 이 절을 읽는 사람은 그 파일을 열려는 사람이다.\n     *\n     * 선언이 채워지면 기본 화면도 판단을 그린다. 그래서 「기본 화면」 뒤에 판단 항목 수가 붙는다 —\n     * 0 이면 그 화면은 아직 칸 목록이다.\n     */\n    const screen = one.viewSource\n      ? html`${i18next.t('text.own-approval-view')} · <code>${one.viewSource}</code>`\n      : html`${i18next.t('text.generated-approval-view')}`\n\n    return html`\n      <div>${i18next.t('text.model-in-out', { taking, giving })}</div>\n      <div>${i18next.t('field.approval-view')} — ${screen}</div>\n      <div>${i18next.t('text.decision-keys-count', { n: decisions })}</div>\n    `\n  }\n\n  /** 잰 날짜를 수와 함께 낸다 — 손으로 적는 기록이라 낡는데, 날짜가 있으면 낡았다는 것을 안다. */\n  private renderRun(run: any) {\n    const at = run.at ? new Date(Date.parse(String(run.at))) : undefined\n    const when =\n      at && Number.isFinite(at.getTime())\n        ? at.toLocaleString(i18next.language || undefined, {\n            year: 'numeric',\n            month: 'numeric',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: '2-digit',\n            hour12: false\n          })\n        : ''\n\n    return html`${typeof run.passed == 'number' ? run.passed : '—'} / ${run.total}${when\n      ? html` · ${when}`\n      : ''}${run.command ? html`<div><code>${run.command}</code></div>` : ''}`\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      await this.fetch()\n    }\n  }\n\n  /**\n   * 주소로 바로 들어온 경우 — **`pageUpdated` 가 안 온다.**\n   *\n   * 메뉴에서 눌러 들어오면 화면이 꺼졌다 켜지면서 `pageUpdated` 가 오고 거기서 읽는다. 그런데 주소를\n   * 직접 열면 이 요소가 **이미 active 인 채로** 만들어져서 그 전환이 없다. 실측했다: `active` 는\n   * 참인데 `loaded` 가 거짓이고, 화면은 아무것도 없이 조용했다 — 오류도 빈 화면 문구도 없다.\n   *\n   * 목록 화면들은 이 자리가 안 비어 있다. grist 가 첫 렌더에서 스스로 `fetchHandler` 를 부르기\n   * 때문이다. 이 화면은 grist 를 안 쓰니 부르는 사람이 없었다.\n   *\n   * 그래서 켜져 있는데 아직 안 읽었으면 여기서 읽는다. `loaded` 가 그 조건이라 두 번 읽지 않는다.\n   */\n  updated(changes: any) {\n    if (this.active && !this.loaded && !this.failed) {\n      this.fetch()\n    }\n  }\n\n  async fetch() {\n    const response = await client.query({ query: CatalogFetch, fetchPolicy: 'no-cache' })\n\n    /*\n     * 이 client 는 errorPolicy: 'all' 이라 질의가 실패해도 거절되지 않는다. 그대로 읽으면 실패가\n     * 「등록된 업무가 없다」로 그려진다.\n     */\n    const items = response.errors?.length ? undefined : response.data?.responses?.items\n\n    if (!Array.isArray(items)) {\n      this.failed = true\n      this.loadError = response.errors?.length ? response.errors : new Error('no data')\n      this.loaded = true\n      console.error('[activity-catalog]', response.errors || 'no data')\n      return\n    }\n\n    this.failed = false\n    this.loadError = null\n    this.items = [...items].sort(\n      (a, b) =>\n        stageRank(a.readiness?.stage) - stageRank(b.readiness?.stage) ||\n        shownName(a).localeCompare(shownName(b))\n    )\n    this.loaded = true\n  }\n}\n"]}
+{"version":3,"file":"activity-catalog-page.js","sourceRoot":"","sources":["../../../client/pages/activity-catalog/activity-catalog-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/list-state/ox-page-state.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\n\n/**\n * 업무 카탈로그 — **업무함에 올라오는 일이 무슨 일인지 읽는 자리.**\n *\n * ── 첫 판을 다시 만든 이유 (2026-09-08) ───────────────────────────────────\n * 처음 만든 화면은 사용자가 읽을 것이 없었다. 네 줄 중 세 줄이 「…선언되지 않았습니다」였고, 업무\n * 설명은 영어로 나왔고, 다크 테마에서는 글자가 뭉개졌다. 「덮는 시험」처럼 아무도 쓰지 않는 말을\n * 지어내기까지 했다. 개발자 덤프를 사용자 화면이라고 부른 셈이다.\n *\n * 그래서 층을 진짜로 가른다.\n *\n * - **사용자가 읽는 것**: 이 업무가 무엇이고, 여기서 쓰이고 있나. 그것만 크게.\n * - **개발 정보**: 어디까지 됐나 · 시험. **값이 있을 때만** 접어서 아래에 둔다. 없는 것을 줄줄이\n *   적지 않는다 — 빈 줄을 나열하는 것은 정직한 게 아니라 아무 말도 안 하는 것이다.\n *\n * 여전히 판단하지 않고 선언을 그린다. 어디까지 됐는지는 화면이 실행 중에 알 수 없고, 그 업무를\n * 등록한 모듈이 자기 코드 옆에 적는다(ActivityReadiness).\n */\nconst CatalogFetch = gql`\n  query {\n    responses: installableActivities {\n      items {\n        name\n        label\n        labelTKey\n        readinessNotesTKey\n        readinessGapTKeys\n        description\n        guide\n        guideTKeys\n        category\n        activityType\n        provider\n        release\n        approvalSteps\n        uiType\n        viewType\n        viewSource\n        model {\n          inout\n          hidden\n        }\n        activity {\n          id\n          decisionKeys {\n            role\n          }\n        }\n        readiness {\n          stage\n          gaps\n          tests\n          notes\n          lastRun {\n            passed\n            total\n            at\n            command\n          }\n        }\n      }\n      total\n    }\n  }\n`\n\n/**\n * 카드에 보이는 이름. 정렬도 이 글자로 한다 — 보이는 글자와 정렬 기준이 다르면 목록이 뒤섞여 보인다.\n *\n * 번역 키는 서버가 `name` 에서 계산해 보낸다(labelTKey). 화면은 키 규칙을 모른다. label 이 없으면\n * name 이다 — name 은 콜백을 찾는 키라 번역하지 않는다.\n */\nfunction shownName(one: any): string {\n  if (!one?.label) return String(one?.name ?? '')\n  return one.labelTKey ? String(i18next.t(one.labelTKey, { defaultValue: one.label })) : String(one.label)\n}\n\n/**\n * 카드 차례 — **쓸 수 있는 것이 위.**\n *\n * 사용자는 지금 도는 업무를 보러 오고, 우리는 남은 것을 보러 온다. 두 독자를 한 화면에 두면서\n * 순서로 가른다: 위쪽은 실제로 오는 업무, 아래쪽은 아직 없는 것과 여기 두지 않기로 한 것.\n *\n * **「업무함 아님」은 「예정」과 붙여 두지 않는다.** 섞이면 판단이 약속으로 읽힌다 — 안 만들기로\n * 정한 것이 곧 될 것처럼 보인다.\n */\nconst STAGE_ORDER = ['working', 'partial', 'declared', 'planned', 'not-worklist']\n\n/**\n * 전선에서 온 단계를 **선언된 값으로 되돌린다.**\n *\n * `readiness.stage` 는 `@Field(type => ActivityReadinessStage)` 로 선언돼 있고, registerEnumType 은\n * enum 을 **key 로** 공개한다. 그래서 전선에 오는 것은 `Working` · `Planned` · `NotWorklist` 이고\n * 값(`working` · `planned` · `not-worklist`)이 아니다.\n *\n * 소문자로만 내리면 넷은 우연히 맞고 하나가 틀린다 — `NotWorklist` 가 `notworklist` 가 되는데\n * 값에는 하이픈이 있다. 그 하나 때문에 화면에서 세 가지가 한꺼번에 어긋났다: 원시 i18n 키가 그대로\n * 뜨고, 단계별 수에서 그 넷이 빠지고, 차례가 「예정」보다 위로 올라가 **판단이 약속처럼** 보였다.\n *\n * 오늘 아침 organization 에서 같은 것을 고쳤다(`participation` 이 `Reference` 로 와서 `reference`\n * 와 비교하면 언제나 거짓이던 것). 글자만 다르지 같은 함정이라, 여기서도 **경계에서 한 번 되돌린다.**\n * 비교하는 자리마다 소문자를 부르는 대신 이 함수 하나를 지난다.\n */\nfunction canonicalStage(raw?: string): string {\n  const flat = String(raw || '')\n    .toLowerCase()\n    .replace(/[^a-z]/g, '')\n\n  return STAGE_ORDER.find(stage => stage.replace(/[^a-z]/g, '') === flat) || ''\n}\n\nfunction stageRank(stage?: string): number {\n  const at = STAGE_ORDER.indexOf(canonicalStage(stage))\n\n  /* 선언이 없는 것은 도는 것들 뒤, 예정 앞에 둔다 — 모른다는 것이 「없다」는 아니다. */\n  return at < 0 ? STAGE_ORDER.indexOf('declared') : at\n}\n\n@customElement('activity-catalog-page')\nexport class ActivityCatalogPage extends localize(i18next)(PageView) {\n  static styles = [\n    /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */\n    DocumentPageStyles,\n    ScrollbarStyles,\n    css`\n      /*\n       * 색은 전부 테마 토큰으로 쓴다. 첫 판은 흰 카드와 연회색 글자를 값으로 박아서 다크 테마에서\n       * 글자가 배경에 묻혔다.\n       */\n      :host {\n        color: var(--md-sys-color-on-background);\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      /* 단계별 수. 설명이 아니라 자료라서 둔다 — 개발 기간에 이 수가 남은 일을 말한다. */\n      [counts] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px 14px;\n\n        margin: 0 0 12px 0;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      [counts] b {\n        color: var(--md-sys-color-on-surface, #1d1b20);\n      }\n\n      [failed] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n\n        padding: 8px 10px;\n        border-radius: 6px;\n\n        background-color: var(--md-sys-color-error-container, #ffdad6);\n        color: var(--md-sys-color-on-error-container, #410002);\n      }\n\n      ul {\n        display: grid;\n        gap: 10px;\n\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      /*\n       * 카드는 **바탕보다 밝다** — 페이지에서 떠 있어야 스물여섯 장이 줄로 읽힌다.\n       *\n       * 처음엔 surface 를 썼는데, 이 테마에서 그 값이 background 와 **같다**(실측: 라이트 둘 다\n       * rgb(238 241 243), 다크 둘 다 rgb(13 18 22)). 그래서 카드가 1px 테두리로만 구분됐다.\n       *\n       * surface-container-low 가 두 테마에서 **같은 방향**으로 갈린다 — 라이트 246 248 249,\n       * 다크 20 27 33, 둘 다 바탕보다 밝다. surface-container-high 는 라이트에서 오히려 어두워져\n       * 카드가 눌린 것처럼 읽힌다. 뜨는 것과 눌리는 것은 다른 말이라 방향이 뒤집히면 안 된다.\n       */\n      li {\n        padding: 12px 14px;\n        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n        border-radius: 6px;\n\n        background-color: var(--md-sys-color-surface-container-low, #f6f8f9);\n        color: var(--md-sys-color-on-surface, #1d1b20);\n      }\n\n      .head {\n        display: flex;\n        align-items: baseline;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n\n      .name {\n        font-size: var(--ui-t-title, 15px);\n        font-weight: 600;\n      }\n\n      /* 여기서 쓰이나 — 사용자에게 이 카드에서 가장 실질적인 사실이다. */\n      .use {\n        padding: 1px 7px;\n        border-radius: 999px;\n        font-size: 11px;\n        white-space: nowrap;\n\n        background-color: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n      }\n\n      .use[idle] {\n        background-color: var(--md-sys-color-surface-variant, #e7e0ec);\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /* 이 업무가 무엇인가. 카드에서 가장 먼저 읽히는 줄이다. */\n      .guide {\n        margin: 8px 0 0 0;\n        line-height: 1.55;\n      }\n\n      .guide p {\n        margin: 0 0 4px 0;\n      }\n\n      .unwritten {\n        margin: 8px 0 0 0;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /*\n       * 개발 정보. 값이 있을 때만 그린다. 사용자에게는 접힌 한 줄로만 보이고, 열면 우리가 볼 것이\n       * 나온다.\n       */\n      /*\n       * 단계 표. **철자를 하나만 쓴다.**\n       *\n       * 앞 판은 단계마다 boolean 속성을 뒀다. 그러면 하이픈 없는 두 번째 철자가 생기고\n       * (notworklist) i18n 키(label.readiness-not-worklist)와 어긋난다. 값 하나를 data-stage 에\n       * 실으면 선택자 · 키 꼬리 · 서버 enum 값이 **같은 글자**가 된다.\n       *\n       * 색과 말로 함께 말한다 — 색만 쓰면 색을 못 가리는 사람에게 아무 말도 하지 않는다.\n       */\n      .stage {\n        padding: 1px 7px;\n        border-radius: 999px;\n        font-size: 11px;\n        white-space: nowrap;\n\n        background-color: var(--md-sys-color-surface-variant, #e7e0ec);\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      .stage[data-stage='working'] {\n        background-color: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n      }\n\n      .stage[data-stage='partial'],\n      .stage[data-stage='declared'] {\n        background-color: var(--md-sys-color-tertiary-container, #ffd8e4);\n        color: var(--md-sys-color-on-tertiary-container, #31111d);\n      }\n\n      /* 여기 두지 않기로 한 것. 테두리만 두어 만들 것들과 섞이지 않게 한다. */\n      .stage[data-stage='not-worklist'] {\n        background-color: transparent;\n        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n      }\n\n      details {\n        margin-top: 10px;\n        padding-top: 8px;\n        border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n      }\n\n      summary {\n        cursor: pointer;\n        border-radius: 4px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      /*\n       * 키보드로 여기 왔을 때 어디에 있는지 보여야 한다.\n       *\n       * summary 는 눌리는 것이라 tab 이 멈추는 자리다. 내가 이 절을 만들면서 표시를 안 줘서\n       * plant 의 접근성 래칫 시험이 「포커스가 안 보이는 자리 7 → 8」로 잡아냈다. 화면을 하나\n       * 더할 때마다 한 칸씩 늘어나는 것을 막는 시험이고, 허용 수를 올려 통과시킬 자리가 아니다.\n       */\n      summary:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary, #6750a4);\n        outline-offset: 2px;\n      }\n\n      dl {\n        display: grid;\n        grid-template-columns: max-content 1fr;\n        gap: 4px 12px;\n\n        margin: 8px 0 0 0;\n      }\n\n      dt {\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      dd {\n        margin: 0;\n      }\n\n      code {\n        font-family: var(--ui-font-mono, monospace);\n        font-size: 12px;\n        word-break: break-all;\n      }\n\n      div[empty] {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n\n      div[empty] .title {\n        font-size: var(--ui-t-title, 15px);\n      }\n\n      div[empty] .why {\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      @media (max-width: 480px) {\n        dl {\n          grid-template-columns: 1fr;\n          gap: 0;\n        }\n\n        dt {\n          margin-top: 6px;\n        }\n      }\n    `\n  ]\n\n  @state() items: any[] = []\n  @state() loaded = false\n  @state() failed = false\n  /** Why the catalog could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */\n  @state() loadError: unknown = null\n\n  get context() {\n    return {\n      title: i18next.t('title.activity catalog'),\n      help: 'worklist/activity-catalog-page'\n    }\n  }\n\n  render() {\n    /* Loading showed a blank page; a failure had its own box. Both are the shared page state now. */\n    return html`<div class=\"page\">\n      <ox-page-state .loading=${!this.loaded} .error=${this.loadError} @retry=${() => this.retry()}\n        >${this.loaded && !this.loadError ? this.renderCatalog() : ''}</ox-page-state\n      >\n    </div>`\n  }\n\n  private retry() {\n    this.failed = false\n    this.loadError = null\n    this.loaded = false\n    this.fetch()\n  }\n\n  private renderCatalog() {\n    if (!this.items.length) {\n      return html`<div empty>\n        <span class=\"title\">${i18next.t('text.no-installable-activity')}</span>\n        <span class=\"why\">${i18next.t('text.no-installable-activity-why')}</span>\n      </div>`\n    }\n\n    return html`\n      <div counts>\n        ${STAGE_ORDER.map(stage => {\n          const n = this.items.filter(one => canonicalStage(one.readiness?.stage) == stage).length\n          return n ? html`<span>${i18next.t('label.readiness-' + stage)} <b>${n}</b></span>` : ''\n        })}\n      </div>\n\n      <ul>\n        ${this.items.map(one => this.renderOne(one))}\n      </ul>\n    `\n  }\n\n  private renderOne(one: any) {\n    const stage = canonicalStage(one.readiness?.stage)\n\n    /*\n     * 아직 만들지 않은 것은 **설치될 수가 없다.** 그런 카드에 「아직 사용 안 함」을 붙이면 「예정」과\n     * 같은 말을 두 번 하는 것이고, 읽는 사람은 둘이 다른 뜻인 줄 알고 두 번 읽는다.\n     */\n    const registered = !!stage && stage != 'planned' && stage != 'not-worklist'\n    const inUse = !!one.activity?.id\n\n    return html`<li>\n      <div class=\"head\">\n        <!--\n          이름은 label 이 있으면 label 이다. name 은 콜백을 찾는 키라서 사람이 읽는 말이 아닐 수\n          있다 — 한국어 스물셋 사이에 「MES Disposition Approval」 하나가 그렇게 떴다.\n        -->\n        <span class=\"name\">${shownName(one)}</span>\n\n        <!--\n          단계를 카드 머리에 둔다.\n          한 판에서 이것을 개발 정보 안으로 옮겼다가 되돌렸다. 업무가 마흔을 넘고 그중 대부분이 아직\n          안 만든 것이면, 접힌 절 안에 든 단계는 하나씩 펼쳐야 아는 값이 된다. 그러면 목록이 다\n          같아 보인다.\n        -->\n        ${stage ? html`<span class=\"stage\" data-stage=${stage}>${i18next.t('label.readiness-' + stage)}</span>` : ''}\n        ${\n          registered\n            ? html`<span class=\"use\" ?idle=${!inUse}\n                >${inUse ? i18next.t('text.activity-in-use-here') : i18next.t('text.activity-not-in-use-here')}</span\n              >`\n            : ''\n        }\n      </div>\n\n      ${this.renderGuide(one)} ${registered ? this.renderApprovers(one) : ''} ${this.renderBuild(one)}\n    </li>`\n  }\n\n  /**\n   * 이 업무가 무엇인가.\n   *\n   * `guide` 가 그 자리다 — 받는 사람의 말로 쓴 문장이다. 번역은 서버가 줄마다 계산해 보낸 `guideTKeys` 로\n   * 찾고, 번역이 없으면 문장이 그대로 나간다. `description` 은\n   * 우리끼리 쓰는 영어 한 줄이라 여기에 그대로 내지 않는다. 한국어 화면에서 영어 한 줄은 설명이\n   * 아니다.\n   *\n   * 없으면 **한 줄로** 없다고 말한다. 없는 것을 여러 줄로 늘리지 않는다.\n   */\n  /**\n   * Reads declared sentences in the reader's language, falling back to the sentence as declared\n   * when there is no key or no translation for it. Lines and keys pair by position, as guide does.\n   */\n  private readSentences(lines: string[] | undefined, keys: string[] | undefined): string[] {\n    return (lines || []).map((line, n) => (keys?.[n] ? String(i18next.t(keys[n], { defaultValue: line })) : line))\n  }\n\n  private renderGuide(one: any) {\n    const keys: string[] = one.guideTKeys || []\n    const lines: string[] = (one.guide || []).map((line: string, n: number) =>\n      keys[n] ? String(i18next.t(keys[n], { defaultValue: line })) : line\n    )\n\n    if (!lines.length) {\n      return html`<p class=\"unwritten\">${i18next.t('text.activity-guide-unwritten')}</p>`\n    }\n\n    return html`<div class=\"guide\">${lines.map(line => html`<p>${line}</p>`)}</div>`\n  }\n\n  /**\n   * 이 공장이 이 단계를 쓰나 — **결재선에 결재자가 있나.**\n   *\n   * 결재선은 양식이 아니라 그 현장이 정하는 것이라, 같은 업무가 어느 공장에서는 결재를 받고 어느\n   * 공장에서는 그냥 지나간다. 그 사실이 지금까지 기동 로그 한 줄에만 있었다.\n   *\n   * **사람 수가 아니라 단계 수다** — 역할로 걸린 한 단계는 여러 사람이 본다. 그리고 비어 있다는 것이\n   * 무슨 일을 뜻하는지는 업무마다 달라서(상신이 막히거나, 확인 없이 지나가거나) 여기서 결과를 말하지\n   * 않는다. 그건 그 업무의 설명이 할 말이다.\n   *\n   * 「아직 사용 안 함」인 카드에는 그리지 않는다 — 세워지지 않은 양식에 결재선이 있을 수 없다.\n   */\n  private renderApprovers(one: any) {\n    if (!one.activity?.id) {\n      return ''\n    }\n\n    const steps = one.approvalSteps\n\n    return html`<dl>\n      <dt>${i18next.t('field.approval-line')}</dt>\n      <dd>\n        ${\n          typeof steps != 'number'\n            ? html`<span class=\"unwritten\">${i18next.t('text.approval-line-unknown')}</span>`\n            : steps > 0\n              ? i18next.t('text.approval-line-steps', { n: steps })\n              : html`<span class=\"unwritten\">${i18next.t('text.approval-line-empty')}</span>`\n        }\n      </dd>\n    </dl>`\n  }\n\n  /**\n   * 개발 정보 — **값이 있을 때만.**\n   *\n   * 첫 판은 값이 없어도 「…선언되지 않았습니다」를 네 줄 그렸다. 사용자에게는 뜻 없는 벽이고 우리에게도\n   * 아무 정보가 아니다. 아무것도 없으면 이 절 자체를 그리지 않는다 — 그 업무가 카탈로그에 「개발 정보\n   * 없음」으로 남는 것은 화면 위쪽의 목적을 방해하지 않는다.\n   */\n  private renderBuild(one: any) {\n    const readiness = one.readiness || {}\n    const stage = canonicalStage(readiness.stage)\n    const run = readiness.lastRun\n    const hasRun = run && typeof run.total == 'number'\n\n    const built = this.renderBuilt(one)\n\n    if (!stage && !built && !readiness.tests?.length && !hasRun && !readiness.notes && !readiness.gaps?.length) {\n      return ''\n    }\n\n    return html`<details>\n      <summary>\n        ${i18next.t('label.activity-build-info')}${stage ? ` · ${i18next.t('label.readiness-' + stage)}` : ''}\n      </summary>\n      <dl>\n        ${\n          built\n            ? html`<dt>${i18next.t('field.what-is-built')}</dt>\n                <dd>${built}</dd>`\n            : ''\n        }\n        ${\n          readiness.gaps?.length\n            ? html`<dt>${i18next.t('field.readiness-gaps')}</dt>\n                <dd>${this.readSentences(readiness.gaps, one.readinessGapTKeys).join(' · ')}</dd>`\n            : ''\n        }\n        ${\n          readiness.tests?.length\n            ? html`<dt>${i18next.t('field.covering-tests')}</dt>\n                <dd>${readiness.tests.map((test: string) => html`<div><code>${test}</code></div>`)}</dd>`\n            : ''\n        }\n        ${\n          hasRun\n            ? html`<dt>${i18next.t('field.last-test-run')}</dt>\n                <dd>${this.renderRun(run)}</dd>`\n            : ''\n        }\n        ${\n          readiness.notes\n            ? html`<dt>${i18next.t('field.readiness-notes')}</dt>\n                <dd>\n                  ${\n                    one.readinessNotesTKey\n                      ? i18next.t(one.readinessNotesTKey, { defaultValue: readiness.notes })\n                      : readiness.notes\n                  }\n                </dd>`\n            : ''\n        }\n      </dl>\n    </details>`\n  }\n\n  /**\n   * 무엇이 실제로 서 있나 — **선언과 정의를 가르는 줄이다.**\n   *\n   * 이 화면은 단계 이름 하나로 「계획」·「동작함」만 말했다. 그런데 사용자가 카탈로그를 보고 물은 것은\n   * 「화면 설정도 없이 이게 정의냐」였고, 화면이 그 칸을 안 보이니 세는 사람이 파일을 열어야 했다.\n   * 액티비티가 서려면 주고받는 값과 화면과 콜백이 있어야 하고, 선언만 된 항목에는 그중 아무것도 없다.\n   *\n   * 설치되지 않은 항목에는 그리지 않는다. 45건에 「없음 · 없음 · 없음」을 세 줄씩 붙이면 그 자체가\n   * 벽이고, 무엇이 없는지는 그 항목의 gaps 가 이미 사람 말로 적고 있다.\n   */\n  private renderBuilt(one: any) {\n    if (!one.activity?.id) {\n      return ''\n    }\n\n    const model = (one.model || []).filter((item: any) => !item?.hidden)\n    const taking = model.filter((item: any) => item?.inout == 'in' || item?.inout == 'inout').length\n    const giving = model.filter((item: any) => item?.inout == 'out' || item?.inout == 'inout').length\n    const decisions = (one.activity?.decisionKeys || []).length\n\n    /*\n     * 결재 화면이 무엇으로 그려지나. 전용 요소는 이름까지 적는다 — 「전용 화면이 있다」만으로는 어느\n     * 것인지 못 찾고, 이 절을 읽는 사람은 그 파일을 열려는 사람이다.\n     *\n     * 선언이 채워지면 기본 화면도 판단을 그린다. 그래서 「기본 화면」 뒤에 판단 항목 수가 붙는다 —\n     * 0 이면 그 화면은 아직 칸 목록이다.\n     */\n    const screen = one.viewSource\n      ? html`${i18next.t('text.own-approval-view')} · <code>${one.viewSource}</code>`\n      : html`${i18next.t('text.generated-approval-view')}`\n\n    return html`\n      <div>${i18next.t('text.model-in-out', { taking, giving })}</div>\n      <div>${i18next.t('field.approval-view')} — ${screen}</div>\n      <div>${i18next.t('text.decision-keys-count', { n: decisions })}</div>\n    `\n  }\n\n  /** 잰 날짜를 수와 함께 낸다 — 손으로 적는 기록이라 낡는데, 날짜가 있으면 낡았다는 것을 안다. */\n  private renderRun(run: any) {\n    const at = run.at ? new Date(Date.parse(String(run.at))) : undefined\n    const when =\n      at && Number.isFinite(at.getTime())\n        ? at.toLocaleString(i18next.language || undefined, {\n            year: 'numeric',\n            month: 'numeric',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: '2-digit',\n            hour12: false\n          })\n        : ''\n\n    return html`${typeof run.passed == 'number' ? run.passed : '—'} /\n    ${run.total}${when ? html` · ${when}` : ''}${run.command ? html`<div><code>${run.command}</code></div>` : ''}`\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      await this.fetch()\n    }\n  }\n\n  /**\n   * 주소로 바로 들어온 경우 — **`pageUpdated` 가 안 온다.**\n   *\n   * 메뉴에서 눌러 들어오면 화면이 꺼졌다 켜지면서 `pageUpdated` 가 오고 거기서 읽는다. 그런데 주소를\n   * 직접 열면 이 요소가 **이미 active 인 채로** 만들어져서 그 전환이 없다. 실측했다: `active` 는\n   * 참인데 `loaded` 가 거짓이고, 화면은 아무것도 없이 조용했다 — 오류도 빈 화면 문구도 없다.\n   *\n   * 목록 화면들은 이 자리가 안 비어 있다. grist 가 첫 렌더에서 스스로 `fetchHandler` 를 부르기\n   * 때문이다. 이 화면은 grist 를 안 쓰니 부르는 사람이 없었다.\n   *\n   * 그래서 켜져 있는데 아직 안 읽었으면 여기서 읽는다. `loaded` 가 그 조건이라 두 번 읽지 않는다.\n   */\n  updated(changes: any) {\n    if (this.active && !this.loaded && !this.failed) {\n      this.fetch()\n    }\n  }\n\n  async fetch() {\n    const response = await client.query({ query: CatalogFetch, fetchPolicy: 'no-cache' })\n\n    /*\n     * 이 client 는 errorPolicy: 'all' 이라 질의가 실패해도 거절되지 않는다. 그대로 읽으면 실패가\n     * 「등록된 업무가 없다」로 그려진다.\n     */\n    const items = response.errors?.length ? undefined : response.data?.responses?.items\n\n    if (!Array.isArray(items)) {\n      this.failed = true\n      this.loadError = response.errors?.length ? response.errors : new Error('no data')\n      this.loaded = true\n      console.error('[activity-catalog]', response.errors || 'no data')\n      return\n    }\n\n    this.failed = false\n    this.loadError = null\n    this.items = [...items].sort(\n      (a, b) =>\n        stageRank(a.readiness?.stage) - stageRank(b.readiness?.stage) || shownName(a).localeCompare(shownName(b))\n    )\n    this.loaded = true\n  }\n}\n"]}

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

@@ -9,7 +9,7 @@ import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { CustomAlert, PageView } from '@operato/shell';
-import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
 import { dueTimer } from '../../due.js';
@@ -21,30 +21,14 @@ const DAY = 24 * HOUR;
 function getActivityInstanceStatus() {
     return [
         { display: '', value: '' },
-        { display: i18next.t('label.activity-state-draft'),
-            value: ActivityInstanceStatus.Draft
-        },
-        { display: i18next.t('label.activity-state-issued'),
-            value: ActivityInstanceStatus.Issued
-        },
-        { display: i18next.t('label.activity-state-unassigned'),
-            value: ActivityInstanceStatus.Unassigned
-        },
-        { display: i18next.t('label.activity-state-assigned'),
-            value: ActivityInstanceStatus.Assigned
-        },
-        { display: i18next.t('label.activity-state-started'),
-            value: ActivityInstanceStatus.Started
-        },
-        { display: i18next.t('label.activity-state-pending'),
-            value: ActivityInstanceStatus.Pending
-        },
-        { display: i18next.t('label.activity-state-ended'),
-            value: ActivityInstanceStatus.Ended
-        },
-        { display: i18next.t('label.activity-state-aborted'),
-            value: ActivityInstanceStatus.Aborted
-        }
+        { display: i18next.t('label.activity-state-draft'), value: ActivityInstanceStatus.Draft },
+        { display: i18next.t('label.activity-state-issued'), value: ActivityInstanceStatus.Issued },
+        { display: i18next.t('label.activity-state-unassigned'), value: ActivityInstanceStatus.Unassigned },
+        { display: i18next.t('label.activity-state-assigned'), value: ActivityInstanceStatus.Assigned },
+        { display: i18next.t('label.activity-state-started'), value: ActivityInstanceStatus.Started },
+        { display: i18next.t('label.activity-state-pending'), value: ActivityInstanceStatus.Pending },
+        { display: i18next.t('label.activity-state-ended'), value: ActivityInstanceStatus.Ended },
+        { display: i18next.t('label.activity-state-aborted'), value: ActivityInstanceStatus.Aborted }
     ];
 }
 const isDueable = (state) => {
@@ -60,50 +44,46 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
         this.issuedByMe = false;
     }
     static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         CommonGristStyles,
         CommonHeaderStyles,
         css `
-      :host {         display: flex;
-
-        width: 100%;
-
+      :host {
         --grid-record-emphasized-background-color: #8b0000;
         --grid-record-emphasized-color: #ff6b6b;
-
         --grid-header-padding: 2px 0 2px 9px;
- }
+      }
 
-      ox-grist {         overflow-y: auto;
-        flex: 1;
- }
-
-      .header {         grid-template-areas: 'filters actions';
- }
+      .header {
+        grid-template-areas: 'filters actions';
+      }
     `
     ]; }
     get context() {
-        return { title: i18next.t('title.activity instance list'),
-            search: { handler: (search) => {
+        return {
+            title: i18next.t('title.activity instance list'),
+            search: {
+                handler: (search) => {
                     this.grist.searchText = search;
                 },
-                value: this.grist?.searchText || '' },
-            filter: { handler: () => {
+                value: this.grist?.searchText || ''
+            },
+            filter: {
+                handler: () => {
                     this.grist.toggleHeadroom();
                 }
             },
             help: 'worklist/activity-instance-list-page',
-            actions: [
-                { title: i18next.t('button.abort'),
-                    action: this.abortActivityInstances.bind(this),
-                    icon: 'cancel'
-                }
-            ] };
+            actions: [{ title: i18next.t('button.abort'), action: this.abortActivityInstances.bind(this), icon: 'cancel' }]
+        };
     }
     render() {
         const mode = this.mode;
         return html `
       <ox-grist
+        class="page-fill"
         .mode=${mode}
         .config=${this.gristConfig}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
@@ -122,7 +102,6 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
 
             <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
-
         </div>
 
         <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
@@ -130,31 +109,30 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
     `;
     }
     async pageInitialized(lifecycle) {
-        this.gristConfig = { list: { thumbnail: 'thumbnail',
-                fields: ['name', 'description'],
-                details: ['updatedAt']
-            },
+        this.gristConfig = {
+            list: { thumbnail: 'thumbnail', fields: ['name', 'description'], details: ['updatedAt'] },
             columns: [
                 { type: 'gutter', gutterName: 'sequence' },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'name',
                     header: i18next.t('field.name'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     filter: 'search',
                     sortable: true,
                     width: 200
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'description',
                     header: i18next.t('field.description'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     filter: 'search',
                     width: 240
                 },
-                { type: 'number',
+                {
+                    type: 'number',
                     name: 'priority',
                     header: i18next.t('field.priority'),
                     record: {
@@ -164,20 +142,21 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
                     },
                     width: 60
                 },
-                { type: 'select',
+                {
+                    type: 'select',
                     name: 'state',
                     label: i18next.t('field.status'),
                     header: i18next.t('field.status'),
-                    record: { editable: false,
-                        options: getActivityInstanceStatus()
-                    },
+                    record: { editable: false, options: getActivityInstanceStatus() },
                     filter: true,
                     width: 80
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'dueIn',
                     header: i18next.t('field.due-in'),
-                    record: { editable: false,
+                    record: {
+                        editable: false,
                         renderer: (value, column, record, rowIndex, field) => {
                             if (isDueable(record.state)) {
                                 return html ` <span>${asyncReplace(dueTimer(record.dueAt, () => this.active))}</span>`;
@@ -187,65 +166,65 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
                     sortable: false,
                     width: 180
                 },
-                { type: 'resource-object',
+                {
+                    type: 'resource-object',
                     name: 'issuer',
                     header: i18next.t('field.issuer'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     sortable: true,
                     width: 120
                 },
-                { type: 'datetime',
+                {
+                    type: 'datetime',
                     name: 'issuedAt',
                     header: i18next.t('field.issued-at'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     sortable: true,
                     width: 180
                 },
-                { type: 'datetime',
+                {
+                    type: 'datetime',
                     name: 'dueAt',
                     header: i18next.t('field.due-at'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     sortable: true,
                     width: 180
                 },
-                { type: 'datetime',
+                {
+                    type: 'datetime',
                     name: 'startedAt',
                     header: i18next.t('field.started-at'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     sortable: true,
                     width: 180
                 },
-                { type: 'datetime',
+                {
+                    type: 'datetime',
                     name: 'terminatedAt',
                     header: i18next.t('field.terminated-at'),
-                    record: { editable: false
-                    },
+                    record: { editable: false },
                     sortable: true,
                     width: 180
                 },
-                { type: 'image',
+                {
+                    type: 'image',
                     name: 'thumbnail',
                     header: i18next.t('field.thumbnail'),
                     record: { editable: false },
                     hidden: true
                 }
             ],
-            rows: { selectable: { multiple: true
-                }
+            rows: {
+                /* Read only here - a new one is made elsewhere, so the blank row at the end offers nothing. */
+                appendable: false,
+                selectable: { multiple: true }
             },
-            sorters: [
-                { name: 'issuedAt',
-                    desc: true
-                }
-            ]
+            sorters: [{ name: 'issuedAt', desc: true }]
         };
     }
     async fetchHandler({ page, limit, sortings = [], filters = [] }) {
-        const response = await client.query({ query: gql `
+        const response = await client.query({
+            query: gql `
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: ${this.issuedByMe ? 'activityInstancesIssuedByMe' : 'activityInstances'}(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
               name
               description
@@ -267,19 +246,15 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
  }
  }
       `,
-            variables: { filters,
-                pagination: { page, limit },
-                sortings
-            }
+            variables: { filters, pagination: { page, limit }, sortings }
         });
-        return { total: response.data.responses.total || 0,
-            records: response.data.responses.items || []
-        };
+        return { total: response.data.responses.total || 0, records: response.data.responses.items || [] };
     }
     async abortActivityInstances() {
         const ids = this.grist.selected.map(record => record.id);
         if (ids && ids.length > 0) {
-            const answer = await CustomAlert({ type: 'warning',
+            const answer = await CustomAlert({
+                type: 'warning',
                 title: i18next.t('button.abort'),
                 text: i18next.t('text.are_you_sure'),
                 confirmButton: { text: i18next.t('button.abort') },
@@ -287,12 +262,13 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
             });
             if (!answer?.value)
                 return;
-            const response = await client.query({ query: gql `
-          mutation ($ids: [String!]!) {             abortActivityInstances(ids: $ids)
- }
+            const response = await client.query({
+                query: gql `
+          mutation ($ids: [String!]!) {
+            abortActivityInstances(ids: $ids)
+          }
         `,
-                variables: { ids
-                }
+                variables: { ids }
             });
             if (!response.errors) {
                 this.grist.fetch();
@@ -300,9 +276,7 @@ let ActivityInstanceListPage = class ActivityInstanceListPage extends p13n(local
             }
         }
         else {
-            CustomAlert({ title: i18next.t('text.nothing_selected'),
-                text: i18next.t('text.there_is_nothing_to_process')
-            });
+            CustomAlert({ title: i18next.t('text.nothing_selected'), text: i18next.t('text.there_is_nothing_to_process') });
         }
     }
     showToast(message) {

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

@@ -1 +1 @@
-{"version":3,"file":"activity-instance-list-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-list-page.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,2CAA2C,CAAA;AAElD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAe,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAS,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,MAAM,GAAG,GAAG,EAAE,CAAA;AACd,MAAM,IAAI,GAAG,EAAE,GAAG,GAAG,CAAA;AACrB,MAAM,GAAG,GAAG,EAAE,GAAG,IAAI,CAAA;AAErB,SAAS,yBAAyB;IAAO,OAAO;QAC5C,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QAC1B,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;YACtD,KAAK,EAAE,sBAAsB,CAAC,KAAK;SACvC;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;YACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM;SACxC;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC;YAC3D,KAAK,EAAE,sBAAsB,CAAC,UAAU;SAC5C;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;YACzD,KAAK,EAAE,sBAAsB,CAAC,QAAQ;SAC1C;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;YACxD,KAAK,EAAE,sBAAsB,CAAC,OAAO;SACzC;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;YACxD,KAAK,EAAE,sBAAsB,CAAC,OAAO;SACzC;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;YACtD,KAAK,EAAE,sBAAsB,CAAC,KAAK;SACvC;QACE,EAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;YACxD,KAAK,EAAE,sBAAsB,CAAC,OAAO;SACzC;KACC,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,KAA6B,EAAE,EAAE;IAAK,OAAO,CAC5D,KAAK,KAAK,sBAAsB,CAAC,MAAM;QACvC,KAAK,KAAK,sBAAsB,CAAC,QAAQ;QACzC,KAAK,KAAK,sBAAsB,CAAC,OAAO;QACxC,KAAK,KAAK,sBAAsB,CAAC,OAAO,CACzC,CAAA;AACH,CAAC,CAAA;AAGM,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAAxE;;QAyBuB,SAAI,GAA6B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAE9E,eAAU,GAAa,KAAK,CAAA;IAkO/C,CAAC;aA7P0F,WAAM,GAAG;QAChG,eAAe;QACf,iBAAiB;QACjB,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AAtB8F,CAsB9F;IASD,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;YAC/E,MAAM,EAAE,EAAU,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAAa,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAC9F,CAAC;gBACM,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE,EACzC;YACI,MAAM,EAAE,EAAU,OAAO,EAAE,GAAG,EAAE;oBAAa,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAA;gBAC7E,CAAC;aACA;YACI,IAAI,EAAE,sCAAsC;YAC5C,OAAO,EAAE;gBACP,EAAY,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBAC1C,MAAM,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC9C,IAAI,EAAE,QAAQ;iBACtB;aACK,EACL,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEnC,OAAO,IAAI,CAAA;;gBAEC,IAAI;kBACF,IAAI,CAAC,WAAW;kCACA,IAAI,CAAC,yBAAyB,CAAC,UAAU,CAAE;wBACrD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;yBAK3B,IAAI,CAAC,UAAU;wBAChB,CAAC,CAAc,EAAE,EAAE;YAAmB,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,aAAqB,EAAE,OAAO,CAAA;YACjG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACjC,CAAC;;cAEY,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;;;;;;;;KASxC,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,eAAe,CAAC,SAAS;QAAQ,IAAI,CAAC,WAAW,GAAG,EAAQ,IAAI,EAAE,EAAU,SAAS,EAAE,WAAW;gBAClG,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;gBAC/B,OAAO,EAAE,CAAC,WAAW,CAAC;aAC5B;YACI,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAC9D,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,KAAK,EAAE,QAAQ;wBACf,QAAQ,EAAE,YAAY,EAAE;qBACzB;oBACD,KAAK,EAAE,EAAE;iBACjB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBAChC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;wBACnC,OAAO,EAAE,yBAAyB,EAAE;qBAC9C;oBACQ,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,EAAE;iBACjB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;wBACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;4BAAiB,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;gCAAiB,OAAO,IAAI,CAAA,UAAU,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,SAAS,CAAA;4BACrN,CAAC;wBACD,CAAC;qBACA;oBACQ,QAAQ,EAAE,KAAK;oBACf,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,iBAAiB;oBACjC,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACpC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;oBACxC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,OAAO;oBACvB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACpC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,MAAM,EAAE,IAAI;iBACpB;aACK;YACD,IAAI,EAAE,EAAU,UAAU,EAAE,EAAY,QAAQ,EAAE,IAAI;iBAC1D;aACA;YACI,OAAO,EAAE;gBACP,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,IAAI;iBAClB;aACK;SACL,CAAA;IACD,CAAC;IAEA,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QAAQ,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;6GAC/B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;OAoB3K;YACD,SAAS,EAAE,EAAU,OAAO;gBAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;gBAC3B,QAAQ;aACd;SACA,CAAC,CAAA;QAEC,OAAO,EAAQ,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;YACtD,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE;SAChD,CAAA;IACD,CAAC;IAEA,KAAK,CAAC,sBAAsB;QAAS,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC3F,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAAO,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,EAAU,IAAI,EAAE,SAAS;gBACzF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;gBAChC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;gBACpC,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;gBAClD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;aACxD,CAAC,CAAA;YAEG,IAAI,CAAC,MAAM,EAAE,KAAK;gBAAE,OAAM;YAE1B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAU,KAAK,EAAE,GAAG,CAAA;;;SAGrD;gBACD,SAAS,EAAE,EAAY,GAAG;iBAChC;aACA,CAAC,CAAA;YAEG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBAAS,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;gBAChD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,6CAA6C,CAAC,CAAC,CAAA;YAC/E,CAAC;QACD,CAAC;aAAM,CAAC;YAAO,WAAW,CAAC,EAAU,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;gBACvE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;aACzD,CAAC,CAAA;QACF,CAAC;IACD,CAAC;IAEA,SAAS,CAAC,OAAO;QAAQ,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IACpG,CAAC;;AApO4B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAoE;AAE9E;IAAhB,KAAK,EAAE;;4DAAqC;AAE1B;IAAlB,KAAK,CAAC,UAAU,CAAC;8BAAS,SAAS;uDAAA;AA7BzB,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA6PpC","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-select-buttons.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { FetchOption, DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { CustomAlert, PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice, sleep } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport { dueTimer } from '../../due.js'\n\nimport { ActivityInstanceStatus } from '../../types/activity-instance.js'\n\nimport { priorityCell } from '../../activity-cells.js'\n\nconst MIN = 60\nconst HOUR = 60 * MIN\nconst DAY = 24 * HOUR\n\nfunction getActivityInstanceStatus() {   return [\n    { display: '', value: '' },\n    {       display: i18next.t('label.activity-state-draft'),\n      value: ActivityInstanceStatus.Draft\n },\n    {       display: i18next.t('label.activity-state-issued'),\n      value: ActivityInstanceStatus.Issued\n },\n    {       display: i18next.t('label.activity-state-unassigned'),\n      value: ActivityInstanceStatus.Unassigned\n },\n    {       display: i18next.t('label.activity-state-assigned'),\n      value: ActivityInstanceStatus.Assigned\n },\n    {       display: i18next.t('label.activity-state-started'),\n      value: ActivityInstanceStatus.Started\n },\n    {       display: i18next.t('label.activity-state-pending'),\n      value: ActivityInstanceStatus.Pending\n },\n    {       display: i18next.t('label.activity-state-ended'),\n      value: ActivityInstanceStatus.Ended\n },\n    {       display: i18next.t('label.activity-state-aborted'),\n      value: ActivityInstanceStatus.Aborted\n }\n  ]\n}\n\nconst isDueable = (state: ActivityInstanceStatus) => {   return (\n    state === ActivityInstanceStatus.Issued ||\n    state === ActivityInstanceStatus.Assigned ||\n    state === ActivityInstanceStatus.Started ||\n    state === ActivityInstanceStatus.Pending\n  )\n}\n\n@customElement('activity-instance-list-page')\nexport class ActivityInstanceListPage 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        --grid-header-padding: 2px 0 2px 9px;\n }\n\n      ox-grist {         overflow-y: auto;\n        flex: 1;\n }\n\n      .header {         grid-template-areas: 'filters actions';\n }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  @state() private issuedByMe?: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  get context() {     return {       title: i18next.t('title.activity instance 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/activity-instance-list-page',\n      actions: [\n        {           title: i18next.t('button.abort'),\n          action: this.abortActivityInstances.bind(this),\n          icon: 'cancel'\n }\n      ]\n }\n }\n\n  render() {     const mode = this.mode\n\n    return html`\n      <ox-grist\n        .mode=${mode}\n        .config=${this.gristConfig}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-checkbox\n              .checked=${this.issuedByMe}\n              @change=${(e: CustomEvent) => {                 this.issuedByMe = (e.currentTarget as any)?.checked\n                this.grist.fetch()\n }}\n            ></ox-checkbox>\n            ${i18next.t('label.issued-by-me')}\n\n            <ox-filters-form autofocus without-search></ox-filters-form>\n          </div>\n\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: ['updatedAt']\n },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {           type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: {             editable: false\n },\n          filter: 'search',\n          sortable: true,\n          width: 200\n },\n        {           type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: {             editable: false\n },\n          filter: 'search',\n          width: 240\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: 'state',\n          label: i18next.t('field.status'),\n          header: i18next.t('field.status'),\n          record: {             editable: false,\n            options: getActivityInstanceStatus()\n },\n          filter: true,\n          width: 80\n },\n        {           type: 'string',\n          name: 'dueIn',\n          header: i18next.t('field.due-in'),\n          record: {             editable: false,\n            renderer: (value, column, record, rowIndex, field) => {               if (isDueable(record.state)) {                 return html` <span>${asyncReplace(dueTimer(record.dueAt, () => this.active))}</span>`\n }\n }\n },\n          sortable: false,\n          width: 180\n },\n        {           type: 'resource-object',\n          name: 'issuer',\n          header: i18next.t('field.issuer'),\n          record: {             editable: false\n },\n          sortable: true,\n          width: 120\n },\n        {           type: 'datetime',\n          name: 'issuedAt',\n          header: i18next.t('field.issued-at'),\n          record: {             editable: false\n },\n          sortable: true,\n          width: 180\n },\n        {           type: 'datetime',\n          name: 'dueAt',\n          header: i18next.t('field.due-at'),\n          record: {             editable: false\n },\n          sortable: true,\n          width: 180\n },\n        {           type: 'datetime',\n          name: 'startedAt',\n          header: i18next.t('field.started-at'),\n          record: {             editable: false\n },\n          sortable: true,\n          width: 180\n },\n        {           type: 'datetime',\n          name: 'terminatedAt',\n          header: i18next.t('field.terminated-at'),\n          record: {             editable: false\n },\n          sortable: true,\n          width: 180\n },\n        {           type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: { editable: false },\n          hidden: true\n }\n      ],\n      rows: {         selectable: {           multiple: true\n }\n },\n      sorters: [\n        {           name: 'issuedAt',\n          desc: true\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: ${this.issuedByMe ? 'activityInstancesIssuedByMe' : 'activityInstances'}(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id\n              name\n              description\n              priority\n              state\n              thumbnail\n              issuer {                 id\n                name\n }\n              updater {                 id\n                name\n }\n              issuedAt\n              dueAt\n              startedAt\n              terminatedAt\n }\n            total\n }\n }\n      `,\n      variables: {         filters,\n        pagination: { page, limit },\n        sortings\n }\n })\n\n    return {       total: response.data.responses.total || 0,\n      records: response.data.responses.items || []\n }\n }\n\n  async abortActivityInstances() {     const ids = this.grist.selected.map(record => record.id)\n    if (ids && ids.length > 0) {       const answer = await CustomAlert({         type: 'warning',\n        title: i18next.t('button.abort'),\n        text: i18next.t('text.are_you_sure'),\n        confirmButton: { text: i18next.t('button.abort') },\n        cancelButton: { text: i18next.t('button.cancel') }\n })\n\n      if (!answer?.value) return\n\n      const response = await client.query({         query: gql`\n          mutation ($ids: [String!]!) {             abortActivityInstances(ids: $ids)\n }\n        `,\n        variables: {           ids\n }\n })\n\n      if (!response.errors) {         this.grist.fetch()\n        this.showToast(i18next.t('text.activity_instance_aborted_successfully'))\n }\n } else {       CustomAlert({         title: i18next.t('text.nothing_selected'),\n        text: i18next.t('text.there_is_nothing_to_process')\n })\n }\n }\n\n  showToast(message) {     document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
+{"version":3,"file":"activity-instance-list-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-select-buttons.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { FetchOption, DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { CustomAlert, PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice, sleep } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport { dueTimer } from '../../due.js'\n\nimport { ActivityInstanceStatus } from '../../types/activity-instance.js'\n\nimport { priorityCell } from '../../activity-cells.js'\n\nconst MIN = 60\nconst HOUR = 60 * MIN\nconst DAY = 24 * HOUR\n\nfunction getActivityInstanceStatus() {\n  return [\n    { display: '', value: '' },\n    { display: i18next.t('label.activity-state-draft'), value: ActivityInstanceStatus.Draft },\n    { display: i18next.t('label.activity-state-issued'), value: ActivityInstanceStatus.Issued },\n    { display: i18next.t('label.activity-state-unassigned'), value: ActivityInstanceStatus.Unassigned },\n    { display: i18next.t('label.activity-state-assigned'), value: ActivityInstanceStatus.Assigned },\n    { display: i18next.t('label.activity-state-started'), value: ActivityInstanceStatus.Started },\n    { display: i18next.t('label.activity-state-pending'), value: ActivityInstanceStatus.Pending },\n    { display: i18next.t('label.activity-state-ended'), value: ActivityInstanceStatus.Ended },\n    { display: i18next.t('label.activity-state-aborted'), value: ActivityInstanceStatus.Aborted }\n  ]\n}\n\nconst isDueable = (state: ActivityInstanceStatus) => {\n  return (\n    state === ActivityInstanceStatus.Issued ||\n    state === ActivityInstanceStatus.Assigned ||\n    state === ActivityInstanceStatus.Started ||\n    state === ActivityInstanceStatus.Pending\n  )\n}\n\n@customElement('activity-instance-list-page')\nexport class ActivityInstanceListPage extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    /* The work surface frame for a list screen (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        --grid-record-emphasized-background-color: #8b0000;\n        --grid-record-emphasized-color: #ff6b6b;\n        --grid-header-padding: 2px 0 2px 9px;\n      }\n\n      .header {\n        grid-template-areas: 'filters actions';\n      }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  @state() private issuedByMe?: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('title.activity instance list'),\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      },\n      help: 'worklist/activity-instance-list-page',\n      actions: [{ title: i18next.t('button.abort'), action: this.abortActivityInstances.bind(this), icon: 'cancel' }]\n    }\n  }\n\n  render() {\n    const mode = this.mode\n\n    return html`\n      <ox-grist\n        class=\"page-fill\"\n        .mode=${mode}\n        .config=${this.gristConfig}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-checkbox\n              .checked=${this.issuedByMe}\n              @change=${(e: CustomEvent) => {\n                this.issuedByMe = (e.currentTarget as any)?.checked\n                this.grist.fetch()\n              }}\n            ></ox-checkbox>\n            ${i18next.t('label.issued-by-me')}\n\n            <ox-filters-form autofocus without-search></ox-filters-form>\n          </div>\n        </div>\n\n        <ox-grist-personalizer slot=\"setting\"></ox-grist-personalizer>\n      </ox-grist>\n    `\n  }\n\n  async pageInitialized(lifecycle) {\n    this.gristConfig = {\n      list: { thumbnail: 'thumbnail', fields: ['name', 'description'], details: ['updatedAt'] },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          filter: 'search',\n          sortable: true,\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          filter: 'search',\n          width: 240\n        },\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        {\n          type: 'select',\n          name: 'state',\n          label: i18next.t('field.status'),\n          header: i18next.t('field.status'),\n          record: { editable: false, options: getActivityInstanceStatus() },\n          filter: true,\n          width: 80\n        },\n        {\n          type: 'string',\n          name: 'dueIn',\n          header: i18next.t('field.due-in'),\n          record: {\n            editable: false,\n            renderer: (value, column, record, rowIndex, field) => {\n              if (isDueable(record.state)) {\n                return html` <span>${asyncReplace(dueTimer(record.dueAt, () => this.active))}</span>`\n              }\n            }\n          },\n          sortable: false,\n          width: 180\n        },\n        {\n          type: 'resource-object',\n          name: 'issuer',\n          header: i18next.t('field.issuer'),\n          record: { editable: false },\n          sortable: true,\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'issuedAt',\n          header: i18next.t('field.issued-at'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'dueAt',\n          header: i18next.t('field.due-at'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'startedAt',\n          header: i18next.t('field.started-at'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'terminatedAt',\n          header: i18next.t('field.terminated-at'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: { editable: false },\n          hidden: true\n        }\n      ],\n      rows: {\n        /* Read only here - a new one is made elsewhere, so the blank row at the end offers nothing. */\n\n        appendable: false,\n        selectable: { multiple: true }\n      },\n      sorters: [{ name: 'issuedAt', desc: true }]\n    }\n  }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: ${this.issuedByMe ? 'activityInstancesIssuedByMe' : 'activityInstances'}(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id\n              name\n              description\n              priority\n              state\n              thumbnail\n              issuer {                 id\n                name\n }\n              updater {                 id\n                name\n }\n              issuedAt\n              dueAt\n              startedAt\n              terminatedAt\n }\n            total\n }\n }\n      `,\n      variables: { filters, pagination: { page, limit }, sortings }\n    })\n\n    return { total: response.data.responses.total || 0, records: response.data.responses.items || [] }\n  }\n\n  async abortActivityInstances() {\n    const ids = this.grist.selected.map(record => record.id)\n    if (ids && ids.length > 0) {\n      const answer = await CustomAlert({\n        type: 'warning',\n        title: i18next.t('button.abort'),\n        text: i18next.t('text.are_you_sure'),\n        confirmButton: { text: i18next.t('button.abort') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n\n      if (!answer?.value) return\n\n      const response = await client.query({\n        query: gql`\n          mutation ($ids: [String!]!) {\n            abortActivityInstances(ids: $ids)\n          }\n        `,\n        variables: { ids }\n      })\n\n      if (!response.errors) {\n        this.grist.fetch()\n        this.showToast(i18next.t('text.activity_instance_aborted_successfully'))\n      }\n    } else {\n      CustomAlert({ title: i18next.t('text.nothing_selected'), text: i18next.t('text.there_is_nothing_to_process') })\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/pages/activity-instance/activity-instance-search-page.js

@@ -9,7 +9,7 @@ import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { openPopup } from '@operato/layout';
 import { PageView } from '@operato/shell';
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { declaredLabel } from '../../components/activity-fields.js';
 let ActivityInstanceSearchPage = class ActivityInstanceSearchPage extends localize(i18next)(PageView) {
@@ -19,14 +19,11 @@ let ActivityInstanceSearchPage = class ActivityInstanceSearchPage extends locali
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
     }
     static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         CommonHeaderStyles,
         css `
-      :host {         display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
- }
 
       ox-grist {         overflow-y: auto;
         flex: 1;