npm - @things-factory/organization - Versions diffs - 10.0.18 → 10.1.0 - Mend

@things-factory/organization 10.0.18 → 10.1.0

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.

Files changed (78) hide show

package/dist-client/component/approval-line-brief.js CHANGED Viewed

@@ -11,75 +11,129 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
     }
     static { this.styles = [
         css `
+      /*
+       * 결재선 한 줄 요약 — **어디까지 왔고 지금 누구 차례인가.**
+       *
+       * ── 색 띠 위를 전제하고 있었다 (2026-09-06) ────────────────────────
+       * 글자가 rgba(255, 255, 255, 0.7), 이음선이 rgba(0, 0, 0, 0.4) 였다. 이 컴포넌트를
+       * 쓰는 곳은 worklist 의 ribbon 세 곳뿐인데, 그 ribbon 이 채도 높은 색으로 띠를 채우고
+       * 있었기 때문이다. ribbon 이 흰 면으로 바뀌면 이 글자는 보이지 않는다.
+       *
+       * 그래서 자기 색을 갖지 않고 토큰을 쓴다 — 어느 면 위에 놓이든 그 앱의 팔레트를 따른다.
+       *
+       * ── 단계 이름을 자르지 않는다 ─────────────────────────────────────
+       * 폭이 85px 고정이라 QUALITY-MANAGER 가 QUALITY-MA… 로 잘렸다. 결재선에서 읽어야
+       * 하는 것이 바로 그 이름이다. 지금은 칸을 균등하게 나누고 이름은 자기 칸 안에서 줄바꿈한다
+       * (아래 ol 머리말).
+       */
       :host {
         display: block;
+        color: var(--ui-ink, #17242c);
       }
+      /*
+       * ── 칸은 모두 같은 폭이다 (2026-09-06) ─────────────────────────────
+       * 이음선을 자기 폭의 50% 로 옆 칸 가운데까지 늘리는데, 그 계산은 **칸이 모두 같은 폭일
+       * 때만** 맞는다. 내용 폭으로 두었더니 「나」는 28px, 「QUALITY-MANAGER」는 140px 이 되어
+       * 선이 앞 칸의 가운데를 지나쳐 왼쪽으로 튀어나왔다.
+       *
+       * grid 로 칸을 균등하게 나눈다. 그러면 앞 칸의 가운데가 정확히 -50% 자리에 있고, 이름이
+       * 길든 짧든 선이 흔들리지 않는다. 이름은 자기 칸 안에서 줄바꿈한다.
+       */
       ol {
         list-style: none;
         margin: 0;
         padding: 0;
-        display: flex;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        align-items: start;
       }
       li {
         position: relative;
-        width: 85px;
+        min-width: 0;
+        padding: 0 4px;
         text-align: center;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--ui-faint, #8a959c);
+        line-height: 1.3;
       }
       li div {
         text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      span:before {
-        content: '';
-        height: 2px;
-        width: 70px;
-        display: block;
-        position: absolute;
-        margin-left: -70px;
-        margin-top: 6px;
-        background-color: rgba(0, 0, 0, 0.4);
+        overflow-wrap: anywhere;
       }
+      /* 단계 번호가 들어가는 동그라미. */
       span {
         display: block;
         width: 15px;
         height: 15px;
-        margin: auto;
-        background-color: rgba(0, 0, 0, 0.4);
+        margin: 0 auto 2px;
         border-radius: 50%;
-        color: var(--md-sys-color-on-primary);
-        line-height: 1.2;
+        background-color: var(--ui-line-soft, #e6eaed);
+        color: var(--ui-faint, #8a959c);
+        font-size: var(--ui-t-micro, 11px);
+        line-height: 15px;
       }
-      [past] span {
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
+      /*
+       * 앞 칸과 잇는 선. 칸이 균등하므로 앞 칸의 가운데는 -50% 자리다. 동그라미 반지름(7.5px)과
+       * 여백을 빼서 동그라미에 닿지 않게 한다.
+       */
+      span:before {
+        content: '';
+        position: absolute;
+        top: 7px;
+        right: calc(50% + 11px);
+        left: calc(-50% + 11px);
+        height: 2px;
+        background-color: var(--ui-line, #d5dce0);
       }
-      [current] span {
-        background-color: #84d600;
-        color: var(--md-sys-color-on-primary);
+      li:first-child span:before {
+        display: none;
       }
+      /*
+       * The submitter is where the line starts, not a step in it.
+       *
+       * It used to carry the number 1, which pushed every approver one place along: the popup read
+       * 결재선번 1 for a step the diagram lit up as 2. The server counts what it counts — order is
+       * the 1-based position in approvalLine, submitter excluded, references included
+       * (worklist/server/controllers/activity-approval/approval-line.ts). The diagram now counts
+       * the same thing.
+       *
+       * A filled dot with no digit: the line starts here, and there is no turn to number.
+       */
+      [origin] span {
+        font-size: 0;
+      }
+      /* 지나온 단계 — 판단이 끝났다. */
+      [past] {
+        color: var(--ui-muted, #57676f);
+      }
+      [past] span {
+        background-color: var(--ui-muted, #57676f);
+        color: var(--ui-panel, #ffffff);
+      }
+      /* 지금 차례 — 이 화면에서 가장 강하게 표시되는 자리다. */
       [current] {
-        font-weight: bold;
-        color: var(--md-sys-color-on-primary);
+        font-weight: 600;
+        color: var(--ui-ink, #17242c);
       }
-      [past] span:before,
-      [current] span:before {
-        background-color: rgba(255, 255, 255, 0.9);
+      [current] span {
+        background-color: var(--ui-accent, #00727e);
+        color: var(--ui-on-accent, #ffffff);
       }
-      li:first-child span:before {
-        display: none;
+      [past] span:before,
+      [current] span:before {
+        background-color: var(--ui-accent, #00727e);
       }
     `
     ]; }
