@things-factory/worklist 5.0.7 → 5.0.13

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

@@ -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-instance-preview.js

@@ -106,8 +106,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)
                 }}

package/client/components/{activity-intro-view.js → activity-intro-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-intro-view')
 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;
-        }
-      `
-    ]
-  }
+  @property({ type: String }) activityTemplateId: string = ''
+  @property({ type: Object }) activityTemplate: any
+  @property({ type: Object }) activityInstance: any = {}
+
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
 
-  constructor() {
-    super()
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding-default);
+        overflow: auto;
+      }
 
-    this.activityInstance = {}
-  }
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
 
   render() {
     const { name, description, thumbnail } = this.activityTemplate || {}
@@ -71,7 +60,7 @@ class ActivityIntroView extends localize(i18next)(LitElement) {
     this.fetchActivity(this.activityTemplateId)
   }
 
-  async fetchActivity(id) {
+  async fetchActivity(id: string) {
     const response = await client.query({
       query: gql`
         query activityTemplate($id: String!) {
@@ -104,5 +93,3 @@ class ActivityIntroView extends localize(i18next)(LitElement) {
     this.activityTemplate = response.data.activityTemplate
   }
 }
-
-window.customElements.define('activity-intro-view', ActivityIntroView)

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

@@ -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-starter-form.js

@@ -134,8 +134,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)
                   }}
@@ -279,7 +278,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')}`
         })
       })
     }

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

@@ -3,7 +3,8 @@ import './activity-model-item-list.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { customElement, property, query } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -13,32 +14,29 @@ import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-import { ActivityTypes, ActivityUITypes } from '../../types'
+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' = 'CARD'
+
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; dirtyRecords: any }
 
   get context() {
     return {
@@ -69,7 +67,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.renderRoot.querySelector('#sorter-control') as any)?.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -83,7 +81,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 +88,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 +115,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
                 }
               )
               popup.onclosed = () => {
-                this.grist.fetch()
+                this.grist?.fetch()
               }
             }
           }
@@ -201,8 +194,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               objectified: true
             }
           },
