@things-factory/worklist 7.0.0-alpha.9 → 7.0.0

package/client/components/activity-instance-ribon.ts

@@ -1,158 +0,0 @@
-import '@material/mwc-button'
-import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@things-factory/organization/dist-client/component/approval-line-brief.js'
-import '../templates/activity-instance-context-template.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { toggleOverlay } from '@operato/layout'
-
-@customElement('activity-instance-ribon')
-export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        background-color: var(--worklist-status-color);
-        color: var(--theme-white-color);
-        align-items: center;
-        min-height: 44px;
-        --fontsize-small: 12px;
-      }
-
-      div {
-        border-left: var(--border-dark-color);
-        padding: var(--padding-narrow) var(--padding-default);
-        align-self: center;
-      }
-
-      :host([state='draft']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='issued']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='pending-assignment']) {
-        --worklist-status-color: #8654b0;
-      }
-
-      :host([state='assigned']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='pending']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-
-      mwc-icon {
-        font-size: 24px;
-      }
-
-      [desc] {
-        flex: 2;
-        font-size: var(--fontsize-small);
-      }
-
-      [desc] * {
-        vertical-align: middle;
-      }
-
-      [assignee] {
-        text-align: center;
-        font-size: var(--fontsize-small);
-        line-height: 1.3;
-      }
-
-      [assignee] span {
-        display: block;
-        font-size: var(--fontsize-large);
-        font-weight: bold;
-      }
-
-      approval-line-brief {
-        background-color: var(--worklist-status-color);
-        font-size: var(--fontsize-small);
-      }
-
-      [state] {
-        text-align: right;
-        font-size: var(--fontsize-small);
-        font-weight: bold;
-      }
-
-      @media only screen and (max-width: 460px) {
-        div {
-          border-left: none;
-        }
-        [assignee] {
-          display: none;
-        }
-        mwc-icon {
-          padding: 0;
-        }
-        approval-line-brief {
-          display: none;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) activityInstance: any = {}
-
-  render() {
-    const { description, state, assignee, approvalLine, activity } = this.activityInstance || {}
-    const { startingType } = activity || {}
-
-    return html`
-      <div desc>
-        <mwc-icon
-          @click=${() => {
-            toggleOverlay('activity-info-overlay', {
-              template: html`<activity-instance-context-template
-                .activityInstance=${this.activityInstance}
-                state=${state}
-              ></activity-instance-context-template>`
-            })
-          }}
-          >description</mwc-icon
-        >
-        ${description}
-      </div>
-      ${startingType == 'issue' && assignee
-        ? html`
-            <div assignee>
-              ${i18next.t('field.assignee')}
-              <span>${assignee?.name}&nbsp;</span>
-            </div>
-          `
-        : html``}
-      ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}
-
-      <div state>${i18next.t('label.activity-state-' + state)}</div>
-    `
-  }
-
-  updated(changes) {
-    if (changes.has('activityInstance') && this.activityInstance) {
-      const { state } = this.activityInstance
-
-      this.setAttribute('state', state)
-    }
-  }
-}

package/client/components/activity-intro-view.ts

@@ -1,95 +0,0 @@
-import '@material/mwc-button'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('activity-intro-view')
-class ActivityIntroView extends localize(i18next)(LitElement) {
-  @property({ type: String }) activityTemplateId: string = ''
-  @property({ type: Object }) activityTemplate: any
-  @property({ type: Object }) activityInstance: any = {}
-
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: #fff;
-      }
-
-      content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: var(--padding-default);
-        overflow: auto;
-      }
-
-      section {
-        display: flex;
-        flex-direction: column;
-      }
-    `
-  ]
-
-  render() {
-    const { name, description, thumbnail } = this.activityTemplate || {}
-
-    return html`
-      <content>
-        <section>
-          <div>name: ${name}</div>
-          <div>description: ${description}</div>
-        </section>
-
-        <section>
-          <img src=${thumbnail} />
-        </section>
-      </content>
-    `
-  }
-
-  firstUpdated() {
-    this.fetchActivity(this.activityTemplateId)
-  }
-
-  async fetchActivity(id: string) {
-    const response = await client.query({
-      query: gql`
-        query activityTemplate($id: String!) {
-          activityTemplate(id: $id) {
-            id
-            name
-            description
-            state
-            thumbnail
-            model {
-              name
-              description
-              active
-              tag
-              inout
-              type
-              unit
-              options
-              quantifier
-              spec
-            }
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    this.activityTemplate = response.data.activityTemplate
-  }
-}