@@ -89,7 +143,10 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
         return html `
       <ol>
         ${this.model
-            ? html ` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `
+            ? html ` <li approver origin ?current=${this.current <= 0} ?past=${this.current > 0}>
+              <span></span>
+              <div>${i18next.t('label.Myself')}</div>
+            </li>`
             : html ``}
         ${items.map((item, order) => this.renderItem(item, order + 1))}
       </ol>
@@ -104,7 +161,7 @@ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitEle
         };
         return html `
       <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name || ''}>
-        <span>${order + 1}</span>
+        <span>${order}</span>
         <div>${name}</div>
       </li>
     `;

package/dist-client/component/approval-line-brief.js.map CHANGED Viewed

	@@ -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;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;~~QA4EsB~~,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;~~IAiClD~~,CAAC;~~aA7GQ~~,WAAM,GAAG;QACd,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF~~;KACF,~~AAzEY~~,~~CAyEZ~~;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,~~0BAA0B~~,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,~~yBAAyB~~;~~YACpG~~,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,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK~~,GAAG,CAAC~~;~~eACV~~,IAAI;;KAEd,CAAA;IACH,CAAC;;~~AAjC0B~~;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;~~AA7ErC~~,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,~~CA8G7B~~","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 } 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 :host {\n display: block;\n }\n\n ol {\n list-style: none;\n margin: 0;\n padding: 0;\n display: ~~flex~~;\n }\n\n li {\n position: relative;\n width: ~~85px~~;\n text-align: center;\n color: ~~rgba~~(~~255~~, ~~255,~~ ~~255, 0~~.7);\n }\n\n li div {\n text-align: center;\n ~~white-space: nowrap;\n~~ overflow~~: hidden;\n text~~-~~overflow~~: ~~ellipsis~~;\n }\n\n span~~:before~~ {\n ~~content~~: '';\n ~~height~~: ~~2px~~;\n ~~width~~: ~~70px~~;\n ~~display~~: ~~block~~;\n ~~position~~: ~~absolute;\~~n ~~margin~~-~~left~~: -~~70px~~;\n ~~margin-top~~: ~~6px~~;\n ~~background~~-~~color~~: ~~rgba~~(0, ~~0, 0, 0.4~~);\n }\n\n span {\n ~~display~~: ~~block~~;\n ~~width~~: ~~15px~~;\n ~~height~~: ~~15px~~;\n ~~margin~~: ~~auto~~;\n ~~background-color~~: ~~rgba~~(0, 0, ~~0, 0.4~~);\n ~~border-radius~~: ~~50%;\~~n color: var(--md-~~sys-color-on-primary~~);\n ~~line~~-~~height~~: ~~1.2~~;\n }\n\n [~~past~~] span {\n ~~background~~-~~color~~: ~~var(--md-sys-color-surface)~~;\n color: var(--md-~~sys-color-on-surface~~);\n }\n\n [~~current~~] span {\n background-color: #~~84d600~~;\n color: var(--md-~~sys-color-on-primary~~);\n }\n\n [current] {\n font-weight: ~~bold~~;\n color: var(--md-~~sys-color-on-primary~~);\n }\n\n [~~past] span:before,\n [~~current] span~~:before~~ {\n background-color: ~~rgba~~(~~255~~, ~~255,~~ ~~255~~, ~~0.9~~);\n }\n\n li:~~first-child~~ span:before {\n ~~display~~: ~~none~~;\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 ?current=${this.current <= 0} ?past=${this.current > 0}><span~~>1</~~span~~>ME~~</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 return html`\n <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name \|\| ''}>\n <span>${order ~~+ 1~~}</span>\n <div>${name}</div>\n </li>\n `\n }\n}\n"]}
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;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QAkIsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAoClD,CAAC;aAtKQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6HF;KACF,AA/HY,CA+HZ;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,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK;eACN,IAAI;;KAEd,CAAA;IACH,CAAC;;AApC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AAnIrC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAuK7B","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 } 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\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 return html`\n <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name \|\| ''}>\n <span>${order}</span>\n <div>${name}</div>\n </li>\n `\n }\n}\n"]}

package/dist-client/component/approval-line-items-editor-popup.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
 import { LitElement } from 'lit';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
 import { ApprovalLineItem } from '../types/approval-line';

package/dist-client/component/approval-line-items-editor-popup.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { CommonHeaderStyles } from '@operato/styles';
+import { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles';
 import { closePopup } from '@operato/popup';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
@@ -18,7 +20,25 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
     }
     static { this.styles = [
         CommonHeaderStyles,
+        CommonPopupStyles,
         css `