-          width: 80,
-          label: true
+          width: 80
         },
         {
           type: 'image',
@@ -451,10 +443,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 +473,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

@@ -101,7 +101,10 @@ export class ActivityModelItemList extends localize(i18next)(LitElement) {
           record: {
             editable: true
           },
-          width: 140
+          width: 140,
+          validation: (after, before, record, column) => {
+            return after
+          }
         },
         {
           type: 'string',

package/client/pages/activity/activity-page.js

@@ -4,7 +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 { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -25,7 +25,6 @@ export const ActivityInstanceStatus = {
   Aborted: 'aborted'
 }
 
-// TODO activity editing..
 export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
@@ -189,7 +188,7 @@ export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
           data-name="output"
           .props=${outputSpec}
           .value=${output}
-          @change=${e => (this.activityInstance.output = e.currentTarget.value)}
+          @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}
         ></ox-properties-dynamic-view>
       </fieldset>
     `

package/client/pages/activity/starter-list-page.js

@@ -3,7 +3,7 @@ import '../../components/activity-starter-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/activity-instance/activity-instance-list-page.js

@@ -2,7 +2,7 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/activity-instance/activity-instance-page.js

@@ -4,7 +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 { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -177,7 +177,7 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
           data-name="output"
           .props=${outputSpec}
           .value=${output}
-          @change=${e => (this.activityInstance.output = e.currentTarget.value)}
+          @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}
         ></ox-properties-dynamic-view>
       </fieldset>
     `

package/client/pages/activity-store/activity-store-page.js

@@ -3,7 +3,7 @@ import '../../components/activity-intro-view'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/activity-supervisor/reporter-list-page.js

@@ -3,7 +3,7 @@ import '../../components/activity-reporter-view.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/activity-template/activity-template-list-page.js

@@ -4,7 +4,7 @@ import './activity-template-model-item-list.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'

package/client/pages/activity-thread/activity-thread-list-page.js

@@ -3,7 +3,7 @@ import './activity-thread-importer.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/activity-thread/activity-thread-page.js

@@ -4,7 +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 { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -227,7 +227,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
           data-name="output"
           .props=${outputSpec}
           .value=${output}
-          @change=${e => (this.activityThread.output = e.currentTarget.value)}
+          @property-change=${e => (this.activityThread.output = e.currentTarget.value)}
         ></ox-properties-dynamic-view>
       </fieldset>
     `

package/client/pages/todo/assigned-list-page.js

@@ -2,7 +2,7 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'

package/client/pages/todo/draft-list-page.js

@@ -3,7 +3,7 @@ import '../../components/activity-starter-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -13,7 +13,7 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-import { ActivityInstanceStatus, Priorities } from '../../types'
+import { ActivityInstanceStatus, Priorities } from '../../types.js'
 
 const MIN = 60
 const HOUR = 60 * MIN
@@ -295,6 +295,8 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
                 id
               }
               activityType
+              threadsMin
+              threadsMax
               uiType
               uiSource
               dueAt

package/client/pages/todo/pickable-list-page.js

@@ -1,9 +1,9 @@
 import '@operato/data-grist'
-import '../../components/activity-instance-preview'
+import '../../components/activity-instance-preview.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'

package/client/pages/todo/todo-list-page.js

@@ -3,7 +3,7 @@ import '@operato/data-grist'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { asyncReplace } from 'lit/directives/async-replace.js'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -12,7 +12,7 @@ import { navigate, PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, sleep } from '@operato/utils'
 
-import { ActivityInstanceStatus, Priorities } from '../../types'
+import { ActivityInstanceStatus, Priorities } from '../../types.js'
 
 const MIN = 60
 const HOUR = 60 * MIN

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

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

package/client/{route.js → route.ts}

@@ -1,4 +1,4 @@
-export default function route(page) {
+export default function route(page: string) {
   switch (page) {
     case 'worklist-home':
       import('./pages/worklist-home.js')

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,12 @@
+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);
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AACtH,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAA;AACzF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,uDAAuD,CAAA;AAEjG,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,CAAC,CAAA;IACtD,qBAAqB,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,qBAAqB,CAAC,YAAY,EAAE,yBAAyB,CAAC,CAAA;AAChE,CAAC","sourcesContent":["import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'\nimport { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'\nimport { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'\nimport { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'\nimport { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'\n\nexport default function bootstrap() {\n  registerGristEditor('duration', OxGristEditorDuration)\n  registerGristRenderer('duration', OxGristRendererDuration)\n  registerGristEditor('quantifier', OxGristEditorQuantifier)\n  registerGristRenderer('quantifier', OxGristRendererQuantifier)\n}\n"]}

package/dist-client/components/activity-/bowner-view.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,96 @@
+import '@material/mwc-button';
+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);
+//# sourceMappingURL=activity-%08owner-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-\bowner-view.js","sourceRoot":"","sources":["../../client/components/activity-\bowner-view.js"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAC3D,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,MAAM;YAChB,gBAAgB,EAAE,MAAM;SACzB,CAAA;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,eAAe;YACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;OAoBF;SACF,CAAA;IACH,CAAC;IAED;QACE,KAAK,EAAE,CAAA;QAEP,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA;;;uBAGQ,IAAI;8BACG,WAAW;;;;qBAIpB,SAAS;;;KAGzB,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAE;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAA;IACxC,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAA","sourcesContent":["import '@material/mwc-button'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nclass ActivityOwnerView extends localize(i18next)(LitElement) {\n  static get properties() {\n    return {\n      activityId: String,\n      activity: Object,\n      activityInstance: Object\n    }\n  }\n\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: flex;\n          flex-direction: column;\n\n          background-color: #fff;\n        }\n\n        content {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          padding: var(--padding-default);\n          overflow: auto;\n        }\n\n        section {\n          display: flex;\n          flex-direction: column;\n        }\n      `\n    ]\n  }\n\n  constructor() {\n    super()\n\n    this.activityInstance = {}\n  }\n\n  render() {\n    const { name, description, thumbnail } = this.activity || {}\n\n    return html`\n      <content>\n        <section>\n          <div>name: ${name}</div>\n          <div>description: ${description}</div>\n        </section>\n\n        <section>\n          <img src=${thumbnail} />\n        </section>\n      </content>\n    `\n  }\n\n  firstUpdated() {\n    this.fetchActivity(this.activityId)\n  }\n\n  async fetchActivity(id) {\n    const response = await client.query({\n      query: gql`\n        query activity($id: String!) {\n          activity(id: $id) {\n            id\n            name\n            description\n            state\n            thumbnail\n            model {\n              name\n              description\n              active\n              tag\n              inout\n              type\n              unit\n              options\n              quantifier\n              spec\n            }\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.activity = response.data.activity\n  }\n}\n\nwindow.customElements.define('activity-owner-view', ActivityOwnerView)\n"]}