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

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

@@ -0,0 +1,288 @@
+import './things-scene-components.import'
+import '@operato/board/ox-board-modeller.js'
+import '@operato/oops'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { BoardModeller } from '@operato/board/ox-board-modeller.js'
+import { OxPropertyEditor } from '@operato/property-editor'
+import { PageView, store } from '@operato/shell'
+import { hasPrivilege } from '@things-factory/auth-base/dist-client'
+import { client, gqlContext } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+import { provider } from '../board-provider'
+import components from './things-scene-components-with-tools.import'
+
+const NOOP = () => {}
+
+@customElement('board-modeller-page')
+export class BoardModellerPage extends connect(store)(PageView) {
+  constructor() {
+    super()
+
+    components.forEach(({ templates = [], groups = [] }) => {
+      groups.forEach(group => BoardModeller.registerGroup(group))
+      BoardModeller.registerTemplate(templates)
+    })
+
+    /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */
+    var addedEditors = {}
+    for (let component in components) {
+      let { editors } = components[component]
+
+      editors &&
+        editors.forEach(editor => {
+          let { type, element } = editor
+
+          addedEditors[type] = element
+        })
+    }
+
+    OxPropertyEditor.register(addedEditors)
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      ox-board-modeller {
+        flex: 1;
+      }
+
+      ox-oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+  ]
+
+  @property({ type: String }) boardId?: string | null
+  @property({ type: String }) boardName?: string = ''
+  @property({ type: Object }) model: any = null
+  @property({ type: String }) baseUrl?: string = ''
+  @property({ type: Array }) selected: any = []
+  @property({ type: Number }) mode?: number = 1
+  @property({ type: Boolean }) hideProperty?: boolean = false
+  @property({ type: String }) overlay?: string | null = null
+  @property({ type: Object }) scene: any = null
+  @property({ type: Array }) componentGroupList?: any[] = BoardModeller.groups
+  @property({ type: Array }) fonts: any = []
+  @property({ type: Array }) propertyEditor: any
+  @property({ type: Boolean }) preparing?: boolean
+
+  private board: any = null
+  @query('ox-board-modeller') modeller?: BoardModeller
+
+  get context() {
+    return {
+      title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',
+      help: 'board-modeller/modeller',
+      widebleed: true
+    }
+  }
+
+  get oopsNote() {
+    return {
+      icon: 'color_lens',
+      title: 'EMPTY BOARD',
+      description: 'There are no board to be designed'
+    }
+  }
+
+  async refresh() {
+    if (!this.boardId) {
+      this.board = null
+      this.model = null
+
+      return
+    }
+    try {
+      this.preparing = true
+      this.updateContext()
+
+      var response = await client.query({
+        query: gql`
+          query FetchBoardById($id: String!) {
+            board(id: $id) {
+              id
+              name
+              model
+            }
+          }
+        `,
+        variables: { id: this.boardId },
+        context: gqlContext()
+      })
+
+      var board = response.data.board
+
+      if (!board) {
+        this.board = null
+        throw 'board not found'
+      }
+
+      this.board = {
+        ...board,
+        model: JSON.parse(board.model)
+      }
+
+      this.boardName = this.board.name
+      this.model = {
+        ...this.board.model
+      }
+    } catch (ex) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: ex,
+            ex
+          }
+        })
+      )
+    } finally {
+      this.preparing = false
+      this.updateContext()
+    }
+  }
+
+  async updated(changes) {
+    if (changes.has('boardId')) {
+      if (await hasPrivilege({ privilege: 'mutation', category: 'board' })) {
+        this.refresh()
+      } else {
+        this.boardId = null
+        this.model = null
+        this.modeller?.close()
+      }
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.boardId = lifecycle.resourceId
+    } else {
+      this.boardId = null
+      this.model = null
+      this.modeller?.close()
+    }
+  }
+
+  stateChanged(state) {
+    this.baseUrl = state.route.rootPath
+    this.fonts = state.font
+  }
+
+  render() {
+    var oops = !this.preparing && !this.model && this.oopsNote
+
+    return oops
+      ? html` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
+      : html`
+          <ox-board-modeller
+            .mode=${this.mode}
+            @mode-changed=${e => {
+              this.mode = e.detail.value
+            }}
+            .model=${this.model}
+            @model-changed=${e => {
+              this.model = e.detail.value
+            }}
+            .scene=${this.scene}
+            @scene-changed=${e => {
+              this.scene = e.detail.value
+            }}
+            .selected=${this.selected}
+            @selected-changed=${e => {
+              this.selected = e.detail.value
+            }}
+            .baseUrl=${this.baseUrl}
+            .provider=${provider}
+            @save-model=${e => this.saveBoard()}
+            .componentGroupList=${this.componentGroupList}
+            .fonts=${this.fonts}
+            .hideProperty=${this.hideProperty}
+          >
+          </ox-board-modeller>
+        `
+  }
+
+  async updateBoard() {
+    try {
+      this.preparing = true
+
+      var { id, name, description, groupId } = this.board
+      var model = JSON.stringify(this.scene.model)
+
+      await client.mutate({
+        mutation: gql`
+          mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
+            updateBoard(id: $id, patch: $patch) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id,
+          patch: { name, description, model, groupId }
+        },
+        context: gqlContext()
+      })
+
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'info',
+            message: i18next.t('text.saved')
+          }
+        })
+      )
+    } catch (ex) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: ex,
+            ex: ex
+          }
+        })
+      )
+    } finally {
+      this.preparing = false
+    }
+
+    this.updateContext()
+  }
+
+  async saveBoard() {
+    await this.updateBoard()
+    this.modeller?.preserve()
+  }
+
+  async canDeactivate(): Promise<boolean> {
+    if (this.modeller?.hasUnpreservedChanges()) {
+      return await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('prompt.sure to navigate away?'),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    }
+
+    return true
+  }
+}

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

