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

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

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

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

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