@things-factory/board-ui 8.0.5 → 9.0.0-beta.10

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
-    }
-  }
-}

package/client/graphql/board-template.ts

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

package/client/graphql/board.ts

@@ -1,273 +0,0 @@
-import gql from 'graphql-tag'
-
-import { client } from '@operato/graphql'
-import { gqlBuilder } from '@things-factory/utils'
-
-export async function fetchBoardList(listParam = {}) {
-  const response = await client.query({
-    query: gql`
-      {
-        boards(${gqlBuilder.buildArgs(listParam)}) {
-          items {
-            id
-            name
-            description
-            thumbnail
-            state
-            version
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}
-
-export async function fetchBoard(id) {
-  const response = await client.query({
-    query: gql`
-      query FetchBoardById($id: String!) {
-        board(id: $id) {
-          id
-          name
-          description
-          group {
-            id
-            name
-          }
-          thumbnail
-          model
-          createdAt
-          creator {
-            id
-            name
-          }
-          state
-          version
-          updatedAt
-          updater {
-            id
-            name
-          }
-        }
-      }
-    `,
-    variables: { id }
-  })
-
-  return response.data
-}
-
-export async function createBoard(board) {
-  /*
-    input NewBoard {
-      name        : String!
-      description : String
-      model       : String!
-      groupId     : String!
-    }
-  */
-
-  board.model = JSON.stringify(board.model)
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CreateBoard($board: NewBoard!) {
-        createBoard(board: $board) {
-          id
-          name
-          description
-          model
-          state
-          version
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      board
-    }
-  })
-
-  return response.data
-}
-
-export async function cloneBoard({
-  id,
-  name,
-  description,
-  targetSubdomain,
-  targetGroupId
-}: {
-  id: string
-  name: string
-  description: string
-  targetSubdomain: string
-  targetGroupId: string
-}) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CloneBoard($id: String!, $patch: BoardPatch!, $targetSubdomain: String!, $targetGroupId: String) {
-        cloneBoard(id: $id, patch: $patch, targetSubdomain: $targetSubdomain, targetGroupId: $targetGroupId) {
-          id
-          name
-          description
-          model
-          group {
-            id
-            name
-          }
-          state
-          version
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      patch: { name, description },
-      targetSubdomain,
-      targetGroupId
-    }
-  })
-
-  return response.data
-}
-
-export async function releaseBoard(board) {
-  var { id } = board
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ReleaseBoard($id: String!) {
-        releaseBoard(id: $id) {
-          id
-          name
-          description
-          model
-          group {
-            id
-            name
-          }
-          state
-          version
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-
-  return response.data
-}
-
-export async function revertBoardVersion(id, version) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation RevertBoardVersion($id: String!, $version: Float!) {
-        revertBoardVersion(id: $id, version: $version) {
-          name
-        }
-      }
-    `,
-    variables: {
-      id,
-      version
-    }
-  })
-
-  return response.data.revertBoardVersion
-}
-
-export async function updateBoard(board) {
-  /*
-    input BoardPatch {
-      name        : String
-      description : String
-      model       : String
-    }
-    */
-  var { id, name, description, model, groupId } = board
-  model = JSON.stringify(model)
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
-        updateBoard(id: $id, patch: $patch) {
-          id
-          name
-          description
-          model
-          group {
-            id
-            name
-          }
-          state
-          version
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      patch: { name, description, model, groupId }
-    }
-  })
-
-  return response.data
-}
-
-export async function deleteBoard(id) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!) {
-        deleteBoard(id: $id)
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-
-  return response.data
-}
-
-export async function importBoards({
-  groupId,
-  files,
-  overwrite
-}: {
-  groupId: string
-  files: File[]
-  overwrite: boolean
-}) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation importBoards($groupId: String!, $files: [Upload!]!, $overwrite: Boolean!) {
-        importBoards(groupId: $groupId, files: $files, overwrite: $overwrite) {
-          id
-          name
-          description
-        }
-      }
-    `,
-    variables: {
-      groupId,
-      files,
-      overwrite
-    },
-    context: { hasUpload: true }
-  })
-
-  return response.data
-}

package/client/graphql/favorite-board.ts

@@ -1,25 +0,0 @@
-import gql from 'graphql-tag'
-import { client } from '@operato/graphql'
-import { gqlBuilder } from '@things-factory/utils'
-
-export async function fetchFavoriteBoardList(listParam = {}) {
-  const response = await client.query({
-    query: gql`
-      {
-        favoriteBoards(${gqlBuilder.buildArgs(listParam)}) {
-          items {
-            id
-            name
-            description
-            thumbnail
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}