@things-factory/worklist 5.0.13 → 6.0.0-alpha.3

package/client/components/activity-/{bowner-view.js → bowner-view.ts}

@@ -2,46 +2,41 @@ 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-owner-view')
 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;
-        }
+  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;
-        }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        overflow: auto;
+      }
 
-        section {
-          display: flex;
-          flex-direction: column;
-        }
-      `
-    ]
-  }
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
+  @property({ type: String }) activityId?: string
+  @property({ type: Object }) activity: any
+  @property({ type: Object }) activityInstance: any
 
   constructor() {
     super()
@@ -103,5 +98,3 @@ class ActivityOwnerView extends localize(i18next)(LitElement) {
     this.activity = response.data.activity
   }
 }
-
-window.customElements.define('activity-owner-view', ActivityOwnerView)

package/client/components/{activity-instance-preview.js → activity-instance-preview.ts}

@@ -3,67 +3,57 @@ import '@operato/property-editor/ox-properties-dynamic-view.js'
 
 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 { notify } from '@operato/layout'
 import { ScrollbarStyles } from '@operato/styles'
 
+@customElement('activity-instance-preview')
 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;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
 
-        section {
-          display: flex;
-          flex-direction: column;
-        }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        overflow: auto;
+      }
 
-        #description {
-          height: 60px;
-        }
+      section {
+        display: flex;
+        flex-direction: column;
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
+      #description {
+        height: 60px;
+      }
 
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
 
-  constructor() {
-    super()
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
 
-    this.activityInstance = {}
-  }
+  @property({ type: String }) activityInstanceId?: string
+  @property({ type: Object }) activityInstance: any = {}
+  @property({ type: Array }) activityThreads: any
 
   render() {
     const {
@@ -202,5 +192,3 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
     }
   }
 }
-
-window.customElements.define('activity-instance-preview', ActivityInstancePreview)

package/client/components/{activity-reporter-view.js → activity-reporter-view.ts}

@@ -2,52 +2,42 @@ 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 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;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
 
-        section {
-          display: flex;
-          flex-direction: column;
-        }
-      `
-    ]
-  }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        overflow: auto;
+      }
 
-  constructor() {
-    super()
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
 
-    this.activityInstance = {}
-  }
+  @property({ type: String }) activityId?: string
+  @property({ type: Object }) activity: any
+  @property({ type: Object }) activityInstance: any = {}
 
   render() {
     const { name, description, thumbnail } = this.activity || {}
@@ -103,5 +93,3 @@ class ActivityReporterView extends localize(i18next)(LitElement) {
     this.activity = response.data.activity
   }
 }
-
-window.customElements.define('activity-reporter-view', ActivityReporterView)

package/client/components/{activity-starter-form.js → activity-starter-form.ts}

@@ -3,67 +3,58 @@ import '@operato/property-editor/ox-properties-dynamic-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { when } from 'lit/directives/when.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { ScrollbarStyles } from '@operato/styles'
 
-class ActivityStarterForm 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;
+@customElement('activity-starter-form')
+export class ActivityStarterForm 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;
-        }
+        background-color: #fff;
+      }
 
-        section {
-          display: flex;
-          flex-direction: column;
-        }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        overflow: auto;
+      }
 
-        #description {
-          height: 60px;
-        }
+      section {
+        display: flex;
+        flex-direction: column;
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
+      #description {
+        height: 60px;
+      }
 
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
 
-  constructor() {
-    super()
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
 
-    this.activityInstance = {}
-  }
+  @property({ type: String }) activityId?: string
+  @property({ type: Object }) activity?: any
+  @property({ type: Object }) activityInstance: any = {}
 
   render() {
     const { model, thumbnail } = this.activity || {}
@@ -145,24 +136,20 @@ class ActivityStarterForm extends localize(i18next)(LitElement) {
 
       <div class="button-container">
         <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>
-        ${
-          draftable
-            ? html`
-                <mwc-button raised @click=${this.draftActivityInstance.bind(this)}
-                  >${i18next.t('button.draft')}</mwc-button
-                >
-              `
-            : 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
-                >
-              `
-            : html``
-        }
+        ${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>
     `
   }
@@ -325,5 +312,3 @@ class ActivityStarterForm extends localize(i18next)(LitElement) {
     }
   }
 }
-
-window.customElements.define('activity-starter-form', ActivityStarterForm)

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