+      /*
+       * 단추 줄은 **제품의 팝업 규약**을 쓴다(CommonPopupStyles 의 .buttons).
+       *
+       * 전에는 손으로 만든 .footer 였고 organization 의 팝업 다섯이 그것을 복사해 갖고 있었다.
+       * 규약이 주는 것을 다 놓쳤다 — 팝업 안 단추의 알약 모서리(담는 카드가 둥그니 그 안도
+       * 둥글다), 마우스와 손가락을 가르는 갈래(손가락에서는 카드 아래 폭을 채우는 액션바가 된다),
+       * 단추 높이 통일.
+       *
+       * 단추는 Material 것으로 쓴다. 규약의 마우스 갈래는 **md-*-button 의 토큰으로만** 모양을
+       * 말한다 — 평범한 button 을 두면 모서리가 0 으로 남는다(실측: 알약이어야 할 자리에 0px).
+       * 제품의 다른 팝업도 같은 관용구다(operato-plant 의 maintenance-dialog).
+       *
+       * 「비우기」는 왼쪽에 둔다 — 되돌리는 것이라 저지르는 것들과 같은 자리에 두지 않는다.
+       */
+      .buttons .left {
+        margin-right: auto;
+      }
       :host {
         display: flex;
         flex-direction: column;
@@ -40,15 +60,13 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
         }}
       ></approval-line-items-editor>
