@things-factory/organization 10.1.4 → 10.1.7
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.
|
@@ -2,6 +2,7 @@ import { __decorate, __metadata } from "tslib";
|
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { i18next, localize } from '@operato/i18n';
|
|
5
|
+
import { isReferenceStep } from '../types/approval-line';
|
|
5
6
|
import { OrgMemberTargetType } from '../types/org-member';
|
|
6
7
|
let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitElement) {
|
|
7
8
|
constructor() {
|
|
@@ -135,6 +136,32 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
135
136
|
[current] span:before {
|
|
136
137
|
background-color: var(--ui-accent, #00727e);
|
|
137
138
|
}
|
|
139
|
+
|
|
140
|
+
/*
|
|
141
|
+
* 참조 — **결재자가 아니다.** (2026-09-10)
|
|
142
|
+
*
|
|
143
|
+
* 이 컴포넌트가 participation 을 안 읽어서 참조 자리가 **번호를 달고 결재자처럼** 그려지고
|
|
144
|
+
* 있었다. 결재선을 읽는 사람이 세는 것이 바로 그 번호이므로, 참조에 번호가 붙으면 「이 사람도
|
|
145
|
+
* 승인해야 한다」로 읽힌다. 그 오해가 값을 갖는 자리였다 — 서버가 참조의 승인을 거절하게 된
|
|
146
|
+
* 것이 오늘이고(worklist 의 isReferenceOrder), 그 전에는 눌리면 결재가 실제로 한 단계
|
|
147
|
+
* 밀렸다.
|
|
148
|
+
*
|
|
149
|
+
* 형제 컴포넌트가 이미 같은 규칙을 쓴다(approval-line-view — 번호 없는 동그라미 + 자리
|
|
150
|
+
* 이름). 여기만 안 쓰고 있었다. 규칙은 types/approval-line 하나에서 온다.
|
|
151
|
+
*
|
|
152
|
+
* 빈 동그라미로 둔다 — 채우면 「지나갔다」로, 번호를 넣으면 「차례가 있다」로 읽힌다.
|
|
153
|
+
*/
|
|
154
|
+
[reference] span {
|
|
155
|
+
background-color: transparent;
|
|
156
|
+
border: 1px dashed var(--ui-line, #d5dce0);
|
|
157
|
+
box-sizing: border-box;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
[reference] em {
|
|
161
|
+
font-style: normal;
|
|
162
|
+
font-size: var(--ui-t-micro, 11px);
|
|
163
|
+
color: var(--ui-faint, #8a959c);
|
|
164
|
+
}
|
|
138
165
|
`
|
|
139
166
|
]; }
|
|
140
167
|
render() {
|
|
@@ -159,10 +186,25 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
|
|
|
159
186
|
? i18next.t(`label.${type}`)
|
|
160
187
|
: ''
|
|
161
188
|
};
|
|
189
|
+
/*
|
|
190
|
+
* 참조는 `current` 도 `past` 도 되지 않는다 — 둘 다 **차례가 있는 자리**의 표시다.
|
|
191
|
+
*
|
|
192
|
+
* 참조 자리도 결재선에서 자기 번호를 차지하므로(`order` 는 배열 자리 그대로다), 그 번호가
|
|
193
|
+
* `current` 로 들어올 수 있다. 그러면 「지금 이 사람 차례」로 그려지는데, 참조에게는 차례가
|
|
194
|
+
* 없다. 값은 서버가 정하고 이 컴포넌트는 그 값을 그대로 믿어 왔다.
|
|
195
|
+
*/
|
|
196
|
+
const reference = isReferenceStep(item);
|
|
162
197
|
return html `
|
|
163
|
-
<li
|
|
164
|
-
|
|
198
|
+
<li
|
|
199
|
+
approver
|
|
200
|
+
?reference=${reference}
|
|
201
|
+
?current=${!reference && this.current == order}
|
|
202
|
+
?past=${!reference && this.current > order}
|
|
203
|
+
title=${name || ''}
|
|
204
|
+
>
|
|
205
|
+
<span>${reference ? '' : order}</span>
|
|
165
206
|
<div>${name}</div>
|
|
207
|
+
${reference ? html `<div><em>${i18next.t('label.participation-reference')}</em></div>` : ''}
|
|
166
208
|
</li>
|
|
167
209
|
`;
|
|
168
210
|
}
|
|
@@ -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;
|
|
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;;QA4JsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAoDlD,CAAC;aAhNQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuJF;KACF,AAzJY,CAyJZ;IAKD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,iCAAiC,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC;;qBAEvE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;kBAC5B;YACR,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAC7G,IAAK,CACN;gBACC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;gBAC5B,CAAC,CAAC,EAAE;SACP,CAAA;QAED;;;;;;WAMG;QACH,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA;;;qBAGM,SAAS;mBACX,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK;gBACtC,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,GAAG,KAAK;gBAClC,IAAI,IAAI,EAAE;;gBAEV,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;eACvB,IAAI;UACT,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;;KAE7F,CAAA;IACH,CAAC;;AApD0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AA7JrC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiN7B","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 [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 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.current <= 0} ?past=${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=${!reference && this.current == order}\n ?past=${!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"]}
|