@things-factory/board-ui 8.0.38 → 9.0.0-9.0.0-beta.59.0

package/client/board-list/group-bar.ts

@@ -1,99 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { privileged } from '@things-factory/auth-base/dist-client'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('group-bar')
-export default class GroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @property({ type: Array }) groups?: any[]
-  @property({ type: String }) groupId?: string
-  @property({ type: String }) targetPage?: string
-
-  private __sb?: ScrollBooster
-
-  render() {
-    return html`
-      <ul>
-        <li ?active=${!this.groupId}>
-          <a href=${this.targetPage || ''}><md-icon>dashboard</md-icon></a>
-        </li>
-
-        <li ?active=${this.groupId === 'favor'}>
-          <a href="${this.targetPage}/favor"><md-icon>star</md-icon></a>
-        </li>
-
-        ${privileged(
-          { privilege: 'mutation', category: 'board' },
-          html`<li ?active=${this.groupId === 'mywork'}>
-            <a href="${this.targetPage}/mywork"><md-icon>engineering</md-icon></a>
-          </li>`
-        )}
-        ${(this.groups || []).map(
-          group => html`
-            <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>
-              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
-            </li>
-          `
-        )}
-
-        <li padding></li>
-
-        <li add>
-          <md-icon @click=${e => this.infoGroup()}>add</md-icon>
-        </li>
-      </ul>
-    `
-  }
-
-  infoGroup(groupId?: string) {
-    this.dispatchEvent(
-      new CustomEvent('info-group', {
-        detail: groupId
-      })
-    )
-  }
-
-  onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  updated(change) {
-    if (change.has('groups')) {
-      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
-      this.__sb && this.__sb.updateMetrics()
-    }
-
-    if (change.has('groupId')) {
-      var active = this.renderRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.renderRoot.querySelector('ul')
-
-    /* long-press */
-    longpressable(scrollTarget!)
-
-    scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-
-    this.__sb = new ScrollBooster({
-      viewport: this,
-      content: scrollTarget,
-      mode: 'x',
-      onUpdate: data => {
-        this.scrollLeft = data.position.x
-      }
-    })
-  }
-}

package/client/board-list/play-group-bar.ts

@@ -1,88 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('play-group-bar')
-export default class PlayGroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @property({ type: Array }) groups: { id: string; name: string }[] = []
-  @property({ type: String }) groupId: string = ''
-  @property({ type: String, attribute: 'target-page' }) targetPage: string = ''
-
-  private __sb?: ScrollBooster
-
-  render() {
-    return html`
-      <ul>
-        ${(this.groups || []).map(
-          group => html`
-            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
-              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
-            </li>
-          `
-        )}
-
-        <li padding>&nbsp;</li>
-
-        <li add>
-          <md-icon @click=${e => this._infoGroup()}>add</md-icon>
-        </li>
-      </ul>
-    `
-  }
-
-  _infoGroup(group?: { id: string; name: string }) {
-    this.dispatchEvent(
-      new CustomEvent('info-play-group', {
-        detail: group
-      })
-    )
-  }
-
-  _onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  _onClickAdd(e) {
-    // TODO Implements
-  }
-
-  updated(change) {
-    if (change.has('groups')) {
-      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
-      this.__sb && this.__sb.updateMetrics()
-    }
-
-    if (change.has('groupId')) {
-      var active = this.renderRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.renderRoot.querySelector('ul')
-
-    /* long-press */
-    longpressable(scrollTarget!)
-
-    scrollTarget!.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)
-
-    this.__sb = new ScrollBooster({
-      viewport: this,
-      content: scrollTarget,
-      mode: 'x',
-      onUpdate: data => {
-        this.scrollLeft = data.position.x
-      }
-    })
-  }
-}

package/client/board-provider.ts

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

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

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

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

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

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