@operato/board 0.2.49 → 0.3.1

package/src/ox-board-list.ts

@@ -0,0 +1,459 @@
+import '@operato/popup/ox-popup.js'
+import '@operato/data-grist'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { ColumnConfig, DataGrist, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
+import { OxPopup } from '@operato/popup'
+
+import { createBoard, fetchBoardList } from './graphql/board'
+import { fetchFavoriteBoardList } from './graphql/favorite-board'
+import { fetchGroupList } from './graphql/group'
+import { Board } from './types'
+
+@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

@@ -14,10 +14,13 @@ import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
 import { OxPopup } from '@operato/popup'
 
 import { EditToolbar } from './modeller/edit-toolbar'
+import { ComponentGroup, ComponentTemplate } from './types'
 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 +96,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 = ''

package/src/types.ts

@@ -24,3 +24,51 @@ export interface Pallet {
   name: string
   templates: PalletItem[]
 }
+
+export type ComponentTemplate = {
+  type: string
+  description: string
+  group:
+    | 'line'
+    | 'shape'
+    | 'textAndMedia'
+    | 'chartAndGauge'
+    | 'table'
+    | 'container'
+    | 'dataSource'
+    | 'IoT'
+    | '3D'
+    | 'warehouse'
+    | 'form'
+    | 'etc'
+    | string
+  icon: any
+  model: Model
+}
+
+export type ComponentGroup = {
+  name: string
+  description: string
+  icon: string
+  templates: ComponentTemplate[]
+}
+
+export type Board = {
+  id?: string
+  name?: string
+  description?: string
+  model?: any
+  groupId?: string
+}
+
+export type BoardGroup = {
+  id?: string
+  name?: string
+  description?: string
+}
+
+export type PlayGroup = {
+  id?: string
+  name?: string
+  description?: string
+}

package/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "outDir": "dist",
     "sourceMap": true,

package/web-dev-server.config.mjs

@@ -1,4 +1,5 @@
 // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+import image from '@rollup/plugin-image'
 
 /** Use Hot Module replacement by adding --hmr to the start command */
 const hmr = process.argv.includes('--hmr')
@@ -20,6 +21,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   // },
 
   plugins: [
+    image()
     /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
     // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
   ]