@@ -0,0 +1,29 @@
+import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
+import { client, gqlContext } from '@operato/graphql'
+
+import { BoardPlayerPage } from './board-player-page'
+
+@customElement('board-player-by-name-page')
+export class BoardPlayerByNamePage extends BoardPlayerPage {
+  async fetch(name: string) {
+    return await client.query({
+      query: gql`
+        query ($name: String!) {
+          response: playGroupByName(name: $name) {
+            id
+            name
+            description
+            boards {
+              id
+              model
+            }
+          }
+        }
+      `,
+      variables: {
+        name
+      }
+    })
+  }
+}

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

@@ -0,0 +1,241 @@
+import './things-scene-components.import'
+import '@operato/board/ox-board-player.js'
+import '@operato/oops'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, state, query } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { createBoardProvider } from '../board-provider'
+import { store, PageView } from '@operato/shell'
+import { clientSettingStore } from '@operato/shell/object-store.js'
+import { client, subscribe } from '@operato/graphql'
+import { ReferenceMap } from '@hatiolab/things-scene'
+import { BoardPlayer } from '@operato/board/ox-board-player.js'
+
+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-player-page')
+export class BoardPlayerPage extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      ox-board-player {
+        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%);
+      }
+    `
+  ]
+
+  @state() data: any
+  @state() playGroup: any
+  @state() playGroupId?: string | null
+  @state() boards: any
+  @state() baseUrl?: string
+  @state() showSpinner?: boolean
+
+  private provider?: ReferenceMap<unknown> & { dispose?: () => void }
+  private subscriptionForAutoRefresh
+
+  @query('ox-board-player') boardPlayer?: BoardPlayer
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.provider = createBoardProvider()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.provider!.dispose!()
+    delete this.provider
+  }
+
+  async fetch(id: string) {
+    return await client.query({
+      query: gql`
+        query ($id: String!) {
+          response: playGroup(id: $id) {
+            id
+            name
+            description
+            boards {
+              id
+              model
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+  }
+
+  async refresh() {
+    if (!this.playGroupId) {
+      return
+    }
+
+    try {
+      this.showSpinner = true
+      this.updateContext()
+
+      const response = await this.fetch(this.playGroupId)
+
+      this.playGroup = response.data.response
+
+      if (!this.playGroup) {
+        throw 'playgroup not found'
+      }
+
+      this.boards = this.playGroup.boards
+    } 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()
+    }
+  }
+
+  updated(changes) {
+    if (changes.has('playGroupId')) {
+      this.boardPlayer!.stop()
+      this.refresh()
+    }
+  }
+
+  stateChanged(state) {
+    this.baseUrl = state.app.baseUrl
+  }
+
+  get oopsNote() {
+    return {
+      icon: 'style',
+      title: 'EMPTY PLAYGROUP',
+      description: 'There are no board to be shown'
+    }
+  }
+
+  get context() {
+    return {
+      title: this.playGroup ? this.playGroup.name : this.showSpinner ? 'Fetching playgroup...' : 'Playgroup Not Found'
+    }
+  }
+
+  render() {
+    var oops = !this.showSpinner && !this.playGroup && this.oopsNote
+
+    return oops
+      ? html` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
+      : html`
+          <ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>
+          <ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
+        `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.playGroupId = lifecycle.resourceId
+      this.data = parseQuery({ ...lifecycle.params })
+
+      this.refresh()
+    } else {
+      this.stopSubscribing()
+
+      this.playGroupId = null
+      this.boardPlayer!.stop()
+    }
+  }
+
+  async startSubscribingForAutoRefresh() {
+    if (!this.playGroup) {
+      return
+    }
+
+    await this.stopSubscribing()
+
+    this.subscriptionForAutoRefresh = await subscribe(
+      {
+        query: gql`
+          subscription ($id: String!) {
+            playGroup(id: $id) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: this.playGroup.id
+        }
+      },
+      {
+        next: async ({ data }) => {
+          await this.stopSubscribing()
+
+          // location.reload()
+          if (data) {
+            this.refresh()
+          }
+        }
+      }
+    )
+  }
+
+  async stopSubscribing() {
+    await this.subscriptionForAutoRefresh?.unsubscribe()
+    delete this.subscriptionForAutoRefresh
+  }
+}