-      <div class="footer">
-        <button @click=${this.onEmpty.bind(this)}>
-          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
-        </button>
-        <div filler></div>
+      <div class="buttons">
+        <md-text-button class="left" @click=${this.onEmpty.bind(this)}>
+          ${i18next.t('button.empty')}
+        </md-text-button>
-        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+        <md-text-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>
+        <md-filled-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-filled-button>
       </div>
     `;
     }

package/dist-client/component/approval-line-items-editor-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"approval-line-items-editor-popup.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;~~AACpD~~,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAGtE;;GAEG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxE;;~~QAsBL~~,wEAAwE;QAChE,iBAAY,GAAwB,IAAI,CAAC,KAAK,CAAA;~~IAmDxD~~,CAAC;~~aAzEQ~~,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA~~;;;;;;;;;;;KAWF~~;KACF,~~AAdY~~,~~CAcZ~~;IAUD,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;kBACT,CAAC,CAAc,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;QACnC,CAAC;;;;~~yBAIgB~~,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;~~sDACM~~,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC~~;;;;;yBAKtD~~,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,~~6BAA6B~~,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;~~yBAC/E~~,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,~~gCAAgC~~,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;~~KAExG~~,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;IAChC,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC;YACnC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;YACvD,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;YACpD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,CAAA;QAEF,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAClD,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC;IACH,CAAC;IAED,QAAQ;QACN,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAE/D,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;~~AAxD0B~~;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2DAA2B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAA8D;AACpD;IAApC,KAAK,CAAC,4BAA4B,CAAC;8BAAU,uBAAuB;IAErE,wEAAwE;;4DAFH;~~AApB1D~~,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,~~CA0ExC~~","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { closePopup } from '@operato/popup'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\nimport { ApprovalLineItemsEditor } from './approval-line-items-editor'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n/*\n 결재선의 각 결재자 리스트를 편집한다.\n /\n@customElement('approval-line-items-editor-popup')\nexport class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n approval-line-items-editor {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) value?: ApprovalLineItem[]\n\n @property({ type: Object }) confirmCallback?: (value?: ApprovalLineItem[] \| null) => void\n @query('approval-line-items-editor') editor!: ApprovalLineItemsEditor\n\n / this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */\n private changedValue?: ApprovalLineItem[] = this.value\n\n render() {\n return html`\n <approval-line-items-editor\n .value=${this.value}\n @change=${(e: CustomEvent) => {\n this.changedValue = [...e.detail]\n }}\n ></approval-line-items-editor>\n\n <div class=\"~~footer~~\">\n <button @click=${this.onEmpty.bind(this)}>\n ~~<md-icon>check_box_outline_blank</md-icon>$~~{i18next.t('button.empty')}\n </button>\n\n <~~div filler></div>\n\n <~~button @click=${this.onCancel.bind(this)}~~><md-icon>cancel</md-icon~~>${i18next.t('button.cancel')}</button>\n <button @click=${this.onConfirm.bind(this)} ~~done><md-icon>done</md-icon~~>${i18next.t('button.confirm')}</button>\n </div>\n `\n }\n\n firstUpdated() {\n this.changedValue = this.value\n }\n\n async onEmpty() {\n const reaction = await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('prompt.sure to empty approval line ?'),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n\n if (reaction) {\n this.confirmCallback && this.confirmCallback(null)\n closePopup(this)\n }\n }\n\n onCancel() {\n closePopup(this)\n }\n\n onConfirm() {\n this.confirmCallback && this.confirmCallback(this.changedValue)\n\n closePopup(this)\n }\n}\n"]}
1	+ {"version":3,"file":"approval-line-items-editor-popup.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/filled-button.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'\nimport { closePopup } from '@operato/popup'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\nimport { ApprovalLineItemsEditor } from './approval-line-items-editor'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n/*\n 결재선의 각 결재자 리스트를 편집한다.\n /\n@customElement('approval-line-items-editor-popup')\nexport class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n CommonPopupStyles,\n css`\n /\n * 단추 줄은 제품의 팝업 규약을 쓴다(CommonPopupStyles 의 .buttons).\n \n 전에는 손으로 만든 .footer 였고 organization 의 팝업 다섯이 그것을 복사해 갖고 있었다.\n * 규약이 주는 것을 다 놓쳤다 — 팝업 안 단추의 알약 모서리(담는 카드가 둥그니 그 안도\n * 둥글다), 마우스와 손가락을 가르는 갈래(손가락에서는 카드 아래 폭을 채우는 액션바가 된다),\n * 단추 높이 통일.\n \n 단추는 Material 것으로 쓴다. 규약의 마우스 갈래는 *md--button 의 토큰으로만** 모양을\n * 말한다 — 평범한 button 을 두면 모서리가 0 으로 남는다(실측: 알약이어야 할 자리에 0px).\n * 제품의 다른 팝업도 같은 관용구다(operato-plant 의 maintenance-dialog).\n \n 「비우기」는 왼쪽에 둔다 — 되돌리는 것이라 저지르는 것들과 같은 자리에 두지 않는다.\n /\n .buttons .left {\n margin-right: auto;\n }\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n approval-line-items-editor {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) value?: ApprovalLineItem[]\n\n @property({ type: Object }) confirmCallback?: (value?: ApprovalLineItem[] \| null) => void\n @query('approval-line-items-editor') editor!: ApprovalLineItemsEditor\n\n / this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */\n private changedValue?: ApprovalLineItem[] = this.value\n\n render() {\n return html`\n <approval-line-items-editor\n .value=${this.value}\n @change=${(e: CustomEvent) => {\n this.changedValue = [...e.detail]\n }}\n ></approval-line-items-editor>\n\n <div class=\"buttons\">\n <md-text-button class=\"left\" @click=${this.onEmpty.bind(this)}>\n ${i18next.t('button.empty')}\n </md-text-button>\n\n <md-text-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>\n <md-filled-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-filled-button>\n </div>\n `\n }\n\n firstUpdated() {\n this.changedValue = this.value\n }\n\n async onEmpty() {\n const reaction = await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('prompt.sure to empty approval line ?'),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n\n if (reaction) {\n this.confirmCallback && this.confirmCallback(null)\n closePopup(this)\n }\n }\n\n onCancel() {\n closePopup(this)\n }\n\n onConfirm() {\n this.confirmCallback && this.confirmCallback(this.changedValue)\n\n closePopup(this)\n }\n}\n"]}

package/dist-client/component/approval-line-items-editor.d.ts CHANGED Viewed

@@ -19,7 +19,13 @@ export declare class ApprovalLineItemsEditor extends ApprovalLineItemsEditor_bas
     firstUpdated(): Promise<void>;
     fetchHandler({ filters, page, limit, sortings }: FetchOption): {
         total: number;
-        records: ApprovalLineItem[];
+        records: {
+            participation: import("../types/approval-line").ApprovalParticipation | undefined;
+            type?: import("..").OrgMemberTargetType;
+            value?: string;
+            approver?: import("..").OrgMemberTarget;
+            notifyAfter?: number;
+        }[];
     };
     deleteDataItems(): Promise<void>;
     openSelector(): void;

