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

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

@@ -1,48 +1,42 @@
 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 { 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()
@@ -104,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 {
@@ -106,8 +96,7 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
               <ox-properties-dynamic-view
                 .props=${inputSpec}
                 .value=${input}
-                @change=${e => {
-                  /* TODO remove this comment, after solving the problem of sometimes not saving. */
+                @property-change=${e => {
                   this.activityInstance.input = e.currentTarget.value
                   console.log('activity-instance', this.activityInstance.input)
                 }}
@@ -203,5 +192,3 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
     }
   }
 }
-
-window.customElements.define('activity-instance-preview', ActivityInstancePreview)

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

@@ -1,5 +1,4 @@
 import '@material/mwc-button'
-import '@operato/property-editor/ox-properties-dynamic-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'

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

@@ -1,54 +1,43 @@
 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 { 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 || {}
@@ -104,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
-    }
-  }
+@customElement('activity-starter-form')
+export class ActivityStarterForm extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  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;
-        }
+        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 || {}
@@ -134,8 +125,7 @@ class ActivityStarterForm extends localize(i18next)(LitElement) {
                 <ox-properties-dynamic-view
                   .props=${inputSpec}
                   .value=${input}
-                  @change=${e => {
-                    /* TODO remove this comment, after solving the problem of sometimes not saving. */
+                  @property-change=${e => {
                     this.activityInstance.input = e.currentTarget.value
                     console.log('activity-instance', this.activityInstance.input)
                   }}
@@ -146,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>
     `
   }
@@ -279,7 +265,7 @@ class ActivityStarterForm extends localize(i18next)(LitElement) {
       this.activityInstance = response.data.updateActivityInstance
       notify({
         message: i18next.t('text.info_x_successfully', {
-          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`
+          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.save')}`
         })
       })
     }
@@ -326,5 +312,3 @@ class ActivityStarterForm extends localize(i18next)(LitElement) {
     }
   }
 }
-
-window.customElements.define('activity-starter-form', ActivityStarterForm)

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

@@ -3,6 +3,7 @@ import './activity-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'
@@ -15,30 +16,28 @@ import { isMobileDevice } from '@operato/utils'
 
 import { ActivityTypes, ActivityUITypes } from '../../types.js'
 
+@customElement('activity-list-page')
 export class ActivityListPage 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: 'CARD' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; dirtyRecords: any }
+  @query('#sorter-control') sorterControl: any
 
   get context() {
     return {
@@ -55,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)}>
@@ -69,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').open({
+                this.sorterControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -83,7 +82,6 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
 
           <div id="modes">
             <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
             <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
           </div>
         </div>
@@ -91,10 +89,6 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -122,7 +116,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
                 }
               )
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -201,8 +195,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               objectified: true
             }
           },
-          width: 80,
-          label: true
+          width: 80
         },
         {
           type: 'image',
@@ -451,10 +444,10 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
   }
 
   async _updateActivity() {
-    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 } : {}
+        let patchField: any = patch.id ? { id: patch.id } : {}
         const dirtyFields = patch.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -481,10 +474,8 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       })
 
       if (!response.errors) {
-        this.grist.fetch()
+        this.grist?.fetch()
       }
     }
   }
 }
-
-window.customElements.define('activity-list-page', ActivityListPage)

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`
@@ -101,7 +96,10 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
           record: {
             editable: true
           },
-          width: 140
+          width: 140,
+          validation: (after, before, record, column) => {
+            return after
+          }
         },
         {
           type: 'string',
@@ -257,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`
@@ -270,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'
         }
       }
@@ -294,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)