@things-factory/board-ui 8.0.0 → 9.0.0-beta.3

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

@@ -1,248 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,271 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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> `
-  }
-}