@things-factory/board-ui 8.0.0-beta.9 → 8.0.0

package/client/pages/board-template/board-template-list-page.ts

@@ -0,0 +1,248 @@
+import '@operato/data-grist'
+import '@operato/board/ox-board-template-viewer.js'
+
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView, store } from '@operato/shell'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+import { openPopup } from '@operato/layout'
+
+@customElement('board-template-list-page')
+export class BoardTemplateListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig: any
+  @state() visibility: string = ''
+
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: i18next.t('title.board-template list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      board_topmenu: true,
+      help: 'board-service/board-template'
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['visibility', 'creator', 'createdAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'boolean',
+          name: 'mine',
+          record: {
+            editable: false
+          },
+          hidden: true,
+          width: 0
+        },
+        {
+          type: 'select-buttons',
+          name: 'visibility',
+          header: i18next.t('field.visibility'),
+          label: true,
+          record: {
+            editable: false
+          },
+          filter: {
+            operator: 'in',
+            options: ['private', 'public', 'domain'],
+            value: this.visibility,
+            label: '' /* empty intentionally */
+          },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'tags',
+          header: i18next.t('field.tags'),
+          label: true,
+          record: {
+            renderer: (value, column, record, rowIndex, field) => (value || []).join(', '),
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: {
+            editable: false,
+            align: 'center',
+            wide: true
+          },
+          width: 200
+        },
+        {
+          type: 'resource-object',
+          name: 'creator',
+          header: i18next.t('field.creator'),
+          label: true,
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          label: true,
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: false,
+        appendable: false,
+        handlers: {
+          click: (_columns, _data, _column, record, _rowIndex) => {
+            const boardTemplate = {
+              ...record,
+              model: JSON.parse(record.model)
+            }
+
+            openPopup(html` <ox-board-template-viewer .boardTemplate=${boardTemplate}></ox-board-template-viewer> `, {
+              backdrop: true,
+              size: 'large',
+              title: i18next.t('label.board-template')
+            })
+          }
+        }
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: boardTemplates(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              model
+              thumbnail
+              visibility
+              tags
+              mine
+              creator {
+                id
+                name
+              }
+              createdAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+}

package/client/pages/board-viewer-by-name-page.ts

@@ -0,0 +1,24 @@
+import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
+import { client, gqlContext } from '@operato/graphql'
+
+import { BoardViewerPage } from './board-viewer-page'
+
+@customElement('board-viewer-by-name-page')
+export class BoardViewerByNamePage extends BoardViewerPage {
+  async fetch(name: string) {
+    return await client.query({
+      query: gql`
+        query FetchBoardByName($name: String!) {
+          response: boardByName(name: $name) {
+            id
+            name
+            model
+          }
+        }
+      `,
+      variables: { name },
+      context: gqlContext()
+    })
+  }
+}

package/client/pages/board-viewer-page.ts

@@ -0,0 +1,271 @@
+import './things-scene-components.import'
+import '@operato/board/ox-board-viewer.js'
+import '@operato/oops'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { buildLabelPrintCommand } from '@operato/barcode'
+import { BoardViewer } from '@operato/board'
+import { store, PageView } from '@operato/shell'
+import { client, gqlContext, subscribe } from '@operato/graphql'
+import { clientSettingStore } from '@operato/shell/object-store.js'
+
+import { provider } from '../board-provider'
+
+const NOOP = () => {}
+
+function parseQuery(query: any) {
+  for (const key in query) {
+    if (query.hasOwnProperty(key)) {
+      try {
+        query[key] = JSON.parse(query[key])
+      } catch (error) {
+        // do nothing
+      }
+    }
+  }
+
+  return query
+}
+
+@customElement('board-viewer-page')
+export class BoardViewerPage extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      ox-board-viewer {
+        flex: 1;
+      }
+
+      ox-oops-spinner {
+        display: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      ox-oops-spinner[show] {
+        display: block;
+      }
+
+      ox-oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+  ]
+
+  @property({ type: Object }) _board: any
+  @property({ type: String }) _boardId?: string
+  @property({ type: String }) _baseUrl?: string
+  @property({ type: String }) _help?: string
+  @property({ type: Boolean }) _interactive?: boolean
+  @property({ type: Boolean }) _showSpinner?: boolean
+
+  @state() data: any
+
+  subscriptionForAutoRefresh
+
+  @query('ox-board-viewer') boardViewer!: BoardViewer
+
+  get oopsNote() {
+    return {
+      icon: 'insert_chart_outlined',
+      title: 'EMPTY BOARD',
+      description: 'There are no board to be shown'
+    }
+  }
+
+  get context() {
+    return {
+      /* can set the page title with the 'title' parameter. */
+      title:
+        this.lifecycle.params['title'] ||
+        (this._board ? this._board.name : this._showSpinner ? 'Fetching board...' : 'Board Not Found'),
+      help: this._help
+    }
+  }
+
+  render() {
+    var oops = !this._showSpinner && !this._board && this.oopsNote
+
+    return oops
+      ? html` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
+      : html`
+          <ox-board-viewer
+            .board=${this._board}
+            .provider=${provider}
+            ?hide-fullscreen=${this._interactive}
+            ?hide-navigation=${this._interactive}
+            .data=${this.data}
+            history
+          ></ox-board-viewer>
+          <ox-oops-spinner ?show=${this._showSpinner}></ox-oops-spinner>
+        `
+  }
+
+  updated(changes) {
+    if (changes.has('_boardId')) {
+      this.refresh()
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this._boardId = lifecycle.resourceId
+      this._interactive = lifecycle.params['interactive'] === 'true'
+      this._help = lifecycle.params['help']
+      this.data = parseQuery({ ...lifecycle.params })
+    } else {
+      /*
+       * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.
+       * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,
+       * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.
+       */
+      this.stopSubscribing()
+
+      if (this._boardId) {
+        let boardViewer = this.boardViewer
+        boardViewer && boardViewer.closeScene()
+      }
+
+      this._boardId = ''
+    }
+  }
+
+  stateChanged(state) {
+    this._baseUrl = state.app.baseUrl
+  }
+
+  async fetch(id: string) {
+    if (!id) {
+      return
+    }
+
+    return await client.query({
+      query: gql`
+        query ($id: String!) {
+          response: board(id: $id) {
+            id
+            name
+            model
+          }
+        }
+      `,
+      variables: { id },
+      context: gqlContext()
+    })
+  }
+
+  async refresh() {
+    if (!this._boardId) {
+      this._board = null
+      return
+    }
+
+    try {
+      this._showSpinner = true
+      this.updateContext()
+
+      var { data, errors } = (await this.fetch(this._boardId)) || {}
+
+      var board = data?.response
+
+      if (!board) {
+        this._board = null
+        const message = errors?.map(error => error.message).join('\n')
+        throw message || 'board not found'
+      }
+
+      this._board = {
+        ...board,
+        model: JSON.parse(board.model)
+      }
+    } catch (ex) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: ex,
+            ex
+          }
+        })
+      )
+    } finally {
+      this._showSpinner = false
+      this.updateContext()
+
+      const { autoRefresh = true } = (await clientSettingStore.get('board-view'))?.value || {}
+      autoRefresh && this.startSubscribingForAutoRefresh()
+    }
+  }
+
+  async startSubscribingForAutoRefresh() {
+    if (!this._board) {
+      return
+    }
+
+    await this.stopSubscribing()
+
+    this.subscriptionForAutoRefresh = await subscribe(
+      {
+        query: gql`
+          subscription ($id: String!) {
+            board(id: $id) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: this._board.id
+        }
+      },
+      {
+        next: async ({ data }) => {
+          await this.stopSubscribing()
+
+          if (data) {
+            this.refresh()
+          }
+        }
+      }
+    )
+  }
+
+  async stopSubscribing() {
+    await this.subscriptionForAutoRefresh?.unsubscribe()
+    delete this.subscriptionForAutoRefresh
+  }
+
+  async getGrf() {
+    var { labelRotation } = this._board.model
+
+    var { width, height, data } = (await this.boardViewer.getSceneImageData()) || {}
+    if (!width || !data) {
+      throw 'Cannot get SceneImageData...'
+    }
+
+    return buildLabelPrintCommand(data as Uint8ClampedArray, width, height, labelRotation, false, false)
+  }
+
+  async printTrick(image) {
+    await this.boardViewer.printTrick(image)
+  }
+}

package/client/pages/font-list-page.ts

@@ -0,0 +1,31 @@
+import '@operato/font'
+
+import { css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { PageView } from '@operato/shell'
+
+@customElement('font-list-page')
+export class FontListPage extends PageView {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      font-selector {
+        flex: 1;
+      }
+    `
+  ]
+
+  get context() {
+    return {
+      title: 'font list'
+    }
+  }
+
+  render() {
+    return html` <font-selector .creatable=${true}></font-selector> `
+  }
+}