@things-factory/worklist 9.0.0-beta.8 → 9.0.0

package/dist-client/pages/activity-instance/activity-instance-view.js

@@ -19,6 +19,211 @@ function getSafeFormatter(locale, options) {
 }
 const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(LitElement) {
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        overflow: auto;
+        font-size: var(--fontsize-default);
+      }
+      :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;
+      }
+      [instance-container] {
+        flex: 1;
+        background-color: var(--md-sys-color-background);
+        border-right: var(--border-dim-color);
+        padding: var(--spacing-large);
+        color: var(--md-sys-color-secondary);
+      }
+      [thread-container] {
+        flex: 2;
+        padding: var(--spacing-large);
+      }
+      [instance-container] div {
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+      }
+      [header] md-icon {
+        background-color: var(--worklist-status-color, tomato);
+        float: left;
+        margin-right: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        border-radius: 50%;
+        float: left;
+        font-size: 1.8em;
+        color: var(--md-sys-color-on-primary);
+      }
+      [header] strong {
+        display: block;
+        font: bold 22px / 1.1 var(--theme-font);
+      }
+      [header] {
+        overflow: hidden;
+        font-size: var(--fontsize-small);
+      }
+      [instance-container] div label {
+        display: inline-block;
+        margin-right: var(--spacing-medium);
+        min-width: 50px;
+      }
+      [issuer] md-icon {
+        opacity: 0.5;
+        position: relative;
+        top: 4px;
+        font-size: 20px;
+      }
+      span[status] {
+        width: 15px;
+        height: 15px;
+        position: relative;
+        top: 2px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        margin-right: var(--spacing-small);
+        border-radius: 50%;
+      }
+      [thread-container] table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      [thread-container] th {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-top: var(--grid-header-top-border);
+        border-bottom: var(--grid-header-bottom-border);
+        padding: var(--grid-header-padding);
+        text-overflow: ellipsis;
+        font: var(--grid-header-font);
+      }
+      [thread-container] td {
+        padding: var(--spacing-small);
+        border-bottom: var(--grid-record-border-bottom);
+      }
+      [assignee] * {
+        vertical-align: middle;
+      }
+      [assignee] md-icon {
+        opacity: 0.5;
+      }
+      [subtitle] {
+        display: block;
+        margin: var(--spacing-large) 0 var(--spacing-small) 0;
+        padding: var(--spacing-small) var(--spacing-medium);
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-variant);
+        font: bold 16px var(--theme-font);
+        border: 2px solid var(--md-sys-color-outline);
+        border-radius: 999px;
+      }
+      [timeline] ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      [timeline] li {
+        display: flex;
+      }
+      [timeline] [info] {
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-variant);
+
+        flex: 1;
+      }
+      [timeline] [date] {
+        opacity: 0.7;
+        width: 130px;
+        font-size: var(--fontsize-small);
+      }
+      [timeline] [info] strong {
+        float: right;
+      }
+      [timeline] [status] {
+        margin: 0 var(--spacing-small);
+        display: block;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+      }
+      [timeline] [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+      [timeline] [info] md-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        background-color: #f4f4f4;
+        margin: var(--spacing-small) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-small) var(--spacing-medium);
+        border-radius: var(--border-radius);
+        font-size: var(--fontsize-small);
+        text-align: justify;
+      }
+      [timeline] [info] p::before {
+        content: '';
+        float: right;
+        margin-top: -10px;
+        margin-right: 20px;
+        border: 7px solid transparent;
+        border-bottom-color: #f4f4f4;
+        border-top: 0;
+      }
+      [thread] div {
+        border-bottom: var(--border-dim-color);
+        padding: var(--spacing-small);
+        text-align: right;
+        overflow: hidden;
+      }
+      [thread] div label {
+        float: left;
+        width: 25%;
+        text-align: left;
+      }
+    `
+    ]; }
     render() {
         if (!this.activityInstance) {
             return html `<div>no activity instance info.</div>`;
@@ -41,7 +246,7 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
         <div issuer>
           <label>${i18next.t('field.issuer')}</label>
           <md-icon>account_circle</md-icon>
-          <strong>${(issuer === null || issuer === void 0 ? void 0 : issuer.name) || ''}</strong>
+          <strong>${issuer?.name || ''}</strong>
         </div>
         <div>
           <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}
@@ -53,17 +258,16 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
         </div>
       </div>
       <div thread-container>
-        ${activityThreads === null || activityThreads === void 0 ? void 0 : activityThreads.map(activityThread => this.renderActivityThread(this.activityInstance, activityThread))}
+        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance, activityThread))}
       </div>
     `;
     }
     renderActivityThread(activityInstance, activityThread) {
-        var _a;
         const { state, assignee, output, round, activityApprovals = [], assignedAt, startedAt, terminatedAt } = activityThread;
         const { approvalLine } = activityInstance;
         const { name, email } = assignee || {};
         const approvals = activityApprovals.sort((a, b) => a.round < b.round ? 1 : a.round > b.round ? -1 : a.order < b.order ? 1 : -1);
-        const current = ((_a = approvals[0]) === null || _a === void 0 ? void 0 : _a.round) == round ? approvals[0].order : -1;
+        const current = approvals[0]?.round == round ? approvals[0].order : -1;
         return html `
       <div assignee>
         <md-icon>account_circle</md-icon>
@@ -131,7 +335,7 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
           <th>${i18next.t('label.value')}</th>
         </tr>
 
-        ${searchKeys === null || searchKeys === void 0 ? void 0 : searchKeys.map((item, index) => html `
+        ${searchKeys?.map((item, index) => html `
             <tr>
               <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>
               <td>${this.activityInstance[`key0${index + 1}`]}</td>
@@ -149,7 +353,7 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
           <th>${i18next.t('label.name')}</th>
           <th>${i18next.t('label.value')}</th>
         </tr>
-        ${model === null || model === void 0 ? void 0 : model.map(item => html `
+        ${model?.map(item => html `
             <tr>
               <td>${item.name}</td>
               <td>${item.tag ? data[item.tag] : ''}</td>
@@ -164,7 +368,6 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
         }
     }
     async fetchActivityInstance() {
-        var _a;
         const id = this.activityInstanceId;
         const response = await client.query({
             query: gql `
@@ -264,214 +467,9 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
             }
         });
         this.activityInstance = response.data.activityInstance;
-        this.setAttribute('state', ((_a = this.activityInstance) === null || _a === void 0 ? void 0 : _a.state) || '');
+        this.setAttribute('state', this.activityInstance?.state || '');
     }
 };