@@ -34,9 +34,10 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
   ]
 
   @property({ type: Object }) gristConfig?: any
-  @property({ type: String }) mode: 'CARD' | 'GRID' = 'CARD'
+  @property({ type: String }) mode: 'CARD' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') grist?: HTMLElement & { fetch: any; dirtyRecords: any }
+  @query('#sorter-control') sorterControl: any
 
   get context() {
     return {
@@ -53,7 +54,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
   }
 
   render() {
-    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
+    const mode = this.mode
 
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
@@ -67,7 +68,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                ;(this.renderRoot.querySelector('#sorter-control') as any)?.open({
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })

package/client/pages/activity/{activity-model-item-list.js → activity-model-item-list.ts}

@@ -1,21 +1,16 @@
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { OxPropertyEditor } from '@operato/property-editor'
 import { isMobileDevice } from '@operato/utils'
 
-export class ActivityModelItemList extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      activity: Object,
-      gristConfig: Object
-    }
-  }
 
-  static get styles() {
-    return [
+@customElement('activity-model-item-list')
+export class ActivityModelItemList extends localize(i18next)(LitElement) {
+  static styles = [
       css`
         :host {
           display: flex;
@@ -42,11 +37,11 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
         }
       `
     ]
-  }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
+  @property({ type: Object }) gristConfig?:any
+  @property({ type: Object }) activity: any
+
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; commit: any; deleteSelectedRecords: any; data: any }
 
   render() {
     return html`
@@ -260,7 +255,7 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
   }
 
   async _updateDataItems() {
-    this.grist.commit()
+    this.grist?.commit()
 
     const response = await client.mutate({
       mutation: gql`
@@ -273,7 +268,7 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
       variables: {
         id: this.activity.id,
         patch: {
-          model: this.grist.data.records,
+          model: this.grist?.data.records,
           cuFlag: 'M'
         }
       }
@@ -297,8 +292,6 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
       return
     }
 
-    this.grist.deleteSelectedRecords(false)
+    this.grist?.deleteSelectedRecords(false)
   }
 }
-
-window.customElements.define('activity-model-item-list', ActivityModelItemList)

package/client/pages/activity/{activity-page.js → activity-page.ts}

@@ -4,6 +4,7 @@ import '@operato/board/ox-board-viewer.js'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -25,46 +26,41 @@ export const ActivityInstanceStatus = {
   Aborted: 'aborted'
 }
 
+@customElement('activity-page')
 export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      activityInstance: Object,
-      board: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          width: 100%;
-          padding: 5px;
-          overflow: auto;
-        }
+      [header] {
+        display: block;
+        padding: 5px;
+      }
 
-        [header] {
-          display: block;
-          padding: 5px;
-        }
+      [content] {
+        flex: 1;
+        display: block;
+        padding: 5px;
+      }
 
-        [content] {
-          flex: 1;
-          display: block;
-          padding: 5px;
-        }
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
+    `
+  ]
 
-        ox-board-viewer {
-          width: 100%;
-          height: 100%;
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) activityInstance: any
+  @property({ type: Object }) board: any
 
   get context() {
     const startable = [ActivityInstanceStatus.Assigned, ActivityInstanceStatus.Posted].includes(
@@ -79,7 +75,7 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
       help: 'worklist/activity',
       actions: [
         startable && {
-          title: i18next.t('button.start'),
+          title: i18next.t('button.play'),
           action: this._startActivityInstance.bind(this),
           ...CommonButtonStyles.play
         },
@@ -93,7 +89,7 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
         finishable && {
           title: i18next.t('button.finish'),
           action: this._endActivityInstance.bind(this),
-          ...CommonButtonStyles.finish
+          ...CommonButtonStyles.save
         }
       ].filter(Boolean /* truthy only */)
     }
@@ -215,9 +211,11 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
     `
   }
 
+  @query('ox-board-viewer') boardViewer: any
+
   getOutputFromBoard() {
     const outputSpec = this.getOutputSpec()
-    const data = this.renderRoot.querySelector('ox-board-viewer').getSceneData()
+    const data = this.boardViewer.getSceneData()
 
     return outputSpec.reduce((output, spec) => {
       output[spec.name] = data[spec.name]
@@ -428,5 +426,3 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 }
-
-window.customElements.define('activity-page', ActivityPage)