@things-factory/worklist 6.0.45 → 6.0.47

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

@@ -0,0 +1,145 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { store } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
+    render() {
+        const activityInstance = this.context.activityInstance || {};
+        const { name, description, state, thumbnail, assignees, approvalLine, assignedAt, startedAt, dueAt, threadsMin, threadsMax } = activityInstance || {};
+        const editable = state == 'draft';
+        return html `
+      <div>
+        <div>name: ${name}</div>
+        <div>description: ${description}</div>
+        <div>state: ${state}</div>
+        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
+        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div>started at: ${startedAt && formatter.format(new Date(startedAt))}</div>
+      </div>
+
+      <div>
+        <div assignees>
+          <label>Assignees</label>
+          ${assignees
+            ? html `
+                <assignees-view
+                  .value=${assignees}
+                  @click=${() => this.onClickAssignees(activityInstance)}
+                  @change=${e => (activityInstance.assignees = e.currentTarget.value)}
+                ></assignees-view>
+              `
+            : html `<mwc-icon-button
+                icon="group_add"
+                @click=${() => this.onClickAssignees(activityInstance)}
+              ></mwc-icon-button>`}
+        </div>
+
+        <div>
+          <label>Approval Line</label>
+          ${approvalLine
+            ? html `
+                <approval-line-view
+                  .model=${approvalLine}
+                  @click=${() => this.onClickApprovalLine(activityInstance)}
+                  @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
+                ></approval-line-view>
+              `
+            : html `<mwc-icon-button
+                icon="group_add"
+                @click=${() => this.onClickApprovalLine(activityInstance)}
+              ></mwc-icon-button>`}
+        </div>
+
+        <section>
+          <label for="threads-min">Threads Min</label>
+          <input
+            id="threadsMin"
+            type="number"
+            .value=${threadsMin || 0}
+            @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}
+          />
+
+          <label for="threads-max">Threads Max</label>
+          <input
+            id="threads-max"
+            type="number"
+            .value=${threadsMax || 0}
+            @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}
+          />
+        </section>
+
+        <img src=${thumbnail} />
+      </div>
+    `;
+    }
+    stateChanged(state) {
+        this.context = state.route.context;
+    }
+    onClickAssignees(activityInstance) {
+        const { assignees } = activityInstance || {};
+        const popup = openPopup(html `
+        <assignees-editor-popup
+          .value=${assignees}
+          .confirmCallback=${value => {
+            activityInstance.assignees = value;
+            this.requestUpdate();
+        }}
+        ></assignees-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/assignees-editor',
+            size: 'large',
+            title: i18next.t('title.assignee list')
+        });
+        popup.onclosed = () => { };
+    }
+    onClickApprovalLine(activityInstance) {
+        const { approvalLine } = activityInstance || {};
+        const popup = openPopup(html `
+        <approval-line-items-editor-popup
+          .value=${approvalLine}
+          .confirmCallback=${value => {
+            activityInstance.approvalLine = value;
+            this.requestUpdate();
+        }}
+        ></approval-line-items-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/approval-line-items-editor',
+            size: 'large',
+            title: i18next.t('title.approval-line item list')
+        });
+        popup.onclosed = () => { };
+    }
+};
+ActivityInstanceContextTemplate.styles = [
+    ContextToolbarOverlayStyle,
+    css `
+      :host {
+        background-color: white;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      img {
+        max-width: 200px;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityInstanceContextTemplate.prototype, "context", void 0);
+ActivityInstanceContextTemplate = __decorate([
+    customElement('activity-instance-context-template')
+], ActivityInstanceContextTemplate);
+//# sourceMappingURL=activity-instance-context-template.js.map

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

@@ -0,0 +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/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } 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\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: white;\n\n        width: 100%;\n        padding: 5px;\n        overflow: auto;\n      }\n\n      img {\n        max-width: 200px;\n      }\n    `\n  ]\n\n  @state() private context\n\n  render() {\n    const activityInstance = this.context.activityInstance || {}\n    const {\n      name,\n      description,\n      state,\n      thumbnail,\n      assignees,\n      approvalLine,\n      assignedAt,\n      startedAt,\n      dueAt,\n      threadsMin,\n      threadsMax\n    } = activityInstance || {}\n\n    const editable = state == 'draft'\n\n    return html`\n      <div>\n        <div>name: ${name}</div>\n        <div>description: ${description}</div>\n        <div>state: ${state}</div>\n        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div>started at: ${startedAt && formatter.format(new Date(startedAt))}</div>\n      </div>\n\n      <div>\n        <div assignees>\n          <label>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`<mwc-icon-button\n                icon=\"group_add\"\n                @click=${() => this.onClickAssignees(activityInstance)}\n              ></mwc-icon-button>`}\n        </div>\n\n        <div>\n          <label>Approval Line</label>\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`<mwc-icon-button\n                icon=\"group_add\"\n                @click=${() => this.onClickApprovalLine(activityInstance)}\n              ></mwc-icon-button>`}\n        </div>\n\n        <section>\n          <label for=\"threads-min\">Threads Min</label>\n          <input\n            id=\"threadsMin\"\n            type=\"number\"\n            .value=${threadsMin || 0}\n            @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}\n          />\n\n          <label for=\"threads-max\">Threads Max</label>\n          <input\n            id=\"threads-max\"\n            type=\"number\"\n            .value=${threadsMax || 0}\n            @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}\n          />\n        </section>\n\n        <img src=${thumbnail} />\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\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"]}