-ActivityInstanceView.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        overflow: auto;
-        font-size: var(--fontsize-default);
-      }
-      :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;
-      }
-      [instance-container] {
-        flex: 1;
-        background-color: var(--md-sys-color-background);
-        border-right: var(--border-dim-color);
-        padding: var(--spacing-large);
-        color: var(--md-sys-color-secondary);
-      }
-      [thread-container] {
-        flex: 2;
-        padding: var(--spacing-large);
-      }
-      [instance-container] div {
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-medium);
-        border-bottom: var(--border-dim-color);
-      }
-      [header] md-icon {
-        background-color: var(--worklist-status-color, tomato);
-        float: left;
-        margin-right: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        border-radius: 50%;
-        float: left;
-        font-size: 1.8em;
-        color: var(--md-sys-color-on-primary);
-      }
-      [header] strong {
-        display: block;
-        font: bold 22px / 1.1 var(--theme-font);
-      }
-      [header] {
-        overflow: hidden;
-        font-size: var(--fontsize-small);
-      }
-      [instance-container] div label {
-        display: inline-block;
-        margin-right: var(--spacing-medium);
-        min-width: 50px;
-      }
-      [issuer] md-icon {
-        opacity: 0.5;
-        position: relative;
-        top: 4px;
-        font-size: 20px;
-      }
-      span[status] {
-        width: 15px;
-        height: 15px;
-        position: relative;
-        top: 2px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        margin-right: var(--spacing-small);
-        border-radius: 50%;
-      }
-      [thread-container] table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      [thread-container] th {
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-        border-top: var(--grid-header-top-border);
-        border-bottom: var(--grid-header-bottom-border);
-        padding: var(--grid-header-padding);
-        text-overflow: ellipsis;
-        font: var(--grid-header-font);
-      }
-      [thread-container] td {
-        padding: var(--spacing-small);
-        border-bottom: var(--grid-record-border-bottom);
-      }
-      [assignee] * {
-        vertical-align: middle;
-      }
-      [assignee] md-icon {
-        opacity: 0.5;
-      }
-      [subtitle] {
-        display: block;
-        margin: var(--spacing-large) 0 var(--spacing-small) 0;
-        padding: var(--spacing-small) var(--spacing-medium);
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-variant);
-        font: bold 16px var(--theme-font);
-        border: 2px solid var(--md-sys-color-outline);
-        border-radius: 999px;
-      }
-      [timeline] ol {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      [timeline] li {
-        display: flex;
-      }
-      [timeline] [info] {
-        color: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface-variant);
-
-        flex: 1;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        width: 130px;
-        font-size: var(--fontsize-small);
-      }
-      [timeline] [info] strong {
-        float: right;
-      }
-      [timeline] [status] {
-        margin: 0 var(--spacing-small);
-        display: block;
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-      }
-      [timeline] [status]::before {
-        content: '';
-        height: 60px;
-        width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
-      }
-      [timeline] [info] md-icon {
-        position: relative;
-        top: 3px;
-        font-size: var(--fontsize-large);
-      }
-      [timeline] [info] p {
-        background-color: #f4f4f4;
-        margin: var(--spacing-small) 0 var(--spacing-medium) 0;
-        padding: var(--spacing-small) var(--spacing-medium);
-        border-radius: var(--border-radius);
-        font-size: var(--fontsize-small);
-        text-align: justify;
-      }
-      [timeline] [info] p::before {
-        content: '';
-        float: right;
-        margin-top: -10px;
-        margin-right: 20px;
-        border: 7px solid transparent;
-        border-bottom-color: #f4f4f4;
-        border-top: 0;
-      }
-      [thread] div {
-        border-bottom: var(--border-dim-color);
-        padding: var(--spacing-small);
-        text-align: right;
-        overflow: hidden;
-      }
-      [thread] div label {
-        float: left;
-        width: 25%;
-        text-align: left;
-      }
-    `
-];
 __decorate([
     property({
         type: String,

package/dist-client/pages/activity-instance/activity-instance-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-instance-view.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityInstance } from '../../types/activity-instance.js'\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityApproval } from '../../types/activity-approval.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-view')\nexport class ActivityInstanceView extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: auto;\n        font-size: var(--fontsize-default);\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      [instance-container] {\n        flex: 1;\n        background-color: var(--md-sys-color-background);\n        border-right: var(--border-dim-color);\n        padding: var(--spacing-large);\n        color: var(--md-sys-color-secondary);\n      }\n      [thread-container] {\n        flex: 2;\n        padding: var(--spacing-large);\n      }\n      [instance-container] div {\n        margin-bottom: var(--spacing-medium);\n        padding-bottom: var(--spacing-medium);\n        border-bottom: var(--border-dim-color);\n      }\n      [header] md-icon {\n        background-color: var(--worklist-status-color, tomato);\n        float: left;\n        margin-right: var(--spacing-medium);\n        padding: var(--spacing-medium);\n        border-radius: 50%;\n        float: left;\n        font-size: 1.8em;\n        color: var(--md-sys-color-on-primary);\n      }\n      [header] strong {\n        display: block;\n        font: bold 22px / 1.1 var(--theme-font);\n      }\n      [header] {\n        overflow: hidden;\n        font-size: var(--fontsize-small);\n      }\n      [instance-container] div label {\n        display: inline-block;\n        margin-right: var(--spacing-medium);\n        min-width: 50px;\n      }\n      [issuer] md-icon {\n        opacity: 0.5;\n        position: relative;\n        top: 4px;\n        font-size: 20px;\n      }\n      span[status] {\n        width: 15px;\n        height: 15px;\n        position: relative;\n        top: 2px;\n        background-color: var(--worklist-status-color, tomato);\n        display: inline-block;\n        margin-right: var(--spacing-small);\n        border-radius: 50%;\n      }\n      [thread-container] table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      [thread-container] th {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n      }\n      [thread-container] td {\n        padding: var(--spacing-small);\n        border-bottom: var(--grid-record-border-bottom);\n      }\n      [assignee] * {\n        vertical-align: middle;\n      }\n      [assignee] md-icon {\n        opacity: 0.5;\n      }\n      [subtitle] {\n        display: block;\n        margin: var(--spacing-large) 0 var(--spacing-small) 0;\n        padding: var(--spacing-small) var(--spacing-medium);\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-variant);\n        font: bold 16px var(--theme-font);\n        border: 2px solid var(--md-sys-color-outline);\n        border-radius: 999px;\n      }\n      [timeline] ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      [timeline] li {\n        display: flex;\n      }\n      [timeline] [info] {\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-variant);\n\n        flex: 1;\n      }\n      [timeline] [date] {\n        opacity: 0.7;\n        width: 130px;\n        font-size: var(--fontsize-small);\n      }\n      [timeline] [info] strong {\n        float: right;\n      }\n      [timeline] [status] {\n        margin: 0 var(--spacing-small);\n        display: block;\n        border-radius: 50%;\n        width: 12px;\n        height: 12px;\n        position: relative;\n        top: 3px;\n        border: 2px solid #fff;\n        background-color: var(--worklist-status-color, tomato);\n      }\n      [timeline] [status]::before {\n        content: '';\n        height: 60px;\n        width: 2px;\n        display: block;\n        position: relative;\n        margin-left: 5px;\n        background-color: var(--worklist-status-color, tomato);\n        opacity: 0.2;\n      }\n      [timeline] [info] md-icon {\n        position: relative;\n        top: 3px;\n        font-size: var(--fontsize-large);\n      }\n      [timeline] [info] p {\n        background-color: #f4f4f4;\n        margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-small) var(--spacing-medium);\n        border-radius: var(--border-radius);\n        font-size: var(--fontsize-small);\n        text-align: justify;\n      }\n      [timeline] [info] p::before {\n        content: '';\n        float: right;\n        margin-top: -10px;\n        margin-right: 20px;\n        border: 7px solid transparent;\n        border-bottom-color: #f4f4f4;\n        border-top: 0;\n      }\n      [thread] div {\n        border-bottom: var(--border-dim-color);\n        padding: var(--spacing-small);\n        text-align: right;\n        overflow: hidden;\n      }\n      [thread] div label {\n        float: left;\n        width: 25%;\n        text-align: left;\n      }\n    `\n  ]\n\n  @property({\n    type: String,\n    attribute: 'activity-instance-id'\n  })\n  activityInstanceId?: string\n\n  @state() activityInstance?: ActivityInstance\n\n  render() {\n    if (!this.activityInstance) {\n      return html`<div>no activity instance info.</div>`\n    }\n\n    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =\n      this.activityInstance\n\n    return html`\n      <div instance-container>\n        <div header>\n          <md-icon>description</md-icon>\n          <strong>${name}</strong>\n          ${description}\n        </div>\n\n        <div>\n          <label>${i18next.t('label.status')}</label>\n          <span status></span>\n          <strong>${i18next.t('label.activity-state-' + state)}</strong>\n        </div>\n\n        <div issuer>\n          <label>${i18next.t('field.issuer')}</label>\n          <md-icon>account_circle</md-icon>\n          <strong>${issuer?.name || ''}</strong>\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.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>\n        <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>\n        <div>\n          <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}\n        </div>\n      </div>\n      <div thread-container>\n        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}\n      </div>\n    `\n  }\n\n  renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {\n    const {\n      state,\n      assignee,\n      output,\n      round,\n      activityApprovals = [],\n      assignedAt,\n      startedAt,\n      terminatedAt\n    } = activityThread\n    const { approvalLine } = activityInstance!\n    const { name, email } = assignee || {}\n    const approvals = activityApprovals.sort((a, b) =>\n      a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1\n    )\n    const current = approvals[0]?.round == round ? approvals[0].order : -1\n\n    return html`\n      <div assignee>\n        <md-icon>account_circle</md-icon>\n        <strong>${name}</strong>\n      </div>\n\n      <div thread>\n        <span subtitle>${i18next.t('label.information')}</span>\n        <div>\n          <label>${i18next.t('label.status')}</label>\n          <span status></span>\n          <strong>${i18next.t('label.activity-state-' + state)}</strong>\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.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n        <div>\n          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n        </div>\n        <div><label>${i18next.t('field.round')}</label> ${round}</div>\n      </div>\n\n      <div>\n        <span subtitle>${i18next.t('field.artifact')}</span>\n        ${this.renderInOut(output || {})}\n      </div>\n      <div timeline>\n        <span subtitle>${i18next.t('label.timeline')}</span>\n\n        <div>\n          ${approvalLine\n            ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`\n            : html``}\n        </div>\n\n        <ol>\n          ${approvals.map(approval => this.renderActivityApproval(approval))}\n        </ol>\n      </div>\n    `\n  }\n\n  renderActivityApproval(activityApproval: ActivityApproval) {\n    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval\n    const { name, email } = approver || {}\n\n    return html`\n      <li>\n        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>\n        <span status></span>\n        <span info>\n          ${i18next.t('label.activity-state-' + (judgment || 'started'))}\n          <strong><md-icon>account_circle</md-icon>${name}</strong>\n          <p>${comment}</p>\n        </span>\n      </li>\n    `\n  }\n\n  renderSearchKeys() {\n    const { activity } = this.activityInstance!\n    const { searchKeys = [] } = activity! || {}\n\n    return html`\n      <table>\n        <tr>\n          <th>${i18next.t('label.name')}</th>\n          <th>${i18next.t('label.value')}</th>\n        </tr>\n\n        ${searchKeys?.map(\n          (item, index) => html`\n            <tr>\n              <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>\n              <td>${this.activityInstance![`key0${index + 1}`]}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  renderInOut(data) {\n    const { activity } = this.activityInstance!\n    const { model } = activity || {}\n\n    return html`\n      <table>\n        <tr>\n          <th>${i18next.t('label.name')}</th>\n          <th>${i18next.t('label.value')}</th>\n        </tr>\n        ${model?.map(\n          item => html`\n            <tr>\n              <td>${item.name}</td>\n              <td>${item.tag ? data[item.tag] : ''}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstanceId')) {\n      this.fetchActivityInstance()\n    }\n  }\n\n  async fetchActivityInstance() {\n    const id = this.activityInstanceId\n\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          activityInstance(id: $id) {\n            id\n            name\n            description\n            state\n            key01\n            key02\n            key03\n            key04\n            key05\n            input\n            output\n            issuer {\n              name\n              email\n            }\n            starter {\n              name\n              email\n            }\n            activity {\n              id\n              name\n              description\n              searchKeys {\n                name\n                description\n                inputKey\n                tKey\n              }\n              model {\n                name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            activityThreads {\n              state\n              transaction\n              output\n              assignee {\n                id\n                name\n                email\n              }\n              round\n              activityApprovals {\n                round\n                order\n                approver {\n                  name\n                  email\n                }\n                judgment\n                comment\n                createdAt\n                terminatedAt\n              }\n              assignedAt\n              startedAt\n              terminatedAt\n            }\n            updater {\n              id\n              name\n            }\n            assignedAt\n            startedAt\n            terminatedAt\n            updatedAt\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activityInstance = response.data.activityInstance\n    this.setAttribute('state', this.activityInstance?.state || '')\n  }\n}\n"]}
+{"version":3,"file":"activity-instance-view.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityInstance } from '../../types/activity-instance.js'\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityApproval } from '../../types/activity-approval.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-view')\nexport class ActivityInstanceView extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: auto;\n        font-size: var(--fontsize-default);\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      [instance-container] {\n        flex: 1;\n        background-color: var(--md-sys-color-background);\n        border-right: var(--border-dim-color);\n        padding: var(--spacing-large);\n        color: var(--md-sys-color-secondary);\n      }\n      [thread-container] {\n        flex: 2;\n        padding: var(--spacing-large);\n      }\n      [instance-container] div {\n        margin-bottom: var(--spacing-medium);\n        padding-bottom: var(--spacing-medium);\n        border-bottom: var(--border-dim-color);\n      }\n      [header] md-icon {\n        background-color: var(--worklist-status-color, tomato);\n        float: left;\n        margin-right: var(--spacing-medium);\n        padding: var(--spacing-medium);\n        border-radius: 50%;\n        float: left;\n        font-size: 1.8em;\n        color: var(--md-sys-color-on-primary);\n      }\n      [header] strong {\n        display: block;\n        font: bold 22px / 1.1 var(--theme-font);\n      }\n      [header] {\n        overflow: hidden;\n        font-size: var(--fontsize-small);\n      }\n      [instance-container] div label {\n        display: inline-block;\n        margin-right: var(--spacing-medium);\n        min-width: 50px;\n      }\n      [issuer] md-icon {\n        opacity: 0.5;\n        position: relative;\n        top: 4px;\n        font-size: 20px;\n      }\n      span[status] {\n        width: 15px;\n        height: 15px;\n        position: relative;\n        top: 2px;\n        background-color: var(--worklist-status-color, tomato);\n        display: inline-block;\n        margin-right: var(--spacing-small);\n        border-radius: 50%;\n      }\n      [thread-container] table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      [thread-container] th {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n      }\n      [thread-container] td {\n        padding: var(--spacing-small);\n        border-bottom: var(--grid-record-border-bottom);\n      }\n      [assignee] * {\n        vertical-align: middle;\n      }\n      [assignee] md-icon {\n        opacity: 0.5;\n      }\n      [subtitle] {\n        display: block;\n        margin: var(--spacing-large) 0 var(--spacing-small) 0;\n        padding: var(--spacing-small) var(--spacing-medium);\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-variant);\n        font: bold 16px var(--theme-font);\n        border: 2px solid var(--md-sys-color-outline);\n        border-radius: 999px;\n      }\n      [timeline] ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      [timeline] li {\n        display: flex;\n      }\n      [timeline] [info] {\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-variant);\n\n        flex: 1;\n      }\n      [timeline] [date] {\n        opacity: 0.7;\n        width: 130px;\n        font-size: var(--fontsize-small);\n      }\n      [timeline] [info] strong {\n        float: right;\n      }\n      [timeline] [status] {\n        margin: 0 var(--spacing-small);\n        display: block;\n        border-radius: 50%;\n        width: 12px;\n        height: 12px;\n        position: relative;\n        top: 3px;\n        border: 2px solid #fff;\n        background-color: var(--worklist-status-color, tomato);\n      }\n      [timeline] [status]::before {\n        content: '';\n        height: 60px;\n        width: 2px;\n        display: block;\n        position: relative;\n        margin-left: 5px;\n        background-color: var(--worklist-status-color, tomato);\n        opacity: 0.2;\n      }\n      [timeline] [info] md-icon {\n        position: relative;\n        top: 3px;\n        font-size: var(--fontsize-large);\n      }\n      [timeline] [info] p {\n        background-color: #f4f4f4;\n        margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n        padding: var(--spacing-small) var(--spacing-medium);\n        border-radius: var(--border-radius);\n        font-size: var(--fontsize-small);\n        text-align: justify;\n      }\n      [timeline] [info] p::before {\n        content: '';\n        float: right;\n        margin-top: -10px;\n        margin-right: 20px;\n        border: 7px solid transparent;\n        border-bottom-color: #f4f4f4;\n        border-top: 0;\n      }\n      [thread] div {\n        border-bottom: var(--border-dim-color);\n        padding: var(--spacing-small);\n        text-align: right;\n        overflow: hidden;\n      }\n      [thread] div label {\n        float: left;\n        width: 25%;\n        text-align: left;\n      }\n    `\n  ]\n\n  @property({\n    type: String,\n    attribute: 'activity-instance-id'\n  })\n  activityInstanceId?: string\n\n  @state() activityInstance?: ActivityInstance\n\n  render() {\n    if (!this.activityInstance) {\n      return html`<div>no activity instance info.</div>`\n    }\n\n    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =\n      this.activityInstance\n\n    return html`\n      <div instance-container>\n        <div header>\n          <md-icon>description</md-icon>\n          <strong>${name}</strong>\n          ${description}\n        </div>\n\n        <div>\n          <label>${i18next.t('label.status')}</label>\n          <span status></span>\n          <strong>${i18next.t('label.activity-state-' + state)}</strong>\n        </div>\n\n        <div issuer>\n          <label>${i18next.t('field.issuer')}</label>\n          <md-icon>account_circle</md-icon>\n          <strong>${issuer?.name || ''}</strong>\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.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>\n        <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>\n        <div>\n          <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}\n        </div>\n      </div>\n      <div thread-container>\n        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}\n      </div>\n    `\n  }\n\n  renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {\n    const {\n      state,\n      assignee,\n      output,\n      round,\n      activityApprovals = [],\n      assignedAt,\n      startedAt,\n      terminatedAt\n    } = activityThread\n    const { approvalLine } = activityInstance!\n    const { name, email } = assignee || {}\n    const approvals = activityApprovals.sort((a, b) =>\n      a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1\n    )\n    const current = approvals[0]?.round == round ? approvals[0].order : -1\n\n    return html`\n      <div assignee>\n        <md-icon>account_circle</md-icon>\n        <strong>${name}</strong>\n      </div>\n\n      <div thread>\n        <span subtitle>${i18next.t('label.information')}</span>\n        <div>\n          <label>${i18next.t('label.status')}</label>\n          <span status></span>\n          <strong>${i18next.t('label.activity-state-' + state)}</strong>\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.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n        <div>\n          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n        </div>\n        <div><label>${i18next.t('field.round')}</label> ${round}</div>\n      </div>\n\n      <div>\n        <span subtitle>${i18next.t('field.artifact')}</span>\n        ${this.renderInOut(output || {})}\n      </div>\n      <div timeline>\n        <span subtitle>${i18next.t('label.timeline')}</span>\n\n        <div>\n          ${approvalLine\n            ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`\n            : html``}\n        </div>\n\n        <ol>\n          ${approvals.map(approval => this.renderActivityApproval(approval))}\n        </ol>\n      </div>\n    `\n  }\n\n  renderActivityApproval(activityApproval: ActivityApproval) {\n    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval\n    const { name, email } = approver || {}\n\n    return html`\n      <li>\n        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>\n        <span status></span>\n        <span info>\n          ${i18next.t('label.activity-state-' + (judgment || 'started'))}\n          <strong><md-icon>account_circle</md-icon>${name}</strong>\n          <p>${comment}</p>\n        </span>\n      </li>\n    `\n  }\n\n  renderSearchKeys() {\n    const { activity } = this.activityInstance!\n    const { searchKeys = [] } = activity! || {}\n\n    return html`\n      <table>\n        <tr>\n          <th>${i18next.t('label.name')}</th>\n          <th>${i18next.t('label.value')}</th>\n        </tr>\n\n        ${searchKeys?.map(\n          (item, index) => html`\n            <tr>\n              <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>\n              <td>${this.activityInstance![`key0${index + 1}`]}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  renderInOut(data) {\n    const { activity } = this.activityInstance!\n    const { model } = activity || {}\n\n    return html`\n      <table>\n        <tr>\n          <th>${i18next.t('label.name')}</th>\n          <th>${i18next.t('label.value')}</th>\n        </tr>\n        ${model?.map(\n          item => html`\n            <tr>\n              <td>${item.name}</td>\n              <td>${item.tag ? data[item.tag] : ''}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstanceId')) {\n      this.fetchActivityInstance()\n    }\n  }\n\n  async fetchActivityInstance() {\n    const id = this.activityInstanceId\n\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          activityInstance(id: $id) {\n            id\n            name\n            description\n            state\n            key01\n            key02\n            key03\n            key04\n            key05\n            input\n            output\n            issuer {\n              name\n              email\n            }\n            starter {\n              name\n              email\n            }\n            activity {\n              id\n              name\n              description\n              searchKeys {\n                name\n                description\n                inputKey\n                tKey\n              }\n              model {\n                name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            activityThreads {\n              state\n              transaction\n              output\n              assignee {\n                id\n                name\n                email\n              }\n              round\n              activityApprovals {\n                round\n                order\n                approver {\n                  name\n                  email\n                }\n                judgment\n                comment\n                createdAt\n                terminatedAt\n              }\n              assignedAt\n              startedAt\n              terminatedAt\n            }\n            updater {\n              id\n              name\n            }\n            assignedAt\n            startedAt\n            terminatedAt\n            updatedAt\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activityInstance = response.data.activityInstance\n    this.setAttribute('state', this.activityInstance?.state || '')\n  }\n}\n"]}

package/dist-client/pages/activity-stats/activity-stats-importer.js

@@ -37,6 +37,21 @@ export class ActivityStatsImporter extends LitElement {
             ]
         };
     }
+    static { this.styles = [
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+    ]; }
     render() {
         return html `
       <ox-grist
@@ -54,7 +69,6 @@ export class ActivityStatsImporter extends LitElement {
     `;
     }
     async save() {
-        var _a;
         const response = await client.mutate({
             mutation: gql `
         mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {
@@ -63,26 +77,11 @@ export class ActivityStatsImporter extends LitElement {
       `,
             variables: { activityStats: this.activityStats }
         });
-        if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
+        if (response.errors?.length)
             return;
         this.dispatchEvent(new CustomEvent('imported'));
     }
 }
-ActivityStatsImporter.styles = [
-    CommonHeaderStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-    `
-];
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)

package/dist-client/pages/activity-stats/activity-stats-importer.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-stats-importer.js","sourceRoot":"","sources":["../../../client/pages/activity-stats/activity-stats-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAiB6B,kBAAa,GAAU,EAAE,CAAA;QACxB,YAAO,GAAG;YACpC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,KAAK,EAAE,EAAE;iBACV;aACF;SACF,CAAA;IAiCH,CAAC;IA/BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd;YACN,OAAO,EAAE,IAAI,CAAC,aAAa;SAC5B;;;;;yBAKgB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAEhG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;SACjD,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AAxEM,4BAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4DAA0B;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAuB1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nexport class ActivityStatsImporter extends 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      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) activityStats: any[] = []\n  @property({ type: Object }) columns = {\n    list: { fields: ['name', 'description'] },\n    pagination: { infinite: true },\n    columns: [\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        width: 150\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'active',\n        header: i18next.t('field.active'),\n        width: 60\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.columns}\n        .data=${{\n          records: this.activityStats\n        }}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  async save() {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {\n          importActivityStats(activityStats: $activityStats)\n        }\n      `,\n      variables: { activityStats: this.activityStats }\n    })\n\n    if (response.errors?.length) return\n\n    this.dispatchEvent(new CustomEvent('imported'))\n  }\n}\n"]}
+{"version":3,"file":"activity-stats-importer.js","sourceRoot":"","sources":["../../../client/pages/activity-stats/activity-stats-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAiB6B,kBAAa,GAAU,EAAE,CAAA;QACxB,YAAO,GAAG;YACpC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,KAAK,EAAE,EAAE;iBACV;aACF;SACF,CAAA;IAiCH,CAAC;aAzEQ,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;KAWF;KACF,AAdY,CAcZ;IA4BD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd;YACN,OAAO,EAAE,IAAI,CAAC,aAAa;SAC5B;;;;;yBAKgB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAEhG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;SACjD,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AAxD0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4DAA0B;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAuB1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nexport class ActivityStatsImporter extends 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      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) activityStats: any[] = []\n  @property({ type: Object }) columns = {\n    list: { fields: ['name', 'description'] },\n    pagination: { infinite: true },\n    columns: [\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        width: 150\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'active',\n        header: i18next.t('field.active'),\n        width: 60\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.columns}\n        .data=${{\n          records: this.activityStats\n        }}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  async save() {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {\n          importActivityStats(activityStats: $activityStats)\n        }\n      `,\n      variables: { activityStats: this.activityStats }\n    })\n\n    if (response.errors?.length) return\n\n    this.dispatchEvent(new CustomEvent('imported'))\n  }\n}\n"]}