@things-factory/reference-app 3.7.1 → 3.7.6

package/client/bootstrap.js

@@ -1,23 +1,23 @@
 import '@things-factory/auth-ui' /* for domain-switch */
 import '@things-factory/barcode-base' /* for <default-label-printer-setting-let> */
 import '@things-factory/notification' /* for notification-badge */
+import './components/ocr-viewpart'
 
-import { html } from 'lit-html'
-
-import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
-import { auth } from '@things-factory/auth-base'
-import { setAuthManagementMenus } from '@things-factory/auth-ui'
-import { getEditor, registerEditor, registerRenderer } from '@things-factory/grist-ui'
-import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@things-factory/layout-base'
+import { TOOL_POSITION, VIEWPART_POSITION, appendViewpart, toggleOverlay } from '@things-factory/layout-base'
+import { getEditor, registerEditor, registerRenderer } from '@operato/data-grist'
+import { navigate, store } from '@things-factory/shell'
 import { setupMenuPart, updateMenuTemplate } from '@things-factory/lite-menu'
+
 import { ADD_MORENDA } from '@things-factory/more-base'
 import { ADD_SETTING } from '@things-factory/setting-base'
-import { navigate, store } from '@things-factory/shell'
-
-import { IdEditor } from './editors/id-editor'
-import { getMenuTemplate } from './menu'
+import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
 import { BarcodeRenderer } from './renderers/barcode-renderer'
+import { IdEditor } from './editors/id-editor'
 import { IdRenderer } from './renderers/id-renderer'
