@things-factory/reference-app 6.0.0-zeta.8 → 6.0.0

package/client/pages/grist-fulltext-search.ts

@@ -0,0 +1,374 @@
+import '@operato/data-grist'
+
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
+import { i18next, localize } from '@operato/i18n'
+
+import { PageView } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
+import { ReferencePageStyles } from './reference-page-styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+
+@customElement('grist-fulltext-search')
+class GristFulltextSearch extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    ReferencePageStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+
+        width: 100%;
+      }
+
+      :host > div {
+        flex: 1;
+        overflow: auto;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() data?: any
+  @state() fetchParameters?: any
+  @state() config = {
+    columns: [
+      {
+        type: 'gutter',
+        gutterName: 'dirty'
+      },
+      {
+        type: 'gutter',
+        gutterName: 'sequence'
+      },
+      {
+        type: 'gutter',
+        gutterName: 'row-selector',
+        multiple: true
+      },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'edit',
+        handlers: {
+          click: 'record-view'
+        }
+      },
+      {
+        type: 'string',
+        name: 'id',
+        hidden: true
+      },
+      {
+        type: 'link',
+        name: 'name',
+        header: i18next.t('field.name'),
+        record: {
+          editable: true,
+          options: {
+            // href: 'http://hatiolab.com',
+            href: function (column, record, rowIndex) {
+              return record['homepage']
+            }
+            // target: '_blank'
+          }
+        },
+        filter: 'search',
+        sortable: true,
+        width: 120
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: i18next.t('field.description'),
+        record: {
+          align: 'left'
+        },
+        width: 200,
+        handlers: {
+          dblclick: (columns, data, column, record, rowIndex) => {
+            alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+          }
+        },
+        filter: 'search'
+      },
+      {
+        type: 'email',
+        name: 'email',
+        header: i18next.t('field.email'),
+        record: {
+          editable: true
+        },
+        sortable: true,
+        width: 130,
+        validation: function (after, before, record, column) {
+          if (after.indexOf('@') == -1) {
+            document.dispatchEvent(
+              new CustomEvent('notify', {
+                detail: {
+                  type: 'error',
+                  message: `invalid value - ${after}`
+                }
+              })
+            )
+            return false
+          }
+          return true
+        }
+      },
+      {
+        type: 'id',
+        name: 'company',
+        header: i18next.t('field.company'),
+        record: {
+          editable: true,
+          options: {}
+        },
+        sortable: true,
+        width: 240
+      },
+      {
+        type: 'boolean',
+        name: 'active',
+        header: i18next.t('field.active'),
+        record: {
+          editable: true
+        },
+        handlers: {
+          dblclick: () => {
+            console.log(this.grist.dirtyRecords)
+          }
+        },
+        sortable: true,
+        width: 60,
+        filter: true
+      },
+      {
+        type: 'select',
+        name: 'role',
+        header: i18next.t('field.role'),
+        record: {
+          options: ['admin', 'worker', 'tester'],
+          editable: true
+        },
+        sortable: true,
+        width: 120
+      },
+      {
+        type: 'color',
+        name: 'color',
+        header: i18next.t('field.color'),
+        record: {
+          editable: true
+        },
+        sortable: true,
+        width: 50
+      },
+      {
+        type: 'float',
+        name: 'rate',
+        header: i18next.t('field.rate'),
+        record: {
+          align: 'right',
+          editable: true
+        },
+        sortable: true,
+        width: 50
+      },
+      {
+        type: 'progress',
+        name: 'rate',
+        header: i18next.t('field.rate'),
+        record: {
+          editable: true
+        },
+        sortable: true,
+        width: 50
+      },
+      {
+        type: 'select',
+        name: 'dynamicType',
+        header: i18next.t('field.dynamic_type'),
+        record: {
+          editable: true,
+          options: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode']
+        },
+        width: 50
+      },
+      {
+        type: 'string',
+        name: 'dynamicValue',
+        header: i18next.t('field.dynamic_value'),
+        record: {
+          editable: true,
+          editor: function (value, column, record, rowIndex, field) {
+            return getEditor(record.dynamicType)(value, column, record, rowIndex, field)
+          },
+          renderer: function (value, column, record, rowIndex, field) {
+            return getRenderer(record.dynamicType)(value, column, record, rowIndex, field)
+          }
+        },
+        width: 200
+      },
+      {
+        type: 'datetime',
+        name: 'updatedAt',
+        header: i18next.t('field.updated_at'),
+        record: {
+          editable: true
+        },
+        sortable: true,
+        width: 180
+      },
+      {
+        type: 'datetime',
+        name: 'createdAt',
+        header: i18next.t('field.created_at'),
+        record: {
+          editable: true
+        },
+        sortable: true,
+        width: 180
+      }
+    ],
+    rows: {
+      selectable: {
+        multiple: true
+      },
+      handlers: {
+        click: 'select-row-toggle'
+      }
+    },
+    sorters: [
+      {
+        name: 'name',
+        desc: true
+      },
+      {
+        name: 'email'
+      }
+    ],
+    pagination: {
+      pages: [20, 30, 50, 100, 200]
+    }
+  }
+
+  @query('#sorter-control') sorterControl?: any
+  @query('ox-grist') grist!: DataGrist
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: 'Fulltext Search',
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      }
+    }
+  }
+
+  render() {
+    const mode = this.mode
+
+    return html`
+      <div>
+        <p>Fulltext Search</p>
+        <pre>${JSON.stringify(this.fetchParameters, undefined, 2)}</pre>
+      </div>
+
+      <ox-grist .mode=${mode} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sorterControl.open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async fetchHandler(fetchParameters) {
+    this.fetchParameters = fetchParameters
+
+    var { page, limit, sorters = [], filters } = fetchParameters
+    var total = 120993
+    var start = (page - 1) * limit
+
+    return {
+      total,
+      records: Array(limit * page > total ? total % limit : limit)
+        .fill('')
+        .map((item, idx) => {
+          return {
+            id: idx,
+            name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+            description: idx % 2 ? `hatiolab manager-${start + idx + 1}` : `hatiosea manager-${start + idx + 1}`,
+            email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+            active: Math.round(Math.random() * 2) % 2 ? true : false,
+            company:
+              idx % 2
+                ? {
+                    id: '2',
+                    name: 'HatioLAB',
+                    description: `경기도 성남시-${start + idx + 1}`
+                  }
+                : {
+                    id: '3',
+                    name: 'HatioSEA',
+                    description: `말레이시아 세티아알람-${start + idx + 1}`
+                  },
+            role: ['admin', 'worker', 'tester'][idx % 3],
+            color: idx % 2 ? `#87f018` : `#180f87`,
+            rate: Math.round(Math.random() * 100),
+            dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+            dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+            homepage:
+              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            createdAt: Date.now(),
+            updatedAt: Date.now()
+          }
+        })
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+}

