@things-factory/worklist 6.0.45 → 6.0.46

package/dist-client/components/activity-starter-form.js

@@ -1,127 +1,65 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
 import '@material/mwc-icon-button';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@material/mwc-button';
 import '@things-factory/organization';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
+import { navigate } from '@operato/shell';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { notify, openPopup } from '@operato/layout';
+import { notify } from '@operato/layout';
 import { ScrollbarStyles } from '@operato/styles';
 let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
+        this.activity = {};
         this.activityInstance = {};
     }
     render() {
-        var _a, _b, _c, _d;
-        var { model, thumbnail } = this.activity || {};
-        const inputSpec = (model || [])
-            .filter(item => item.inout === 'in' || item.inout === 'inout')
-            .map(item => {
-            return Object.assign(Object.assign({}, item), { label: item.name });
-        });
-        var { id, name, description, input, state, approvalLine = (_a = this.activity) === null || _a === void 0 ? void 0 : _a.approvalLine, assignees = (_b = this.activity) === null || _b === void 0 ? void 0 : _b.assignees, threadsMin = 0, threadsMax = 0 } = this.activityInstance;
-        const draftable = !id;
-        const postable = id && state === 'draft';
+        var _a, _b;
+        var { thumbnail, startingType } = this.activity || {};
+        var { name, description } = this.activityInstance;
         return html `
       <content>
-        <section>
-          <label for="name">title</label>
+        <div>
+          <span
+            >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로
+            이동합니다.</span
+          >
+
+          <span
+            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,
+            '${startingType == 'issue' ? '이슈' : '제출'}' 전까지 언제든지 수정할 수 있습니다.</span
+          >
+        </div>
+        <div>
+          <label for="name">${i18next.t('label.title')}</label>
           <input
             id="name"
-            .value=${name || ((_c = this.activity) === null || _c === void 0 ? void 0 : _c.name)}
+            .value=${name || ((_a = this.activity) === null || _a === void 0 ? void 0 : _a.name)}
             @change=${e => (this.activityInstance.name = e.currentTarget.value)}
           />
-        </section>
+        </div>
 
-        <section>
-          <label for="description">description</label>
+        <div>
+          <label for="description">${i18next.t('label.description')}</label>
           <textarea
             id="description"
-            .value=${description || ((_d = this.activity) === null || _d === void 0 ? void 0 : _d.description)}
+            .value=${description || ((_b = this.activity) === null || _b === void 0 ? void 0 : _b.description)}
             @change=${e => {
             this.activityInstance.description = e.currentTarget.value;
         }}
           ></textarea>
-        </section>
-
-        <section>
-          <label for="threads-min">Threads Min</label>
-          <input
-            id="threadsMin"
-            type="number"
-            .value=${threadsMin || 0}
-            @change=${e => (this.activityInstance.threadsMin = e.currentTarget.valueAsNumber)}
-          />
-
-          <label for="threads-max">Threads Max</label>
-          <input
-            id="threads-max"
-            type="number"
-            .value=${threadsMax || 0}
-            @change=${e => (this.activityInstance.threadsMax = e.currentTarget.valueAsNumber)}
-          />
-        </section>
-
-        <section>
-          <label>Assignees</label>
-          ${assignees
-            ? html `
-                <assignees-view
-                  .value=${assignees}
-                  @click=${this.onClickAssignees.bind(this)}
-                  @change=${e => (this.activityInstance.assignees = e.currentTarget.value)}
-                ></assignees-view>
-              `
-            : html `<mwc-icon-button icon="group_add" @click=${this.onClickAssignees.bind(this)}></mwc-icon-button>`}
-        </section>
-
-        <section>
-          <label>Approval Line</label>
-          ${approvalLine
-            ? html `
-                <approval-line-view
-                  .model=${approvalLine}
-                  @click=${this.onClickApprovalLine.bind(this)}
-                  @change=${e => (this.activityInstance.approvalLine = e.currentTarget.value)}
-                ></approval-line-view>
-              `
-            : html `<mwc-icon-button icon="group_add" @click=${this.onClickApprovalLine.bind(this)}></mwc-icon-button>`}
-        </section>
+        </div>
 
-        <section>
-          <img src=${thumbnail} />
-        </section>
-
-        <label>Input</label>
-
-        ${!model
-            ? html ``
-            : html `
-              <ox-properties-dynamic-view
-                .props=${inputSpec}
-                .value=${input}
-                @property-change=${e => {
-                this.activityInstance.input = e.currentTarget.value;
-                console.log('activity-instance', this.activityInstance.input);
-            }}
-              ></ox-properties-dynamic-view>
-            `}
+        <img src=${thumbnail} />
       </content>
 
       <div class="button-container">
+        <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>
         <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>
-        ${when(draftable, () => html `
-            <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>
-          `)}
-        ${when(postable, () => html `
-            <mwc-button raised @click=${this.updateActivityInstance.bind(this)}>${i18next.t('button.save')}</mwc-button>
-            <mwc-button raised @click=${this.postActivityInstance.bind(this)}>${i18next.t('button.post')}</mwc-button>
-          `)}
       </div>
     `;
     }