package/dist-client/component/approval-line-items-editor.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { isMobileDevice } from '@operato/utils';
 import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles';
 import { openPopup } from '@operato/layout';
 import { ApprovalLineView } from './approval-line-view';
+import { isReferenceStep, storedParticipation } from '../types/approval-line';
 /**
  * 결재선의 각 결재자 리스트를 편집한다.
  */
@@ -47,7 +48,17 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
         @record-change=${e => {
             this.value = (this.grist?._data.records || [])
                 .map(v => {
-                return { type: v.type, approver: v.approver };
+                /*
+                 * 여기서 고른 칸만 저장된다. 칸을 더하고 이 줄을 안 고치면 **화면에서는 고쳐지는데
+                 * 저장이 안 된다** — 오류도 나지 않는다.
+                 */
+                return {
+                    type: v.type,
+                    approver: v.approver,
+                    participation: storedParticipation(v),
+                    /* 빈 글자와 0 을 가른다. 0 은 「상신 즉시」와 같은 뜻이라 비운다. */
+                    notifyAfter: v.notifyAfter ? Number(v.notifyAfter) : undefined
+                };
             })
                 .filter(v => v.type);
             this.dispatchEvent(new CustomEvent('change', {
@@ -74,7 +85,7 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
     async firstUpdated() {
         this.gristConfig = {
             list: {
-                fields: ['type', 'approver']
+                fields: ['type', 'approver', 'participation']
             },
             columns: [
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
@@ -105,6 +116,53 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
                     },
                     width: 140
                 },
+                {
+                    /*
+                     * 어떤 자격으로 서는가 — 결재냐 참조냐.
+                     *
+                     * 빈 값이 「결재」다. 지금 도는 결재선에는 이 칸이 없어서, 그 항목들이 전부 결재자로 읽혀야
+                     * 거동이 안 바뀐다. 그래서 옵션의 첫 자리를 빈 값으로 두고 그 문구를 「결재」로 그린다 —
+                     * 사용자에게는 비어 있음이 보이지 않고 「결재」로 보인다.
+                     */
+                    type: 'select',
+                    name: 'participation',
+                    header: i18next.t('field.participation'),
+                    record: {
+                        editable: true,
+                        options: [
+                            { display: i18next.t('label.participation-approval'), value: '' },
+                            { display: i18next.t('label.participation-reference'), value: 'reference' }
+                        ]
+                    },
+                    width: 100
+                },
+                {
+                    /*
+                     * 참조에게 언제 알리나.
+                     *
+                     * 결재자에게는 뜻이 없다 — 자기 차례가 곧 시점이다. 그래서 결재 항목에서는 고칠 수 없게 두고,
+                     * 그 자리에 「참조에만 씁니다」를 적는다. 빈 칸으로 두면 「안 정했다」로 읽힌다.
+                     *
+                     * 비면 「상신 즉시」다. 가장 일찍 알리는 쪽이 안 정한 사람에게 안전하다 — 늦게 알리면 의견 낼
+                     * 기회가 줄고, 마지막 결재 뒤라면 기회가 아예 없다.
+                     */
+                    type: 'integer',
+                    name: 'notifyAfter',
+                    header: i18next.t('field.notify-after'),
+                    record: {
+                        editable: (value, record) => isReferenceStep(record),
+                        align: 'left',
+                        renderer: (value, column, record) => {
+                            if (!isReferenceStep(record)) {
+                                return html `<span class="none">${i18next.t('text.notify-after-only-reference')}</span>`;
+                            }
+                            return value
+                                ? html `${i18next.t('text.notify-after-nth', { n: value })}`
+                                : html `<span class="quiet">${i18next.t('text.notify-immediately')}</span>`;
+                        }
+                    },
+                    width: 130
+                },
                 {
                     type: 'resource-object',
                     name: 'approver',
@@ -251,7 +309,13 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
         };
     }
     fetchHandler({ filters, page, limit, sortings = [] }) {
-        const value = [...(this.value || [])];
+        /*
+         * Rows come straight from the API, where participation is spelled `Reference` — type-graphql
+         * publishes a registered enum by its key. The select below matches its options by string, so
+         * that spelling matches neither `''` nor `'reference'` and the row draws as an approver. Fixed
+         * here rather than in the column, because grist compares the record's own value.
+         */
+        const value = (this.value || []).map(item => ({ ...item, participation: storedParticipation(item) }));
         this.value = value;
         return {
             total: value.length,

package/dist-client/component/approval-line-items-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"approval-line-items-editor.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import './approval-line-view'\nimport './approval-line-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\nimport { ApprovalLineView } from './approval-line-view'\nimport { ApprovalLine, ApprovalLineItem } from '../types/approval-line'\n\n/*\n 결재선의 각 결재자 리스트를 편집한다.\n /\n@customElement('approval-line-items-editor')\nexport class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n approval-line-view {\n min-height: 100px;\n }\n\n ox-grist {\n flex: 1;\n }\n\n .header {\n grid-template-areas: 'filters actions';\n }\n `\n ]\n\n @property({ type: Array }) value?: ApprovalLineItem[]\n\n @state() gristConfig?: any\n\n @query('ox-grist') grist?: DataGrist\n @query('approval-line-view') view?: ApprovalLineView\n\n private popup?: PopupHandle\n\n render() {\n return html`\n <approval-line-view .model=${this.value}></approval-line-view>\n <ox-grist\n .mode=${isMobileDevice() ? 'CARD' : 'GRID'}\n .config=${this.gristConfig}\n .fetchHandler=${this.fetchHandler.bind(this)}\n @record-change=${e => {\n this.value = ((this.grist as any)?._data.records \|\| [])\n .map(v => {\n return { type: v.type, approver: v.approver }\n })\n .filter(v => v.type)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"actions\">\n <button @click=${this.openSelector.bind(this)}>\n <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}\n </button>\n\n <button danger @click=${() => this.deleteDataItems()}>\n <md-icon>delete</md-icon>${i18next.t('button.delete')}\n </button>\n </div>\n </div>\n </ox-grist>\n `\n }\n\n async firstUpdated() {\n this.gristConfig = {\n list: {\n fields: ['type', 'approver']\n },\n columns: [\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_upward',\n handlers: {\n click: 'move-up'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'select',\n name: 'type',\n header: i18next.t('field.type'),\n record: {\n editable: true,\n options: ['', 'Employee', 'Department', 'Role', 'MyDepartment', 'MySupervisor', 'Myself']\n },\n width: 140\n },\n {\n type: 'resource-object',\n name: 'approver',\n header: i18next.t('field.approver'),\n record: {\n editable: true,\n editor: function (value, column, record, rowIndex, field) {\n var options = {}\n switch (record.type) {\n case 'Employee':\n options = {\n title: i18next.t('title.employee list'),\n pagination: { pages: [50, 100, 200] },\n basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },\n queryName: 'employees',\n columns: [\n { name: 'id', hidden: true },\n {\n name: 'controlNo',\n width: 120,\n header: { renderer: () => i18next.t('field.control-no') },\n filter: 'search',\n sortable: true\n },\n {\n name: 'name',\n width: 120,\n header: { renderer: () => i18next.t('field.name') },\n filter: 'search',\n sortable: true\n },\n {\n name: 'alias',\n width: 150,\n header: { renderer: () => i18next.t('label.alias') },\n filter: 'search',\n sortable: true\n },\n {\n type: 'code',\n name: 'type',\n width: 110,\n header: { renderer: () => i18next.t('label.type') },\n record: {\n editable: false,\n codeName: 'EMPLOYEE_TYPE'\n }\n },\n {\n type: 'code',\n name: 'jobPosition',\n width: 110,\n header: { renderer: () => i18next.t('label.job-position') },\n record: {\n editable: false,\n codeName: 'JOB_POSITION'\n }\n },\n {\n type: 'code',\n name: 'jobResponsibility',\n width: 200,\n header: { renderer: () => i18next.t('label.job-responsibility') },\n record: {\n editable: false,\n codeName: 'JOB_RESPONSIBILITY'\n }\n },\n {\n type: 'date',\n name: 'hiredOn',\n header: { renderer: () => i18next.t('field.hired-on') },\n width: 100\n }\n ],\n list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Department':\n options = {\n title: i18next.t('title.department list'),\n queryName: 'departments',\n columns: [\n { name: 'id', hidden: true },\n {\n name: 'controlNo',\n header: { renderer: () => i18next.t('field.control-no') },\n filter: 'search'\n },\n { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }\n ],\n list: { fields: ['name', 'control-no'] },\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Role':\n options = {\n title: i18next.t('title.lookup role'),\n queryName: 'roles'\n }\n break\n default:\n return null\n }\n\n var dynamicRecord = { ...column.record, options }\n\n return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n },\n renderer: function (value, column, record, rowIndex, field) {\n var options = {}\n switch (record.type) {\n case 'Employee':\n options = {\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Department':\n case 'Role':\n default:\n break\n }\n\n var dynamicRecord = { ...column.record, options }\n\n return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n }\n },\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n pagination: {\n infinite: true\n },\n sorters: []\n }\n }\n\n fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n const value = [...(this.value \|\| [])]\n this.value = value\n\n return {\n total: value.length,\n records: value\n }\n }\n\n async deleteDataItems() {\n this.grist?.deleteSelectedRecords(false)\n }\n\n openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n const confirmCallback = async (selected?: ApprovalLine) => {\n this.value = [...(selected?.model \|\| [])]\n\n this.grist!.fetch()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n this.popup = openPopup(\n html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,\n {\n backdrop: true,\n size: 'large',\n search: {\n placeholder: i18next.t('title.approval-line template list'),\n handler: (instance: any, value: any) => {\n / instance: template instance */\n instance.searchText(value)\n }\n }\n }\n )\n }\n}\n"]}
1	+ {"version":3,"file":"approval-line-items-editor.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import './approval-line-view'\nimport './approval-line-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\nimport { ApprovalLineView } from './approval-line-view'\nimport { ApprovalLine, ApprovalLineItem, isReferenceStep, storedParticipation } from '../types/approval-line'\n\n/*\n 결재선의 각 결재자 리스트를 편집한다.\n /\n@customElement('approval-line-items-editor')\nexport class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n approval-line-view {\n min-height: 100px;\n }\n\n ox-grist {\n flex: 1;\n }\n\n .header {\n grid-template-areas: 'filters actions';\n }\n `\n ]\n\n @property({ type: Array }) value?: ApprovalLineItem[]\n\n @state() gristConfig?: any\n\n @query('ox-grist') grist?: DataGrist\n @query('approval-line-view') view?: ApprovalLineView\n\n private popup?: PopupHandle\n\n render() {\n return html`\n <approval-line-view .model=${this.value}></approval-line-view>\n <ox-grist\n .mode=${isMobileDevice() ? 'CARD' : 'GRID'}\n .config=${this.gristConfig}\n .fetchHandler=${this.fetchHandler.bind(this)}\n @record-change=${e => {\n this.value = ((this.grist as any)?._data.records \|\| [])\n .map(v => {\n /\n * 여기서 고른 칸만 저장된다. 칸을 더하고 이 줄을 안 고치면 *화면에서는 고쳐지는데\n 저장이 안 된다** — 오류도 나지 않는다.\n /\n return {\n type: v.type,\n approver: v.approver,\n participation: storedParticipation(v),\n / 빈 글자와 0 을 가른다. 0 은 「상신 즉시」와 같은 뜻이라 비운다. /\n notifyAfter: v.notifyAfter ? Number(v.notifyAfter) : undefined\n }\n })\n .filter(v => v.type)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"actions\">\n <button @click=${this.openSelector.bind(this)}>\n <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}\n </button>\n\n <button danger @click=${() => this.deleteDataItems()}>\n <md-icon>delete</md-icon>${i18next.t('button.delete')}\n </button>\n </div>\n </div>\n </ox-grist>\n `\n }\n\n async firstUpdated() {\n this.gristConfig = {\n list: {\n fields: ['type', 'approver', 'participation']\n },\n columns: [\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_upward',\n handlers: {\n click: 'move-up'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'select',\n name: 'type',\n header: i18next.t('field.type'),\n record: {\n editable: true,\n options: ['', 'Employee', 'Department', 'Role', 'MyDepartment', 'MySupervisor', 'Myself']\n },\n width: 140\n },\n {\n /\n * 어떤 자격으로 서는가 — 결재냐 참조냐.\n \n 빈 값이 「결재」다. 지금 도는 결재선에는 이 칸이 없어서, 그 항목들이 전부 결재자로 읽혀야\n * 거동이 안 바뀐다. 그래서 옵션의 첫 자리를 빈 값으로 두고 그 문구를 「결재」로 그린다 —\n * 사용자에게는 비어 있음이 보이지 않고 「결재」로 보인다.\n /\n type: 'select',\n name: 'participation',\n header: i18next.t('field.participation'),\n record: {\n editable: true,\n options: [\n { display: i18next.t('label.participation-approval'), value: '' },\n { display: i18next.t('label.participation-reference'), value: 'reference' }\n ]\n },\n width: 100\n },\n {\n /\n * 참조에게 언제 알리나.\n \n 결재자에게는 뜻이 없다 — 자기 차례가 곧 시점이다. 그래서 결재 항목에서는 고칠 수 없게 두고,\n * 그 자리에 「참조에만 씁니다」를 적는다. 빈 칸으로 두면 「안 정했다」로 읽힌다.\n \n 비면 「상신 즉시」다. 가장 일찍 알리는 쪽이 안 정한 사람에게 안전하다 — 늦게 알리면 의견 낼\n * 기회가 줄고, 마지막 결재 뒤라면 기회가 아예 없다.\n /\n type: 'integer',\n name: 'notifyAfter',\n header: i18next.t('field.notify-after'),\n record: {\n editable: (value: any, record: any) => isReferenceStep(record),\n align: 'left',\n renderer: (value: any, column: any, record: any) => {\n if (!isReferenceStep(record)) {\n return html`<span class=\"none\">${i18next.t('text.notify-after-only-reference')}</span>`\n }\n\n return value\n ? html`${i18next.t('text.notify-after-nth', { n: value })}`\n : html`<span class=\"quiet\">${i18next.t('text.notify-immediately')}</span>`\n }\n },\n width: 130\n },\n {\n type: 'resource-object',\n name: 'approver',\n header: i18next.t('field.approver'),\n record: {\n editable: true,\n editor: function (value, column, record, rowIndex, field) {\n var options = {}\n switch (record.type) {\n case 'Employee':\n options = {\n title: i18next.t('title.employee list'),\n pagination: { pages: [50, 100, 200] },\n basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },\n queryName: 'employees',\n columns: [\n { name: 'id', hidden: true },\n {\n name: 'controlNo',\n width: 120,\n header: { renderer: () => i18next.t('field.control-no') },\n filter: 'search',\n sortable: true\n },\n {\n name: 'name',\n width: 120,\n header: { renderer: () => i18next.t('field.name') },\n filter: 'search',\n sortable: true\n },\n {\n name: 'alias',\n width: 150,\n header: { renderer: () => i18next.t('label.alias') },\n filter: 'search',\n sortable: true\n },\n {\n type: 'code',\n name: 'type',\n width: 110,\n header: { renderer: () => i18next.t('label.type') },\n record: {\n editable: false,\n codeName: 'EMPLOYEE_TYPE'\n }\n },\n {\n type: 'code',\n name: 'jobPosition',\n width: 110,\n header: { renderer: () => i18next.t('label.job-position') },\n record: {\n editable: false,\n codeName: 'JOB_POSITION'\n }\n },\n {\n type: 'code',\n name: 'jobResponsibility',\n width: 200,\n header: { renderer: () => i18next.t('label.job-responsibility') },\n record: {\n editable: false,\n codeName: 'JOB_RESPONSIBILITY'\n }\n },\n {\n type: 'date',\n name: 'hiredOn',\n header: { renderer: () => i18next.t('field.hired-on') },\n width: 100\n }\n ],\n list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Department':\n options = {\n title: i18next.t('title.department list'),\n queryName: 'departments',\n columns: [\n { name: 'id', hidden: true },\n {\n name: 'controlNo',\n header: { renderer: () => i18next.t('field.control-no') },\n filter: 'search'\n },\n { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }\n ],\n list: { fields: ['name', 'control-no'] },\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Role':\n options = {\n title: i18next.t('title.lookup role'),\n queryName: 'roles'\n }\n break\n default:\n return null\n }\n\n var dynamicRecord = { ...column.record, options }\n\n return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n },\n renderer: function (value, column, record, rowIndex, field) {\n var options = {}\n switch (record.type) {\n case 'Employee':\n options = {\n valueField: 'id',\n nameField: 'name',\n descriptionField: 'controlNo'\n }\n break\n case 'Department':\n case 'Role':\n default:\n break\n }\n\n var dynamicRecord = { ...column.record, options }\n\n return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n }\n },\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n }\n },\n pagination: {\n infinite: true\n },\n sorters: []\n }\n }\n\n fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n /\n * Rows come straight from the API, where participation is spelled `Reference` — type-graphql\n * publishes a registered enum by its key. The select below matches its options by string, so\n * that spelling matches neither `''` nor `'reference'` and the row draws as an approver. Fixed\n * here rather than in the column, because grist compares the record's own value.\n /\n const value = (this.value \|\| []).map(item => ({ ...item, participation: storedParticipation(item) }))\n this.value = value\n\n return {\n total: value.length,\n records: value\n }\n }\n\n async deleteDataItems() {\n this.grist?.deleteSelectedRecords(false)\n }\n\n openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n const confirmCallback = async (selected?: ApprovalLine) => {\n this.value = [...(selected?.model \|\| [])]\n\n this.grist!.fetch()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n this.popup = openPopup(\n html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,\n {\n backdrop: true,\n size: 'large',\n search: {\n placeholder: i18next.t('title.approval-line template list'),\n handler: (instance: any, value: any) => {\n / instance: template instance */\n instance.searchText(value)\n }\n }\n }\n )\n }\n}\n"]}

package/dist-client/component/approval-line-selector.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
 import '@operato/data-grist';
 import './approval-line-view';
 import { LitElement } from 'lit';