@operato/board 0.2.51 → 0.2.52

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,7 +6,7 @@ import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { ComponentTemplate, Group } from './types'
+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'
@@ -18,7 +18,7 @@ import { togglefullscreen } from './utils/fullscreen'
 
 const isMacOS = navigator.userAgent.indexOf('Mac') != -1
 
-var Registry: Group[] = []
+var Registry: ComponentGroup[] = []
 
 @customElement('ox-board-modeller')
 export class BoardModeller extends LitElement {
@@ -95,7 +95,7 @@ export class BoardModeller extends LitElement {
     `
   ]
 
-  static registerGroup(group: Group) {
+  static registerGroup(group: ComponentGroup) {
     var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)
 
     if (found) {
@@ -124,7 +124,7 @@ export class BoardModeller extends LitElement {
       })
   }
 
-  static get groups(): Group[] {
+  static get groups(): ComponentGroup[] {
     return Registry
   }
 

package/src/types.ts

@@ -46,9 +46,29 @@ export type ComponentTemplate = {
   model: Model
 }
 
-export type Group = {
+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/dist/src/component/init-groups.d.ts

@@ -1 +0,0 @@
-export declare function registerDefaultGroups(): void;

package/dist/src/component/init-groups.js

@@ -1,28 +0,0 @@
-import { BoardModeller } from '../ox-board-modeller';
-import { chartAndGauge } from './chart-and-gauge';
-import { container } from './container';
-import { dataSource } from './data-source';
-import { etc } from './etc';
-import { form } from './form';
-import { iot } from './iot';
-import { line } from './line';
-import { shape } from './shape';
-import { table } from './table';
-import { textAndMedia } from './text-and-media';
-import { threed } from './3d';
-import { warehouse } from './warehouse';
-export function registerDefaultGroups() {
-    BoardModeller.registerGroup(line);
-    BoardModeller.registerGroup(shape);
-    BoardModeller.registerGroup(textAndMedia);
-    BoardModeller.registerGroup(chartAndGauge);
-    BoardModeller.registerGroup(table);
-    BoardModeller.registerGroup(container);
-    BoardModeller.registerGroup(dataSource);
-    BoardModeller.registerGroup(iot);
-    BoardModeller.registerGroup(threed);
-    BoardModeller.registerGroup(warehouse);
-    BoardModeller.registerGroup(form);
-    BoardModeller.registerGroup(etc);
-}
-//# sourceMappingURL=init-groups.js.map

package/dist/src/component/init-groups.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"init-groups.js","sourceRoot":"","sources":["../../../src/component/init-groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,qBAAqB;IACnC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IACjC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAClC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;IACzC,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAClC,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACtC,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IACvC,aAAa,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IAChC,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IACnC,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACtC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IACjC,aAAa,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAClC,CAAC","sourcesContent":["import { BoardModeller } from '../ox-board-modeller'\nimport { chartAndGauge } from './chart-and-gauge'\nimport { container } from './container'\nimport { dataSource } from './data-source'\nimport { etc } from './etc'\nimport { form } from './form'\nimport { iot } from './iot'\nimport { line } from './line'\nimport { shape } from './shape'\nimport { table } from './table'\nimport { textAndMedia } from './text-and-media'\nimport { threed } from './3d'\nimport { warehouse } from './warehouse'\n\nexport function registerDefaultGroups() {\n  BoardModeller.registerGroup(line)\n  BoardModeller.registerGroup(shape)\n  BoardModeller.registerGroup(textAndMedia)\n  BoardModeller.registerGroup(chartAndGauge)\n  BoardModeller.registerGroup(table)\n  BoardModeller.registerGroup(container)\n  BoardModeller.registerGroup(dataSource)\n  BoardModeller.registerGroup(iot)\n  BoardModeller.registerGroup(threed)\n  BoardModeller.registerGroup(warehouse)\n  BoardModeller.registerGroup(form)\n  BoardModeller.registerGroup(etc)\n}\n"]}