@things-factory/organization 10.1.185 → 10.1.188
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/component/approval-line-brief.d.ts +5 -0
- package/dist-client/component/approval-line-brief.js +21 -3
- package/dist-client/component/approval-line-brief.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/tests/approval-line-brief-plan.test.ts +35 -0
|
@@ -5,6 +5,11 @@ export declare class ApprovalLineBrief extends ApprovalLineBrief_base {
|
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
6
|
model: ApprovalLineItem[];
|
|
7
7
|
current: number;
|
|
8
|
+
/**
|
|
9
|
+
* Draw the line as set, with no turn on it. Leaving `current` out is not the same: it means the
|
|
10
|
+
* submitter's turn, which is right for a draft and wrong for a list of forms.
|
|
11
|
+
*/
|
|
12
|
+
plan: boolean;
|
|
8
13
|
render(): TemplateResult<1>;
|
|
9
14
|
renderItem(item: ApprovalLineItem, order: number): TemplateResult;
|
|
10
15
|
}
|
|
@@ -9,6 +9,11 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
9
9
|
super(...arguments);
|
|
10
10
|
this.model = [];
|
|
11
11
|
this.current = -1;
|
|
12
|
+
/**
|
|
13
|
+
* Draw the line as set, with no turn on it. Leaving `current` out is not the same: it means the
|
|
14
|
+
* submitter's turn, which is right for a draft and wrong for a list of forms.
|
|
15
|
+
*/
|
|
16
|
+
this.plan = false;
|
|
12
17
|
}
|
|
13
18
|
static { this.styles = [
|
|
14
19
|
css `
|
|
@@ -157,6 +162,15 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
157
162
|
box-sizing: border-box;
|
|
158
163
|
}
|
|
159
164
|
|
|
165
|
+
/*
|
|
166
|
+
* The line as it is set, with nobody's turn in it - a catalog of forms, not a request on its way.
|
|
167
|
+
* Every seat reads at the ink colour: faint is how a step that is still to come looks, and here
|
|
168
|
+
* none of them is coming.
|
|
169
|
+
*/
|
|
170
|
+
:host([plan]) li {
|
|
171
|
+
color: var(--ui-ink, #17242c);
|
|
172
|
+
}
|
|
173
|
+
|
|
160
174
|
[reference] em {
|
|
161
175
|
font-style: normal;
|
|
162
176
|
font-size: var(--ui-t-micro, 11px);
|
|
@@ -170,7 +184,7 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
170
184
|
return html `
|
|
171
185
|
<ol>
|
|
172
186
|
${this.model
|
|
173
|
-
? html ` <li approver origin ?current=${this.current <= 0} ?past=${this.current > 0}>
|
|
187
|
+
? html ` <li approver origin ?current=${!this.plan && this.current <= 0} ?past=${!this.plan && this.current > 0}>
|
|
174
188
|
<span></span>
|
|
175
189
|
<div>${i18next.t('label.Myself')}</div>
|
|
176
190
|
</li>`
|
|
@@ -198,8 +212,8 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
198
212
|
<li
|
|
199
213
|
approver
|
|
200
214
|
?reference=${reference}
|
|
201
|
-
?current=${!reference && this.current == order}
|
|
202
|
-
?past=${!reference && this.current > order}
|
|
215
|
+
?current=${!this.plan && !reference && this.current == order}
|
|
216
|
+
?past=${!this.plan && !reference && this.current > order}
|
|
203
217
|
title=${name || ''}
|
|
204
218
|
>
|
|
205
219
|
<span>${reference ? '' : order}</span>
|
|
@@ -217,6 +231,10 @@ __decorate([
|
|
|
217
231
|
property({ type: Number }),
|
|
218
232
|
__metadata("design:type", Number)
|
|
219
233
|
], ApprovalLineBrief.prototype, "current", void 0);
|
|
234
|
+
__decorate([
|
|
235
|
+
property({ type: Boolean, reflect: true }),
|
|
236
|
+
__metadata("design:type", Boolean)
|
|
237
|
+
], ApprovalLineBrief.prototype, "plan", void 0);
|
|
220
238
|
ApprovalLineBrief = __decorate([
|
|
221
239
|
customElement('approval-line-brief')
|
|
222
240
|
], ApprovalLineBrief);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAoB,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;
|
|
1
|
+
{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem, isReferenceStep } from '../types/approval-line'\nimport { OrgMemberTargetType } from '../types/org-member'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n static styles = [\n css`\n /*\n * 결재선 한 줄 요약 — **어디까지 왔고 지금 누구 차례인가.**\n *\n * ── 색 띠 위를 전제하고 있었다 (2026-09-06) ────────────────────────\n * 글자가 rgba(255, 255, 255, 0.7), 이음선이 rgba(0, 0, 0, 0.4) 였다. 이 컴포넌트를\n * 쓰는 곳은 worklist 의 ribbon 세 곳뿐인데, 그 ribbon 이 채도 높은 색으로 띠를 채우고\n * 있었기 때문이다. ribbon 이 흰 면으로 바뀌면 이 글자는 보이지 않는다.\n *\n * 그래서 자기 색을 갖지 않고 토큰을 쓴다 — 어느 면 위에 놓이든 그 앱의 팔레트를 따른다.\n *\n * ── 단계 이름을 자르지 않는다 ─────────────────────────────────────\n * 폭이 85px 고정이라 QUALITY-MANAGER 가 QUALITY-MA… 로 잘렸다. 결재선에서 읽어야\n * 하는 것이 바로 그 이름이다. 지금은 칸을 균등하게 나누고 이름은 자기 칸 안에서 줄바꿈한다\n * (아래 ol 머리말).\n */\n :host {\n display: block;\n color: var(--ui-ink, #17242c);\n }\n\n /*\n * ── 칸은 모두 같은 폭이다 (2026-09-06) ─────────────────────────────\n * 이음선을 자기 폭의 50% 로 옆 칸 가운데까지 늘리는데, 그 계산은 **칸이 모두 같은 폭일\n * 때만** 맞는다. 내용 폭으로 두었더니 「나」는 28px, 「QUALITY-MANAGER」는 140px 이 되어\n * 선이 앞 칸의 가운데를 지나쳐 왼쪽으로 튀어나왔다.\n *\n * grid 로 칸을 균등하게 나눈다. 그러면 앞 칸의 가운데가 정확히 -50% 자리에 있고, 이름이\n * 길든 짧든 선이 흔들리지 않는다. 이름은 자기 칸 안에서 줄바꿈한다.\n */\n ol {\n list-style: none;\n margin: 0;\n padding: 0;\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n align-items: start;\n }\n\n li {\n position: relative;\n min-width: 0;\n padding: 0 4px;\n text-align: center;\n color: var(--ui-faint, #8a959c);\n line-height: 1.3;\n }\n\n li div {\n text-align: center;\n overflow-wrap: anywhere;\n }\n\n /* 단계 번호가 들어가는 동그라미. */\n span {\n display: block;\n width: 15px;\n height: 15px;\n margin: 0 auto 2px;\n border-radius: 50%;\n background-color: var(--ui-line-soft, #e6eaed);\n color: var(--ui-faint, #8a959c);\n font-size: var(--ui-t-micro, 11px);\n line-height: 15px;\n }\n\n /*\n * 앞 칸과 잇는 선. 칸이 균등하므로 앞 칸의 가운데는 -50% 자리다. 동그라미 반지름(7.5px)과\n * 여백을 빼서 동그라미에 닿지 않게 한다.\n */\n span:before {\n content: '';\n position: absolute;\n top: 7px;\n right: calc(50% + 11px);\n left: calc(-50% + 11px);\n height: 2px;\n background-color: var(--ui-line, #d5dce0);\n }\n\n li:first-child span:before {\n display: none;\n }\n\n /*\n * The submitter is where the line starts, not a step in it.\n *\n * It used to carry the number 1, which pushed every approver one place along: the popup read\n * 결재선번 1 for a step the diagram lit up as 2. The server counts what it counts — order is\n * the 1-based position in approvalLine, submitter excluded, references included\n * (worklist/server/controllers/activity-approval/approval-line.ts). The diagram now counts\n * the same thing.\n *\n * A filled dot with no digit: the line starts here, and there is no turn to number.\n */\n [origin] span {\n font-size: 0;\n }\n\n /* 지나온 단계 — 판단이 끝났다. */\n [past] {\n color: var(--ui-muted, #57676f);\n }\n\n [past] span {\n background-color: var(--ui-muted, #57676f);\n color: var(--ui-panel, #ffffff);\n }\n\n /* 지금 차례 — 이 화면에서 가장 강하게 표시되는 자리다. */\n [current] {\n font-weight: 600;\n color: var(--ui-ink, #17242c);\n }\n\n [current] span {\n background-color: var(--ui-accent, #00727e);\n color: var(--ui-on-accent, #ffffff);\n }\n\n [past] span:before,\n [current] span:before {\n background-color: var(--ui-accent, #00727e);\n }\n\n /*\n * 참조 — **결재자가 아니다.** (2026-09-10)\n *\n * 이 컴포넌트가 participation 을 안 읽어서 참조 자리가 **번호를 달고 결재자처럼** 그려지고\n * 있었다. 결재선을 읽는 사람이 세는 것이 바로 그 번호이므로, 참조에 번호가 붙으면 「이 사람도\n * 승인해야 한다」로 읽힌다. 그 오해가 값을 갖는 자리였다 — 서버가 참조의 승인을 거절하게 된\n * 것이 오늘이고(worklist 의 isReferenceOrder), 그 전에는 눌리면 결재가 실제로 한 단계\n * 밀렸다.\n *\n * 형제 컴포넌트가 이미 같은 규칙을 쓴다(approval-line-view — 번호 없는 동그라미 + 자리\n * 이름). 여기만 안 쓰고 있었다. 규칙은 types/approval-line 하나에서 온다.\n *\n * 빈 동그라미로 둔다 — 채우면 「지나갔다」로, 번호를 넣으면 「차례가 있다」로 읽힌다.\n */\n [reference] span {\n background-color: transparent;\n border: 1px dashed var(--ui-line, #d5dce0);\n box-sizing: border-box;\n }\n\n /*\n * The line as it is set, with nobody's turn in it - a catalog of forms, not a request on its way.\n * Every seat reads at the ink colour: faint is how a step that is still to come looks, and here\n * none of them is coming.\n */\n :host([plan]) li {\n color: var(--ui-ink, #17242c);\n }\n\n [reference] em {\n font-style: normal;\n font-size: var(--ui-t-micro, 11px);\n color: var(--ui-faint, #8a959c);\n }\n `\n ]\n\n @property({ type: Array }) model: ApprovalLineItem[] = []\n @property({ type: Number }) current: number = -1\n /**\n * Draw the line as set, with no turn on it. Leaving `current` out is not the same: it means the\n * submitter's turn, which is right for a draft and wrong for a list of forms.\n */\n @property({ type: Boolean, reflect: true }) plan: boolean = false\n\n render() {\n const items = this.model || []\n const current = this.current\n\n return html`\n <ol>\n ${this.model\n ? html` <li approver origin ?current=${!this.plan && this.current <= 0} ?past=${!this.plan && this.current > 0}>\n <span></span>\n <div>${i18next.t('label.Myself')}</div>\n </li>`\n : html``}\n ${items.map((item, order) => this.renderItem(item, order + 1))}\n </ol>\n `\n }\n\n renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n const { type, approver } = item\n const { name } = approver || {\n name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(\n type!\n )\n ? i18next.t(`label.${type}`)\n : ''\n }\n\n /*\n * 참조는 `current` 도 `past` 도 되지 않는다 — 둘 다 **차례가 있는 자리**의 표시다.\n *\n * 참조 자리도 결재선에서 자기 번호를 차지하므로(`order` 는 배열 자리 그대로다), 그 번호가\n * `current` 로 들어올 수 있다. 그러면 「지금 이 사람 차례」로 그려지는데, 참조에게는 차례가\n * 없다. 값은 서버가 정하고 이 컴포넌트는 그 값을 그대로 믿어 왔다.\n */\n const reference = isReferenceStep(item)\n\n return html`\n <li\n approver\n ?reference=${reference}\n ?current=${!this.plan && !reference && this.current == order}\n ?past=${!this.plan && !reference && this.current > order}\n title=${name || ''}\n >\n <span>${reference ? '' : order}</span>\n <div>${name}</div>\n ${reference ? html`<div><em>${i18next.t('label.participation-reference')}</em></div>` : ''}\n </li>\n `\n }\n}\n"]}
|