npm - @things-factory/worklist - Versions diffs - 10.0.19 → 10.1.1 - Mend

@things-factory/worklist 10.0.19 → 10.1.1

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 (215) hide show

package/dist-client/route.js CHANGED Viewed

@@ -1,11 +1,5 @@
 export default function route(page) {
     switch (page) {
-        case 'worklist-home':
-            import('./pages/worklist-home.js');
-            return page;
-        case 'worklist-dashboard':
-            import('./pages/dashboard/dashboard-home.js');
-            return page;
         case 'done-list-calendar':
             import('./pages/todo/done-list-calendar-page.js');
             return page;

package/dist-client/route.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,~~eAAe;YAClB,MAAM,CAAC,0BAA0B,CAAC,CAAA;YAClC,OAAO,IAAI,CAAA;QAEb,KAAK,~~oBAAoB;YACvB,MAAM,CAAC,~~qCAAqC,CAAC,CAAA;YAC7C,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,~~yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,uBAAuB;YAC1B,MAAM,CAAC,4CAA4C,CAAC,CAAA;YACpD,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,YAAY;YACf,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,oCAAoC,CAAC,CAAA;YAC5C,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,uCAAuC,CAAC,CAAA;YAC/C,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,wCAAwC,CAAC,CAAA;YAChD,OAAO,IAAI,CAAA;QAEb,KAAK,UAAU;YACb,MAAM,CAAC,mCAAmC,CAAC,CAAA;YAC3C,OAAO,IAAI,CAAA;QAEb,KAAK,yBAAyB;YAC5B,MAAM,CAAC,2DAA2D,CAAC,CAAA;YACnE,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,mBAAmB;YACtB,MAAM,CAAC,qDAAqD,CAAC,CAAA;YAC7D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,0BAA0B;YAC7B,MAAM,CAAC,4DAA4D,CAAC,CAAA;YACpE,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,uDAAuD,CAAC,CAAA;YAC/D,OAAO,IAAI,CAAA;QAEb,KAAK,2BAA2B;YAC9B,MAAM,CAAC,6DAA6D,CAAC,CAAA;YACrE,OAAO,IAAI,CAAA;QAEb,KAAK,qBAAqB;YACxB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n switch (page) {\n case '~~worklist-home':\n import('./pages/worklist-home.js')\n return page\n\n case 'worklist-dashboard':\n import('./pages/dashboard/dashboard-home.js')\n return page\n\n case '~~done-list-calendar':\n import('./pages/todo/done-list-calendar-page.js')\n return page\n\n case 'todo-list':\n import('./pages/todo/todo-list-page.js')\n return page\n\n case 'done-list':\n import('./pages/todo/done-list-page.js')\n return page\n\n case 'approval-pending-list':\n import('./pages/todo/approval-pending-list-page.js')\n return page\n\n case 'approval-done-list':\n import('./pages/todo/approval-done-list-page.js')\n return page\n\n case 'draft-list':\n import('./pages/todo/draft-list-page.js')\n return page\n\n case 'pickable-list':\n import('./pages/todo/pickable-list-page.js')\n return page\n\n case 'starter-list':\n import('./pages/activity/starter-list-page.js')\n return page\n\n case 'reporter-list':\n import('./pages/activity-supervisor/reporter-list-page.js')\n return page\n\n case 'activity-list':\n import('./pages/activity/activity-list-page.js')\n return page\n\n case 'activity':\n import('./pages/activity/activity-page.js')\n return page\n\n case 'activity-instance-start':\n import('./pages/activity-instance/activity-instance-start-page.js')\n return page\n\n case 'activity-thread':\n import('./pages/activity-thread/activity-thread-page.js')\n return page\n\n case 'activity-thread-view':\n import('./pages/activity-thread/activity-thread-view-page.js')\n return page\n\n case 'activity-approval':\n import('./pages/activity-approval/activity-approval-page.js')\n return page\n\n case 'activity-instance-list':\n import('./pages/activity-instance/activity-instance-list-page.js')\n return page\n\n case 'activity-instance-search':\n import('./pages/activity-instance/activity-instance-search-page.js')\n return page\n\n case 'activity-template-list':\n import('./pages/activity-template/activity-template-list-page.js')\n return page\n\n case 'activity-store':\n import('./pages/activity-store/activity-store-page.js')\n return page\n\n case 'activity-thread-list':\n import('./pages/activity-thread/activity-thread-list-page.js')\n return page\n\n case 'activity-approval-list':\n import('./pages/activity-approval/activity-approval-list-page')\n return page\n\n case 'installable-activity-list':\n import('./pages/installable-activity/installable-activity-list-page')\n return page\n\n case 'activity-stats-list':\n import('./pages/activity-stats/activity-stats-list-page')\n return page\n }\n}\n"]}
1	+ {"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,oBAAoB;YACvB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,uBAAuB;YAC1B,MAAM,CAAC,4CAA4C,CAAC,CAAA;YACpD,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,YAAY;YACf,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,oCAAoC,CAAC,CAAA;YAC5C,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,uCAAuC,CAAC,CAAA;YAC/C,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,wCAAwC,CAAC,CAAA;YAChD,OAAO,IAAI,CAAA;QAEb,KAAK,UAAU;YACb,MAAM,CAAC,mCAAmC,CAAC,CAAA;YAC3C,OAAO,IAAI,CAAA;QAEb,KAAK,yBAAyB;YAC5B,MAAM,CAAC,2DAA2D,CAAC,CAAA;YACnE,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,mBAAmB;YACtB,MAAM,CAAC,qDAAqD,CAAC,CAAA;YAC7D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,0BAA0B;YAC7B,MAAM,CAAC,4DAA4D,CAAC,CAAA;YACpE,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,uDAAuD,CAAC,CAAA;YAC/D,OAAO,IAAI,CAAA;QAEb,KAAK,2BAA2B;YAC9B,MAAM,CAAC,6DAA6D,CAAC,CAAA;YACrE,OAAO,IAAI,CAAA;QAEb,KAAK,qBAAqB;YACxB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n switch (page) {\n case 'done-list-calendar':\n import('./pages/todo/done-list-calendar-page.js')\n return page\n\n case 'todo-list':\n import('./pages/todo/todo-list-page.js')\n return page\n\n case 'done-list':\n import('./pages/todo/done-list-page.js')\n return page\n\n case 'approval-pending-list':\n import('./pages/todo/approval-pending-list-page.js')\n return page\n\n case 'approval-done-list':\n import('./pages/todo/approval-done-list-page.js')\n return page\n\n case 'draft-list':\n import('./pages/todo/draft-list-page.js')\n return page\n\n case 'pickable-list':\n import('./pages/todo/pickable-list-page.js')\n return page\n\n case 'starter-list':\n import('./pages/activity/starter-list-page.js')\n return page\n\n case 'reporter-list':\n import('./pages/activity-supervisor/reporter-list-page.js')\n return page\n\n case 'activity-list':\n import('./pages/activity/activity-list-page.js')\n return page\n\n case 'activity':\n import('./pages/activity/activity-page.js')\n return page\n\n case 'activity-instance-start':\n import('./pages/activity-instance/activity-instance-start-page.js')\n return page\n\n case 'activity-thread':\n import('./pages/activity-thread/activity-thread-page.js')\n return page\n\n case 'activity-thread-view':\n import('./pages/activity-thread/activity-thread-view-page.js')\n return page\n\n case 'activity-approval':\n import('./pages/activity-approval/activity-approval-page.js')\n return page\n\n case 'activity-instance-list':\n import('./pages/activity-instance/activity-instance-list-page.js')\n return page\n\n case 'activity-instance-search':\n import('./pages/activity-instance/activity-instance-search-page.js')\n return page\n\n case 'activity-template-list':\n import('./pages/activity-template/activity-template-list-page.js')\n return page\n\n case 'activity-store':\n import('./pages/activity-store/activity-store-page.js')\n return page\n\n case 'activity-thread-list':\n import('./pages/activity-thread/activity-thread-list-page.js')\n return page\n\n case 'activity-approval-list':\n import('./pages/activity-approval/activity-approval-list-page')\n return page\n\n case 'installable-activity-list':\n import('./pages/installable-activity/installable-activity-list-page')\n return page\n\n case 'activity-stats-list':\n import('./pages/activity-stats/activity-stats-list-page')\n return page\n }\n}\n"]}

