@things-factory/worklist 5.0.14 → 6.0.0-alpha.0

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

@@ -3,6 +3,7 @@ import '../../components/activity-starter-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -12,16 +13,9 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('starter-list-page')
 export class StarterListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object,
-      mode: String
-    }
-  }
-
-  static get styles() {
-    return [
+  static styles = [
       ScrollbarStyles,
       CommonGristStyles,
       css`
@@ -35,7 +29,9 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
         }
       `
     ]
-  }
+
+  @property({ type: Object }) gristConfig?: any
+	@property({ type: String }) mode :'GRID' | 'LIST' | 'CARD' = (isMobileDevice() ? 'CARD' : 'GRID')
 
   get context() {
     return {
@@ -44,8 +40,11 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
     }
   }
 
+	@query('#sorter-control') sorterControl?: any
+	@query('ox-grist') grist?: HTMLElement & { fetch: any; dirtyRecords: any }
+
   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)}>
@@ -58,8 +57,8 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
             Sort
             <mwc-icon
               @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                const target = e.currentTarget;
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -81,9 +80,7 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
+
 
   async pageInitialized(lifecycle) {
     this.gristConfig = {
@@ -115,7 +112,7 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
                 }
               )
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -182,7 +179,7 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
 
   async pageUpdated(changes, lifecycle, changedBefore) {
     if (this.active) {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 
@@ -221,5 +218,3 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
     }
   }
 }
-
-window.customElements.define('starter-list-page', StarterListPage)

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

@@ -2,6 +2,7 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -10,30 +11,25 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('activity-instance-list-page')
 export class ActivityInstanceListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
+        width: 100%;
 
-          width: 100%;
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
 
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) gristConfig: any
+  @property({ type: String }) mode: string = isMobileDevice() ? 'CARD' : 'GRID'
 
   get context() {
     return {
@@ -43,8 +39,10 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
     }
   }
 
+	@query('#sorter-control') sorterControl?: any
+
   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)}>
@@ -56,9 +54,9 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
           <div id="sorters">
             Sort
             <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+              @click=${(e: MouseEvent) => {
+                const target = e.currentTarget as HTMLElement;
+               	this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -80,10 +78,6 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -209,5 +203,3 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
     }
   }
 }
-
-window.customElements.define('activity-instance-list-page', ActivityInstanceListPage)

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

@@ -4,12 +4,13 @@ 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'
 import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
 
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
@@ -25,46 +26,41 @@ export const ActivityInstanceStatus = {
   Aborted: 'aborted'
 }
 
+@customElement('activity-instance-page')
 export class ActivityInstancePage 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 assignable = [ActivityInstanceStatus.Posted, ActivityInstanceStatus.WaitingAssignment].includes(
@@ -81,13 +77,14 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
       actions: [
         finishable && {
           title: i18next.t('button.finish'),
-          action: this._endActivityInstance.bind(this),
-          ...CommonButtonStyles.finish
+          action: this._endActivityInstance.bind(this)
         }
       ].filter(Boolean /* truthy only */)
     }
   }
 
+  @query('ox-board-viewer') viewer: any
+	
   render() {
     const { name, description, state, thumbnail, dueAt, createdAt } = this.activityInstance || {}
     return html`
@@ -206,7 +203,7 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
 
   getOutputFromBoard() {
     const outputSpec = this.getOutputSpec()
-    const data = this.renderRoot.querySelector('ox-board-viewer').getSceneData()
+    const data = this.viewer?.getSceneData() || {}
 
     return outputSpec.reduce((output, spec) => {
       output[spec.name] = data[spec.name]
@@ -417,5 +414,3 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
     }
   }
 }
-
-window.customElements.define('activity-instance-page', ActivityInstancePage)

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

@@ -3,6 +3,7 @@ import '../../components/activity-intro-view'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -13,29 +14,24 @@ import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato
 
 import { ActivityTypes } from '../../types.js'
 
+@customElement('activity-store-page')
 export class ActivityStorePage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
+        width: 100%;
 
-          width: 100%;
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
 
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) gristConfig?: any
 
   get context() {
     return {
@@ -45,12 +41,15 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
         {
           title: i18next.t('button.buy'),
           action: this._buyActivityTemplate.bind(this),
-          ...CommonButtonStyles.buy
+          ...CommonButtonStyles.save
         }
       ]
     }
   }
 
+  @query('#sorter-control') sorterControl?: any
+  @query('ox-grist') grist?: HTMLElement & { fetch: any }
+
   render() {
     return html`
       <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
@@ -64,7 +63,7 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -80,10 +79,6 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -115,7 +110,7 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
               )
 
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -187,7 +182,7 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
 
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 
@@ -229,5 +224,3 @@ export class ActivityStorePage extends connect(store)(localize(i18next)(PageView
     console.log('bought')
   }
 }
-
-window.customElements.define('activity-store-page', ActivityStorePage)

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

@@ -3,6 +3,7 @@ import '../../components/activity-reporter-view.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
@@ -12,16 +13,9 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('reporter-list-page')
 export class ReporterListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object,
-      mode: String
-    }
-  }
-
-  static get styles() {
-    return [
+  static styles = [
       ScrollbarStyles,
       CommonGristStyles,
       css`
@@ -35,7 +29,9 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
         }
       `
     ]
-  }
+
+	@property({type: Object}) gristConfig: any
+	@property({type: Object}) mode: 'GRID' | 'LIST' | 'CARD' = (isMobileDevice() ? 'CARD' : 'GRID')
 
   get context() {
     return {
@@ -44,8 +40,11 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
     }
   }
 
+	@query('#sorter-control') sorterControl?: any
+	@query('ox-grist') grist?: HTMLElement & { fetch: any; }
+
   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)}>
@@ -58,8 +57,8 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
             Sort
             <mwc-icon
               @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                const target = e.currentTarget;
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -81,10 +80,6 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -115,7 +110,7 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
                 }
               )
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -182,7 +177,7 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
 
   async pageUpdated(changes, lifecycle, changedBefore) {
     if (this.active) {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 
@@ -221,5 +216,3 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
     }
   }
 }
-
-window.customElements.define('reporter-list-page', ReporterListPage)

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

@@ -2,18 +2,41 @@ import '@operato/data-grist'
 
 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 } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('activity-template-importer')
 export class ActivityTemplateImporter extends LitElement {
-  static get properties() {
-    return {
-      columns: Object,
-      activityTemplates: Array
-    }
-  }
+  static styles = [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        ox-grist {
+          flex: 1;
+        }
+
+        .button-container {
+          display: flex;
+          margin-left: auto;
+          padding: var(--padding-default);
+        }
+
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+
+	@property({ type: Object }) columns?: any
+	@property({ type: Array }) activityTemplates?: any
 
   constructor() {
     super()
@@ -43,41 +66,14 @@ export class ActivityTemplateImporter extends LitElement {
     }
   }
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          background-color: #fff;
-        }
-
-        ox-grist {
-          flex: 1;
-        }
-
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
-
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
-
   render() {
     return html`
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
         .data=${
-          { 
-            records: this.activityTemplates 
+          {
+            records: this.activityTemplates
           }
         }
       ></ox-grist>
@@ -98,10 +94,8 @@ export class ActivityTemplateImporter extends LitElement {
       variables: { activityTemplates: this.activityTemplates }
     })
 
-    if (response.error?.length) return
+    if (response.errors?.length) return
 
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-
-window.customElements.define('activity-template-importer', ActivityTemplateImporter)