package/dist-client/templates/activity-thread-context-template.js

@@ -45,6 +45,10 @@ ActivityThreadContextTemplate.styles = [
         padding: 5px;
         overflow: auto;
       }
+
+      img {
+        max-width: 200px;
+      }
     `
 ];
 __decorate([

package/dist-client/templates/activity-thread-context-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-thread-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-thread-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,OAAO,0EAA0E,CAAA;AAEjF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAGxG,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAgBpE,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,IAAI,EAAE,CAAA;QAExD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,cAAc,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA;;qBAEM,IAAI;4BACG,WAAW;sBACjB,KAAK;sBACL,KAAK;4BACC,UAAU,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;uBACzD,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;yBACxC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;;;;YAK3B,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEzF,SAAS;;KAEvB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;;AA3CM,oCAAM,GAAG;IACd,0BAA0B;IAC1B,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;8DAAgB;AAdpB,6BAA6B;IADlC,aAAa,CAAC,kCAAkC,CAAC;GAC5C,6BAA6B,CA6ClC","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-context-template')\nclass ActivityThreadContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: white;\n\n        width: 100%;\n        padding: 5px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @state() private context\n\n  render() {\n    const activityThread = this.context.activityThread || {}\n\n    const { state, round, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}\n    const { name, description, thumbnail, approvalLine } = activityInstance || {}\n\n    return html`\n      <div>\n        <div>name: ${name}</div>\n        <div>description: ${description}</div>\n        <div>state: ${state}</div>\n        <div>round: ${round}</div>\n        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div>assignee: ${assignee?.name}</div>\n      </div>\n\n      <div>\n        <div approval-line>\n          ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n        </div>\n        <img src=${thumbnail} />\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n}\n"]}
+{"version":3,"file":"activity-thread-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-thread-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,OAAO,0EAA0E,CAAA;AAEjF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAGxG,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAoBpE,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,IAAI,EAAE,CAAA;QAExD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,cAAc,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA;;qBAEM,IAAI;4BACG,WAAW;sBACjB,KAAK;sBACL,KAAK;4BACC,UAAU,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;uBACzD,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;yBACxC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;;;;YAK3B,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEzF,SAAS;;KAEvB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;;AA/CM,oCAAM,GAAG;IACd,0BAA0B;IAC1B,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;8DAAgB;AAlBpB,6BAA6B;IADlC,aAAa,CAAC,kCAAkC,CAAC;GAC5C,6BAA6B,CAiDlC","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-context-template')\nclass ActivityThreadContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: white;\n\n        width: 100%;\n        padding: 5px;\n        overflow: auto;\n      }\n\n      img {\n        max-width: 200px;\n      }\n    `\n  ]\n\n  @state() private context\n\n  render() {\n    const activityThread = this.context.activityThread || {}\n\n    const { state, round, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}\n    const { name, description, thumbnail, approvalLine } = activityInstance || {}\n\n    return html`\n      <div>\n        <div>name: ${name}</div>\n        <div>description: ${description}</div>\n        <div>state: ${state}</div>\n        <div>round: ${round}</div>\n        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div>assignee: ${assignee?.name}</div>\n      </div>\n\n      <div>\n        <div approval-line>\n          ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n        </div>\n        <img src=${thumbnail} />\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n}\n"]}