package/dist-client/templates/activity-approval-context-template.js CHANGED Viewed

@@ -1,168 +1,90 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '../components/activity-thread-timeline';
-import { html, css, LitElement, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
 import { RouteController } from '@operato/shell';
 import { i18next } from '@operato/i18n';
+import { ContextPanelStyles, valueCell, whenCell } from './context-panel.js';
 import '@things-factory/organization/dist-client/component/approval-line-view.js';
-function getSafeFormatter(locale, options) {
-    try {
-        const safeLocale = locale || 'en-US';
-        return new Intl.DateTimeFormat(safeLocale, options);
-    }
-    catch (e) {
-        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
-        return new Intl.DateTimeFormat('en-US', options);
+/**
+ * Who judged this step.
+ *
+ * An empty approver on a step nobody has reached is a state, not a missing value. The row used to
+ * fall through to the generic 「값 없음」, which covers "there is none, or the screen could not fetch
+ * it" — on a step that is simply waiting, that reads as a defect. Steps chosen by role have no
+ * person until someone acts, so every pending approval showed it.
+ *
+ * The role is not named here. The diagram two inches above already lights up the waiting step and
+ * labels it 역할; repeating it in this row says the same thing twice.
+ *
+ * Once a judgment exists the approver is a real person, and an empty one there would be a genuine
+ * gap — so that case keeps the generic fallback.
+ */
+function approverCell(name, judgment) {
+    if (name || judgment) {
+        return valueCell(name);
     }
+    return html `<span class="none">${i18next.t('text.approver-not-yet')}</span>`;
 }
-const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityApprovalContextTemplate = class ActivityApprovalContextTemplate extends LitElement {
     constructor() {
         super(...arguments);
         this._routeCtrl = new RouteController(this);
     }
-    static { this.styles = [
-        ContextToolbarOverlayStyle,
-        css `
-      :host {
-        background-color: var(--md-sys-color-surface);
-        width: 100%;
-        min-width: 450px;
-        max-height: 100%;
-        overflow: auto;
-        --context-ui-padding: 0;
-      }
-      :host([state='assigned']) {
-        --worklist-status-color: #5f7184;
-      }
-      :host([state='started']) {
-        --worklist-status-color: #56af45;
-      }
-      :host([state='delegated']) {
-        --worklist-status-color: #8654b0;
-      }
-      :host([state='submitted']) {
-        --worklist-status-color: #428df3;
-      }
-      :host([state='escalated']) {
-        --worklist-status-color: #595de5;
-      }
-      :host([state='rejected']) {
-        --worklist-status-color: #f27429;
-      }
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-      [info],
-      [assignees] {
-        padding: var(--spacing-medium);
-        border-bottom: var(--border-dim-color);
-        color: var(--md-sys-color-secondary);
-      }
-      [info] div {
-        display: flex;
-        align-items: center;
-        padding: var(--spacing-small);
-        border-radius: var(--border-radius);
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-      [info] div:nth-child(odd) {
-        background-color: var(--md-sys-color-background);
-      }
-      [info] label {
-        display: inline-block;
-        width: 25%;
-        text-align: right;
-        margin-right: 20px;
-      }
-      [info] span {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        border-radius: 50%;
-      }
-      :host:before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: 22px solid transparent;
-        border-left-color: var(--worklist-status-color);
-        border-right: 0;
-      }
-      activity-thread-timeline {
-        margin: var(--spacing-medium);
-      }
-      [thumbnail] {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: var(--spacing-medium);
-      }
-      img {
-        max-width: 85%;
-        height: auto;
-      }
-    `
-    ]; }
+    static { this.styles = [ContextToolbarOverlayStyle, ContextPanelStyles]; }
     render() {
         const activityApproval = this._routeCtrl.context.activityApproval || this.activityApproval || {};
-        const { round, order, approver, createdAt, activityThread } = activityApproval || {};
+        const { round, order, approver, judgment, createdAt, activityThread } = activityApproval || {};
         const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
         const { name, description, thumbnail, approvalLine } = activityInstance || {};
         return html `
       <div flow>
         <div approval-line>
-          ${approvalLine ? html ` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html ``}
+          <!-- 이 결재 줄의 순번이 곧 지금 단계다 — ribbon 과 같은 값을 쓴다. -->
+          ${approvalLine
+            ? html `<approval-line-view .model=${approvalLine} .current=${order}></approval-line-view>`
+            : html ``}
         </div>
       </div>
-      <div info>
-        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
-        <div><label>${i18next.t('field.description')}</label> ${description}</div>
-        <div>
-          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
-            >${i18next.t('label.activity-state-' + state)}</strong
-          >
-        </div>
-        <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>
-        <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>
-        <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>
-        <div><label>${i18next.t('field.approver')}</label> <strong>${approver?.name}</strong></div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
-        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>
-      </div>
+      <dl class="given">
+        <!-- 차수는 1일 때 적지 않는다. 2차 이상일 때만 「되돌아왔다」는 사실이 된다. -->
+        ${Number(round) > 1
+            ? html `
+              <dt>${i18next.t('field.round')}</dt>
+              <dd class="strong">${round}</dd>
+            `
+            : nothing}
+        <dt>${i18next.t('field.approval-order')}</dt>
+        <dd class="strong">${valueCell(order)}</dd>
+        <dt>${i18next.t('field.wl-owner')}</dt>
+        <dd class="strong">${valueCell(assignee?.name)}</dd>
+        <dt>${i18next.t('field.approver')}</dt>
+        <dd class="strong">${approverCell(approver?.name, judgment)}</dd>
+        <dt>${i18next.t('field.assigned-at')}</dt>
+        <dd>${whenCell(assignedAt)}</dd>
+        <dt>${i18next.t('field.due-at')}</dt>
+        <dd>${whenCell(dueAt)}</dd>
+        <!-- 전에는 라벨이 since 였다 — 다섯 언어를 갖춘 화면에 영문 한 낱말이 박혀 있었다. -->
+        <dt>${i18next.t('field.approval-submitted-at')}</dt>
+        <dd>${whenCell(createdAt)}</dd>
+      </dl>
       ${activityApprovals && activityApprovals.length > 0
-            ? html ` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `
+            ? html ` <!--
+        팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로
+        (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.
+        그리고 여기서 이력은 보조가 아니다 — 이 판을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.
+      -->
+      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline> `
             : nothing}
       ${thumbnail
             ? html ` <div thumbnail>

package/dist-client/templates/activity-approval-context-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,wCAAwC,CAAA;AAE/C,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,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,~~0EAA0E~~,~~CAAA;AAEjF~~,SAAS,~~gBAAgB~~,~~CAAC~~,~~MAAc,~~EAAE,~~OAAmC;IAC3E,IAAI,CAAC;QACH,~~MAAM,~~UAAU~~,~~GAAG,MAAM,IAAI,OAAO,~~CAAA;~~QACpC~~,OAAO,~~IAAI~~,~~IAAI~~,~~CAAC~~,~~cAAc~~,CAAC,~~UAAU~~,EAAE,~~OAAO~~,~~CAAC~~,~~CAAA;IACrD~~,~~CAAC;IAAC~~,~~OAAO~~,~~CAAC,~~EAAE,CAAC;~~QACX~~,OAAO,CAAC,IAAI,CAAC,~~uCAAuC~~,~~MAAM,kCAAkC,EAAE,~~CAAC~~,CAAC,CAAA~~;~~QAChG~~,OAAO,IAAI,~~IAAI~~,~~CAAC~~,~~cAAc,CAAC,~~OAAO,~~EAAE,OAAO,~~CAAC,~~CAAA;IAClD,~~CAAC~~;AACH~~,CAAC~~;AAED~~,~~MAAM~~,~~SAAS,GAAG,gBAAgB,~~CAAC,SAAS,~~CAAC~~,~~QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,~~CAAC~~,CAAA~~;~~AAEjG~~,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,UAAU;IAAxD;;~~QA+GU~~,eAAU,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;~~IA8ChD~~,CAAC;~~aA5JQ~~,WAAM,GAAG~~;QACd~~,0BAA0B~~;QAC1B~~,~~GAAG~~,~~CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGF;KACF~~,~~AA1GY~~,~~CA0GZ~~;~~IAMD~~,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAEhG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;~~QACpF~~,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,cAAc,IAAI,EAAE,CAAA;QACxG,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA~~;;;YAGH~~,YAAY,CAAC,CAAC,~~CAAC,~~IAAI,CAAA~~,+BAA+B~~,YAAY,~~yBAAyB~~,~~CAAC~~,CAAC,CAAC,IAAI,CAAA,EAAE~~;;;;;sBAKtF~~,~~OAAO~~,CAAC,~~CAAC~~,CAAC,~~YAAY~~,CAAC~~,oBAAoB,IAAI~~;~~sBAC/C~~,~~OAAO,~~CAAC,CAAC,~~CAAC~~,~~mBAAmB~~,~~CAAC,YAAY,WAAW;;mBAExD,~~OAAO,CAAC,CAAC,CAAC,~~cAAc~~,CAAC;~~eAC7B~~,~~OAAO~~,CAAC,CAAC,~~CAAC~~,~~uBAAuB,GAAG,KAAK,CAAC;;;sBAGnC,~~OAAO,CAAC,CAAC,CAAC,~~aAAa~~,CAAC~~,oBAAoB,KAAK~~;~~sBACjD~~,~~OAAO~~,CAAC,~~CAAC~~,CAAC,~~sBAAsB,CAAC,oBAAoB,KAAK;sBAC1D,~~OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,~~oBAAoB~~,QAAQ,EAAE,IAAI~~;sBAC7D~~,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,~~oBAAoB~~,QAAQ,EAAE,IAAI;;~~mBAEhE~~,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,~~YAAY~~,~~UAAU,IAAI,SAAS,~~CAAC,~~MAAM,CAAC,IAAI,IAAI,CAAC,~~UAAU,CAAC~~,CAAC~~;;~~sBAE3F~~,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,~~YAAY~~,~~KAAK,IAAI,SAAS,~~CAAC,~~MAAM~~,CAAC,~~IAAI~~,~~IAAI,~~CAAC,~~KAAK,~~CAAC,CAAC~~;oCACjE~~,~~SAAS~~,~~IAAI,SAAS,~~CAAC,~~MAAM~~,CAAC,~~IAAI,IAAI,CAAC,~~SAAS,CAAC~~,CAAC~~;;;~~QAG9E~~,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YACjD,CAAC,CAAC,IAAI,CAAA,~~8CAA8C,~~cAAc~~,0CAA0C~~;~~YAC5G~~,CAAC,CAAC,OAAO;QACT,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;uBACS,SAAS;iBACf;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;;~~AA9CmC~~;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yEAAyB;~~AA7GhD~~,+BAA+B;IADpC,aAAa,CAAC,oCAAoC,CAAC;GAC9C,+BAA+B,~~CA6JpC~~","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\~~nfunction~~ ~~getSafeFormatter(locale:~~ ~~string,~~ ~~options:~~ ~~Intl.DateTimeFormatOptions):~~ ~~Intl.DateTimeFormat {\~~n ~~try~~ {\n ~~const~~ ~~safeLocale~~ = ~~locale~~ \|\| ~~'en-US'\n return~~ ~~new~~ ~~Intl.DateTimeFormat(safeLocale~~, ~~options)\n }~~ ~~catch~~ ~~(e)~~ ~~{\n console~~.~~warn(`Invalid~~ ~~locale~~ or ~~options~~ ~~provided:~~ ~~${locale},~~ ~~falling~~ ~~back~~ to ~~default~~ ~~en-US.`,~~ e)\~~n return~~ ~~new~~ ~~Intl.DateTimeFormat('en-US'~~, ~~options)~~\n }\~~n}\n\nconst~~ ~~formatter~~ = ~~getSafeFormatter(navigator.language,~~ { ~~dateStyle:~~ ~~'full'~~, ~~timeStyle:~~ ~~'short'~~ ~~})\n@customElement('activity-approval-context-template')\nclass~~ ~~ActivityApprovalContextTemplate~~ ~~extends~~ ~~LitElement~~ ~~{\n static~~ ~~styles~~ = ~~[\n ContextToolbarOverlayStyle,\n css`\n :host~~ {\n ~~background-color:~~ ~~var(--md-sys-color-surface);\n width:~~ ~~100%;\n min-width:~~ ~~450px;\n max-height:~~ ~~100%;\n overflow:~~ ~~auto;\n --context-ui-padding:~~ ~~0;\n }\n\n :host([state='assigned'])~~ ~~{\n --worklist-status-color:~~ ~~#5f7184;\n }\n\n :host([state='started'])~~ ~~{\n --worklist-status-color:~~ ~~#56af45;\n }\n\n :host([state='delegated'])~~ {\n ~~--worklist-status-color:~~ ~~#8654b0;\~~n ~~}\n\n :host([state='submitted'])~~ ~~{\n --worklist-status-color:~~ ~~#428df3;\n }\n\n :host([state='escalated'])~~ ~~{\n --worklist-status-color:~~ ~~#595de5;\n }\n\n :host([state='rejected'])~~ ~~{\n --worklist-status-color:~~ ~~#f27429;\n }\n\n :host([state='ended'])~~ ~~{\n --worklist-status-color:~~ ~~#02acae;\n }\n\n :host([state='aborted'])~~ ~~{\n --worklist-status-color:~~ ~~#cb3a33;\n }\n\n [info],\n [assignees]~~ ~~{\n padding:~~ ~~var(--spacing-medium);\n border-bottom:~~ ~~var(--border-dim-color);\n color:~~ ~~var(--md-sys-color-secondary);\n }\n\n [info]~~ ~~div~~ {\n ~~display:~~ ~~flex;\n align-items:~~ ~~center;\n padding:~~ ~~var(--spacing-small);\n border-radius:~~ ~~var(--border-radius);\n text-align:~~ ~~right;\n clear:~~ ~~both;\n overflow:~~ ~~hidden;\n }\n\n [info]~~ ~~div:nth-child(odd)~~ ~~{\n background-color:~~ ~~var(--md-sys-color-background);\n }\n\n [info]~~ ~~label~~ ~~{\n display:~~ ~~inline-block;\n width:~~ ~~25%;\~~n ~~text-align:~~ ~~right;\~~n ~~margin-right:~~ ~~20px;\n }\n\n [info]~~ ~~span~~ ~~{\n width:~~ ~~15px;\n height:~~ ~~15px;\n background-color:~~ ~~var(--worklist-status-color~~, ~~tomato);\n display:~~ ~~inline-block;\n border-radius:~~ ~~50%;\n }\n\n :host:before~~ {\n ~~content:~~ ~~'';\n position:~~ ~~absolute;\n width:~~ ~~0;\~~n ~~height:~~ ~~0;\n border~~: ~~22px~~ ~~solid~~ ~~transparent;\n border-left-color~~: ~~var(--worklist-status-color~~)~~;\n border-right:~~ ~~0;\n }~~\n~~\n activity-thread-timeline~~ {\n ~~margin:~~ ~~var~~(~~--spacing-medium~~);\n }\n\n ~~[thumbnail]~~ {~~\n display: flex;\n justify~~-~~content: center;\n align~~-~~items: center;\n margin: var(--spacing-medium~~);\n }\n\n ~~img~~ {\n ~~max-width:~~ ~~85%;\n height:~~ ~~auto;\n }\n `\n~~ ]\n\n @property({ type: Object }) private activityApproval\n\n private _routeCtrl = new RouteController(this)\n\n render() {\n const activityApproval = this._routeCtrl.context.activityApproval \|\| this.activityApproval \|\| {}\n\n const { round, order, approver, createdAt, activityThread } = activityApproval \|\| {}\n const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread \|\| {}\n const { name, description, thumbnail, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n ${approvalLine ? html~~` <~~approval-line-view .model=${approvalLine}></approval-line-view~~> `~~ : html``}\n </div>\n </div>\n\n <~~div~~ ~~info~~>\n ~~<div><label>${i18next.t('field.name')}</label>~~ ~~<strong>${name}</strong></div>\~~n ~~<div><label>$~~{~~i18next.t~~(~~'field.description'~~)~~}</label~~> ~~${description}</div>\~~n ~~<div>\~~n <~~label~~>${i18next.t('field.~~status~~')}</~~label>~~ ~~<span></span> <~~strong\n >${~~i18next.t('label.activity-state-' + state)~~}</~~strong\~~n >\n ~~</div>\~~n <~~div><label~~>${i18next.t('field.~~round~~')}</~~label>~~ <strong>${~~round~~}</~~strong></div~~>\n <~~div><label~~>${i18next.t('field.~~approval~~-~~order~~')}</~~label>~~ <strong>${~~order~~}</~~strong></div~~>\n <~~div><label~~>${i18next.t('field.~~assignee~~')}</~~label>~~ <strong>${~~assignee~~?.name}</~~strong></div~~>\n <~~div><label~~>${i18next.t('field.~~approver~~')}</~~label>~~ <~~strong~~>${~~approver?.name~~}</~~strong></div~~>\n <~~div>\n <label~~>${i18next.t('field.~~assigned~~-at')}</~~label> $~~{~~assignedAt && formatter.format~~(~~new Date(assignedAt~~))}\n ~~</div>\~~n <~~div><label~~>${i18next.t('field.~~due~~-at')}</~~label> ${dueAt && formatter.format(new Date(dueAt))}</div~~>\n <~~div><label>since</label> $~~{~~createdAt && formatter.format~~(~~new Date(~~createdAt))}</~~div~~>\n </~~div~~>\n\n ${activityApprovals && activityApprovals.length > 0\n ? html` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `\n : nothing}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n}\n"]}
1	+ {"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { ContextPanelStyles, valueCell, whenCell } from './context-panel.js'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\n/*\n Who judged this step.\n \n An empty approver on a step nobody has reached is a state, not a missing value. The row used to\n * fall through to the generic 「값 없음」, which covers \"there is none, or the screen could not fetch\n * it\" — on a step that is simply waiting, that reads as a defect. Steps chosen by role have no\n * person until someone acts, so every pending approval showed it.\n \n The role is not named here. The diagram two inches above already lights up the waiting step and\n * labels it 역할; repeating it in this row says the same thing twice.\n \n Once a judgment exists the approver is a real person, and an empty one there would be a genuine\n * gap — so that case keeps the generic fallback.\n */\nfunction approverCell(name: string \| undefined, judgment: string \| undefined) {\n if (name \|\| judgment) {\n return valueCell(name)\n }\n\n return html`<span class=\"none\">${i18next.t('text.approver-not-yet')}</span>`\n}\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends LitElement {\n static styles = [ContextToolbarOverlayStyle, ContextPanelStyles]\n\n @property({ type: Object }) private activityApproval\n\n private _routeCtrl = new RouteController(this)\n\n render() {\n const activityApproval = this._routeCtrl.context.activityApproval \|\| this.activityApproval \|\| {}\n\n const { round, order, approver, judgment, createdAt, activityThread } = activityApproval \|\| {}\n const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread \|\| {}\n const { name, description, thumbnail, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n <!-- 이 결재 줄의 순번이 곧 지금 단계다 — ribbon 과 같은 값을 쓴다. -->\n ${approvalLine\n ? html`<approval-line-view .model=${approvalLine} .current=${order}></approval-line-view>`\n : html``}\n </div>\n </div>\n\n <dl class=\"given\">\n <!-- 차수는 1일 때 적지 않는다. 2차 이상일 때만 「되돌아왔다」는 사실이 된다. -->\n ${Number(round) > 1\n ? html`\n <dt>${i18next.t('field.round')}</dt>\n <dd class=\"strong\">${round}</dd>\n `\n : nothing}\n\n <dt>${i18next.t('field.approval-order')}</dt>\n <dd class=\"strong\">${valueCell(order)}</dd>\n\n <dt>${i18next.t('field.wl-owner')}</dt>\n <dd class=\"strong\">${valueCell(assignee?.name)}</dd>\n\n <dt>${i18next.t('field.approver')}</dt>\n <dd class=\"strong\">${approverCell(approver?.name, judgment)}</dd>\n\n <dt>${i18next.t('field.assigned-at')}</dt>\n <dd>${whenCell(assignedAt)}</dd>\n\n <dt>${i18next.t('field.due-at')}</dt>\n <dd>${whenCell(dueAt)}</dd>\n\n <!-- 전에는 라벨이 since 였다 — 다섯 언어를 갖춘 화면에 영문 한 낱말이 박혀 있었다. -->\n <dt>${i18next.t('field.approval-submitted-at')}</dt>\n <dd>${whenCell(createdAt)}</dd>\n </dl>\n\n ${activityApprovals && activityApprovals.length > 0\n ? html` <!--\n 팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로\n (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.\n 그리고 여기서 이력은 보조가 아니다 — 이 판을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.\n -->\n <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline> `\n : nothing}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n}\n"]}

package/dist-client/templates/activity-instance-context-template.js CHANGED Viewed

@@ -1,175 +1,20 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
-import { html, css, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
 import { RouteController } from '@operato/shell';
 import { i18next } from '@operato/i18n';
+import { ContextPanelStyles, whenCell } from './context-panel.js';
 import { openPopup } from '@operato/layout';
 import '@things-factory/organization/dist-client/component/approval-line-view.js';
-function getSafeFormatter(locale, options) {
-    try {
-        const safeLocale = locale || 'en-US';
-        return new Intl.DateTimeFormat(safeLocale, options);
-    }
-    catch (e) {
-        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
-        return new Intl.DateTimeFormat('en-US', options);
-    }
-}
-const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate extends LitElement {
     constructor() {
         super(...arguments);
         this._routeCtrl = new RouteController(this);
     }
-    static { this.styles = [
-        ContextToolbarOverlayStyle,
-        css `
-      :host {
-        background-color: var(--md-sys-color-surface);
-        width: 100%;
-        min-width: 450px;
-        max-height: 100%;
-        overflow: auto;
-        --context-ui-padding: 0;
-      }
-      :host([state='draft']) {
-        --worklist-status-color: #5f7184;
-      }
-      :host([state='issued']) {
-        --worklist-status-color: #56af45;
-      }
-      :host([state='assigned']) {
-        --worklist-status-color: #428df3;
-      }
-      :host([state='started']) {
-        --worklist-status-color: #595de5;
-      }
-      :host([state='pending']) {
-        --worklist-status-color: #f27429;
-      }
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-      :host:before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: 22px solid transparent;
-        border-left-color: var(--worklist-status-color);
-        border-right: 0;
-      }
-      [info],
-      [assignees] {
-        padding: var(--spacing-medium);
-        border-bottom: var(--border-dim-color);
-        color: var(--md-sys-color-secondary);
-      }
-      [info] div {
-        display: flex;
-        align-items: center;
-        padding: var(--spacing-small);
-        border-radius: var(--border-radius);
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-      [info] div:nth-child(odd) {
-        background-color: var(--md-sys-color-background);
-      }
-      [info] label {
-        display: inline-block;
-        width: 25%;
-        text-align: right;
-        margin-right: 20px;
-      }
-      [info] span {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        border-radius: 50%;
-      }
-      :host:before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: 22px solid transparent;
-        border-left-color: var(--worklist-status-color);
-        border-right: 0;
-      }
-      section {
-        padding: var(--spacing-medium);
-        color: var(--md-sys-color-secondary);
-      }
-      section label {
-        display: inline-block;
-        width: 25%;
-        margin-top: var(--spacing-medium);
-      }
-      [assignees] {
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-      [assignees] label {
-        display: inline-block;
-        padding-left: var(--spacing-small);
-        width: 25%;
-        text-align: left;
-      }
-      [assignees] md-elevated-button {
-        float: right;
-      }
-      section input {
-        display: inline-block;
-        width: 70%;
-        border: var(--border-dim-color);
-        border-width: 0 0 1px 0;
-        margin-top: var(--spacing-medium);
-        font-size: var(--fontsize-large);
-      }
-      [thumbnail] {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: var(--spacing-medium);
-      }
-      img {
-        max-width: 85%;
-        height: auto;
-      }
-    `
-    ]; }
+    static { this.styles = [ContextToolbarOverlayStyle, ContextPanelStyles]; }
     render() {
         const activityInstance = this._routeCtrl.context.activityInstance || this.activityInstance || {};
         const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {};
@@ -190,20 +35,16 @@ let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate exte
             </md-elevated-button>`}
       </div>
-      <div info>
-        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
-        <div><label>${i18next.t('field.description')}</label> ${description}</div>
-        <div>
-          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
-            >${i18next.t('label.activity-state-' + state)}</strong
-          >
-        </div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
-        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
-      </div>
+      <dl class="given">
+        <dt>${i18next.t('field.assigned-at')}</dt>
+        <dd>${whenCell(assignedAt)}</dd>
+        <dt>${i18next.t('field.due-at')}</dt>
+        <dd>${whenCell(dueAt)}</dd>
+        <dt>${i18next.t('field.started-at')}</dt>
+        <dd>${whenCell(startedAt)}</dd>
+      </dl>
       ${startingType == 'issue'
             ? html `<div assignees>

package/dist-client/templates/activity-instance-context-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n try {\n const safeLocale = locale \|\| 'en-US'\n return new Intl.DateTimeFormat(safeLocale, options)\n } catch (e) {\n console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n return new Intl.DateTimeFormat('en-US', options)\n }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends LitElement {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\n }\n\n :host([state='draft']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='issued']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='started']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='pending']) {\n --worklist-status-color: #f27429;\n }\n\n :host([state='ended']) {\n --worklist-status-color: #02acae;\n }\n\n :host([state='aborted']) {\n --worklist-status-color: #cb3a33;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n [info],\n [assignees] {\n padding: var(--spacing-medium);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n }\n\n [info] div {\n display: flex;\n align-items: center;\n padding: var(--spacing-small);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [info] div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n [info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n [info] span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n section {\n padding: var(--spacing-medium);\n color: var(--md-sys-color-secondary);\n }\n\n section label {\n display: inline-block;\n width: 25%;\n margin-top: var(--spacing-medium);\n }\n\n [assignees] {\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [assignees] label {\n display: inline-block;\n padding-left: var(--spacing-small);\n width: 25%;\n text-align: left;\n }\n\n [assignees] md-elevated-button {\n float: right;\n }\n\n section input {\n display: inline-block;\n width: 70%;\n border: var(--border-dim-color);\n border-width: 0 0 1px 0;\n margin-top: var(--spacing-medium);\n font-size: var(--fontsize-large);\n }\n\n [thumbnail] {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--spacing-medium);\n }\n\n img {\n max-width: 85%;\n height: auto;\n }\n `\n ]\n\n @property({ type: Object }) private activityInstance\n\n private _routeCtrl = new RouteController(this)\n\n render() {\n const activityInstance = this._routeCtrl.context.activityInstance \|\| this.activityInstance \|\| {}\n const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n // const editable = state == 'draft'\n\n return html`\n <div flow>\n ${approvalLine\n ? html`\n <approval-line-view\n .model=${approvalLine}\n @click=${() => this.onClickApprovalLine(activityInstance)}\n @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n ></approval-line-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n </div>\n\n ${startingType == 'issue'\n ? html`<div assignees>\n <div>\n <label>${i18next.t('field.assignees')}</label>\n ${assignees\n ? html`\n <assignees-view\n .value=${assignees}\n @click=${() => this.onClickAssignees(activityInstance)}\n @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n ></assignees-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n </div>`\n : html``}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n onClickAssignees(activityInstance) {\n const { assignees } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <assignees-editor-popup\n .value=${assignees}\n .confirmCallback=${value => {\n activityInstance.assignees = value\n this.requestUpdate()\n }}\n ></assignees-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/assignees-editor',\n size: 'large',\n title: i18next.t('title.assignee list')\n }\n )\n popup.onclosed = () => {}\n }\n\n onClickApprovalLine(activityInstance) {\n const { approvalLine } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <approval-line-items-editor-popup\n .value=${approvalLine}\n .confirmCallback=${value => {\n activityInstance.approvalLine = value\n this.requestUpdate()\n }}\n ></approval-line-items-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/approval-line-items-editor',\n size: 'large',\n title: i18next.t('title.approval-line item list')\n }\n )\n popup.onclosed = () => {}\n }\n}\n"]}
1	+ {"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { ContextPanelStyles, whenCell } from './context-panel.js'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends LitElement {\n static styles = [ContextToolbarOverlayStyle, ContextPanelStyles]\n\n @property({ type: Object }) private activityInstance\n\n private _routeCtrl = new RouteController(this)\n\n render() {\n const activityInstance = this._routeCtrl.context.activityInstance \|\| this.activityInstance \|\| {}\n const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n // const editable = state == 'draft'\n\n return html`\n <div flow>\n ${approvalLine\n ? html`\n <approval-line-view\n .model=${approvalLine}\n @click=${() => this.onClickApprovalLine(activityInstance)}\n @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n ></approval-line-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n\n <dl class=\"given\">\n <dt>${i18next.t('field.assigned-at')}</dt>\n <dd>${whenCell(assignedAt)}</dd>\n\n <dt>${i18next.t('field.due-at')}</dt>\n <dd>${whenCell(dueAt)}</dd>\n\n <dt>${i18next.t('field.started-at')}</dt>\n <dd>${whenCell(startedAt)}</dd>\n </dl>\n\n ${startingType == 'issue'\n ? html`<div assignees>\n <div>\n <label>${i18next.t('field.assignees')}</label>\n ${assignees\n ? html`\n <assignees-view\n .value=${assignees}\n @click=${() => this.onClickAssignees(activityInstance)}\n @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n ></assignees-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n </div>`\n : html``}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n onClickAssignees(activityInstance) {\n const { assignees } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <assignees-editor-popup\n .value=${assignees}\n .confirmCallback=${value => {\n activityInstance.assignees = value\n this.requestUpdate()\n }}\n ></assignees-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/assignees-editor',\n size: 'large',\n title: i18next.t('title.assignee list')\n }\n )\n popup.onclosed = () => {}\n }\n\n onClickApprovalLine(activityInstance) {\n const { approvalLine } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <approval-line-items-editor-popup\n .value=${approvalLine}\n .confirmCallback=${value => {\n activityInstance.approvalLine = value\n this.requestUpdate()\n }}\n ></approval-line-items-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/approval-line-items-editor',\n size: 'large',\n title: i18next.t('title.approval-line item list')\n }\n )\n popup.onclosed = () => {}\n }\n}\n"]}