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

package/client/board-provider.ts

@@ -0,0 +1,92 @@
+import gql from 'graphql-tag'
+
+import { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'
+import { BoardDataStorage } from '@operato/board'
+import { client, gqlContext, subscribe } from '@operato/graphql'
+
+export function createBoardProvider() {
+  var _provider = new ReferenceMap<Scene>(
+    async (boardId, resolve, reject): Promise<any> => {
+      try {
+        const response = await client.query({
+          query: gql`
+            query FetchBoardById($id: String!) {
+              board(id: $id) {
+                model
+              }
+            }
+          `,
+          variables: { id: boardId },
+          context: gqlContext()
+        })
+
+        const board = response.data?.board
+
+        if (!board) {
+          reject(new Error('Failed to get the requested board.'))
+          return
+        }
+
+        var model = JSON.parse(board.model)
+
+        var scene: Scene
+
+        try {
+          scene = await provider.get(boardId)
+          console.warn('Board fetched more than twice.', boardId)
+        } catch (e) {
+          scene = create({
+            model,
+            mode: 0,
+            refProvider: provider as any,
+            dataStorage: new BoardDataStorage(boardId),
+            dataSubscriptionProvider: {
+              subscribe: async (tag, component) => {
+                return await subscribe(
+                  {
+                    query: gql`
+                              subscription {
+                                data(tag: "${tag}") {
+                                  tag
+                                  data
+                                }
+                              }
+                            `
+                  },
+                  {
+                    next: async ({ data }) => {
+                      if (data) {
+                        component.data = data.data.data
+                      }
+                    }
+                  }
+                )
+              },
+
+              dispose() {}
+            }
+          })
+
+          // s.app.baseUrl = undefined;
+        }
+
+        resolve(scene)
+
+        // resolve(scene, {
+        //   ...board,
+        //   model
+        // })
+      } catch (e) {
+        error(e)
+        reject(e)
+      }
+    },
+    async (id, ref) => {
+      ref.dispose()
+    }
+  )
+
+  return _provider
+}
+
+export const provider = createBoardProvider()

package/client/bootstrap.ts

@@ -0,0 +1,39 @@
+import '@operato/board/ox-property-editor-board-selector.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
+import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+import { OxGristEditorHashtags } from '@operato/grist-editor/ox-grist-editor-hashtags.js'
+import { OxGristRendererHashtags } from '@operato/grist-editor/ox-grist-renderer-hashtags.js'
+
+import { BoardEditor } from './data-grist/board-editor'
+import { BoardRenderer } from './data-grist/board-renderer'
+import { ColorMapEditor } from './data-grist/color-map-editor'
+import { ColorRangesEditor } from './data-grist/color-ranges-editor'
+
+export default function bootstrap() {
+  registerRenderer('board', BoardRenderer)
+  registerRenderer('color-map', OxGristRendererJson5)
+  registerRenderer('color-ranges', OxGristRendererJson5)
+  registerRenderer('hashtags', OxGristRendererHashtags)
+
+  registerEditor('board', BoardEditor)
+  registerEditor('color-map', ColorMapEditor)
+  registerEditor('color-ranges', ColorRangesEditor)
+  registerEditor('hashtags', OxGristEditorHashtags)
+
+  OxPropertyEditor.register({
+    'board-selector': 'ox-property-editor-board-selector'
+  })
+
+  /* append viewpart anchor to asidebar */
+  appendViewpart({
+    name: 'viewpart-info',
+    viewpart: {
+      show: false,
+      hovering: 'edge',
+      backdrop: true
+    },
+    position: VIEWPART_POSITION.ASIDEBAR
+  })
+}

package/client/data-grist/board-editor.ts

@@ -0,0 +1,113 @@
+import '@operato/board/ox-board-selector.js'
+import './board-renderer'
+
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('board-editor')
+export class BoardEditor extends OxGristEditor {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        box-sizing: border-box;
+
+        width: 100%;
+        height: 100%;
+
+        border: 0;
+        background-color: transparent;
+
+        font: var(--grist-object-editor-font);
+        color: var(--grist-object-editor-color);
+
+        justify-content: inherit;
+      }
+
+      board-renderer {
+        display: flex;
+        flex: auto;
+
+        justify-content: inherit;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: Object }) column: any
+  @property({ type: Object }) record: any
+  @property({ type: Number }) row?: number
+
+  popup
+
+  render() {
+    var { boardViewerPage } = this.column.record.options || {}
+    return html` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `
+  }
+
+  async firstUpdated() {
+    this.value = this.record[this.column.name]
+
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.openSelector()
+    })
+
+    this.openSelector()
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+
+    var template = html`
+      <ox-board-selector
+        .creatable=${true}
+        .value=${this.value}
+        @board-selected=${async e => {
+          var board = e.detail.board
+
+          this.dispatchEvent(
+            new CustomEvent('field-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                before: this.value,
+                after: this.column.type == 'board' ? board : board.id || '',
+                record: this.record,
+                column: this.column,
+                row: this.row
+              }
+            })
+          )
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-board-selector>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select board')
+    })
+  }
+}

package/client/data-grist/board-renderer.ts

@@ -0,0 +1,134 @@
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { navigate } from '@operato/shell'
+import { client, gqlContext } from '@operato/graphql'
+
+const FETCH_BOARD_GQL = id => {
+  return gql`
+  {
+    board(id:"${id}") {
+      id
+      name
+      description
+      thumbnail
+    }
+  }
+`
+}
+
+@customElement('board-renderer')
+class BoardRendererElement extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        justify-content: center;
+        position: relative;
+
+        max-width: var(--board-renderer-max-width);
+        border: var(--board-renderer-border);
+
+        width: 100%;
+      }
+      span {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        text-indent: 5px;
+
+        font: var(--board-renderer-name-font);
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+      }
+      img {
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+      }
+      md-icon {
+        position: absolute;
+        top: 0;
+        text-align: center;
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+
+        width: var(--board-renderer-icon-size);
+        height: var(--board-renderer-icon-size);
+        font: var(--board-renderer-font);
+      }
+      md-icon[edit] {
+        right: 0;
+
+        border-bottom-left-radius: var(--board-renderer-icon-border-radius);
+      }
+      md-icon[view] {
+        left: 0;
+
+        border-bottom-right-radius: var(--board-renderer-icon-border-radius);
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: String }) boardViewerPage?: string
+  @property({ type: Object }) _value: any
+
+  async updated(changes) {
+    if (changes.has('value')) {
+      if (typeof this.value == 'string' && this.value) {
+        /* fetchBoard..., */
+        try {
+          var response = await client.query({
+            query: FETCH_BOARD_GQL(this.value),
+            context: gqlContext()
+          })
+
+          this._value = (response && response.data && response.data.board) || {}
+        } catch (e) {
+          console.error(e)
+        }
+      } else {
+        this._value = this.value || {}
+      }
+    }
+  }
+
+  render() {
+    var { id, name = '', thumbnail = 'image/gif' } = this._value || {}
+
+    return id
+      ? html`
+          <span>${name}</span>
+          <img src=${thumbnail} alt="no thumbnail!" />
+          <md-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</md-icon>
+          <md-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</md-icon>
+        `
+      : html` choose board.. `
+  }
+
+  onClickViewer(e, id) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    var boardViewerPage = this.boardViewerPage || 'board-viewer'
+
+    navigate(`${boardViewerPage}/${id}${window.location.search}`)
+  }
+
+  onClickModeler(e, id) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    navigate(`board-modeller/${id}${window.location.search}`)
+  }
+}
+
+export const BoardRenderer = (value, column, record) => {
+  var { boardViewerPage = '' } = column.record.options || {}
+
+  return html` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `
+}

package/client/data-grist/color-map-editor.ts

@@ -0,0 +1,17 @@
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'
+
+@customElement('color-map-editor')
+export class ColorMapEditor extends OxGristEditorValueMap {
+  get options() {
+    const overidable = this.column.record?.options || {}
+
+    return {
+      name: `Color Map : ${this.record.name}`,
+      valuetype: 'color',
+      objectified: true,
+      ...overidable
+    }
+  }
+}

package/client/data-grist/color-ranges-editor.ts

@@ -0,0 +1,17 @@
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditorValueRanges } from '@operato/grist-editor/ox-grist-editor-value-ranges.js'
+
+@customElement('color-ranges-editor')
+export class ColorRangesEditor extends OxGristEditorValueRanges {
+  get options() {
+    const overidable = this.column.record?.options || {}
+
+    return {
+      name: `Color Ranges : ${this.record.name}`,
+      valuetype: 'color',
+      objectified: true,
+      ...overidable
+    }
+  }
+}

package/client/graphql/board-template.ts

@@ -0,0 +1,141 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+import { gqlBuilder } from '@things-factory/utils'
+
+export async function fetchBoardTemplateList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        boardTemplates(${gqlBuilder.buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            visibility
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchBoardTemplate(id) {
+  const response = await client.query({
+    query: gql`
+      query FetchBoardTemplate($id: String!) {
+        boardTemplate(id: $id) {
+          id
+          name
+          description
+          thumbnail
+          model
+          visibility
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function createBoardTemplate(boardTemplate) {
+  /*
+    input NewBoard {
+      name        : String!
+      description : String
+      model       : String!
+      visibility  : String!
+    }
+  */
+
+  boardTemplate.model = JSON.stringify(boardTemplate.model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateBoardTemplate($boardTemplate: NewBoardTemplate!) {
+        createBoardTemplate(boardTemplate: $boardTemplate) {
+          id
+          name
+          description
+          model
+          visibility
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      boardTemplate
+    }
+  })
+
+  return response.data
+}
+
+export async function updateBoardTemplate(boardTemplate) {
+  /*
+    input BoardPatch {
+      name        : String
+      description : String
+      model       : String
+      visibility  : String
+    }
+    */
+  var { id, name, description, model, visibility } = boardTemplate
+  model = JSON.stringify(model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateBoard($id: String!, $patch: BoardTemplatePatch!) {
+        updateBoard(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          visibility
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description, model, visibility }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteBoardTemplate(id) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteBoardTemplate(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}