@things-factory/worklist 5.0.0-zeta.7 → 5.0.0

package/README.md

@@ -0,0 +1,13 @@
+# Worklist
+
+- Activity can be defined.
+- An Activity Instance can be posted by an Issuer.
+- Activity instance can be performed by assignee.
+- Manages the life cycle of Activity Instance.
+
+## Sequence
+
+![Scenario 1](./scenarios/scenario-001.png)
+![Scenario 2](./scenarios/scenario-002.png)
+![Scenario 3](./scenarios/scenario-003.png)
+![Scenario 4](./scenarios/scenario-004.png)

package/client/bootstrap.js

@@ -1 +1,12 @@
-export default function bootstrap() {}
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'
+import { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'
+import { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'
+import { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'
+import { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'
+
+export default function bootstrap() {
+  registerGristEditor('duration', OxGristEditorDuration)
+  registerGristRenderer('duration', OxGristRendererDuration)
+  registerGristEditor('quantifier', OxGristEditorQuantifier)
+  registerGristRenderer('quantifier', OxGristRendererQuantifier)
+}

package/client/components/activity-/bowner-view.js

@@ -0,0 +1,108 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class ActivityOwnerView extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      activityId: String,
+      activity: Object,
+      activityInstance: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      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;
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+
+    this.activityInstance = {}
+  }
+
+  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
+  }
+}
+
+window.customElements.define('activity-owner-view', ActivityOwnerView)

package/client/components/activity-instance-preview.js

@@ -0,0 +1,206 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { ScrollbarStyles } from '@operato/styles'
+
+class ActivityInstancePreview extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      activityInstanceId: String,
+      activityInstance: Object,
+      activityThreads: Array
+    }
+  }
+
+  static get styles() {
+    return [
+      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;
+        }
+
+        #description {
+          height: 60px;
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+
+    this.activityInstance = {}
+  }
+
+  render() {
+    const {
+      id,
+      name,
+      description,
+      input,
+      state,
+      threadsMin = 0,
+      threadsMax = 0,
+      activity
+    } = this.activityInstance || {}
+    const { model, thumbnail } = activity || {}
+
+    const inputSpec = (model || [])
+      .filter(item => item.inout === 'in' || item.inout === 'inout')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name
+        }
+      })
+
+    const pickable = !(this.activityThreads?.length > 0)
+
+    return html`
+      <content>
+        <section>
+          <div>title: ${name}</div>
+          <div>${description}</div>
+          <div>min-max: ${threadsMin} - ${threadsMax}</div>
+          <img src=${thumbnail} />
+        </section>
+
+        <label>Input</label>
+        ${!model
+          ? html``
+          : html`
+              <ox-properties-dynamic-view
+                .props=${inputSpec}
+                .value=${input}
+                @change=${e => {
+                  /* TODO remove this comment, after solving the problem of sometimes not saving. */
+                  this.activityInstance.input = e.currentTarget.value
+                  console.log('activity-instance', this.activityInstance.input)
+                }}
+              ></ox-properties-dynamic-view>
+            `}
+      </content>
+
+      <div class="button-container">
+        <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>
+        ${pickable
+          ? html`<mwc-button raised @click=${this.pickActivityInstance.bind(this)}
+              >${i18next.t('button.pick')}</mwc-button
+            >`
+          : html``}
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('activityInstanceId')) {
+      this.fetchAll(this.activityInstanceId)
+    }
+  }
+
+  async fetchAll(id) {
+    const response = await client.query({
+      query: gql`
+        {
+          activityInstance(id: "${id}") {
+            id
+            name
+            description
+            input
+            state
+            threadsMin
+            threadsMax
+            activity {
+              id
+              name
+              description
+              state
+              thumbnail
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+          }
+
+          activityThreads(filters: [{ name: "activityInstanceId", operator: "eq", value: "${id}"}]) {
+            items {
+              id
+            }
+            total
+          }
+        }
+      `
+    })
+
+    this.activityInstance = response.data.activityInstance
+    this.activityThreads = response.data.activityThreads.items
+  }
+
+  async pickActivityInstance() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!) {
+          pickActivityInstance(id: $id) {
+            id
+          }
+        }
+      `,
+      variables: {
+        id: this.activityInstanceId
+      }
+    })
+
+    if (!response.errors) {
+      this.activityThreads = [response.data.pickActivityInstance]
+      notify({
+        message: i18next.t('text.info_x_successfully', {
+          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.pick')}`
+        })
+      })
+    }
+  }
+}
+
+window.customElements.define('activity-instance-preview', ActivityInstancePreview)

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

@@ -0,0 +1,108 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class ActivityIntroView extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      activityTemplateId: String,
+      activityTemplate: Object,
+      activityInstance: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      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;
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+
+    this.activityInstance = {}
+  }
+
+  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) {
+    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
+  }
+}
+
+window.customElements.define('activity-intro-view', ActivityIntroView)

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

@@ -0,0 +1,108 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class ActivityReporterView extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      activityId: String,
+      activity: Object,
+      activityInstance: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      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;
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+
+    this.activityInstance = {}
+  }
+
+  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
+  }
+}
+
+window.customElements.define('activity-reporter-view', ActivityReporterView)