package/client/components/activity-reporter-view.ts

@@ -1,95 +0,0 @@
-import '@material/mwc-button'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('activity-reporter-view')
-class ActivityReporterView extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: #fff;
-      }
-
-      content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: var(--padding-default);
-        overflow: auto;
-      }
-
-      section {
-        display: flex;
-        flex-direction: column;
-      }
-    `
-  ]
-
-  @property({ type: String }) activityId?: string
-  @property({ type: Object }) activity: any
-  @property({ type: Object }) activityInstance: any = {}
-
-  render() {
-    const { name, description, thumbnail } = this.activity || {}
-
-    return html`
-      <content>
-        <section>
-          <div>name: ${name}</div>
-          <div>description: ${description}</div>
-        </section>
-
-        <section>
-          <img src=${thumbnail} />
-        </section>
-      </content>
-    `
-  }
-
-  firstUpdated() {
-    this.fetchActivity(this.activityId)
-  }
-
-  async fetchActivity(id) {
-    const response = await client.query({
-      query: gql`
-        query activity($id: String!) {
-          activity(id: $id) {
-            id
-            name
-            description
-            state
-            thumbnail
-            model {
-              name
-              description
-              active
-              tag
-              inout
-              type
-              unit
-              options
-              quantifier
-              spec
-            }
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    this.activity = response.data.activity
-  }
-}

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

@@ -1,258 +0,0 @@
-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 { navigate } from '@operato/shell'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { notify } from '@operato/layout'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('activity-starter-form')
-export class ActivityStarterForm extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--main-section-background-color);
-      }
-
-      content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: var(--padding-default);
-        gap: 10px;
-        overflow: auto;
-      }
-
-      content > div {
-        display: flex;
-        flex-direction: column;
-        color: var(--secondary-color);
-      }
-
-      content label {
-        font: var(--label-font);
-      }
-      content input,
-      content textarea {
-        border-radius: var(--border-radius);
-        border: var(--border-dark-color);
-        padding: var(--input-padding);
-        margin: var(--input-margin);
-        font: var(--input-font);
-      }
-
-      content [desc] {
-        color: var(--secondary-text-color);
-        font-size: 0.9em;
-      }
-
-      #description {
-        height: 60px;
-      }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
-    `
-  ]
-
-  @property({ type: String }) activityId?: string
-
-  @state() activity: any = {}
-  @state() activityInstance: any = {}
-
-  render() {
-    var { thumbnail, startingType } = this.activity || {}
-    var { name, description } = this.activityInstance
-
-    return html`
-      <content>
-        <div desc>
-          <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)} />
-        </div>
-
-        <div>
-          <label for="description">${i18next.t('label.description')}</label>
-          <textarea
-            id="description"
-            .value=${description || this.activity?.description}
-            @change=${e => {
-              this.activityInstance.description = e.currentTarget.value
-            }}
-          ></textarea>
-        </div>
-
-        <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>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.fetchActivity(this.activityId)
-  }
-
-  async fetchActivity(id) {
-    const response = await client.query({
-      query: gql`
-        query activity($id: String!) {
-          activity(id: $id) {
-            id
-            name
-            description
-            state
-            multiple
-            startingType
-            assignees {
-              type
-              value
-              assignee {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            approvalLine {
-              type
-              value
-              approver {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            thumbnail
-            model {
-              name
-              description
-              active
-              tag
-              inout
-              type
-              unit
-              options
-              quantifier
-              spec
-            }
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    this.activity = response.data.activity
-  }
-
-  async draftActivityInstance() {
-    var { id: activityId } = this.activity
-    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } = this.activityInstance
-
-    name ||= this.activity.name
-    description ||= this.activity.description
-    assignees ||= this.activity.assignees
-    approvalLine ||= this.activity.approvalLine
-
-    var activityInstance = {
-      id,
-      activityId,
-      name,
-      description,
-      priority,
-      threadsMax,
-      threadsMin,
-      dueAt,
-      input,
-      assignees,
-      approvalLine
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($activityInstance: ActivityInstanceDraft!) {
-          draftActivityInstance(activityInstance: $activityInstance) {
-            id
-            name
-            description
-            input
-            output
-            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')}`
-        })
-      })
-
-      this.openActivityInstanceStart(this.activityInstance)
-    }
-  }
-
-  openActivityInstanceStart(activityInstance) {
-    navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)
-  }
-}