@things-factory/dataset 8.0.27 → 8.0.28

package/client/activities/activity-data-collect-edit.ts

@@ -25,7 +25,8 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
         background-color: var(--md-sys-color-surface);
       }
 
-      ox-data-entry-form {
+      ox-data-entry-form,
+      ox-checklist-entry-form {
         flex: 1;
         padding: 10px;
         overflow: auto;
@@ -47,12 +48,9 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
 
     switch (entryType) {
       case 'generated':
-        if (!entryView || entryView === 'Default') {
-          return this.dataEntryForm
-        } else if (entryView === 'Checklist') {
-          return this.checklistEntryForm
-        }
-        break
+        return this.dataEntryForm
+      case 'checklist':
+        return this.checklistEntryForm
       case 'board':
         break
       case 'page':
@@ -64,38 +62,26 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
   }
 
   render() {
-    return html`
-      <div class="container">
-        <!-- <ox-data-entry-form
-        .dataSet=${this.dataSet}
-        .value=${this.output}
-        @change=${this._updateDataItems}
-      ></ox-data-entry-form> -->
-        ${this.showEntryView()}
-      </div>
-    `
+    return html` <div class="container">${this.renderEntryForm()}</div> `
   }
 
-  private showEntryView() {
+  private renderEntryForm() {
     const entryType = this.dataSet?.entryType
     const entryView = this.dataSet?.entryView
 
     switch (entryType) {
       case 'generated':
-        if (!entryView || entryView === 'Default') {
-          return html`<ox-data-entry-form
-            .dataSet=${this.dataSet}
-            .value=${this.output}
-            @change=${this._updateDataItems}
-          ></ox-data-entry-form>`
-        } else if (entryView === 'Checklist') {
-          return html`<ox-checklist-entry-form
-            .dataSet=${this.dataSet}
-            .value=${this.output}
-            @change=${this._updateDataItems}
-          ></ox-checklist-entry-form>`
-        }
-        break
+        return html`<ox-data-entry-form
+          .dataSet=${this.dataSet}
+          .value=${this.output}
+          @change=${this._updateDataItems}
+        ></ox-data-entry-form>`
+      case 'checklist':
+        return html`<ox-checklist-entry-form
+          .dataSet=${this.dataSet}
+          .value=${this.output}
+          @change=${this._updateDataItems}
+        ></ox-checklist-entry-form>`
       case 'board':
         break
       case 'page':

package/client/activities/activity-data-review-edit.ts

@@ -31,7 +31,8 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-sample-view {
+      ox-data-sample-view,
+      ox-checklist-sample-view {
         flex: 1;
         padding: var(--spacing-large);
         overflow: auto;
@@ -114,7 +115,7 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
     const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'
 
     return html`
-      <div content>${this.showDataSampleView()}</div>
+      <div content>${this.renderDataSample()}</div>
 
       <form @change=${this.onChangeInstruction}>
         ${editable
@@ -187,26 +188,21 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
     `
   }
 
-  private showDataSampleView() {
+  private renderDataSample() {
     const dataSet = this.dataSample?.dataSet
     const monitorType = dataSet?.monitorType
-    const monitorView = dataSet?.monitorView
 
     switch (monitorType) {
       case 'generated':
-        if (!monitorView || monitorView === 'Default') {
-          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
-        } else if (monitorView === 'Checklist') {
-          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
-        }
-        break
+        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+      case 'checklist':
+        return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
       case 'board':
         break
       case 'page':
         break
       default:
         return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
-        break
     }
   }
 

package/client/activities/activity-data-review-view.ts

@@ -29,7 +29,8 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-sample-view {
+      ox-data-sample-view,
+      ox-checklist-sample-view {
         flex: 1;
         padding: var(--spacing-large);
         overflow: auto;
@@ -233,12 +234,9 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
 
     switch (monitorType) {
       case 'generated':
-        if (!monitorView || monitorView === 'Default') {
-          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
-        } else if (monitorView === 'Checklist') {
-          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
-        }
-        break
+        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+      case 'checklist':
+        return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
       case 'board':
         break
       case 'page':

package/client/activities/activity-ooc-review-edit.ts

@@ -29,7 +29,8 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      ox-data-sample-view {
+      ox-data-sample-view,
+      ox-checklist-sample-view {
         flex: 1;
         padding: var(--spacing-large);
         overflow: auto;
@@ -88,10 +89,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
     const editable = state == 'unassigned' || state == 'assigned' || state == 'started' || state == 'submitted'
 
     return html`
-      <div content>
-        ${this.showDataSampleView()}
-        <!-- <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view> -->
-      </div>
+      <div content>${this.renderDataSample()}</div>
 
       <label instruction>
         <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
@@ -179,26 +177,21 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
     }
   }
 
-  private showDataSampleView() {
+  private renderDataSample() {
     const dataSet = this.dataOoc?.dataSet
     const monitorType = dataSet?.monitorType
-    const monitorView = dataSet?.monitorView
 
     switch (monitorType) {
       case 'generated':
-        if (!monitorView || monitorView === 'Default') {
-          return html`<ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>`
-        } else if (monitorView === 'Checklist') {
-          return html`<ox-checklist-sample-view .dataSample=${this.dataOoc}></ox-checklist-sample-view>`
-        }
-        break
+        return html`<ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>`
+      case 'checklist':
+        return html`<ox-checklist-sample-view .dataSample=${this.dataOoc}></ox-checklist-sample-view>`
       case 'board':
         break
       case 'page':
         break
       default:
         return html`<ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>`
-        break
     }
   }
 }

package/client/components/checklist-entry-form.ts

@@ -0,0 +1,109 @@
+import '@material/web/icon/icon.js'
+import '@operato/dataset/ox-checklist-entry-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { DataSet } from '@operato/dataset'
+import { OxChecklistEntryForm } from '@operato/dataset/ox-checklist-entry-form.js'
+
+@customElement('checklist-entry-form')
+export class ChecklistEntryForm extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-checklist-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) dataSet?: DataSet & { id: string; entryType?: string }
+
+  @state() dataSample?: { id: string; collectedAt: Date }
+
+  @query('ox-checklist-entry-form') entryForm?: OxChecklistEntryForm
+
+  render() {
+    return html`
+      <ox-checklist-entry-form .dataSet=${this.dataSet}></ox-checklist-entry-form>
+
+      <div class="footer">
+        <div filler></div>
+        ${!this.dataSample
+          ? html`
+              <button @click=${this.updateDataItems.bind(this)} done>
+                <md-icon>save</md-icon>${i18next.t('button.save')}
+              </button>
+            `
+          : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
+      </div>
+    `
+  }
+
+  private async updateDataItems() {
+    //@ts-ignore TODO replace with following line and confirm
+    const data = this.entryForm.buildValue()
+
+    const dataSample = {
+      dataSet: {
+        id: this.dataSet?.id
+      },
+      data
+    } as any
+
+    if (this.dataSample?.collectedAt) {
+      dataSample.collectedAt = this.dataSample.collectedAt
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($dataSample: NewDataSample!) {
+          createDataSample(dataSample: $dataSample) {
+            id
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        dataSample
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+
+    if (!response.errors) {
+      const { id, collectedAt } = response.data.createDataSample
+      this.dataSample = {
+        id,
+        collectedAt: new Date(collectedAt)
+      }
+
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
+      )
+    }
+  }
+}

package/client/components/data-entry-form.ts

@@ -1,6 +1,5 @@
 import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-entry-form.js'
-import '@operato/dataset/ox-checklist-entry-form.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -11,7 +10,6 @@ import { i18next, localize } from '@operato/i18n'
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { DataSet } from '@operato/dataset'
 import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
-import { OxChecklistEntryForm } from '@operato/dataset/ox-checklist-entry-form.js'
 
 @customElement('data-entry-form')
 export class DataEntryForm extends localize(i18next)(LitElement) {
@@ -41,38 +39,15 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) dataSet?: DataSet & { id: string; entryType?: string; entryView?: string }
+  @property({ type: Object }) dataSet?: DataSet & { id: string; entryType?: string }
 
   @state() dataSample?: { id: string; collectedAt: Date }
 
   @query('ox-data-entry-form') dataEntryForm?: OxDataEntryForm
-  @query('ox-checklist-entry-form') checklistEntryForm?: OxChecklistEntryForm
-
-  get entryForm() {
-    const entryType = this.dataSet?.entryType
-    const entryView = this.dataSet?.entryView
-
-    switch (entryType) {
-      case 'generated':
-        if (!entryView || entryView === 'Default') {
-          return this.dataEntryForm
-        } else if (entryView === 'Checklist') {
-          return this.checklistEntryForm
-        }
-        break
-      case 'board':
-        break
-      case 'page':
-        break
-      default:
-        return this.dataEntryForm
-        break
-    }
-  }
 
   render() {
     return html`
-      ${this.showEntryView()}
+      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
 
       <div class="footer">
         <div filler></div>
@@ -87,28 +62,6 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
     `
   }
 
-  private showEntryView() {
-    const entryType = this.dataSet?.entryType
-    const entryView = this.dataSet?.entryView
-
-    switch (entryType) {
-      case 'generated':
-        if (!entryView || entryView === 'Default') {
-          return html`<ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>`
-        } else if (entryView === 'Checklist') {
-          return html`<ox-checklist-entry-form .dataSet=${this.dataSet}></ox-checklist-entry-form>`
-        }
-        break
-      case 'board':
-        break
-      case 'page':
-        break
-      default:
-        return html`<ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>`
-        break
-    }
-  }
-
   private async updateDataItems() {
     //@ts-ignore TODO replace with following line and confirm
     const data = this.entryForm.buildValue()

package/client/pages/data-entry/data-entry-list-page.ts

@@ -3,6 +3,7 @@ import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
 import '../../components/data-entry-form.js'
+import '../../components/checklist-entry-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -17,8 +18,7 @@ import { i18next, localize } from '@operato/i18n'
 import { openPopup, notify } from '@operato/layout'
 import { InheritedValueType, navigate, PageView, store } from '@operato/shell'
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { provider } from '@things-factory/board-ui/dist-client'
-import { OxPopup } from '@operato/popup'
+import { provider } from '@things-factory/board-ui/dist-client/board-provider.js'
 
 const USECASE_OPTIONS = () => {
   return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
@@ -51,6 +51,18 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
       })
       break
 
+    case 'checklist':
+      openPopup(
+        html` <checklist-entry-form .dataSet=${record} style="background-color: white;"></checklist-entry-form> `,
+        {
+          closable: true,
+          backdrop: true,
+          size: 'large',
+          title
+        }
+      )
+      break
+
     case 'board':
       const board = {
         id: entryView

package/client/pages/data-ooc/data-ooc-list-page.ts

@@ -213,7 +213,7 @@ export class DataOocListPage extends connect(store)(p13n(localize(i18next)(PageV
           imex: true
         },
         {
-          type: 'textarea',
+          type: 'string',
           name: 'correctiveInstruction',
           label: true,
           header: i18next.t('field.corrective-instruction'),
@@ -225,7 +225,7 @@ export class DataOocListPage extends connect(store)(p13n(localize(i18next)(PageV
           imex: true
         },
         {
-          type: 'textarea',
+          type: 'string',
           name: 'correctiveAction',
           label: true,
           header: i18next.t('field.corrective-action'),

package/client/pages/data-sample/data-sample-view.ts

@@ -28,6 +28,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
       }
 
       ox-data-sample-view,
+      ox-checklist-sample-view,
       ox-data-ooc-brief-view {
         padding: var(--spacing-large);
       }
@@ -78,7 +79,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
 
     return html`
       ${!dataSample?.dataOoc
-        ? html`${this.showDataSampleView()}`
+        ? html`${this.renderDataSample()}`
         : html` <ox-data-ooc-brief-view .dataOoc=${dataSample!.dataOoc}></ox-data-ooc-brief-view>`}
       ${reviewActivityThread
         ? html`
@@ -119,19 +120,15 @@ export class DataSampleView extends localize(i18next)(LitElement) {
     }
   }
 
-  private showDataSampleView() {
+  private renderDataSample() {
     const dataSet = this.dataSample?.dataSet
     const monitorType = dataSet?.monitorType
-    const monitorView = dataSet?.monitorView
 
     switch (monitorType) {
       case 'generated':
-        if (!monitorView || monitorView === 'Default') {
-          return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
-        } else if (monitorView === 'Checklist') {
-          return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
-        }
-        break
+        return html`<ox-data-sample-view .dataSample=${this.dataSample}></ox-data-sample-view>`
+      case 'checklist':
+        return html`<ox-checklist-sample-view .dataSample=${this.dataSample}></ox-checklist-sample-view>`
       case 'board':
         break
       case 'page':

package/client/pages/data-set/data-set-list-page.ts

@@ -4,6 +4,7 @@ import '@operato/context/ox-context-page-toolbar.js'
 import './data-item-list.js'
 import './data-set-importer.js'
 import '../../components/data-entry-form.js'
+import '../../components/checklist-entry-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -47,6 +48,7 @@ const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !
 const ENTRY_TYPES = [
   { display: '', value: '' },
   { display: 'Generated', value: 'generated' },
+  { display: 'Checklist', value: 'checklist' },
   { display: 'Board', value: 'board' },
   { display: 'CustomElement', value: 'custom-element' },
   { display: 'Page', value: 'page' },
@@ -56,6 +58,7 @@ const ENTRY_TYPES = [
 const MONITOR_TYPES = [
   { display: '', value: '' },
   { display: 'Generated', value: 'generated' },
+  { display: 'Checklist', value: 'checklist' },
   { display: 'Board', value: 'board' },
   { display: 'CustomElement', value: 'custom-element' },
   { display: 'Page', value: 'page' },
@@ -103,6 +106,17 @@ export const showEntryView = async (columns, data, column, record, rowIndex) =>
         title
       })
       break
+    case 'checklist':
+      openPopup(
+        html` <checklist-entry-form .dataSet=${record} style="background-color: white;"></checklist-entry-form> `,
+        {
+          closable: true,
+          backdrop: true,
+          size: 'large',
+          title
+        }
+      )
+      break
 
     case 'board':
       const board = {

package/client/route.ts

@@ -56,10 +56,6 @@ export default function route(page) {
       import('./pages/data-entry/data-entry-list-page.js')
       return page
 
-    case 'checklist-entry-page':
-      import('./pages/data-entry/checklist-entry-page')
-      return page
-
     case 'data-report-list':
       import('./pages/data-report/data-report-list-page.js')
       return page

package/dist-client/activities/activity-data-collect-edit.d.ts

@@ -18,7 +18,7 @@ export declare class DataCollectActivityEdit extends DataCollectActivityEdit_bas
     checklistEntryForm?: OxChecklistEntryForm;
     get entryForm(): OxDataEntryForm | OxChecklistEntryForm | undefined;
     render(): import("lit-html").TemplateResult<1>;
-    private showEntryView;
+    private renderEntryForm;
     _updateDataItems(e: CustomEvent): Promise<void>;
     updated(changes: any): void;
     fetchDataSet(): Promise<void>;

package/dist-client/activities/activity-data-collect-edit.js

@@ -16,13 +16,9 @@ let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18
         const entryView = (_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.entryView;
         switch (entryType) {
             case 'generated':
-                if (!entryView || entryView === 'Default') {
-                    return this.dataEntryForm;
-                }
-                else if (entryView === 'Checklist') {
-                    return this.checklistEntryForm;
-                }
-                break;
+                return this.dataEntryForm;
+            case 'checklist':
+                return this.checklistEntryForm;
             case 'board':
                 break;
             case 'page':
@@ -33,38 +29,25 @@ let DataCollectActivityEdit = class DataCollectActivityEdit extends localize(i18
         }
     }
     render() {
-        return html `
-      <div class="container">
-        <!-- <ox-data-entry-form
-        .dataSet=${this.dataSet}
-        .value=${this.output}
-        @change=${this._updateDataItems}
-      ></ox-data-entry-form> -->
-        ${this.showEntryView()}
-      </div>
-    `;
+        return html ` <div class="container">${this.renderEntryForm()}</div> `;
     }
-    showEntryView() {
+    renderEntryForm() {
         var _a, _b;
         const entryType = (_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.entryType;
         const entryView = (_b = this.dataSet) === null || _b === void 0 ? void 0 : _b.entryView;
         switch (entryType) {
             case 'generated':
-                if (!entryView || entryView === 'Default') {
-                    return html `<ox-data-entry-form
-            .dataSet=${this.dataSet}
-            .value=${this.output}
-            @change=${this._updateDataItems}
-          ></ox-data-entry-form>`;
-                }
-                else if (entryView === 'Checklist') {
-                    return html `<ox-checklist-entry-form
-            .dataSet=${this.dataSet}
-            .value=${this.output}
-            @change=${this._updateDataItems}
-          ></ox-checklist-entry-form>`;
-                }
-                break;
+                return html `<ox-data-entry-form
+          .dataSet=${this.dataSet}
+          .value=${this.output}
+          @change=${this._updateDataItems}
+        ></ox-data-entry-form>`;
+            case 'checklist':
+                return html `<ox-checklist-entry-form
+          .dataSet=${this.dataSet}
+          .value=${this.output}
+          @change=${this._updateDataItems}
+        ></ox-checklist-entry-form>`;
             case 'board':
                 break;
             case 'page':
@@ -140,7 +123,8 @@ DataCollectActivityEdit.styles = [
         background-color: var(--md-sys-color-surface);
       }
 
-      ox-data-entry-form {
+      ox-data-entry-form,
+      ox-checklist-entry-form {
         flex: 1;
         padding: 10px;
         overflow: auto;