+import { auth } from '@things-factory/auth-base'
+import { getMenuTemplate } from './menu'
+import { html } from 'lit-html'
+import { setAuthManagementMenus } from '@things-factory/auth-ui'
 
 console.log(
   `%c
@@ -135,6 +135,24 @@ export default function bootstrap() {
   })
 
   /* setting app-tools */
+  store.dispatch({
+    type: APPEND_APP_TOOL,
+    tool: {
+      name: 'ocr-toggler',
+      template: html`
+        <mwc-icon
+          @click=${e => {
+            toggleOverlay('ocr-viewpart', {
+              backdrop: false
+            })
+          }}
+          >camera_enhance
+        </mwc-icon>
+      `,
+      position: TOOL_POSITION.REAR
+    }
+  })
+
   store.dispatch({
     type: APPEND_APP_TOOL,
     tool: {
@@ -163,6 +181,17 @@ export default function bootstrap() {
     position: VIEWPART_POSITION.HEADERBAR
   })
 
+  appendViewpart({
+    name: 'ocr-viewpart',
+    viewpart: {
+      show: false,
+      hovering: false,
+      resizable: true,
+      template: html` <ocr-viewpart style="min-width: 300px; height: 100%; width: 50vw;"></ocr-viewpart> `
+    },
+    position: VIEWPART_POSITION.ASIDEBAR
+  })
+
   appendViewpart({
     name: 'notification',
     viewpart: {

package/client/components/camera-capturer.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit-element'
+import { css, html, LitElement } from 'lit-element'
 
 import { FileDropHelper } from '@things-factory/utils'
 
@@ -90,7 +90,7 @@ export class CameraCapturer extends LitElement {
         accept=${this.accept}
         ?multiple=${this.multiple}
         hidden
-        capture="camera"
+        capture="environment"
         @change=${e => {
           const fileInput = e.currentTarget
 
@@ -119,8 +119,16 @@ export class CameraCapturer extends LitElement {
                   - ${file.name}
                   <mwc-icon
                     @click=${e => {
-                      this._files.splice(this._files.indexOf(file), 1)
-                      this.requestUpdate()
+                      this._files = [...this._files.splice(this._files.indexOf(file), 1)]
+                      this.dispatchEvent(
+                        new CustomEvent('files-change', {
+                          bubbles: true,
+                          composed: true,
+                          detail: {
+                            files: this._files
+                          }
+                        })
+                      )
                     }}
                     >delete_outline</mwc-icon
                   >
@@ -137,6 +145,15 @@ export class CameraCapturer extends LitElement {
 
     this.addEventListener('file-drop', e => {
       this._files = this.multiple ? e.detail : e.detail[0] ? [e.detail[0]] : []
+      this.dispatchEvent(
+        new CustomEvent('files-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            files: this._files
+          }
+        })
+      )
     })
   }
 
@@ -151,6 +168,16 @@ export class CameraCapturer extends LitElement {
   reset() {
     this.fileInput.value = ''
     this._files = []
+
+    this.dispatchEvent(
+      new CustomEvent('files-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          files: this._files
+        }
+      })
+    )
   }
 }
 

package/client/components/ocr-viewpart.js

@@ -0,0 +1,150 @@
+import './camera-capturer'
+import '@material/mwc-button'
+
+import { LitElement, css, html } from 'lit-element'
+
+import { client } from '@things-factory/shell'
+import { gql } from 'graphql-tag'
+
+class OCRViewPart extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          min-width: 240px;
+        }
+
+        [buttons] {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+
+        #images {
+          flex: 1;
+          background-color: black;
+          color: white;
+
+          display: flex;
+          flex-direction: column;
+        }
+
+        [tab] {
+          display: flex;
+          flex-direction: row;
+        }
+
+        [i] {
+          min-width: 50px;
+          background-color: black;
+          text-align: center;
+        }
+
+        [i][active] {
+          background-color: red;
+        }
+
+        [image] {
+          flex: 1;
+
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        img {
+          style=width: 100%;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _files: Array,
+      index: Number
+    }
+  }
+
+  render() {
+    const files = this._files || []
+    const index = this.index || 0
+    const file = files[index]
+    const image = file && URL.createObjectURL(file)
+    if (image) {
+      requestAnimationFrame(() => URL.revokeObjectURL(image))
+    }
+
+    return html`
+      <div attachment-wrap>
+        <camera-capturer
+          name="scanner"
+          id="capturer"
+          label="Capture Images"
+          accept="image/*"
+          multiple="true"
+          ?hidden=${false}
+          custom-input
+          @files-change=${e => this.fileschange(e)}
+        ></camera-capturer>
+      </div>
+      <div buttons>
+        <mwc-button @click=${e => this.upload()}>submit</mwc-button>
+        <mwc-button @click=${e => this.reset()}>reset</mwc-button>
+      </div>
+      <div id="images">
+        <div
+          tab
+          @click=${e => {
+            const item = e.target.closest('[i]')
+            const children = e.currentTarget.querySelectorAll('[i]')
+            this.index = Array.from(children).indexOf(item)
+          }}
+        >
+          ${files.map((file, idx) => html`<div i ?active=${idx === index}>${idx}</div>`)}
+        </div>
+        <div image>${file ? html` <img src=${URL.createObjectURL(file)} /> ` : html``}</div>
+      </div>
+      <div id="result"></div>
+    `
+  }
+
+  fileschange(e) {
+    const fileUploader = this.shadowRoot.querySelector('#capturer')
+    this._files = fileUploader.files
+  }
+
+  reset() {
+    const fileUploader = this.shadowRoot.querySelector('#capturer')
+    const result = this.shadowRoot.querySelector('#result')
+
+    fileUploader.reset()
+    result.textContent = ''
+  }
+
+  async upload() {
+    const fileUploader = this.shadowRoot.querySelector('#capturer')
+    const result = this.shadowRoot.querySelector('#result')
+
+    const response = await client.query({
+      query: gql`
+        query ocrRequest($images: [Upload!]!) {
+          ocrRequest(images: $images)
+        }
+      `,
+      variables: {
+        images: fileUploader?.files
+      },
+      context: { hasUpload: true }
+    })
+
+    if (!response.errors) {
+      result.textContent = response.data.ocrRequest
+    } else {
+      result.textContent = 'error'
+    }
+  }
+}
+
+customElements.define('ocr-viewpart', OCRViewPart)

package/client/editors/id-selector.js

@@ -1,6 +1,6 @@
-import '@things-factory/grist-ui'
+import '@operato/data-grist'
 
-import { css, html, LitElement } from 'lit-element'
+import { LitElement, css, html } from 'lit-element'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { i18next } from '@things-factory/i18n-base'
@@ -33,7 +33,7 @@ export class IdSelector extends LitElement {
           height: var(--overlay-center-normal-height, 50%);
         }
 
-        data-grist {
+        ox-grist {
           flex: 1;
         }
 
@@ -88,12 +88,12 @@ export class IdSelector extends LitElement {
         >
       </form>
 
-      <data-grist
+      <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.config}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
-      ></data-grist>
+      ></ox-grist>
 
       <div class="button-container">
         <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
@@ -168,7 +168,7 @@ export class IdSelector extends LitElement {
     /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. 
        현재는 fetch() 가 두번 일어난다.
        */
-    var grist = this.shadowRoot.querySelector('data-grist')
+    var grist = this.shadowRoot.querySelector('ox-grist')
     await grist.fetch()
 
     var selected = grist.data.records.find(item => this.value == item.id)
@@ -219,7 +219,7 @@ export class IdSelector extends LitElement {
   }
 
   get selected() {
-    var grist = this.shadowRoot.querySelector('data-grist')
+    var grist = this.shadowRoot.querySelector('ox-grist')
 
     var selected = grist.selected
 

package/client/menu.js

@@ -37,8 +37,8 @@ export function getMenuTemplate() {
           path: 'bizplace-register'
         },
         {
-          name: 'List Sample',
-          path: 'bizplace-register'
+          name: 'List/Card Sample',
+          path: 'grist-mode-page'
         },
         {
           name: 'Headroom Style',
@@ -80,7 +80,7 @@ export function getMenuTemplate() {
         },
         {
           name: 'Label Scan',
-          path: 'bizplace-register'
+          path: 'label-scan-page'
         },
         {
           name: 'Ghost Print',

package/client/pages/context-menu-page.js

@@ -1,5 +1,5 @@
 import '@material/mwc-icon'
-import '@operato/mini-popup'
+import '@operato/popup'
 
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
@@ -40,86 +40,108 @@ class ContextMenuPage extends connect(store)(PageView) {
         위치에서든 마우스 우측버튼을 클릭하고, 모바일 디바이스에서는 탭을 오래누르면(longpress) 팝업메뉴가 동작합니다.
       </p>
 
-      <popup-menu>
-        <popup-menuitem label="article">
+      <ox-popup-menu>
+        <ox-popup-menuitem
+          label="article - click me"
+          @selected=${function (e) {
+            console.log('first level article selected')
+          }}
+        >
           <mwc-icon slot="icon">article</mwc-icon>
-        </popup-menuitem>
+        </ox-popup-menuitem>
 
-        <popup-menuitem label="home">
+        <ox-popup-menuitem label="home">
           <mwc-icon slot="icon">home</mwc-icon>
-        </popup-menuitem>
+        </ox-popup-menuitem>
 
-        <popup-menuitem label="empty"> </popup-menuitem>
+        <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
 
-        <popup-menuitem
+        <ox-popup-menuitem
           label="click me to toggle"
-          @click=${function (e) {
-            const target = e.currentTarget
-            const icon = target.querySelector('mwc-icon')
+          @selected=${function (e) {
+            const icon = e.currentTarget.querySelector('mwc-icon')
             icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
           }}
+          alive-on-select
         >
           <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-        </popup-menuitem>
+        </ox-popup-menuitem>
 
-        <popup-menuitem label="verified">
+        <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
           <mwc-icon slot="icon">verified</mwc-icon>
-          <popup-menu>
-            <popup-menuitem label="article">
+          <ox-popup-menu>
+            <ox-popup-menuitem
+              label="article"
+              @selected=${function (e) {
+                console.log('article selected')
+              }}
+              alive-on-select
+            >
               <mwc-icon slot="icon">article</mwc-icon>
-            </popup-menuitem>
+            </ox-popup-menuitem>
 
-            <popup-menuitem label="home">
+            <ox-popup-menuitem label="home">
               <mwc-icon slot="icon">home</mwc-icon>
-            </popup-menuitem>
+            </ox-popup-menuitem>
 
-            <popup-menuitem label="verified">
+            <ox-popup-menuitem label="verified">
               <mwc-icon slot="icon">verified</mwc-icon>
-              <popup-menu>
-                <popup-menuitem label="article">
+              <ox-popup-menu>
+                <ox-popup-menuitem label="article">
                   <mwc-icon slot="icon">article</mwc-icon>
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
-                <popup-menuitem label="home">
+                <ox-popup-menuitem label="home">
                   <mwc-icon slot="icon">home</mwc-icon>
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
-                <popup-menuitem label="verified">
+                <ox-popup-menuitem label="verified">
                   <mwc-icon slot="icon">verified</mwc-icon>
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
-                <popup-menuitem label="checkbox">
+                <ox-popup-menuitem label="checkbox">
                   <input type="checkbox" slot="icon" />
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
                 <div separator></div>
-              </popup-menu>
-            </popup-menuitem>
+              </ox-popup-menu>
+            </ox-popup-menuitem>
 
             <div separator></div>
 
-            <popup-menuitem label="checkbox">
+            <ox-popup-menuitem label="checkbox">
               <input type="checkbox" slot="icon" />
-            </popup-menuitem>
-          </popup-menu>
-        </popup-menuitem>
+            </ox-popup-menuitem>
+          </ox-popup-menu>
+        </ox-popup-menuitem>
 
-        <popup-menuitem label="checkbox">
+        <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
           <input type="checkbox" slot="icon" />
-        </popup-menuitem>
+        </ox-popup-menuitem>
 
         <div separator></div>
 
-        <div menu>Plain DIV</div>
-        <input type="checkbox" menu />
-        <input type="text" menu value="Plain text input" />
-      </popup-menu>
+        <div menu>Plain Text</div>
+
+        <div menu alive-on-select>
+          <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
+        </div>
+
+        <div menu alive-on-select>
+          <input id="checkbox-01" type="checkbox" />
+          <label for="checkbox-01">custom menu</label>
+        </div>
+        <div menu alive-on-select>
+          <label for="text-01">value</label>
+          <input id="text-01" type="text" value="Plain text input" />
+        </div>
+      </ox-popup-menu>
     `
   }
 
   firstUpdated() {
     this.addEventListener('contextmenu', e => {
-      const popupMenu = this.renderRoot.querySelector('popup-menu')
+      const popupMenu = this.renderRoot.querySelector('ox-popup-menu')
 
       if (popupMenu) {
         e.preventDefault()

package/client/pages/grist-colorizing.js

@@ -1,10 +1,9 @@
 import { css, html } from 'lit-element'
-
-import { getEditor, getRenderer } from '@things-factory/grist-ui'
+import { getEditor, getRenderer } from '@operato/data-grist'
 import { i18next, localize } from '@things-factory/i18n-base'
+
 import { PageView } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
-
 import { referencePageStyles } from './reference-page-styles'
 
 class GristColorizing extends localize(i18next)(PageView) {
@@ -27,7 +26,7 @@ class GristColorizing extends localize(i18next)(PageView) {
           overflow: auto;
         }
 
-        data-grist {
+        ox-grist {
           flex: 1;
         }
       `
@@ -49,7 +48,7 @@ class GristColorizing extends localize(i18next)(PageView) {
   }
 
   get grist() {
-    return this.shadowRoot.querySelector('data-grist')
+    return this.shadowRoot.querySelector('ox-grist')
   }
 
   render() {
@@ -97,11 +96,11 @@ class GristColorizing extends localize(i18next)(PageView) {
         </pre
         >
       </div>
-      <data-grist
+      <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.config}
         .fetchHandler=${this.fetchHandler}
-      ></data-grist>
+      ></ox-grist>
     `
   }