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

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

@@ -4,6 +4,7 @@ import './activity-template-model-item-list.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 { getEditor, getRenderer } from '@operato/data-grist'
@@ -16,30 +17,25 @@ import { isMobileDevice } from '@operato/utils'
 
 import { ActivityTypes, ActivityUITypes } from '../../types.js'
 
+@customElement('activity-template-list-page')
 export class ActivityTemplateListPage 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?: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'
 
   get context() {
     return {
@@ -67,8 +63,11 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
     }
   }
 
+  @query('#sorter-control') sorterControl?: any
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; selected: any; dirtyRecords: any; dirtyData: 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)}>
@@ -82,7 +81,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -104,10 +103,6 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -135,7 +130,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
                 }
               )
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -339,7 +334,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
 
   async _deleteActivityTemplate() {
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.grist.selected.map(record => record.id)
+      const ids = this.grist?.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({
           mutation: gql`
@@ -353,7 +348,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
         })
 
         if (!response.errors) {
-          this.grist.fetch()
+          this.grist?.fetch()
           notify({
             message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
           })
@@ -363,7 +358,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
   }
 
   async _updateActivityTemplate() {
-    let patches = this.grist.dirtyRecords
+    let patches = this.grist?.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
         let patchField = patch.id ? { id: patch.id } : {}
@@ -371,7 +366,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
         }
-        patchField.cuFlag = patch.__dirty__
+        ;(patchField as any).cuFlag = patch.__dirty__
 
         return patchField
       })
@@ -393,13 +388,13 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
       })
 
       if (!response.errors) {
-        this.grist.fetch()
+        this.grist?.fetch()
       }
     }
   }
 
   async exportHandler() {
-    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
+    const exportTargets = this.grist?.selected.length ? this.grist.selected : this.grist?.dirtyData.records
     const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(activityTemplate => {
@@ -419,7 +414,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           .activityTemplates=${records}
           @imported=${() => {
             history.back()
-            this.grist.fetch()
+            this.grist?.fetch()
           }}
         ></activity-template-importer>
       `,
@@ -431,9 +426,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
     )
 
     popup.onclosed = () => {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 }
-
-window.customElements.define('activity-template-list-page', ActivityTemplateListPage)

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

@@ -1,13 +1,16 @@
 import gql from 'graphql-tag'
 
+import { customElement } from 'lit/decorators.js'
+
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 
 import { ActivityModelItemList } from '../activity/activity-model-item-list'
 
+@customElement('activity-template-model-item-list')
 class ActivityTemplateModelItemList extends ActivityModelItemList {
   async _updateDataItems() {
-    this.grist.commit()
+    this.grist?.commit()
 
     const response = await client.mutate({
       mutation: gql`
@@ -20,7 +23,7 @@ class ActivityTemplateModelItemList extends ActivityModelItemList {
       variables: {
         id: this.activity.id,
         patch: {
-          model: this.grist.data.records,
+          model: this.grist?.data.records,
           cuFlag: 'M'
         }
       }
@@ -39,5 +42,3 @@ class ActivityTemplateModelItemList extends ActivityModelItemList {
     }
   }
 }
-
-window.customElements.define('activity-template-model-item-list', ActivityTemplateModelItemList)

package/client/pages/activity-thread/{activity-thread-importer.js → activity-thread-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-thread-importer')
 export class ActivityThreadImporter extends LitElement {
-  static get properties() {
-    return {
-      columns: Object,
-      activityThreads: 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 }) activityThreads?: any
 
   constructor() {
     super()
@@ -43,32 +66,6 @@ export class ActivityThreadImporter 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`
@@ -76,8 +73,8 @@ export class ActivityThreadImporter extends LitElement {
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
         .data=${
-          { 
-            records: this.activityThreads 
+          {
+            records: this.activityThreads
           }
         }
       ></ox-grist>
@@ -98,10 +95,8 @@ export class ActivityThreadImporter extends LitElement {
       variables: { activityThreads: this.activityThreads }
     })
 
-    if (response.error?.length) return
+    if (response.errors?.length) return
 
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-
-window.customElements.define('activity-thread-importer', ActivityThreadImporter)

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

@@ -3,6 +3,7 @@ import './activity-thread-importer.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 { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('activity-thread-list-page')
 export class ActivityThreadListPage 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 ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
         }
       `
     ]
-  }
+
+	@property({ type: Object }) gristConfig?: any
+	@property({ type: String }) mode?: 'GRID' | 'LIST' | 'CARD' = (isMobileDevice() ? 'LIST' : 'GRID')
 
   get context() {
     return {
@@ -63,8 +59,11 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
     }
   }
 
+	@query('#sorter-control') sorterControl?: any
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; selected: any; dirtyRecords: any; dirtyData: any }
+
   render() {
-    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+    const mode = this.mode
 
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
@@ -77,8 +76,8 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
             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
                 })
@@ -100,10 +99,6 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -221,7 +216,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
 
   async _deleteActivityThread() {
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.grist.selected.map(record => record.id)
+      const ids = this.grist?.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({
           mutation: gql`
@@ -235,7 +230,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
         })
 
         if (!response.errors) {
-          this.grist.fetch()
+          this.grist?.fetch()
           notify({
             message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
           })
@@ -245,7 +240,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
   }
 
   async _updateActivityThread() {
-    let patches = this.grist.dirtyRecords
+    let patches = this.grist?.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
         let patchField = patch.id ? { id: patch.id } : {}
@@ -253,7 +248,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
         }
-        patchField.cuFlag = patch.__dirty__
+        (patchField as any).cuFlag = patch.__dirty__
 
         return patchField
       })
@@ -272,13 +267,13 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
       })
 
       if (!response.errors) {
-        this.grist.fetch()
+        this.grist?.fetch()
       }
     }
   }
 
   async exportHandler() {
-    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
+    const exportTargets = this.grist?.selected.length ? this.grist?.selected : this.grist?.dirtyData.records
     const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(activityThread => {
@@ -298,7 +293,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
           .activityThreads=${records}
           @imported=${() => {
             history.back()
-            this.grist.fetch()
+            this.grist?.fetch()
           }}
         ></activity-thread-importer>
       `,
@@ -310,9 +305,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
     )
 
     popup.onclosed = () => {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 }
-
-window.customElements.define('activity-thread-list-page', ActivityThreadListPage)

package/client/pages/activity-thread/{activity-thread-page.js → activity-thread-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'
@@ -16,7 +17,7 @@ const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full
 
 const ActivityThreadFetchResult = `\
 {
-  id 
+  id
   state
   dueAt
   assignedAt
@@ -62,46 +63,41 @@ export const ActivityThreadStatus = {
   Aborted: 'aborted'
 }
 
+@customElement('activity-thread-page')
 export class ActivityThreadPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      activityThread: 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 }) activityThread: any
+  @property({ type: Object }) board: any
 
   get context() {
     const startable = [ActivityThreadStatus.Assigned].includes(this.activityThread?.state)
@@ -128,7 +124,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         endable && {
           title: i18next.t('button.finish'),
           action: this._endActivityThread.bind(this),
-          ...CommonButtonStyles.finish
+          ...CommonButtonStyles.save
         }
       ].filter(Boolean /* truthy only */)
     }
@@ -255,9 +251,11 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
+  @query('ox-board-viewer') oxBoardViewer: any
+
   getOutputFromBoard() {
     const outputSpec = this.getOutputSpec()
-    const data = this.renderRoot.querySelector('ox-board-viewer').getSceneData()
+    const data = this.oxBoardViewer.getSceneData()
 
     return outputSpec.reduce((output, spec) => {
       output[spec.name] = data[spec.name]
@@ -394,5 +392,3 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 }
-
-window.customElements.define('activity-thread-page', ActivityThreadPage)

package/client/pages/dashboard/{dashboard-home.js → dashboard-home.ts}

@@ -1,13 +1,11 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { PageView, store } from '@operato/shell'
 
+@customElement('worklist-dashboard')
 class WorklistDashboardHome extends connect(store)(PageView) {
-  static get properties() {
-    return {}
-  }
-
   render() {
     return html`
       <section>
@@ -16,5 +14,3 @@ class WorklistDashboardHome extends connect(store)(PageView) {
     `
   }
 }
-
-window.customElements.define('worklist-dashboard', WorklistDashboardHome)

package/client/pages/todo/{assigned-list-page.js → assigned-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 { getRenderer } from '@operato/data-grist'
@@ -11,16 +12,9 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
+@customElement('assigned-list-page')
 export class AssignedListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: Object,
-      mode: String
-    }
-  }
-
-  static get styles() {
-    return [
+  static styles = [
       ScrollbarStyles,
       CommonGristStyles,
       css`
@@ -34,7 +28,9 @@ export class AssignedListPage extends connect(store)(localize(i18next)(PageView)
         }
       `
     ]
-  }
+
+	@property({ type: Object }) gristConfig?: any
+	@property({ type: String }) mode : 'GRID' | 'LIST' | 'CARD' = (isMobileDevice() ? 'LIST' : 'GRID')
 
   get context() {
     return {
@@ -44,8 +40,11 @@ export class AssignedListPage 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 AssignedListPage 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 AssignedListPage extends connect(store)(localize(i18next)(PageView)
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -196,7 +191,7 @@ export class AssignedListPage extends connect(store)(localize(i18next)(PageView)
 
   async pageUpdated(changes, lifecycle, changedBefore) {
     if (this.active) {
-      this.grist.fetch()
+      this.grist?.fetch()
     }
   }
 
@@ -241,5 +236,3 @@ export class AssignedListPage extends connect(store)(localize(i18next)(PageView)
     }
   }
 }
-
-window.customElements.define('assigned-list-page', AssignedListPage)