package/client/pages/label-scan-page.js

@@ -7,12 +7,12 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { PageView, store } from '@things-factory/shell'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class LabelScanPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         :host {
           display: block;

package/client/pages/menu-page.js

@@ -10,12 +10,12 @@ import { VIEWPART_POSITION } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { setupMenuPart } from '@things-factory/lite-menu'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class MenuPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         :host {
         }

package/client/pages/notification-page.js

@@ -8,12 +8,12 @@ import { toggleOverlay, TOOL_POSITION } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class NotificationPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         :host {
           display: block;

package/client/pages/ocr-page.js

@@ -8,12 +8,12 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { client, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class OCRPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         section {
           display: inline-block;

package/client/pages/pending-job-page.js

@@ -8,12 +8,12 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { client } from '@operato/graphql'
 import { PageView, store } from '@operato/shell'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class PendingJobPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         section {
           padding: 100px;

package/client/pages/reference-page-styles.js

@@ -1,6 +1,6 @@
 import { css } from 'lit'
 
-export const referencePageStyles = css`
+export const ReferencePageStyles = css`
   :host {
     display: block;
     background-color: var(--main-section-background-color);

package/client/pages/report-page.js

@@ -47,7 +47,7 @@ class ReportPage extends localize(i18next)(PageView) {
   }
 
   async fetchHandler({ page, /*limit,*/ sorters = [] }) {
-    var limit = 50
+    var limit = 550
     var total = 120993
     var start = (page - 1) * limit
 

package/client/pages/tree-view-page.ts

@@ -0,0 +1,206 @@
+/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
+import '@operato/data-tree'
+
+import { PropertyValues, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import { store, PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('tree-view-page')
+export class TreeViewPage extends connect(store)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host > * {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+      }
+
+      ox-tree,
+      ox-tree-vertical {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) data: any = {
+    label: 'Home',
+    children: [
+      {
+        label: 'About us',
+        children: [
+          {
+            label: 'Our history',
+            children: [
+              {
+                label: 'Founder'
+              }
+            ]
+          },
+          {
+            label: 'Our board',
+            children: [
+              {
+                label: 'Brad Whiteman'
+              },
+              {
+                label: 'Cynthia Tolken'
+              },
+              {
+                label: 'Bobby Founderson'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: 'Our products',
+        children: [
+          {
+            label: 'The Widget 2000™',
+            children: [
+              {
+                label: 'Order form'
+              }
+            ]
+          },
+          {
+            label: 'The McGuffin V2',
+            children: [
+              {
+                label: 'Order form'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: 'Contact us',
+        children: [
+          {
+            label: 'Social media',
+            children: [
+              {
+                label: 'Facebook'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+
+  @state() selected: any
+
+  render() {
+    const data = this.data
+
+    return html`
+      <div>
+        <h3>Tree View Sample 1</h3>
+        <ox-tree-vertical
+          .data=${data}
+          .selected=${this.selected}
+          id-property="label"
+          @select=${this.onSelect.bind(this)}
+        ></ox-tree-vertical>
+      </div>
+      <div>
+        <h3>Tree View Sample 2</h3>
+        <ox-tree
+          .data=${data}
+          .selected=${this.selected}
+          id-property="label"
+          @select=${this.onSelect.bind(this)}
+        ></ox-tree>
+      </div>
+    `
+  }
+
+  onSelect(e: CustomEvent) {
+    this.selected = e.detail as any
+  }
+
+  updated(changes: PropertyValues<this>) {
+    /*
+     * If this page properties are changed, this callback will be invoked.
+     * This callback will be called back only when this page is activated.
+     */
+  }
+
+  stateChanged(state: any) {
+    /*
+     * application wide state changed
+     *
+     */
+  }
+
+  /*
+   * page lifecycle
+   *
+   * - pageInitialized(lifecycle)
+   * - pageUpdated(changes, lifecycle, changedBefore)
+   * - pageDisposed(lifecycle)
+   *
+   * lifecycle value has
+   * - active : this page is activated
+   * - page : first path of href
+   * - resourceId : second path of href
+   * - params : search params object of href
+   * - initialized : initialized state of this page
+   *
+   * you can update lifecycle values, or add custom values
+   * by calling this.pageUpdate({ ...values }, force)
+   * If lifecycle values changed by this.pageUpdate(...),
+   * this.pageUpdated(...) will be called back right after.
+   * If you want to invoke this.pageUpdated(...) callback,
+   * set force argument to true.
+   *
+   * you can re-initialize this page
+   * by calling this.pageReset().
+   * this.pageInitialized(...) followed by this.pageDisposed(...) will be invoked
+   * by calling this.pageReset().
+   *
+   * you can invoke this.pageDisposed()
+   * by calling this.pageDispose()
+   */
+
+  pageInitialized(lifecycle: any) {
+    /*
+     * This page is initialized.
+     * It's right time to configure of this page.
+     *
+     * - called before when this page activated first
+     * - called when i18next resource is updated (loaded, changed, ..)
+     * - called right after this.pageReset()
+     */
+  }
+
+  pageUpdated(changes: any, lifecycle: any, before: any) {
+    if (this.active) {
+      /*
+       * this page is activated
+       */
+    }
+  }
+
+  pageDisposed(lifecycle: any) {
+    /*
+     * This page is disposed.
+     * It's right time to release system resources.
+     *
+     * - called just before (re)pageInitialized
+     * - called right after when i18next resource updated (loaded, changed, ..)
+     * - called right after this.pageReset()
+     * - called right after this.pageDispose()
+     */
+  }
+}

package/client/pages/upload-page.js

@@ -7,12 +7,12 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { client, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 
-import { referencePageStyles } from './reference-page-styles'
+import { ReferencePageStyles } from './reference-page-styles'
 
 class UploadPage extends connect(store)(PageView) {
   static get styles() {
     return [
-      referencePageStyles,
+      ReferencePageStyles,
       css`
         section {
           display: inline-block;