@things-factory/worklist 10.1.269 → 10.1.270
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-client/components/activity-instance-ribon.js +3 -2
- package/dist-client/components/activity-instance-ribon.js.map +1 -1
- package/dist-client/components/activity-thread-ribon.js +3 -2
- package/dist-client/components/activity-thread-ribon.js.map +1 -1
- package/dist-client/components/activity-thread-timeline.d.ts +2 -2
- package/dist-client/components/activity-thread-timeline.js +3 -1
- package/dist-client/components/activity-thread-timeline.js.map +1 -1
- package/dist-client/components/decision-content.js +1 -1
- package/dist-client/components/decision-content.js.map +1 -1
- package/dist-client/components/ribon-description.d.ts +13 -0
- package/dist-client/components/ribon-description.js +14 -0
- package/dist-client/components/ribon-description.js.map +1 -0
- package/dist-client/components/source-link.d.ts +1 -1
- package/dist-client/pages/activity-instance/activity-instance-view.d.ts +2 -2
- package/dist-client/pages/activity-thread/activity-thread-page.d.ts +1 -1
- package/dist-client/pages/activity-thread/activity-thread-view-page.js +3 -0
- package/dist-client/pages/activity-thread/activity-thread-view-page.js.map +1 -1
- package/dist-client/pages/activity-thread/activity-thread-view.d.ts +1 -1
- package/dist-client/route.d.ts +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/controllers/activity-installation/activity-installation-controller.js +5 -0
- package/dist-server/controllers/activity-installation/activity-installation-controller.js.map +1 -1
- package/dist-server/controllers/activity-instance/complete.d.ts +6 -1
- package/dist-server/controllers/activity-instance/complete.js +6 -1
- package/dist-server/controllers/activity-instance/complete.js.map +1 -1
- package/dist-server/index.d.ts +1 -0
- package/dist-server/index.js +5 -1
- package/dist-server/index.js.map +1 -1
- package/dist-server/service/activity/finished-case.d.ts +28 -0
- package/dist-server/service/activity/finished-case.js +38 -0
- package/dist-server/service/activity/finished-case.js.map +1 -0
- package/dist-server/service/activity-approval/index.d.ts +1 -1
- package/dist-server/service/index.d.ts +3 -3
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -12
- package/translations/en.json +2 -1
- package/translations/es.json +2 -1
- package/translations/ja.json +2 -1
- package/translations/ko.json +6 -5
- package/translations/ms.json +2 -1
- package/translations/zh.json +2 -1
|
@@ -8,6 +8,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
8
8
|
import { i18next, localize } from '@operato/i18n';
|
|
9
9
|
import { entity360Name, openPopup } from '@operato/layout';
|
|
10
10
|
import { StateRibonStyles } from './state-ribon.js';
|
|
11
|
+
import { ribonDescription } from './ribon-description.js';
|
|
11
12
|
let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next)(LitElement) {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
@@ -15,7 +16,7 @@ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next
|
|
|
15
16
|
}
|
|
16
17
|
static { this.styles = [StateRibonStyles]; }
|
|
17
18
|
render() {
|
|
18
|
-
const {
|
|
19
|
+
const { state, assignee, approvalLine, activity } = this.activityInstance || {};
|
|
19
20
|
const { startingType } = activity || {};
|
|
20
21
|
return html `
|
|
21
22
|
<span class="state">
|
|
@@ -38,7 +39,7 @@ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next
|
|
|
38
39
|
>info</md-icon
|
|
39
40
|
>
|
|
40
41
|
|
|
41
|
-
<span class="desc" title=${
|
|
42
|
+
<span class="desc" title=${ribonDescription(this.activityInstance)}>${ribonDescription(this.activityInstance)}</span>
|
|
42
43
|
|
|
43
44
|
|
|
44
45
|
${startingType == 'issue' && assignee
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAGlD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAGuB,qBAAgB,GAAQ,EAAE,CAAA;IA0ExD,CAAC;aA5EQ,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;iBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;mBACxB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;;;;iCAIwB,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC;;;QAG3G,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA,6CAA6C,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,aAAa,CAAC,QAAQ,CAAC,SAAS;YACxH,CAAC,CAAC,EAAE;;;;;;QAMJ,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,EAAE;KAC/F,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,yDAAyD,IAAI,CAAC,gBAAgB,UAAU,KAAK,wCAAwC,EACzI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAC1C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AAzE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAH3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6EjC","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { entity360Name, openPopup } from '@operato/layout'\n\nimport { StateRibonStyles } from './state-ribon.js'\nimport { ribonDescription } from './ribon-description.js'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n static styles = [StateRibonStyles]\n\n @property({ type: Object }) activityInstance: any = {}\n\n render() {\n const { state, assignee, approvalLine, activity } = this.activityInstance || {}\n const { startingType } = activity || {}\n\n return html`\n <span class=\"state\">\n <i class=\"dot\"></i>\n ${i18next.t('label.activity-state-' + state)}\n </span>\n\n <md-icon\n class=\"info\"\n role=\"button\"\n tabindex=\"0\"\n title=${String(i18next.t('label.thread-info'))}\n @click=${() => this.openInfo(state)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n this.openInfo(state)\n }\n }}\n >info</md-icon\n >\n\n <span class=\"desc\" title=${ribonDescription(this.activityInstance)}>${ribonDescription(this.activityInstance)}</span>\n\n\n ${startingType == 'issue' && assignee\n ? html`<span class=\"who\"><span class=\"who-label\">${i18next.t('field.assignee')}</span>${entity360Name(assignee)}</span>`\n : ''}\n <!--\n 결재선의 현재 단계를 넘기지 않는다 — 이 ribbon 이 쓰이는 곳은 업무를 시작하는 화면\n 하나뿐이고(activity-instance-start-page), 거기서는 아직 아무도 판단하지 않았다.\n approval-line-brief 는 값이 없으면 기안자를 현재로 표시하는데, 이 화면에서는 그것이 맞다.\n -->\n ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : ''}\n `\n }\n\n /**\n * 이 건의 기본 정보 — **팝업으로 연다.**\n *\n * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────\n * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.\n *\n * 자리를 다툰다 화면 오른쪽 세로 패널은 operato-twin 의 twin-entity360 이 쓰는 자리다\n * (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.\n * 전역 슬롯이다 VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가\n * 그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),\n * 이 패널을 열면 그중 열려 있던 것이 닫힌다.\n *\n * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이\n * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 패널은 **이 화면의 이 건**에\n * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.\n *\n * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.\n */\n private openInfo(state: string) {\n openPopup(\n html`<activity-instance-context-template .activityInstance=${this.activityInstance} state=${state}></activity-instance-context-template>`,\n { title: i18next.t('label.thread-info') }\n )\n }\n\n updated(changes) {\n if (changes.has('activityInstance') && this.activityInstance) {\n const { state } = this.activityInstance\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
|
|
@@ -9,6 +9,7 @@ import { i18next, localize } from '@operato/i18n';
|
|
|
9
9
|
import { entity360Name, openPopup } from '@operato/layout';
|
|
10
10
|
import { currentApprovalOrder } from '../approval-progress.js';
|
|
11
11
|
import { StateRibonStyles } from './state-ribon.js';
|
|
12
|
+
import { ribonDescription } from './ribon-description.js';
|
|
12
13
|
/**
|
|
13
14
|
* 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**
|
|
14
15
|
*
|
|
@@ -19,7 +20,7 @@ let ActivityThreadRibon = class ActivityThreadRibon extends localize(i18next)(Li
|
|
|
19
20
|
static { this.styles = [StateRibonStyles]; }
|
|
20
21
|
render() {
|
|
21
22
|
const { state, assignee, activityInstance, activityApprovals } = this.activityThread;
|
|
22
|
-
const {
|
|
23
|
+
const { approvalLine } = activityInstance || {};
|
|
23
24
|
return html `
|
|
24
25
|
<span class="state">
|
|
25
26
|
<i class="dot"></i>
|
|
@@ -41,7 +42,7 @@ let ActivityThreadRibon = class ActivityThreadRibon extends localize(i18next)(Li
|
|
|
41
42
|
>info</md-icon
|
|
42
43
|
>
|
|
43
44
|
|
|
44
|
-
<span class="desc" title=${
|
|
45
|
+
<span class="desc" title=${ribonDescription(activityInstance)}>${ribonDescription(activityInstance)}</span>
|
|
45
46
|
|
|
46
47
|
|
|
47
48
|
${approvalLine
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACpF,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE/C,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;iBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;mBACxB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;;;;iCAIwB,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,CAAC,gBAAgB,CAAC;;;QAGjG,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,oBAAoB,CAAC,iBAAiB,CAAC;kCAC5B;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;yCACyB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,aAAa,CAAC,QAAQ,CAAC;cACvF;gBACJ,CAAC,CAAC,EAAE;KACT,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,qDAAqD,IAAI,CAAC,cAAc,UAAU,KAAK,sCAAsC,EACjI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAC1C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AA1E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AAHpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA8E/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { entity360Name, openPopup } from '@operato/layout'\n\nimport { currentApprovalOrder } from '../approval-progress.js'\nimport { StateRibonStyles } from './state-ribon.js'\nimport { ribonDescription } from './ribon-description.js'\n\n/**\n * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**\n *\n * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).\n * 여기서는 이 화면이 무엇을 보일지만 고른다.\n */\n@customElement('activity-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n static styles = [StateRibonStyles]\n\n @property({ type: Object }) activityThread: any\n\n render() {\n const { state, assignee, activityInstance, activityApprovals } = this.activityThread\n const { approvalLine } = activityInstance || {}\n\n return html`\n <span class=\"state\">\n <i class=\"dot\"></i>\n ${i18next.t('label.activity-state-' + state)}\n </span>\n\n <md-icon\n class=\"info\"\n role=\"button\"\n tabindex=\"0\"\n title=${String(i18next.t('label.thread-info'))}\n @click=${() => this.openInfo(state)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n this.openInfo(state)\n }\n }}\n >info</md-icon\n >\n\n <span class=\"desc\" title=${ribonDescription(activityInstance)}>${ribonDescription(activityInstance)}</span>\n\n\n ${approvalLine\n ? html`<approval-line-brief\n .model=${approvalLine}\n .current=${currentApprovalOrder(activityApprovals)}\n ></approval-line-brief>`\n : assignee\n ? html`<span class=\"who\"\n ><span class=\"who-label\">${i18next.t('field.assignee')}</span>${entity360Name(assignee)}</span\n >`\n : ''}\n `\n }\n\n /**\n * 이 건의 기본 정보 — **팝업으로 연다.**\n *\n * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────\n * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.\n *\n * 자리를 다툰다 화면 오른쪽 세로 패널은 operato-twin 의 twin-entity360 이 쓰는 자리다\n * (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.\n * 전역 슬롯이다 VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가\n * 그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),\n * 이 패널을 열면 그중 열려 있던 것이 닫힌다.\n *\n * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이\n * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 패널은 **이 화면의 이 건**에\n * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.\n *\n * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.\n */\n private openInfo(state: string) {\n openPopup(\n html`<activity-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`,\n { title: i18next.t('label.thread-info') }\n )\n }\n\n updated(changes) {\n if (changes.has('activityThread') && this.activityThread) {\n const { state } = this.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
|
|
@@ -17,12 +17,12 @@ export declare class ActivityThreadTimeline extends LitElement {
|
|
|
17
17
|
* 보일 항목 없음 화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다
|
|
18
18
|
*/
|
|
19
19
|
open?: boolean;
|
|
20
|
-
render(): import("lit-html").TemplateResult<1
|
|
20
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
21
21
|
/** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */
|
|
22
22
|
lastLine(item: any): string;
|
|
23
23
|
renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory): import("lit-html").TemplateResult<1>;
|
|
24
24
|
renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
|
|
25
25
|
/** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */
|
|
26
|
-
renderSaid(said?: string): import("lit-html").TemplateResult<1
|
|
26
|
+
renderSaid(said?: string): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
27
27
|
renderOutput(output: any): string;
|
|
28
28
|
}
|
|
@@ -6,6 +6,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
6
6
|
import { i18next } from '@operato/i18n';
|
|
7
7
|
import { whenText } from '../when.js';
|
|
8
8
|
import { timelineEntries, whenOf } from './timeline-entries.js';
|
|
9
|
+
import { fieldLabel } from './activity-fields.js';
|
|
9
10
|
import { ActivityThread } from '../types/activity-thread.js';
|
|
10
11
|
import { entity360Name } from '@operato/layout';
|
|
11
12
|
let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
|
|
@@ -308,7 +309,8 @@ let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
|
|
|
308
309
|
else if (typeof value === 'string' && value.length > 50) {
|
|
309
310
|
value = value.substring(0, 47) + '...';
|
|
310
311
|
}
|
|
311
|
-
|
|
312
|
+
/* The field's name as the finished screen draws it (fieldLabel) - 「outcome:」 showed as the raw key (2026-11-11). */
|
|
313
|
+
let result = `${fieldLabel({ name: firstKey })}: ${value}`;
|
|
312
314
|
// 추가 속성이 있는 경우 표시
|
|
313
315
|
if (keys.length > 1) {
|
|
314
316
|
result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\nimport { timelineEntries, whenOf } from './timeline-entries.js'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\n\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n static styles = [\n css`\n /*\n * 업무 하나가 지나온 자취 — **언제 · 무슨 일이 · 누구에 의해.**\n *\n * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────\n * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라\n * 누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.\n * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운\n * 화면에서 밝은 회색이 그대로 나온다.\n * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.\n *\n * ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────\n * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·\n * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.\n */\n /*\n * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」\n * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.\n */\n :host {\n display: block;\n padding: 14px;\n background: var(--ui-panel, #ffffff);\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r, 10px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n /* 그릴 것이 없으면 빈 카드를 남기지 않는다. */\n :host(:not(:has(ol))) {\n display: none;\n }\n\n /*\n * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────\n * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이\n * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.\n *\n * 접어 두되 **마지막에 무슨 일이 있었는지 한 줄은 남긴다.** 「이력 4건」만 있으면 펴 볼지\n * 말지를 정할 수가 없다.\n *\n * 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도\n * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그\n * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).\n */\n h2 {\n margin: 0;\n font-size: var(--ui-t-title, 15px);\n font-weight: 600;\n color: var(--ui-ink, #17242c);\n }\n\n summary {\n display: flex;\n align-items: baseline;\n gap: var(--spacing-medium, 8px);\n cursor: pointer;\n list-style: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n /* 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. */\n .chevron {\n flex: none;\n font-size: 18px;\n color: var(--ui-muted, #57676f);\n transition: transform 0.12s ease;\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n /* 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. */\n .last {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n details[open] .last {\n display: none;\n }\n\n .count {\n flex: none;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n font-variant-numeric: tabular-nums;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium, 8px) 0 0;\n padding: 0;\n }\n\n li {\n display: grid;\n grid-template-columns: max-content 16px 1fr;\n align-items: start;\n column-gap: var(--spacing-small, 4px);\n }\n\n /* 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. */\n [date] {\n padding-top: 1px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-small, 11.5px);\n font-variant-numeric: tabular-nums;\n color: var(--ui-faint, #8a959c);\n white-space: nowrap;\n }\n\n /*\n * 점과 그 아래로 이어지는 세로선.\n *\n * 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라\n * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음\n * 줄을 지나 카드 아래까지 흘러내렸다.\n */\n [status] {\n position: relative;\n align-self: stretch;\n width: 9px;\n margin-left: 3px;\n }\n\n [status]::after {\n content: '';\n position: absolute;\n top: 4px;\n left: 0;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background-color: var(--ui-accent, #00727e);\n }\n\n [status]::before {\n content: '';\n position: absolute;\n top: 15px;\n bottom: 0;\n left: 3px;\n width: 2px;\n background-color: var(--ui-line, #d5dce0);\n }\n\n li:last-child [status]::before {\n display: none;\n }\n\n [info] {\n min-width: 0;\n padding-bottom: var(--spacing-large, 16px);\n }\n\n li:last-child [info] {\n padding-bottom: 0;\n }\n\n /* 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. */\n [what] {\n font-weight: 600;\n }\n\n /* 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). */\n [who] {\n margin-left: var(--spacing-small, 4px);\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n /* 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. */\n p {\n /* 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. */\n display: block;\n width: fit-content;\n max-width: 100%;\n margin: 5px 0 0;\n padding: 7px 10px;\n background: var(--ui-panel-2, #eef1f3);\n border-radius: var(--ui-r-small, 6px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-small, 11.5px);\n line-height: 1.5;\n word-break: keep-all;\n }\n\n @media only screen and (max-width: 460px) {\n li {\n grid-template-columns: 16px 1fr;\n }\n\n /* 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. */\n [date] {\n grid-column: 2;\n grid-row: 2;\n padding: 0 0 var(--spacing-medium, 8px);\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n /**\n * 펴 둘 것인가 — **담는 화면이 정한다.**\n *\n * 기본은 접는다. 펴는 곳은 둘이다.\n * 완료 조회 지난 일을 보러 온 화면이라 이력이 곧 본문이다\n * 보일 항목 없음 화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다\n */\n @property({ type: Boolean }) open?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}\n\n /*\n * **정렬 키와 표시 키가 같아야 한다.**\n *\n * 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서\n * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.\n * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.\n */\n /* 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). */\n const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm })\n\n if (!timeline.length) {\n return nothing\n }\n\n return html`\n <details ?open=${this.open}>\n <summary>\n <md-icon class=\"chevron\">chevron_right</md-icon>\n <h2>${this.subtitle || i18next.t('label.timeline')}</h2>\n <span class=\"count\">${i18next.t('text.timeline-count', { count: timeline.length })}</span>\n <span class=\"last\">${this.lastLine(timeline[timeline.length - 1])}</span>\n </summary>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n </details>\n `\n }\n\n /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */\n lastLine(item: any): string {\n const what =\n 'reason' in item\n ? i18next.t('label.activity-transaction-' + item.transaction)\n : i18next.t('label.activity-state-' + item.judgment)\n\n const who = item?.updater?.name || item?.approver?.name || ''\n\n return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ')\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n\n return html`\n <li>\n <span date>${whenText(updatedAt)}</span>\n <span status></span>\n\n <span info>\n <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>\n ${updater?.name ? html`<span who>${entity360Name(updater)}</span>` : nothing}\n ${this.renderSaid(reason || (output ? this.renderOutput(output) : ''))}\n </span>\n </li>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n\n return html`\n <li>\n <span date>${whenText(terminatedAt ?? createdAt)}</span>\n <span status></span>\n <span info>\n <span what>${i18next.t('label.activity-state-' + judgment)}</span>\n ${approver?.name ? html`<span who>${entity360Name(approver)}</span>` : nothing}\n ${this.renderSaid(comment)}\n </span>\n </li>\n `\n }\n\n /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */\n renderSaid(said?: string) {\n return said ? html`<p>${said}</p>` : nothing\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n let result = `${firstKey}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 })\n }\n\n return result\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0EAA0E,CAAA;AAEjF,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAG5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAIxC,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;aAC7C,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkNF;KACF,AApNY,CAoNZ;IAeD,MAAM;QACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAAE,uBAAuB,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAE1F;;;;;;WAMG;QACH,qEAAqE;QACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,uBAAuB,EAAE,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAA;QAE3G,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,IAAI;;;gBAGhB,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gCAC5B,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;+BAC7D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;;;;YAI/D,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACpB,QAAQ,IAAI,IAAI;YACd,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAA6B,CAAC;YACjE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAwB,CAAC,CAC1D;;;KAGN,CAAA;IACH,CAAC;IAED,+CAA+C;IAC/C,QAAQ,CAAC,IAAS;QAChB,MAAM,IAAI,GACR,QAAQ,IAAI,IAAI;YACd,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,GAAG,IAAI,CAAC,WAAW,CAAC;YAC7D,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;QAExD,MAAM,GAAG,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAA;QAE7D,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACxE,CAAC;IAED,2BAA2B,CAAC,qBAA4C;QACtE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAA;QAExF,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC,SAAS,CAAC;;;;uBAIjB,OAAO,CAAC,CAAC,CAAC,6BAA6B,GAAG,WAAW,CAAC;YACjE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YAC1E,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;;;KAG3E,CAAA;IACH,CAAC;IAED,sBAAsB,CAAC,gBAAkC;QACvD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAAA;QAEjF,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC;;;uBAGjC,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,QAAQ,CAAC;YACxD,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,aAAa,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YAC5E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;;;KAG/B,CAAA;IACH,CAAC;IAED,2DAA2D;IAC3D,UAAU,CAAC,IAAa;QACtB,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAC9C,CAAC;IAED,YAAY,CAAC,MAAW;QACtB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAChC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,OAAO,EAAE,CAAA;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACxB,IAAI,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;QAE5B,wBAAwB;QACxB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAClD,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1D,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,CAAA;QACxC,CAAC;QAED,oHAAoH;QACpH,IAAI,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,KAAK,EAAE,CAAA;QAE1D,kBAAkB;QAClB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,wBAAwB,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA;QAC7E,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AA7H2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAkB,cAAc;8DAAA;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAkB;AACS;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;yDAAoB;AAS5C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDAAe;AAlOhC,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAqVlC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\nimport { timelineEntries, whenOf } from './timeline-entries.js'\nimport { fieldLabel } from './activity-fields.js'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\n\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n static styles = [\n css`\n /*\n * 업무 하나가 지나온 자취 — **언제 · 무슨 일이 · 누구에 의해.**\n *\n * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────\n * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라\n * 누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.\n * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운\n * 화면에서 밝은 회색이 그대로 나온다.\n * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.\n *\n * ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────\n * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·\n * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.\n */\n /*\n * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」\n * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.\n */\n :host {\n display: block;\n padding: 14px;\n background: var(--ui-panel, #ffffff);\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r, 10px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n /* 그릴 것이 없으면 빈 카드를 남기지 않는다. */\n :host(:not(:has(ol))) {\n display: none;\n }\n\n /*\n * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────\n * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이\n * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.\n *\n * 접어 두되 **마지막에 무슨 일이 있었는지 한 줄은 남긴다.** 「이력 4건」만 있으면 펴 볼지\n * 말지를 정할 수가 없다.\n *\n * 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도\n * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그\n * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).\n */\n h2 {\n margin: 0;\n font-size: var(--ui-t-title, 15px);\n font-weight: 600;\n color: var(--ui-ink, #17242c);\n }\n\n summary {\n display: flex;\n align-items: baseline;\n gap: var(--spacing-medium, 8px);\n cursor: pointer;\n list-style: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n /* 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. */\n .chevron {\n flex: none;\n font-size: 18px;\n color: var(--ui-muted, #57676f);\n transition: transform 0.12s ease;\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n /* 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. */\n .last {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n details[open] .last {\n display: none;\n }\n\n .count {\n flex: none;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n font-variant-numeric: tabular-nums;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium, 8px) 0 0;\n padding: 0;\n }\n\n li {\n display: grid;\n grid-template-columns: max-content 16px 1fr;\n align-items: start;\n column-gap: var(--spacing-small, 4px);\n }\n\n /* 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. */\n [date] {\n padding-top: 1px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-small, 11.5px);\n font-variant-numeric: tabular-nums;\n color: var(--ui-faint, #8a959c);\n white-space: nowrap;\n }\n\n /*\n * 점과 그 아래로 이어지는 세로선.\n *\n * 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라\n * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음\n * 줄을 지나 카드 아래까지 흘러내렸다.\n */\n [status] {\n position: relative;\n align-self: stretch;\n width: 9px;\n margin-left: 3px;\n }\n\n [status]::after {\n content: '';\n position: absolute;\n top: 4px;\n left: 0;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background-color: var(--ui-accent, #00727e);\n }\n\n [status]::before {\n content: '';\n position: absolute;\n top: 15px;\n bottom: 0;\n left: 3px;\n width: 2px;\n background-color: var(--ui-line, #d5dce0);\n }\n\n li:last-child [status]::before {\n display: none;\n }\n\n [info] {\n min-width: 0;\n padding-bottom: var(--spacing-large, 16px);\n }\n\n li:last-child [info] {\n padding-bottom: 0;\n }\n\n /* 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. */\n [what] {\n font-weight: 600;\n }\n\n /* 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). */\n [who] {\n margin-left: var(--spacing-small, 4px);\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n /* 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. */\n p {\n /* 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. */\n display: block;\n width: fit-content;\n max-width: 100%;\n margin: 5px 0 0;\n padding: 7px 10px;\n background: var(--ui-panel-2, #eef1f3);\n border-radius: var(--ui-r-small, 6px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-small, 11.5px);\n line-height: 1.5;\n word-break: keep-all;\n }\n\n @media only screen and (max-width: 460px) {\n li {\n grid-template-columns: 16px 1fr;\n }\n\n /* 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. */\n [date] {\n grid-column: 2;\n grid-row: 2;\n padding: 0 0 var(--spacing-medium, 8px);\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n /**\n * 펴 둘 것인가 — **담는 화면이 정한다.**\n *\n * 기본은 접는다. 펴는 곳은 둘이다.\n * 완료 조회 지난 일을 보러 온 화면이라 이력이 곧 본문이다\n * 보일 항목 없음 화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다\n */\n @property({ type: Boolean }) open?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}\n\n /*\n * **정렬 키와 표시 키가 같아야 한다.**\n *\n * 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서\n * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.\n * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.\n */\n /* 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). */\n const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm })\n\n if (!timeline.length) {\n return nothing\n }\n\n return html`\n <details ?open=${this.open}>\n <summary>\n <md-icon class=\"chevron\">chevron_right</md-icon>\n <h2>${this.subtitle || i18next.t('label.timeline')}</h2>\n <span class=\"count\">${i18next.t('text.timeline-count', { count: timeline.length })}</span>\n <span class=\"last\">${this.lastLine(timeline[timeline.length - 1])}</span>\n </summary>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n </details>\n `\n }\n\n /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */\n lastLine(item: any): string {\n const what =\n 'reason' in item\n ? i18next.t('label.activity-transaction-' + item.transaction)\n : i18next.t('label.activity-state-' + item.judgment)\n\n const who = item?.updater?.name || item?.approver?.name || ''\n\n return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ')\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n\n return html`\n <li>\n <span date>${whenText(updatedAt)}</span>\n <span status></span>\n\n <span info>\n <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>\n ${updater?.name ? html`<span who>${entity360Name(updater)}</span>` : nothing}\n ${this.renderSaid(reason || (output ? this.renderOutput(output) : ''))}\n </span>\n </li>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n\n return html`\n <li>\n <span date>${whenText(terminatedAt ?? createdAt)}</span>\n <span status></span>\n <span info>\n <span what>${i18next.t('label.activity-state-' + judgment)}</span>\n ${approver?.name ? html`<span who>${entity360Name(approver)}</span>` : nothing}\n ${this.renderSaid(comment)}\n </span>\n </li>\n `\n }\n\n /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */\n renderSaid(said?: string) {\n return said ? html`<p>${said}</p>` : nothing\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n /* The field's name as the finished screen draws it (fieldLabel) - 「outcome:」 showed as the raw key (2026-11-11). */\n let result = `${fieldLabel({ name: firstKey })}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 })\n }\n\n return result\n }\n}\n"]}
|
|
@@ -62,7 +62,7 @@ export function renderDecision(decisionKeys, input) {
|
|
|
62
62
|
${reason
|
|
63
63
|
? html `
|
|
64
64
|
<div class="block">
|
|
65
|
-
<div class="label">${i18next.t('field.reason')}</div>
|
|
65
|
+
<div class="label">${decisionLabel(reason) || i18next.t('field.reason')}</div>
|
|
66
66
|
<div class="said ${hasWords(reason) ? '' : 'none'}">
|
|
67
67
|
${hasWords(reason) ? slotText(reason) : i18next.t('text.no-reason-given')}
|
|
68
68
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"decision-content.js","sourceRoot":"","sources":["../../client/components/decision-content.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing, TemplateResult } from 'lit'\nimport { i18next } from '@operato/i18n'\nimport { entity360KindOf, entity360Name } from '@operato/layout'\n\nimport { declaredLabel, readValue } from './activity-fields.js'\nimport {\n attachedFiles,\n COMPENSABLE,\n DecisionSlot,\n decisionDrawable,\n decisionSlots,\n reversibilityIsMalformed,\n reversibilityOf,\n slotOfRole,\n slotsOfRole\n} from './decision-slots.js'\n\n/**\n * The decision an activity declared, drawn the one way every screen draws it.\n *\n * The approval screen drew it and the task screen did not. An activity whose model is all hidden -\n * the expenditure request carries its payee and lines only for its decisionKeys - then showed the\n * approver what was asked and showed the person who asked an empty box. Both read the same\n * declaration and the same input, so one drawing serves both.\n */\n\n/**\n * The fields a page asks for to draw the decision - every field renderDecision reads.\n *\n * `name` is the label when the translation `tKey` names is missing (decisionLabel), and `valueTKey` with `params`\n * builds the value sentence at reading time (slotText). Leaving them out drew the sentence frozen\n * at issue, in the language of whoever raised it, with nothing to say a field was missing.\n */\nexport const DecisionKeysFields = `decisionKeys {\n role\n inputPath\n name\n tKey\n valueTKey\n params\n unit\n}`\n\n/**\n * The decision, or `nothing` when the activity declared none or none of it is in this input.\n *\n * Returning nothing is how a page knows to fall back to the model. An activity with no\n * decisionKeys draws exactly what it drew before.\n *\n * A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity\n * predate a field the declaration names and an empty bar on the screen would read as \"there is no\n * reason\" when the truth is that this record has no such value. What cannot be shown is left out;\n * what is shown is only what the payload actually carries.\n *\n * `reason` is the exception. Missing and blank mean the same thing to whoever is reading - nobody\n * wrote one - so both draw the grey line rather than disappearing. A reason that silently vanishes\n * would let an approver assume it was never asked for.\n */\nexport function renderDecision(decisionKeys: any, input: any): TemplateResult | typeof nothing {\n const slots = decisionSlots(decisionKeys, input)\n\n if (!decisionDrawable(slots)) {\n return nothing\n }\n\n const headline = slotOfRole(slots, 'headline')\n const subject = slotOfRole(slots, 'subject')\n const reason = slotOfRole(slots, 'reason')\n const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found)\n const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found)\n const currentState = slotOfRole(slots, 'currentState')\n const reversibility = slotOfRole(slots, 'reversibility')\n\n return html`\n <section decision>\n ${headline?.found ? html`<div class=\"headline\">${slotText(headline)}</div>` : ''}\n ${subject?.found ? html`<div class=\"subject\">${slotText(subject)}</div>` : ''}\n ${\n reason\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('field.reason')}</div>\n <div class=\"said ${hasWords(reason) ? '' : 'none'}\">\n ${hasWords(reason) ? slotText(reason) : i18next.t('text.no-reason-given')}\n </div>\n </div>\n `\n : ''\n }\n ${renderReversibility(reversibility)}\n ${\n evidence.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-it-was-judged-from')}</div>\n ${evidence.map(\n slot => html`\n <div class=\"evidence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n ${\n currentState?.found\n ? html`\n <div class=\"current-state\">\n <div class=\"label\">${decisionLabel(currentState) || i18next.t('label.current-state')}</div>\n <div>${slotText(currentState)}</div>\n </div>\n `\n : ''\n }\n ${\n consequences.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-changes')}</div>\n ${consequences.map(\n slot => html`\n <div class=\"consequence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n </section>\n `\n}\n\n/**\n * A slot's own label - only where the declaration names one with `tKey`.\n *\n * A decision key's `name` is the developer's note (\"Never shown on a screen\", ActivityDecisionKeyItem),\n * and without `tKey` the screen shows no label. declaredLabel falls back to `name` whenever `tKey` is\n * absent - right for a search key, whose name is its column, and wrong here: asking for `name` put\n * \"what approving does\" under 「승인하면 달라지는 것」 on a Korean screen (2026-10-16). The fallback\n * stays for a declared key whose translation is missing.\n */\nfunction decisionLabel(slot: DecisionSlot): string {\n return slot.tKey ? declaredLabel(slot) : ''\n}\n\n/**\n * Whether approving can be undone, drawn as the frame around the decision.\n *\n * Only an explicit true or false draws. Anything else - the path led nowhere, or the value is not\n * a boolean - draws nothing, because saying \"this can be undone\" on a screen that does not know is\n * the one mistake this line must never make.\n *\n * This is not rejectionIsFinal. That one says whether **rejecting** ends the case for good; this\n * says whether **approving** can be taken back. The twin actuation carries both, which is exactly\n * why they must not share a sentence.\n */\nfunction renderReversibility(slot?: DecisionSlot) {\n const said = reversibilityOf(slot)\n\n if (!said) {\n if (reversibilityIsMalformed(slot)) {\n /*\n * Declared, and the value is there, but not the shape this role takes - a bare sentence\n * where { reversible, caveat } belongs. Nothing is drawn, because this side cannot tell\n * which way it goes; the log is so a developer does not have to find it by hand, which is\n * how it was found the first time.\n */\n console.error(`[worklist] reversibility at \"${slot?.inputPath}\" is not { reversible, caveat } — nothing drawn`)\n }\n\n return ''\n }\n\n /*\n * The module's own sentence when it wrote one. 「버린 자재는 돌아오지 않습니다」 says why, which\n * the plain wording cannot; the boolean beside it is what decides how heavily this is drawn.\n */\n return html`\n <div class=\"reversibility\" ?irreversible=${!said.reversible}>\n <md-icon>${said.kind === COMPENSABLE ? 'history' : said.reversible ? 'undo' : 'lock'}</md-icon>\n <span\n >${\n said.caveat || (said.kind === COMPENSABLE\n ? i18next.t('text.approval-is-compensable', { defaultValue: 'The original decision remains. A subsequent corrective action is required.' })\n : i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible'))\n }</span\n >\n </div>\n `\n}\n\n/**\n * One slot's value as something to read.\n *\n * A scalar prints with its unit when one was declared. Anything shaped - an object, a list - goes\n * through readValue, the same laying-out (without the copy button - a decision is read) the model sections use, so a payload reads the same way\n * wherever it appears and a four-level object does not become one long line.\n *\n * ── The sentence is built here, not frozen when the request was raised ──\n * Eighteen doors write a Korean sentence at issue and the issue snapshots it, so it stands in the\n * language of whoever raised it and an approver reading another language never catches up. Where\n * a door declares `valueTKey`, the sentence is made at reading time instead, out of the values\n * the request did freeze.\n *\n * **A door that has not moved yet draws exactly what it drew before.** That is what lets plant\n * move them one at a time instead of eighteen at once, and it covers a door that moved into a\n * locale nobody has written yet: an empty `defaultValue` means a missing key falls through to the\n * frozen sentence rather than printing `approval.…` on the card.\n */\nfunction slotText(slot: DecisionSlot): unknown {\n const said = sentenceOf(slot)\n\n if (said) {\n return said\n }\n\n /* The paper a decision is judged on - an attachment or a list of them - is drawn as the files to open, each in its own tab. */\n const files = attachedFiles(slot.value)\n if (files) {\n return html`<ul class=\"files\">\n ${files.map(file => html`<li><a href=${file.href} target=\"_blank\" rel=\"noopener\">${file.name}</a></li>`)}\n </ul>`\n }\n\n /*\n * A value that names what it is - `{ __typename, id, name }` - is drawn as its name, a link to its\n * 360 (ADR-0067 decision 1: an entity's name opens its 360). The counterparty an expenditure pays\n * opens the counterparty 360; a person opens the person 360. A kind nobody registered stays text.\n */\n if (slot.value && typeof slot.value === 'object' && !Array.isArray(slot.value) && entity360KindOf(slot.value)) {\n return entity360Name(slot.value)\n }\n\n const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object'\n\n if (scalar && slot.unit) {\n return `${slot.value} ${slot.unit}`\n }\n\n return scalar ? String(slot.value) : readValue(slot.value)\n}\n\n/** The sentence this slot declares, when it declares one and the locale has it. */\nfunction sentenceOf(slot: DecisionSlot): string {\n if (!slot.valueTKey) {\n return ''\n }\n\n return String(i18next.t(slot.valueTKey, { ...(slot.params || {}), defaultValue: '' }) || '')\n}\n\n/** Did a person actually write something here. Whitespace is not words. */\nfunction hasWords(slot: DecisionSlot): boolean {\n return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null\n}\n\n/*\n * The decision, drawn from the activity's declaration.\n *\n * The order is the declaration's and the weight descends with it: what is being asked reads\n * first at title size, then what it is about, then the words a person wrote, then what changes\n * on approval, and last why it came up at all.\n */\nexport const DecisionContentStyles = css`\n section[decision] .headline {\n font-size: var(--ui-t-headline, 19px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ui-ink, #17242c);\n word-break: keep-all;\n }\n\n section[decision] .subject {\n margin-top: 3px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-body, 13px);\n color: var(--ui-muted, #57676f);\n }\n\n section[decision] .block {\n margin-top: 14px;\n }\n\n section[decision] .block > .label {\n margin-bottom: 4px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /* What a person wrote is set apart, because it is the only part nobody computed. */\n section[decision] .said {\n padding: 9px 11px;\n border-left: 3px solid var(--ui-line, #d5dce0);\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-ink, #17242c);\n word-break: break-word;\n }\n\n section[decision] .none {\n color: var(--ui-faint, #8a959c);\n }\n\n section[decision] .consequence {\n margin-top: 8px;\n padding: 9px 11px;\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .consequence > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /*\n * Whether approving can be undone reads as the frame around the decision, not as one of its\n * consequences. Among them it carries the same weight as \"four orders get pushed back\", and\n * on an approval that moves equipment it is the heaviest line on the screen.\n */\n section[decision] .reversibility {\n display: flex;\n align-items: center;\n gap: 6px;\n\n margin-top: 12px;\n padding: 8px 11px;\n border-radius: var(--ui-r-small, 6px);\n\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-muted, #57676f);\n font-size: var(--ui-t-small, 11.5px);\n }\n\n section[decision] .reversibility[irreversible] {\n background: var(--md-sys-color-error-container, #ffdad6);\n color: var(--md-sys-color-on-error-container, #410002);\n font-weight: 600;\n }\n\n section[decision] .reversibility md-icon {\n font-size: 1.15em;\n }\n\n /*\n * What the decision was made from. Set flatter than the consequences - it is the record the\n * approver checks, not something the approval brings about.\n */\n section[decision] .evidence {\n margin-top: 8px;\n padding: 7px 0 7px 11px;\n border-left: 2px solid var(--ui-line, #d5dce0);\n }\n\n section[decision] ul.files {\n margin: 0;\n padding-left: 1.2em;\n }\n\n /* A file reads as a link the way a name that opens its 360 does (entity360Name). */\n section[decision] ul.files a {\n color: inherit;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n }\n\n section[decision] .evidence > .label {\n margin-bottom: 2px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /*\n * What is true right now sits apart from what the approval would change. Sharing the box the\n * consequences use would say the approval causes these readings.\n */\n section[decision] .current-state {\n margin-top: 14px;\n padding: 9px 11px;\n border: 1px dashed var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .current-state > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"decision-content.js","sourceRoot":"","sources":["../../client/components/decision-content.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing, TemplateResult } from 'lit'\nimport { i18next } from '@operato/i18n'\nimport { entity360KindOf, entity360Name } from '@operato/layout'\n\nimport { declaredLabel, readValue } from './activity-fields.js'\nimport {\n attachedFiles,\n COMPENSABLE,\n DecisionSlot,\n decisionDrawable,\n decisionSlots,\n reversibilityIsMalformed,\n reversibilityOf,\n slotOfRole,\n slotsOfRole\n} from './decision-slots.js'\n\n/**\n * The decision an activity declared, drawn the one way every screen draws it.\n *\n * The approval screen drew it and the task screen did not. An activity whose model is all hidden -\n * the expenditure request carries its payee and lines only for its decisionKeys - then showed the\n * approver what was asked and showed the person who asked an empty box. Both read the same\n * declaration and the same input, so one drawing serves both.\n */\n\n/**\n * The fields a page asks for to draw the decision - every field renderDecision reads.\n *\n * `name` is the label when the translation `tKey` names is missing (decisionLabel), and `valueTKey` with `params`\n * builds the value sentence at reading time (slotText). Leaving them out drew the sentence frozen\n * at issue, in the language of whoever raised it, with nothing to say a field was missing.\n */\nexport const DecisionKeysFields = `decisionKeys {\n role\n inputPath\n name\n tKey\n valueTKey\n params\n unit\n}`\n\n/**\n * The decision, or `nothing` when the activity declared none or none of it is in this input.\n *\n * Returning nothing is how a page knows to fall back to the model. An activity with no\n * decisionKeys draws exactly what it drew before.\n *\n * A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity\n * predate a field the declaration names and an empty bar on the screen would read as \"there is no\n * reason\" when the truth is that this record has no such value. What cannot be shown is left out;\n * what is shown is only what the payload actually carries.\n *\n * `reason` is the exception. Missing and blank mean the same thing to whoever is reading - nobody\n * wrote one - so both draw the grey line rather than disappearing. A reason that silently vanishes\n * would let an approver assume it was never asked for.\n */\nexport function renderDecision(decisionKeys: any, input: any): TemplateResult | typeof nothing {\n const slots = decisionSlots(decisionKeys, input)\n\n if (!decisionDrawable(slots)) {\n return nothing\n }\n\n const headline = slotOfRole(slots, 'headline')\n const subject = slotOfRole(slots, 'subject')\n const reason = slotOfRole(slots, 'reason')\n const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found)\n const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found)\n const currentState = slotOfRole(slots, 'currentState')\n const reversibility = slotOfRole(slots, 'reversibility')\n\n return html`\n <section decision>\n ${headline?.found ? html`<div class=\"headline\">${slotText(headline)}</div>` : ''}\n ${subject?.found ? html`<div class=\"subject\">${slotText(subject)}</div>` : ''}\n ${\n reason\n ? html`\n <div class=\"block\">\n <div class=\"label\">${decisionLabel(reason) || i18next.t('field.reason')}</div>\n <div class=\"said ${hasWords(reason) ? '' : 'none'}\">\n ${hasWords(reason) ? slotText(reason) : i18next.t('text.no-reason-given')}\n </div>\n </div>\n `\n : ''\n }\n ${renderReversibility(reversibility)}\n ${\n evidence.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-it-was-judged-from')}</div>\n ${evidence.map(\n slot => html`\n <div class=\"evidence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n ${\n currentState?.found\n ? html`\n <div class=\"current-state\">\n <div class=\"label\">${decisionLabel(currentState) || i18next.t('label.current-state')}</div>\n <div>${slotText(currentState)}</div>\n </div>\n `\n : ''\n }\n ${\n consequences.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-changes')}</div>\n ${consequences.map(\n slot => html`\n <div class=\"consequence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n </section>\n `\n}\n\n/**\n * A slot's own label - only where the declaration names one with `tKey`.\n *\n * A decision key's `name` is the developer's note (\"Never shown on a screen\", ActivityDecisionKeyItem),\n * and without `tKey` the screen shows no label. declaredLabel falls back to `name` whenever `tKey` is\n * absent - right for a search key, whose name is its column, and wrong here: asking for `name` put\n * \"what approving does\" under 「승인하면 달라지는 것」 on a Korean screen (2026-10-16). The fallback\n * stays for a declared key whose translation is missing.\n */\nfunction decisionLabel(slot: DecisionSlot): string {\n return slot.tKey ? declaredLabel(slot) : ''\n}\n\n/**\n * Whether approving can be undone, drawn as the frame around the decision.\n *\n * Only an explicit true or false draws. Anything else - the path led nowhere, or the value is not\n * a boolean - draws nothing, because saying \"this can be undone\" on a screen that does not know is\n * the one mistake this line must never make.\n *\n * This is not rejectionIsFinal. That one says whether **rejecting** ends the case for good; this\n * says whether **approving** can be taken back. The twin actuation carries both, which is exactly\n * why they must not share a sentence.\n */\nfunction renderReversibility(slot?: DecisionSlot) {\n const said = reversibilityOf(slot)\n\n if (!said) {\n if (reversibilityIsMalformed(slot)) {\n /*\n * Declared, and the value is there, but not the shape this role takes - a bare sentence\n * where { reversible, caveat } belongs. Nothing is drawn, because this side cannot tell\n * which way it goes; the log is so a developer does not have to find it by hand, which is\n * how it was found the first time.\n */\n console.error(`[worklist] reversibility at \"${slot?.inputPath}\" is not { reversible, caveat } — nothing drawn`)\n }\n\n return ''\n }\n\n /*\n * The module's own sentence when it wrote one. 「버린 자재는 돌아오지 않습니다」 says why, which\n * the plain wording cannot; the boolean beside it is what decides how heavily this is drawn.\n */\n return html`\n <div class=\"reversibility\" ?irreversible=${!said.reversible}>\n <md-icon>${said.kind === COMPENSABLE ? 'history' : said.reversible ? 'undo' : 'lock'}</md-icon>\n <span\n >${\n said.caveat || (said.kind === COMPENSABLE\n ? i18next.t('text.approval-is-compensable', { defaultValue: 'The original decision remains. A subsequent corrective action is required.' })\n : i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible'))\n }</span\n >\n </div>\n `\n}\n\n/**\n * One slot's value as something to read.\n *\n * A scalar prints with its unit when one was declared. Anything shaped - an object, a list - goes\n * through readValue, the same laying-out (without the copy button - a decision is read) the model sections use, so a payload reads the same way\n * wherever it appears and a four-level object does not become one long line.\n *\n * ── The sentence is built here, not frozen when the request was raised ──\n * Eighteen doors write a Korean sentence at issue and the issue snapshots it, so it stands in the\n * language of whoever raised it and an approver reading another language never catches up. Where\n * a door declares `valueTKey`, the sentence is made at reading time instead, out of the values\n * the request did freeze.\n *\n * **A door that has not moved yet draws exactly what it drew before.** That is what lets plant\n * move them one at a time instead of eighteen at once, and it covers a door that moved into a\n * locale nobody has written yet: an empty `defaultValue` means a missing key falls through to the\n * frozen sentence rather than printing `approval.…` on the card.\n */\nfunction slotText(slot: DecisionSlot): unknown {\n const said = sentenceOf(slot)\n\n if (said) {\n return said\n }\n\n /* The paper a decision is judged on - an attachment or a list of them - is drawn as the files to open, each in its own tab. */\n const files = attachedFiles(slot.value)\n if (files) {\n return html`<ul class=\"files\">\n ${files.map(file => html`<li><a href=${file.href} target=\"_blank\" rel=\"noopener\">${file.name}</a></li>`)}\n </ul>`\n }\n\n /*\n * A value that names what it is - `{ __typename, id, name }` - is drawn as its name, a link to its\n * 360 (ADR-0067 decision 1: an entity's name opens its 360). The counterparty an expenditure pays\n * opens the counterparty 360; a person opens the person 360. A kind nobody registered stays text.\n */\n if (slot.value && typeof slot.value === 'object' && !Array.isArray(slot.value) && entity360KindOf(slot.value)) {\n return entity360Name(slot.value)\n }\n\n const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object'\n\n if (scalar && slot.unit) {\n return `${slot.value} ${slot.unit}`\n }\n\n return scalar ? String(slot.value) : readValue(slot.value)\n}\n\n/** The sentence this slot declares, when it declares one and the locale has it. */\nfunction sentenceOf(slot: DecisionSlot): string {\n if (!slot.valueTKey) {\n return ''\n }\n\n return String(i18next.t(slot.valueTKey, { ...(slot.params || {}), defaultValue: '' }) || '')\n}\n\n/** Did a person actually write something here. Whitespace is not words. */\nfunction hasWords(slot: DecisionSlot): boolean {\n return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null\n}\n\n/*\n * The decision, drawn from the activity's declaration.\n *\n * The order is the declaration's and the weight descends with it: what is being asked reads\n * first at title size, then what it is about, then the words a person wrote, then what changes\n * on approval, and last why it came up at all.\n */\nexport const DecisionContentStyles = css`\n section[decision] .headline {\n font-size: var(--ui-t-headline, 19px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ui-ink, #17242c);\n word-break: keep-all;\n }\n\n section[decision] .subject {\n margin-top: 3px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-body, 13px);\n color: var(--ui-muted, #57676f);\n }\n\n section[decision] .block {\n margin-top: 14px;\n }\n\n section[decision] .block > .label {\n margin-bottom: 4px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /* What a person wrote is set apart, because it is the only part nobody computed. */\n section[decision] .said {\n padding: 9px 11px;\n border-left: 3px solid var(--ui-line, #d5dce0);\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-ink, #17242c);\n word-break: break-word;\n }\n\n section[decision] .none {\n color: var(--ui-faint, #8a959c);\n }\n\n section[decision] .consequence {\n margin-top: 8px;\n padding: 9px 11px;\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .consequence > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /*\n * Whether approving can be undone reads as the frame around the decision, not as one of its\n * consequences. Among them it carries the same weight as \"four orders get pushed back\", and\n * on an approval that moves equipment it is the heaviest line on the screen.\n */\n section[decision] .reversibility {\n display: flex;\n align-items: center;\n gap: 6px;\n\n margin-top: 12px;\n padding: 8px 11px;\n border-radius: var(--ui-r-small, 6px);\n\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-muted, #57676f);\n font-size: var(--ui-t-small, 11.5px);\n }\n\n section[decision] .reversibility[irreversible] {\n background: var(--md-sys-color-error-container, #ffdad6);\n color: var(--md-sys-color-on-error-container, #410002);\n font-weight: 600;\n }\n\n section[decision] .reversibility md-icon {\n font-size: 1.15em;\n }\n\n /*\n * What the decision was made from. Set flatter than the consequences - it is the record the\n * approver checks, not something the approval brings about.\n */\n section[decision] .evidence {\n margin-top: 8px;\n padding: 7px 0 7px 11px;\n border-left: 2px solid var(--ui-line, #d5dce0);\n }\n\n section[decision] ul.files {\n margin: 0;\n padding-left: 1.2em;\n }\n\n /* A file reads as a link the way a name that opens its 360 does (entity360Name). */\n section[decision] ul.files a {\n color: inherit;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n }\n\n section[decision] .evidence > .label {\n margin-bottom: 2px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /*\n * What is true right now sits apart from what the approval would change. Sharing the box the\n * consequences use would say the approval causes these readings.\n */\n section[decision] .current-state {\n margin-top: 14px;\n padding: 9px 11px;\n border: 1px dashed var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .current-state > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n`\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* What a case's head says beside its state - its description, unless that only says its name again.
|
|
3
|
+
*
|
|
4
|
+
* A module that opens a to-do by itself names it and describes it with the same words (an inquiry's to-do is its title
|
|
5
|
+
* twice; handOut fills a missing description with the name). The screen's title is that name, so the head said it a
|
|
6
|
+
* second time (2026-11-11, 문의 할 일).
|
|
7
|
+
*
|
|
8
|
+
* Kept free of imports so the test runner can hold it.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ribonDescription(instance?: {
|
|
11
|
+
name?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
} | null): string;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* What a case's head says beside its state - its description, unless that only says its name again.
|
|
3
|
+
*
|
|
4
|
+
* A module that opens a to-do by itself names it and describes it with the same words (an inquiry's to-do is its title
|
|
5
|
+
* twice; handOut fills a missing description with the name). The screen's title is that name, so the head said it a
|
|
6
|
+
* second time (2026-11-11, 문의 할 일).
|
|
7
|
+
*
|
|
8
|
+
* Kept free of imports so the test runner can hold it.
|
|
9
|
+
*/
|
|
10
|
+
export function ribonDescription(instance) {
|
|
11
|
+
const description = (instance?.description || '').trim();
|
|
12
|
+
return description && description !== (instance?.name || '').trim() ? description : '';
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=ribon-description.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ribon-description.js","sourceRoot":"","sources":["../../client/components/ribon-description.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,QAAyD;IACxF,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;IACxD,OAAO,WAAW,IAAI,WAAW,KAAK,CAAC,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;AACxF,CAAC","sourcesContent":["/**\n * What a case's head says beside its state - its description, unless that only says its name again.\n *\n * A module that opens a to-do by itself names it and describes it with the same words (an inquiry's to-do is its title\n * twice; handOut fills a missing description with the name). The screen's title is that name, so the head said it a\n * second time (2026-11-11, 문의 할 일).\n *\n * Kept free of imports so the test runner can hold it.\n */\nexport function ribonDescription(instance?: { name?: string; description?: string } | null): string {\n const description = (instance?.description || '').trim()\n return description && description !== (instance?.name || '').trim() ? description : ''\n}\n"]}
|
|
@@ -11,7 +11,7 @@ import { nothing } from 'lit';
|
|
|
11
11
|
*/
|
|
12
12
|
export declare function renderSourceLink(input: {
|
|
13
13
|
sourceHref?: unknown;
|
|
14
|
-
} | null | undefined): import("lit-html").TemplateResult<1
|
|
14
|
+
} | null | undefined): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
15
15
|
/**
|
|
16
16
|
* How the link looks, wherever it is drawn - the way a name that opens its 360 looks (`entity360Name`): the text's own
|
|
17
17
|
* colour, a light underline that darkens under the pointer. The approval screen drew it as plain text and the case popup
|
|
@@ -28,7 +28,7 @@ export declare class ActivityInstanceView extends ActivityInstanceView_base {
|
|
|
28
28
|
* decision, every model field being hidden. The declaration goes first and the given values are
|
|
29
29
|
* the fallback, as on the task screen (thread-sections).
|
|
30
30
|
*/
|
|
31
|
-
renderRequest(): import("lit-html").TemplateResult
|
|
31
|
+
renderRequest(): typeof nothing | import("lit-html").TemplateResult;
|
|
32
32
|
renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread, several: boolean): import("lit-html").TemplateResult<1>;
|
|
33
33
|
renderThreadBasics(activityThread: ActivityThread): import("lit-html").TemplateResult<1>;
|
|
34
34
|
/**
|
|
@@ -45,7 +45,7 @@ export declare class ActivityInstanceView extends ActivityInstanceView_base {
|
|
|
45
45
|
* under 「산출물」. 상신함 opens this view for anyone who put something up, so it draws what the task
|
|
46
46
|
* screen draws, and nothing when the activity has nothing to write.
|
|
47
47
|
*/
|
|
48
|
-
renderWritten(output: any): import("lit-html").TemplateResult<1
|
|
48
|
+
renderWritten(output: any): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
49
49
|
updated(changes: any): void;
|
|
50
50
|
}
|
|
51
51
|
export {};
|
|
@@ -65,7 +65,7 @@ export declare class ActivityThreadPage extends ActivityThreadPage_base {
|
|
|
65
65
|
/** 타임라인 위에 무엇을 그리나 — 규칙은 thread-sections 에 있다. */
|
|
66
66
|
sections(): ThreadSections;
|
|
67
67
|
/** 액티비티가 선언한 결재 내용 — 결재 화면과 같은 그리기다. */
|
|
68
|
-
decision(): import("lit-html").TemplateResult
|
|
68
|
+
decision(): typeof nothing | import("lit-html").TemplateResult;
|
|
69
69
|
activityContent(): DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
|
|
70
70
|
/**
|
|
71
71
|
* 화면 종류가 달라도 **같은 자리에 같은 모양으로 놓인다.**
|
|
@@ -16,6 +16,7 @@ import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
|
|
|
16
16
|
import { provider } from '@operato/board/board-provider.js';
|
|
17
17
|
import { ActivityFieldsStyles } from '../../components/activity-fields.js';
|
|
18
18
|
import { DecisionKeysFields } from '../../components/decision-content.js';
|
|
19
|
+
import { renderSourceLink, SourceLinkStyles } from '../../components/source-link.js';
|
|
19
20
|
const ActivityThreadFetchResult = `\
|
|
20
21
|
{ id
|
|
21
22
|
state
|
|
@@ -115,6 +116,7 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
|
|
|
115
116
|
DocumentPageStyles,
|
|
116
117
|
ScrollbarStyles,
|
|
117
118
|
ActivityFieldsStyles,
|
|
119
|
+
SourceLinkStyles,
|
|
118
120
|
css `
|
|
119
121
|
:host {
|
|
120
122
|
color: var(--ui-ink, #17242c);
|
|
@@ -250,6 +252,7 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
|
|
|
250
252
|
renderThread(activityThread) {
|
|
251
253
|
return html `
|
|
252
254
|
<activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
|
|
255
|
+
${renderSourceLink(activityThread.activityInstance?.input)}
|
|
253
256
|
${this.activityContent()}
|
|
254
257
|
<!--
|
|
255
258
|
여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { DirectiveResult } from 'lit/directive.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\nimport { DecisionKeysFields } from '../../components/decision-content.js'\n\nconst ActivityThreadFetchResult = `\\\n{ id\n state\n dueAt\n assignedAt\n startedAt\n terminatedAt\n assignee { id\n name\n }\n output\n round\n activityApprovals { round\n order\n approver { id name\n }\n judgment\n participation\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id name\n }\n updatedAt\n state\n output\n }\n activityInstance { id\n name\n description\n state\n activity { id\n ${DecisionKeysFields}\n model { name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n hidden\n }\n }\n approvalLine { type\n value\n participation\n notifyAfter\n approver { id\n name\n description\n controlNo\n }\n }\n thumbnail\n input\n output\n viewType\n viewSource\n dueAt\n terminatedAt\n terminator { name\n email\n }\n createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {\n Unassigned: 'unassigned',\n Assigned: 'assigned',\n Started: 'started',\n Delegated: 'delegated',\n Rejected: 'rejected',\n Ended: 'ended',\n Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage 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 ActivityFieldsStyles,\n css`\n :host {\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */\n /*\n * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────\n * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. **1 이\n * 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔\n * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 **스크롤도\n * 없이 사라진다.**\n *\n * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이\n * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 **타임라인이\n * 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.\n *\n * 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해\n * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).\n * 문서는 제 높이로 서고, 화면이 모자라면 **페이지 전체가 스크롤한다** — :host 의\n * overflow: auto 가 이미 그 자리다.\n */\n section[hosted] {\n flex: none;\n padding: 0;\n overflow: hidden;\n }\n\n /*\n * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더\n * 두르지 않는다. 절들이 곧 카드다.\n */\n section[hosted][plain] {\n margin: 0;\n background: none;\n border: none;\n border-radius: 0;\n }\n\n ox-board-viewer {\n width: 100%;\n height: 100%;\n }\n\n /*\n * 여백을 주지 않는다 — **안에 든 절들이 이미 자기 여백을 갖는다.**\n *\n * 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,\n * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다\n * 왼쪽 기준선이 달랐다.\n */\n activity-thread-view {\n display: block;\n }\n\n activity-thread-timeline {\n margin: var(--spacing-large, 16px);\n }\n\n #custom-content {\n flex: 1;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n /** The thread the address names. */\n @state() private threadId = ''\n\n /* The thread shown, read for the id the address names (ADR-0190). */\n private thread = new QueryController(\n this,\n gql`\n query activityThread($id: String!) {\n activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n { variables: () => (this.threadId ? { id: this.threadId } : undefined) }\n )\n\n get activityThread(): any {\n return this.thread.data?.activityThread\n }\n\n /**\n * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**\n *\n * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만\n * 그 말을 한다.\n */\n get loaded(): boolean {\n return this.thread.data !== undefined\n }\n\n /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */\n get loadError(): unknown {\n return this.thread.error ?? null\n }\n\n @state() board: any\n\n get context() {\n return {\n /*\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n */\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /*\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n *\n * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n */\n menu: this.lifecycle?.params?.['box'] === 'draft-list' ? 'draft-list' : 'todo-list',\n /*\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n */\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n /* Reading and failing both drew nothing at all, so a failure looked like an empty screen. */\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.thread.refetch()}\n >${\n !activityThread\n ? this.loaded\n ? html`<div empty>\n <span class=\"title\">${i18next.t('text.no activity thread info')}</span>\n <span class=\"why\">${i18next.t('text.no-activity-thread-why')}</span>\n </div>`\n : nothing\n : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\n return html`\n <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n ${this.activityContent()}\n <!--\n 여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.\n -->\n <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n `\n }\n\n activityContent() {\n switch (this.activityThread?.activityInstance?.viewType) {\n case 'template':\n return this.hostedContent(this.templateContent())\n case 'generated':\n return this.generatedContent()\n /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. */\n case 'board':\n return this.boardContent()\n case 'custom-element':\n return this.hostedContent(this.customElementContent())\n case 'page':\n case 'external':\n return html``\n default:\n return this.generatedContent()\n }\n }\n\n /**\n * 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).\n *\n * plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.\n */\n hostedContent(content: unknown, plain = false) {\n return html`<section hosted ?plain=${plain}>${content}</section>`\n }\n\n templateContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n /*\n * id 가 아니라 **값을 넘긴다.** 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미\n * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.\n */\n return keyed(\n this.activityThread.id,\n this.hostedContent(\n html`<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`,\n true\n )\n )\n }\n\n boardContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: boardId, input } = activityInstance || {}\n\n if (!this.board || this.board.id !== boardId) {\n this.board = { id: boardId }\n }\n\n /* \n ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n 동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n 따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n */\n return keyed(\n this.activityThread.id,\n html`\n <ox-board-viewer\n style=\"background-color: white;\"\n .board=${this.board}\n .provider=${provider}\n .values=${{ ...input, ...output }}\n hide-fullscreen\n hide-navigation\n ></ox-board-viewer>\n `\n )\n }\n\n customElementContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: tagName, input } = activityInstance || {}\n\n const element = document.createElement(tagName)\n element.id = 'custom-content'\n element.input = input\n element.output = output\n element.addEventListener('change', (e: CustomEvent) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.threadId = lifecycle.resourceId\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { DirectiveResult } from 'lit/directive.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\nimport { DecisionKeysFields } from '../../components/decision-content.js'\nimport { renderSourceLink, SourceLinkStyles } from '../../components/source-link.js'\n\nconst ActivityThreadFetchResult = `\\\n{ id\n state\n dueAt\n assignedAt\n startedAt\n terminatedAt\n assignee { id\n name\n }\n output\n round\n activityApprovals { round\n order\n approver { id name\n }\n judgment\n participation\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id name\n }\n updatedAt\n state\n output\n }\n activityInstance { id\n name\n description\n state\n activity { id\n ${DecisionKeysFields}\n model { name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n hidden\n }\n }\n approvalLine { type\n value\n participation\n notifyAfter\n approver { id\n name\n description\n controlNo\n }\n }\n thumbnail\n input\n output\n viewType\n viewSource\n dueAt\n terminatedAt\n terminator { name\n email\n }\n createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {\n Unassigned: 'unassigned',\n Assigned: 'assigned',\n Started: 'started',\n Delegated: 'delegated',\n Rejected: 'rejected',\n Ended: 'ended',\n Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage 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 ActivityFieldsStyles,\n SourceLinkStyles,\n css`\n :host {\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */\n /*\n * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────\n * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. **1 이\n * 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔\n * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 **스크롤도\n * 없이 사라진다.**\n *\n * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이\n * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 **타임라인이\n * 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.\n *\n * 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해\n * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).\n * 문서는 제 높이로 서고, 화면이 모자라면 **페이지 전체가 스크롤한다** — :host 의\n * overflow: auto 가 이미 그 자리다.\n */\n section[hosted] {\n flex: none;\n padding: 0;\n overflow: hidden;\n }\n\n /*\n * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더\n * 두르지 않는다. 절들이 곧 카드다.\n */\n section[hosted][plain] {\n margin: 0;\n background: none;\n border: none;\n border-radius: 0;\n }\n\n ox-board-viewer {\n width: 100%;\n height: 100%;\n }\n\n /*\n * 여백을 주지 않는다 — **안에 든 절들이 이미 자기 여백을 갖는다.**\n *\n * 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,\n * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다\n * 왼쪽 기준선이 달랐다.\n */\n activity-thread-view {\n display: block;\n }\n\n activity-thread-timeline {\n margin: var(--spacing-large, 16px);\n }\n\n #custom-content {\n flex: 1;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n /** The thread the address names. */\n @state() private threadId = ''\n\n /* The thread shown, read for the id the address names (ADR-0190). */\n private thread = new QueryController(\n this,\n gql`\n query activityThread($id: String!) {\n activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n { variables: () => (this.threadId ? { id: this.threadId } : undefined) }\n )\n\n get activityThread(): any {\n return this.thread.data?.activityThread\n }\n\n /**\n * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**\n *\n * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만\n * 그 말을 한다.\n */\n get loaded(): boolean {\n return this.thread.data !== undefined\n }\n\n /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */\n get loadError(): unknown {\n return this.thread.error ?? null\n }\n\n @state() board: any\n\n get context() {\n return {\n /*\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n */\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /*\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n *\n * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n */\n menu: this.lifecycle?.params?.['box'] === 'draft-list' ? 'draft-list' : 'todo-list',\n /*\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n */\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n /* Reading and failing both drew nothing at all, so a failure looked like an empty screen. */\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.thread.refetch()}\n >${\n !activityThread\n ? this.loaded\n ? html`<div empty>\n <span class=\"title\">${i18next.t('text.no activity thread info')}</span>\n <span class=\"why\">${i18next.t('text.no-activity-thread-why')}</span>\n </div>`\n : nothing\n : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\n return html`\n <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n ${renderSourceLink(activityThread.activityInstance?.input)}\n ${this.activityContent()}\n <!--\n 여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.\n -->\n <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n `\n }\n\n activityContent() {\n switch (this.activityThread?.activityInstance?.viewType) {\n case 'template':\n return this.hostedContent(this.templateContent())\n case 'generated':\n return this.generatedContent()\n /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. */\n case 'board':\n return this.boardContent()\n case 'custom-element':\n return this.hostedContent(this.customElementContent())\n case 'page':\n case 'external':\n return html``\n default:\n return this.generatedContent()\n }\n }\n\n /**\n * 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).\n *\n * plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.\n */\n hostedContent(content: unknown, plain = false) {\n return html`<section hosted ?plain=${plain}>${content}</section>`\n }\n\n templateContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n /*\n * id 가 아니라 **값을 넘긴다.** 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미\n * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.\n */\n return keyed(\n this.activityThread.id,\n this.hostedContent(\n html`<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`,\n true\n )\n )\n }\n\n boardContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: boardId, input } = activityInstance || {}\n\n if (!this.board || this.board.id !== boardId) {\n this.board = { id: boardId }\n }\n\n /* \n ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n 동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n 따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n */\n return keyed(\n this.activityThread.id,\n html`\n <ox-board-viewer\n style=\"background-color: white;\"\n .board=${this.board}\n .provider=${provider}\n .values=${{ ...input, ...output }}\n hide-fullscreen\n hide-navigation\n ></ox-board-viewer>\n `\n )\n }\n\n customElementContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: tagName, input } = activityInstance || {}\n\n const element = document.createElement(tagName)\n element.id = 'custom-content'\n element.input = input\n element.output = output\n element.addEventListener('change', (e: CustomEvent) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.threadId = lifecycle.resourceId\n }\n }\n}\n"]}
|
|
@@ -26,6 +26,6 @@ declare const ActivityThreadView_base: (new (...args: any[]) => LitElement) & ty
|
|
|
26
26
|
export declare class ActivityThreadView extends ActivityThreadView_base {
|
|
27
27
|
static styles: import("lit").CSSResult[];
|
|
28
28
|
activityThread?: ActivityThread;
|
|
29
|
-
render(): import("lit-html").TemplateResult<1
|
|
29
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
30
30
|
}
|
|
31
31
|
export {};
|
package/dist-client/route.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function route(page: string): "
|
|
1
|
+
export default function route(page: string): "draft-list" | "todo-list" | "approval-pending-list" | "activity" | "activity-thread" | "activity-thread-view" | "activity-approval" | "activity-catalog" | "done-list-calendar" | "activity-detail" | "approval-done-list" | "pickable-list" | "starter-list" | "reporter-list" | "activity-list" | "activity-instance-start" | "activity-instance-list" | "approval-progress" | "activity-instance-search" | "activity-template-list" | "activity-store" | "activity-thread-list" | "activity-approval-list" | "installable-activity-list" | "activity-stats-list" | undefined;
|