@things-factory/worklist 6.0.43 → 6.0.46

package/client/bootstrap.ts

@@ -1,6 +1,7 @@
 import '@material/mwc-icon'
 import './templates/activity-approval-context-template.js'
 import './templates/activity-thread-context-template.js'
+import './templates/activity-instance-context-template.js'
 
 import { html } from 'lit-html'
 import { store } from '@operato/shell'
@@ -24,6 +25,10 @@ export default function bootstrap() {
     {
       template: html` <activity-thread-context-template></activity-thread-context-template> `,
       context: 'activityThread'
+    },
+    {
+      template: html` <activity-instance-context-template></activity-instance-context-template> `,
+      context: 'activityInstance'
     }
   ].forEach(({ template, context }) => {
     store.dispatch({

package/client/components/activity-starter-form.ts

@@ -1,16 +1,16 @@
-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'
 
 @customElement('activity-starter-form')
@@ -30,14 +30,19 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         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;
       }
@@ -56,49 +61,37 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
   @property({ type: String }) activityId?: string
 
-  @state() activity: any
+  @state() activity: any = {}
   @state() activityInstance: any = {}
 
   render() {
-    var { model, thumbnail } = this.activity || {}
-
-    const inputSpec = (model || [])
-      .filter(item => item.inout === 'in' || item.inout === 'inout')
-      .map(item => {
-        return {
-          ...item,
-          label: item.name
-        }
-      })
-
-    var {
-      id,
-      name,
-      description,
-      input,
-      state,
-      approvalLine = this.activity?.approvalLine,
-      assignees = this.activity?.assignees,
-      threadsMin = 0,
-      threadsMax = 0
-    } = this.activityInstance
-
-    const draftable = !id
-    const postable = id && state === 'draft'
+    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 || this.activity?.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 || this.activity?.description}
@@ -106,87 +99,14 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
               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>
+        </div>
 
-        <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>
-
-        <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>
     `
   }
@@ -204,6 +124,8 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             name
             description
             state
+            multiple
+            startingType
             assignees {
               type
               value
@@ -249,157 +171,24 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
   }
 
   async draftActivityInstance() {
-    const { activityId } = this
-    var { name, description, assignees, approvalLine } = this.activity
-
-    const activityInstance = {
-      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
-      }
-    })
+    var { id: activityId } = this.activity
+    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =
+      this.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')}`
-        })
-      })
-    }
-  }
+    name ||= this.activity.name
+    description ||= this.activity.description
+    assignees ||= this.activity.assignees
+    approvalLine ||= this.activity.approvalLine
 
-  async updateActivityInstance() {
-    const {
+    var activityInstance = {
       id,
+      activityId,
       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
@@ -407,8 +196,8 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
     const response = await client.mutate({
       mutation: gql`
-        mutation ($activityInstance: ActivityInstancePost!) {
-          postActivityInstance(activityInstance: $activityInstance) {
+        mutation ($activityInstance: ActivityInstanceDraft!) {
+          draftActivityInstance(activityInstance: $activityInstance) {
             id
             name
             description
@@ -445,58 +234,18 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
     })
 
     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')}`
         })
       })
-    }
-  }
-
-  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 = () => {}
+      this.openActivityInstanceStart(this.activityInstance)
+    }
   }
 
-  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}`)
   }
 }

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

@@ -3,7 +3,7 @@ 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'
 
@@ -13,9 +13,9 @@ 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 { adjustFilters, isMobileDevice } from '@operato/utils'
 
-import { ActivityTypes, ActivityUITypes } from '../../types/types.js'
+import { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js'
 
 export const ActivityStatus = [
   { display: '', value: '' },
@@ -47,7 +47,8 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
   @property({ type: String }) mode: 'CARD' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') grist!: DataGrist
-  @query('#sorter-control') sorterControl: any
+
+  @state() filters: string[] = ['released']
 
   get context() {
     return {
@@ -81,24 +82,27 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       <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: CustomEvent) => {
+                this.filters = (e.currentTarget as any)?.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">
@@ -207,14 +211,16 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           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',
@@ -222,7 +228,11 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           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
         },
@@ -472,6 +482,12 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
   }
 
   async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    const status = ['draft', 'released', 'deprecated'].filter(state => this.filters?.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!]) {
@@ -540,7 +556,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               viewSource
               reportType
               reportSource
-              startable
+              startingType
               multiple
               schedule
               timezone

package/client/pages/activity/activity-page.ts

@@ -17,7 +17,7 @@ const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full
 
 export const ActivityInstanceStatus = {
   Draft: 'draft',
-  Posted: 'posted',
+  Issued: 'issued',
   PendingAssignment: 'pending-assignment',
   Assigned: 'assigned',
   Started: 'started',
@@ -63,7 +63,7 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
   @property({ type: Object }) board: any
 
   get context() {
-    const startable = [ActivityInstanceStatus.Assigned, ActivityInstanceStatus.Posted].includes(
+    const startable = [ActivityInstanceStatus.Assigned, ActivityInstanceStatus.Issued].includes(
       this.activityInstance?.state
     )
 
@@ -318,7 +318,7 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
     const response = await client.mutate({
       mutation: gql`
         mutation ($id: String!, $save: ActivityInstanceSave!) {
-          saveActivityInstance(id: $id, save: $save) {
+          draftActivityInstance(id: $id, save: $save) {
             id
             name
             description

package/client/pages/activity/activity-partial-view.ts

@@ -45,6 +45,7 @@ export class ActivityView extends localize(i18next)(LitElement) {
       model,
       priority,
       startable,
+      startingType,
       schedule,
       timzeone,
       standardTime,
@@ -68,7 +69,7 @@ export class ActivityView extends localize(i18next)(LitElement) {
       <div>state: ${state}</div>
       ${this.renderSearchKeys(searchKeys!)} ${this.renderModel(model!)}
       <div>priority: ${priority}</div>
-      <div>startable: ${startable}</div>
+      <div>startingType: ${startingType}</div>
     `
   }