@operato/board 0.2.48 → 0.2.52

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -4,10 +4,11 @@
 
 import './component-menu'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
 
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
+import { ComponentGroup } from '../../types'
 
 @customElement('component-toolbar')
 class ComponentToolbar extends LitElement {
@@ -22,7 +23,7 @@ class ComponentToolbar extends LitElement {
         background-color: var(--component-toolbar-background-color);
       }
 
-      span {
+      img {
         display: flex;
         flex-direction: row;
 
@@ -32,65 +33,8 @@ class ComponentToolbar extends LitElement {
 
         border-bottom: var(--component-toolbar-border);
         margin: 0;
-        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;
-      }
-
-      span[data-group='line'] {
-        background-position: 50% -186px;
-      }
-
-      span[data-group='shape'] {
-        background-position: 0px -284px;
-      }
-
-      span[data-group='textAndMedia'] {
-        background-position: 50% -385px;
-      }
-
-      span[data-group='chartAndGauge'] {
-        background-position: 50% -488px;
-      }
-
-      span[data-group='table'] {
-        background-position: 50% -585px;
-      }
-
-      span[data-group='container'] {
-        background-position: 50% -685px;
-      }
-
-      span[data-group='dataSource'] {
-        background-position: 50% -888px;
-      }
-
-      span[data-group='IoT'] {
-        background-position: -3px -788px;
-      }
-
-      span[data-group='3D'] {
-        background-position: 50% -992px;
-      }
-
-      span[data-group='warehouse'] {
-        background-position: -2px -1089px;
-      }
-
-      span[data-group='form'] {
-        background-position: -2px -1287px;
-      }
-
-      span[data-group='etc'] {
-        background-position: -1px -1189px;
-      }
-
-      .pressed {
-        background-position: 0 15px;
-      }
-
-      .pressed[pressed],
-      .pressed[active] {
-        background-position: -3px -88px;
-        background-color: #beb9b3;
+        padding: 6px;
+        box-sizing: border-box;
       }
 
       component-menu {
@@ -107,15 +51,29 @@ class ComponentToolbar extends LitElement {
     `
   ]
 
-  @property({ type: Array }) componentGroupList: any[] = []
+  @property({ type: Array }) componentGroupList: ComponentGroup[] = []
   @property({ type: String }) group?: string | null
   @property({ type: Object }) scene!: Scene
   @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
 
   @query('component-menu') private menu!: HTMLElement
-  @queryAll('[data-group]') groups!: NodeListOf<HTMLElement>
+  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
+
+  private icons: { [name: string]: string } = {}
 
   updated(changes: PropertyValues<this>) {
+    if (changes.has('componentGroupList')) {
+      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')
+
+      this.icons = (this.componentGroupList || [])
+        .filter(group => group.templates?.length > 0)
+        .reduce((sum, group: ComponentGroup) => {
+          sum[group.name] =
+            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
+          return sum
+        }, {} as { [name: string]: string })
+    }
+
     if (changes.has('group')) {
       this.groups.forEach(group => {
         group.getAttribute('data-group') === this.group
@@ -128,10 +86,20 @@ class ComponentToolbar extends LitElement {
   }
 
   render() {
+    const componentList = this.componentGroupList || []
+
     return html`
-      ${this.componentGroupList
+      ${componentList
         .filter(group => group.templates?.length > 0)
-        .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}
+        .map(
+          group => html`
+            <img
+              data-group=${group.name}
+              @click=${(e: MouseEvent) => this._onClickGroup(e)}
+              .src=${this.icons[group.name]}
+            />
+          `
+        )}
 
       <component-menu
         tabindex="-1"
@@ -140,7 +108,7 @@ class ComponentToolbar extends LitElement {
         }}
         .scene=${this.scene}
         .group=${this.group}
-        .groups=${this.componentGroupList}
+        .groups=${componentList}
         hidden
       >
       </component-menu>

package/src/ox-board-list.ts

@@ -0,0 +1,459 @@
+import '@operato/popup'
+import '@operato/data-grist'
+
+import { Board, BoardGroup } from './types'
+import { ColumnConfig, GristData, GristRecord, SortersConfig } from '@operato/data-grist/dist/src/types'
+import { LitElement, css, html } from 'lit'
+import { createBoard, fetchBoardList } from './graphql/board'
+import { customElement, property, query, state } from 'lit/decorators'
+
+import { DataGrist } from '@operato/data-grist'
+import { OxPopup } from '@operato/popup'
+import { fetchFavoriteBoardList } from './graphql/favorite-board'
+import { fetchGroupList } from './graphql/group'
+
+@customElement('ox-board-list')
+class BoardList extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+
+      width: 100%;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    ox-grist {
+      flex: 1;
+      overflow-y: auto;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    #headroom {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #filters {
+      flex: 1;
+      --mdc-icon-size: 20px;
+    }
+    #mode {
+      width: 100px;
+    }
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      font-size: 1em;
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add button {
+      background-color: var(--status-success-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      position: relative;
+    }
+    #filters [type='text'] {
+      background-color: transparent;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
+      font-size: var(--fontsize-large);
+    }
+    #filters [type='text']:focus {
+      outline: none;
+    }
+    #filters mwc-icon {
+      position: absolute;
+      top: 3px;
+      color: var(--secondary-color);
+    }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    oops-spinner {
+      display: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    oops-spinner[show] {
+      display: block;
+    }
+
+    @media only screen and (max-width: 460px) {
+      #modes {
+        display: none;
+      }
+    }
+  `
+
+  @property({ type: Boolean }) creatable: boolean = false
+  @property({ type: Object }) config: any
+  @property({ type: Object }) data: any
+  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'
+  @property({ type: String }) groupId?: string
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+
+  @state() _showSpinner: boolean = false
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    const mode = this.mode || 'CARD'
+
+    return html`
+      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <mwc-icon>search</mwc-icon>
+            <input type="text" />
+
+            <select
+              @change=${(e: Event) => {
+                this.groupId = (e.currentTarget as HTMLInputElement).value
+                this.requestUpdate()
+              }}
+            >
+              <option value="">*</option>
+              ${this.groups.map(
+                group =>
+                  html` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `
+              )}
+            </select>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          ${this.creatable
+            ? html`
+                <div id="add">
+                  <button><mwc-icon @click=${() => this.onCreateBoard()}>add</mwc-icon></button>
+                </div>
+              `
+            : undefined}
+        </div>
+      </ox-grist>
+
+      <oops-spinner ?show=${this._showSpinner}></oops-spinner>
+    `
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {
+    this._showSpinner = true
+
+    const { items: records, total } = await this.getBoards({ page, limit, sorters })
+
+    this._showSpinner = false
+
+    return {
+      total,
+      records
+    }
+  }
+
+  get gristConfig() {
+    return {
+      list: {
+        thumbnail: function (record: GristRecord, rowIndex: number) {
+          return html` <img src=${record.thumbnail} style="width: 100%; height: 100%;" /> `
+        },
+        fields: ['name', 'description'],
+        details: ['updatedAt']
+      },
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'dirty'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'sequence'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'star_border',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {}
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'drive_file_rename_outline',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {}
+          }
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: 'name',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: 'description',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          handlers: {
+            dblclick: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {
+              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+            }
+          }
+        },
+        {
+          type: 'boolean',
+          name: 'active',
+          header: 'active',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: 'updated at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: 'created at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {},
+        classifier: function (
+          record: GristRecord,
+          rowIndex: number
+        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}
+      },
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async refresh() {
+    this.groups = (await fetchGroupList()).groups.items
+
+    if (this.groups) {
+      await this.refreshBoards()
+    }
+  }
+
+  async getBoards({
+    page = 1,
+    limit = 30,
+    sorters = []
+  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {
+    if (this.groupId && this.groupId == 'favor')
+      return await this.getFavoriteBoards({
+        page,
+        limit
+      })
+
+    var listParam = {
+      filters: this.groupId
+        ? [
+            {
+              name: 'group_id',
+              operator: 'eq',
+              value: this.groupId
+            }
+          ]
+        : [],
+      sortings: sorters,
+      pagination: {
+        page,
+        limit
+      }
+    }
+
+    return (await fetchBoardList(listParam)).boards
+  }
+
+  async getFavoriteBoards({ page = 1, limit = 30 } = {}) {
+    var listParam = {
+      pagination: {
+        page,
+        limit
+      }
+    }
+
+    return (await fetchFavoriteBoardList(listParam)).favoriteBoards
+  }
+
+  async refreshBoards() {
+    if (!this.groups) {
+      await this.refresh()
+      return
+    }
+
+    this.grist.fetch()
+  }
+
+  async onCreateBoard() {
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var template = html`
+      <process-creation-popup
+        .defaultGroup=${this.groupId}
+        .groups=${this.groups}
+        @create-process=${async (e: CustomEvent) => {
+          try {
+            var { name, description, groupId } = e.detail
+            var board: Board = {
+              name,
+              description,
+              groupId,
+              model: {
+                width: 1200,
+                height: 800
+              }
+            }
+
+            const { createBoard: created } = await createBoard(board)
+
+            // this.popup && this.popup.close()
+
+            // await sleep(100)
+
+            this.notify('info', 'new process created')
+          } catch (ex: Error | any) {
+            console.error(ex)
+            this.notify('error', ex, ex)
+          }
+        }}
+      ></process-creation-popup>
+    `
+
+    OxPopup.open({
+      template,
+      parent: this.renderRoot as Element
+    })
+
+    requestAnimationFrame(() => {
+      dispatchEvent(new Event('resize'))
+    })
+  }
+
+  notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level,
+          message,
+          ex
+        }
+      })
+    )
+  }
+}

package/src/ox-board-modeller.ts

@@ -6,18 +6,20 @@ import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { saveAs } from 'file-saver'
-import { css, html, LitElement } from 'lit'
+import { ComponentGroup, ComponentTemplate } from './types'
+import { LitElement, css, html } from 'lit'
+import { Model, SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { OxPopup } from '@operato/popup'
-
 import { EditToolbar } from './modeller/edit-toolbar'
+import { OxPopup } from '@operato/popup'
+import { saveAs } from 'file-saver'
 import { togglefullscreen } from './utils/fullscreen'
 
 const isMacOS = navigator.userAgent.indexOf('Mac') != -1
 
+var Registry: ComponentGroup[] = []
+
 @customElement('ox-board-modeller')
 export class BoardModeller extends LitElement {
   static styles = [
@@ -93,6 +95,43 @@ export class BoardModeller extends LitElement {
     `
   ]
 
+  static registerGroup(group: ComponentGroup) {
+    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)
+
+    if (found) {
+      found = {
+        ...found,
+        ...group
+      }
+    } else {
+      Registry.push(group)
+    }
+  }
+
+  static registerTemplate(templates: ComponentTemplate[]): void {
+    templates &&
+      templates.forEach(template => {
+        var group = Registry.find(group => group.name == template.group)
+
+        if (!group) {
+          console.warn('Invalid group', group, template)
+          return
+        }
+
+        if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {
+          group.templates.push(template)
+        }
+      })
+  }
+
+  static get groups(): ComponentGroup[] {
+    return Registry
+  }
+
+  static getGroup(name: string) {
+    return Registry.find(group => group.name === name)
+  }
+
   @property({ type: String }) boardName: string = ''
   @property({ type: Object }) model: any = null
   @property({ type: String }) baseUrl: string = ''