@@ -137,6 +75,8 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
             name
             description
             state
+            multiple
+            startingType
             assignees {
               type
               value
@@ -180,135 +120,29 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
         this.activity = response.data.activity;
     }
     async draftActivityInstance() {
-        const { activityId } = this;
-        var { name, description, assignees, approvalLine } = this.activity;
-        const activityInstance = Object.assign({ activityId,
+        var { id: activityId } = this.activity;
+        var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } = this.activityInstance;
+        name || (name = this.activity.name);
+        description || (description = this.activity.description);
+        assignees || (assignees = this.activity.assignees);
+        approvalLine || (approvalLine = this.activity.approvalLine);
+        var activityInstance = {
+            id,
+            activityId,
             name,
             description,
-            assignees,
-            approvalLine }, this.activityInstance);
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($activityInstance: NewActivityInstance!) {
-          draftActivityInstance(activityInstance: $activityInstance) {
-            id
-            name
-            description
-            input
-            state
-            assignees {
-              type
-              value
-              assignee {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            approvalLine {
-              type
-              value
-              approver {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            threadsMin
-            threadsMax
-          }
-        }
-      `,
-            variables: {
-                activityInstance
-            }
-        });
-        if (!response.errors) {
-            this.activityInstance = response.data.draftActivityInstance;
-            notify({
-                message: i18next.t('text.info_x_successfully', {
-                    x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`
-                })
-            });
-        }
-    }
-    async updateActivityInstance() {
-        const { id, name, description, input, threadsMin = 0, threadsMax = 0, assignees, approvalLine } = this.activityInstance;
-        const patch = {
-            name: name || this.activity.name,
-            description: description || this.activity.description,
-            input,
-            threadsMin,
+            priority,
             threadsMax,
-            assignees,
-            approvalLine
-        };
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!, $patch: ActivityInstancePatch!) {
-          updateActivityInstance(id: $id, patch: $patch) {
-            id
-            name
-            description
-            input
-            state
-            assignees {
-              type
-              value
-              assignee {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            approvalLine {
-              type
-              value
-              approver {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            threadsMin
-            threadsMax
-          }
-        }
-      `,
-            variables: {
-                id,
-                patch
-            }
-        });
-        if (!response.errors) {
-            this.activityInstance = response.data.updateActivityInstance;
-            notify({
-                message: i18next.t('text.info_x_successfully', {
-                    x: `${i18next.t('label.activity-instance')} ${i18next.t('text.save')}`
-                })
-            });
-        }
-    }
-    async postActivityInstance() {
-        const { id, name, description, input, threadsMin = 0, threadsMax = 0, assignees, approvalLine } = this.activityInstance;
-        const activityInstance = {
-            id,
-            name: name || this.activity.name,
-            description: description || this.activity.description,
             threadsMin,
-            threadsMax,
+            dueAt,
             input,
             assignees,
             approvalLine
         };
         const response = await client.mutate({
             mutation: gql `
-        mutation ($activityInstance: ActivityInstancePost!) {
-          postActivityInstance(activityInstance: $activityInstance) {
+        mutation ($activityInstance: ActivityInstanceDraft!) {
+          draftActivityInstance(activityInstance: $activityInstance) {
             id
             name
             description
@@ -344,49 +178,17 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
             }
         });
         if (!response.errors) {
-            this.activityInstance = response.data.postActivityInstance;
+            this.activityInstance = response.data.draftActivityInstance;
             notify({
                 message: i18next.t('text.info_x_successfully', {
-                    x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`
+                    x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`
                 })
             });
+            this.openActivityInstanceStart(this.activityInstance);
         }
     }
-    onClickAssignees() {
-        const { assignees } = this.activityInstance || {};
-        const popup = openPopup(html `
-        <assignees-editor-popup
-          .value=${assignees}
-          .confirmCallback=${value => {
-            this.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() {
-        const { approvalLine } = this.activityInstance || {};
-        const popup = openPopup(html `
-        <approval-line-items-editor-popup
-          .value=${approvalLine}
-          .confirmCallback=${value => {
-            this.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 = () => { };
+    openActivityInstanceStart(activityInstance) {
+        navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`);
     }
 };
 ActivityStarterForm.styles = [
@@ -404,14 +206,19 @@ ActivityStarterForm.styles = [
         display: flex;
         flex-direction: column;
         padding: var(--padding-default);
+        gap: 10px;
         overflow: auto;
       }
 
-      section {
+      content > div {
         display: flex;
         flex-direction: column;
       }
 
+      content span {
+        color: navy;
+      }
+
       #description {
         height: 60px;
       }

package/dist-client/components/activity-starter-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '@material/mwc-icon-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        padding: var(--padding-default);\n        overflow: auto;\n      }\n\n      section {\n        display: flex;\n        flex-direction: column;\n      }\n\n      #description {\n        height: 60px;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n        padding: var(--padding-default);\n      }\n\n      mwc-button {\n        margin-left: var(--margin-default);\n      }\n    `\n  ]\n\n  @property({ type: String }) activityId?: string\n\n  @state() activity: any\n  @state() activityInstance: any = {}\n\n  render() {\n    var { model, thumbnail } = this.activity || {}\n\n    const inputSpec = (model || [])\n      .filter(item => item.inout === 'in' || item.inout === 'inout')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name\n        }\n      })\n\n    var {\n      id,\n      name,\n      description,\n      input,\n      state,\n      approvalLine = this.activity?.approvalLine,\n      assignees = this.activity?.assignees,\n      threadsMin = 0,\n      threadsMax = 0\n    } = this.activityInstance\n\n    const draftable = !id\n    const postable = id && state === 'draft'\n\n    return html`\n      <content>\n        <section>\n          <label for=\"name\">title</label>\n          <input\n            id=\"name\"\n            .value=${name || this.activity?.name}\n            @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n          />\n        </section>\n\n        <section>\n          <label for=\"description\">description</label>\n          <textarea\n            id=\"description\"\n            .value=${description || this.activity?.description}\n            @change=${e => {\n              this.activityInstance.description = e.currentTarget.value\n            }}\n          ></textarea>\n        </section>\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 => (this.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 => (this.activityInstance.threadsMax = e.currentTarget.valueAsNumber)}\n          />\n        </section>\n\n        <section>\n          <label>Assignees</label>\n          ${assignees\n            ? html`\n                <assignees-view\n                  .value=${assignees}\n                  @click=${this.onClickAssignees.bind(this)}\n                  @change=${e => (this.activityInstance.assignees = e.currentTarget.value)}\n                ></assignees-view>\n              `\n            : html`<mwc-icon-button icon=\"group_add\" @click=${this.onClickAssignees.bind(this)}></mwc-icon-button>`}\n        </section>\n\n        <section>\n          <label>Approval Line</label>\n          ${approvalLine\n            ? html`\n                <approval-line-view\n                  .model=${approvalLine}\n                  @click=${this.onClickApprovalLine.bind(this)}\n                  @change=${e => (this.activityInstance.approvalLine = e.currentTarget.value)}\n                ></approval-line-view>\n              `\n            : html`<mwc-icon-button icon=\"group_add\" @click=${this.onClickApprovalLine.bind(this)}></mwc-icon-button>`}\n        </section>\n\n        <section>\n          <img src=${thumbnail} />\n        </section>\n\n        <label>Input</label>\n\n        ${!model\n          ? html``\n          : html`\n              <ox-properties-dynamic-view\n                .props=${inputSpec}\n                .value=${input}\n                @property-change=${e => {\n                  this.activityInstance.input = e.currentTarget.value\n                  console.log('activity-instance', this.activityInstance.input)\n                }}\n              ></ox-properties-dynamic-view>\n            `}\n      </content>\n\n      <div class=\"button-container\">\n        <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>\n        ${when(\n          draftable,\n          () => html`\n            <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>\n          `\n        )}\n        ${when(\n          postable,\n          () => html`\n            <mwc-button raised @click=${this.updateActivityInstance.bind(this)}>${i18next.t('button.save')}</mwc-button>\n            <mwc-button raised @click=${this.postActivityInstance.bind(this)}>${i18next.t('button.post')}</mwc-button>\n          `\n        )}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchActivity(this.activityId)\n  }\n\n  async fetchActivity(id) {\n    const response = await client.query({\n      query: gql`\n        query activity($id: String!) {\n          activity(id: $id) {\n            id\n            name\n            description\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            thumbnail\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        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activity = response.data.activity\n  }\n\n  async draftActivityInstance() {\n    const { activityId } = this\n    var { name, description, assignees, approvalLine } = this.activity\n\n    const activityInstance = {\n      activityId,\n      name,\n      description,\n      assignees,\n      approvalLine,\n      ...this.activityInstance\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: NewActivityInstance!) {\n          draftActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.activityInstance = response.data.draftActivityInstance\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n        })\n      })\n    }\n  }\n\n  async updateActivityInstance() {\n    const {\n      id,\n      name,\n      description,\n      input,\n      threadsMin = 0,\n      threadsMax = 0,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    const patch = {\n      name: name || this.activity.name,\n      description: description || this.activity.description,\n      input,\n      threadsMin,\n      threadsMax,\n      assignees,\n      approvalLine\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!, $patch: ActivityInstancePatch!) {\n          updateActivityInstance(id: $id, patch: $patch) {\n            id\n            name\n            description\n            input\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        id,\n        patch\n      }\n    })\n\n    if (!response.errors) {\n      this.activityInstance = response.data.updateActivityInstance\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.save')}`\n        })\n      })\n    }\n  }\n\n  async postActivityInstance() {\n    const {\n      id,\n      name,\n      description,\n      input,\n      threadsMin = 0,\n      threadsMax = 0,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    const activityInstance = {\n      id,\n      name: name || this.activity.name,\n      description: description || this.activity.description,\n      threadsMin,\n      threadsMax,\n      input,\n      assignees,\n      approvalLine\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: ActivityInstancePost!) {\n          postActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.activityInstance = response.data.postActivityInstance\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`\n        })\n      })\n    }\n  }\n\n  onClickAssignees() {\n    const { assignees } = this.activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <assignees-editor-popup\n          .value=${assignees}\n          .confirmCallback=${value => {\n            this.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() {\n    const { approvalLine } = this.activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <approval-line-items-editor-popup\n          .value=${approvalLine}\n          .confirmCallback=${value => {\n            this.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"]}
+{"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@material/mwc-button'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        padding: var(--padding-default);\n        gap: 10px;\n        overflow: auto;\n      }\n\n      content > div {\n        display: flex;\n        flex-direction: column;\n      }\n\n      content span {\n        color: navy;\n      }\n\n      #description {\n        height: 60px;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n        padding: var(--padding-default);\n      }\n\n      mwc-button {\n        margin-left: var(--margin-default);\n      }\n    `\n  ]\n\n  @property({ type: String }) activityId?: string\n\n  @state() activity: any = {}\n  @state() activityInstance: any = {}\n\n  render() {\n    var { thumbnail, startingType } = this.activity || {}\n    var { name, description } = this.activityInstance\n\n    return html`\n      <content>\n        <div>\n          <span\n            >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로\n            이동합니다.</span\n          >\n\n          <span\n            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,\n            '${startingType == 'issue' ? '이슈' : '제출'}' 전까지 언제든지 수정할 수 있습니다.</span\n          >\n        </div>\n        <div>\n          <label for=\"name\">${i18next.t('label.title')}</label>\n          <input\n            id=\"name\"\n            .value=${name || this.activity?.name}\n            @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n          />\n        </div>\n\n        <div>\n          <label for=\"description\">${i18next.t('label.description')}</label>\n          <textarea\n            id=\"description\"\n            .value=${description || this.activity?.description}\n            @change=${e => {\n              this.activityInstance.description = e.currentTarget.value\n            }}\n          ></textarea>\n        </div>\n\n        <img src=${thumbnail} />\n      </content>\n\n      <div class=\"button-container\">\n        <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>\n        <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchActivity(this.activityId)\n  }\n\n  async fetchActivity(id) {\n    const response = await client.query({\n      query: gql`\n        query activity($id: String!) {\n          activity(id: $id) {\n            id\n            name\n            description\n            state\n            multiple\n            startingType\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            thumbnail\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        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activity = response.data.activity\n  }\n\n  async draftActivityInstance() {\n    var { id: activityId } = this.activity\n    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n      this.activityInstance\n\n    name ||= this.activity.name\n    description ||= this.activity.description\n    assignees ||= this.activity.assignees\n    approvalLine ||= this.activity.approvalLine\n\n    var activityInstance = {\n      id,\n      activityId,\n      name,\n      description,\n      priority,\n      threadsMax,\n      threadsMin,\n      dueAt,\n      input,\n      assignees,\n      approvalLine\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: ActivityInstanceDraft!) {\n          draftActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            state\n            assignees {\n              type\n              value\n              assignee {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.activityInstance = response.data.draftActivityInstance\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n        })\n      })\n\n      this.openActivityInstanceStart(this.activityInstance)\n    }\n  }\n\n  openActivityInstanceStart(activityInstance) {\n    navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)\n  }\n}\n"]}

package/dist-client/pages/activity/activity-list-page.d.ts

@@ -18,7 +18,7 @@ export declare class ActivityListPage extends ActivityListPage_base {
     gristConfig?: any;
     mode: 'CARD' | 'GRID';
     grist: DataGrist;
-    sorterControl: any;
+    filters: string[];
     get context(): {
         search: {
             handler: (search: string) => void;

package/dist-client/pages/activity/activity-list-page.js

@@ -3,7 +3,7 @@ import '@operato/data-grist';
 import './activity-model-item-list.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
 import moment from 'moment-timezone';
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist';
@@ -12,8 +12,8 @@ import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { PageView, store } from '@operato/shell';
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
-import { isMobileDevice } from '@operato/utils';
-import { ActivityTypes, ActivityUITypes } from '../../types/types.js';
+import { adjustFilters, isMobileDevice } from '@operato/utils';
+import { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js';
 export const ActivityStatus = [
     { display: '', value: '' },
     { display: i18next.t('label.activity-state-draft'), value: 'draft' },
@@ -26,6 +26,7 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        this.filters = ['released'];
     }
     get context() {
         return {
@@ -53,24 +54,28 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
-          </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-            const target = e.currentTarget;
-            this.sorterControl.open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-            });
+            <ox-input-select-buttons
+              .value=${this.filters}
+              .options=${[
+            {
+                display: i18next.t('label.filter-draft'),
+                value: 'draft'
+            },
+            {
+                display: i18next.t('label.filter-released'),
+                value: 'released'
+            },
+            {
+                display: i18next.t('label.filter-deprecated'),
+                value: 'deprecated'
+            }
+        ]}
+              @change=${(e) => {
+            var _a;
+            this.filters = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+            this.grist.fetch();
         }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
+            ></ox-input-select-buttons>
           </div>
 
           <div id="modes">
@@ -178,14 +183,16 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     width: 60
                 },
                 {
-                    type: 'boolean',
-                    name: 'startable',
+                    type: 'select',
+                    name: 'startingType',
                     label: true,
-                    header: i18next.t('field.startable'),
+                    header: i18next.t('field.starting-type'),
                     record: {
-                        editable: true
+                        editable: true,
+                        options: ActivityStartingTypes
                     },
-                    width: 50
+                    sortable: true,
+                    width: 60
                 },
                 {
                     type: 'select',
@@ -193,7 +200,11 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     header: i18next.t('field.multiple'),
                     record: {
                         editable: true,
-                        options: ['', 'parallel', 'sequential']
+                        options: [
+                            { display: 'Single', value: '' },
+                            { display: 'Parallel', value: 'parallel' },
+                            { display: 'Sequential', value: 'sequential' }
+                        ]
                     },
                     width: 80
                 },
@@ -442,6 +453,10 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
         };
     }
     async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+        const status = ['draft', 'released', 'deprecated'].filter(state => { var _a; return (_a = this.filters) === null || _a === void 0 ? void 0 : _a.includes(state); });
+        if (status.length > 0) {
+            filters = adjustFilters(filters, [{ name: 'state', operator: 'in', value: status }]);
+        }
         const response = await client.query({
             query: gql `
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -510,7 +525,7 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
               viewSource
               reportType
               reportSource
-              startable
+              startingType
               multiple
               schedule
               timezone
@@ -646,9 +661,9 @@ __decorate([
     __metadata("design:type", DataGrist)
 ], ActivityListPage.prototype, "grist", void 0);
 __decorate([
-    query('#sorter-control'),
-    __metadata("design:type", Object)
-], ActivityListPage.prototype, "sorterControl", void 0);
+    state(),
+    __metadata("design:type", Array)
+], ActivityListPage.prototype, "filters", void 0);
 ActivityListPage = __decorate([
     customElement('activity-list-page')
 ], ActivityListPage);