@operato/process 1.5.25 → 1.5.26

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.26](https://github.com/heartyoh/ioperato/compare/v1.5.25...v1.5.26) (2023-11-06)
+
+
+### :bug: Bug Fix
+
+* process and process-template ([6345e3a](https://github.com/heartyoh/ioperato/commit/6345e3ad565550ee2dcb1e5d303f5316ea71db7a))
+
+
+
 ### [1.5.25](https://github.com/heartyoh/ioperato/compare/v1.5.24...v1.5.25) (2023-11-05)
 
 **Note:** Version bump only for package @operato/process

package/dist/src/ox-process-list.js

@@ -236,15 +236,16 @@ let ProcessList = class ProcessList extends LitElement {
         .groups=${this.groups}
         @create-process=${async (e) => {
             try {
-                var { name, description, groupId } = e.detail;
+                var { name, description, groupId, model, thumbnail } = e.detail;
                 var process = {
                     name,
                     description,
                     groupId,
-                    model: {
+                    model: model || {
                         width: 1200,
                         height: 800
-                    }
+                    },
+                    thumbnail
                 };
                 const { createProcess: created } = await createProcess(process);
                 // this.popup && this.popup.close()

package/dist/src/ox-process-list.js.map

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

package/dist/src/ox-process-template-list.d.ts

@@ -0,0 +1,108 @@
+import '@operato/data-grist';
+import '@operato/input/ox-input-file.js';
+import { LitElement } from 'lit';
+import { DataGrist, FetchOption, FilterValue, SortersConfig } from '@operato/data-grist';
+export declare class OxProcessTemplateList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    withoutSearch: boolean;
+    grist: DataGrist;
+    render(): import("lit-html").TemplateResult<1>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+    get gristConfig(): {
+        list: {
+            thumbnail: string;
+            fields: string[];
+            details: string[];
+        };
+        columns: ({
+            type: string;
+            name: string;
+            hidden: boolean;
+            header?: undefined;
+            record?: undefined;
+            width?: undefined;
+            filter?: undefined;
+            sortable?: undefined;
+        } | {
+            type: string;
+            name: string;
+            header: string;
+            record: {
+                editable: boolean;
+                align: string;
+            };
+            width: number;
+            filter: string;
+            sortable: boolean;
+            hidden?: undefined;
+        } | {
+            type: string;
+            name: string;
+            header: string;
+            record: {
+                editable: boolean;
+                align: string;
+            };
+            width: number;
+            filter: string;
+            hidden?: undefined;
+            sortable?: undefined;
+        } | {
+            type: string;
+            name: string;
+            header: string;
+            record: {
+                editable: boolean;
+                align?: undefined;
+            };
+            hidden: boolean;
+            filter: {
+                operator: string;
+                options: string[];
+                label: string;
+            };
+            width?: undefined;
+            sortable?: undefined;
+        } | {
+            type: string;
+            name: string;
+            hidden: boolean;
+            record: {
+                editable: boolean;
+                align?: undefined;
+            };
+            header?: undefined;
+            width?: undefined;
+            filter?: undefined;
+            sortable?: undefined;
+        })[];
+        rows: {
+            appendable: boolean;
+            selectable: {
+                multiple: boolean;
+            };
+            handlers: {
+                click: string;
+            };
+        };
+        sorters: {
+            name: string;
+            desc: boolean;
+        }[];
+        pagination: {
+            pages: number[];
+        };
+    };
+    firstUpdated(): Promise<void>;
+    getSelected(): Promise<any>;
+    refreshProcessTemplates(): Promise<void>;
+    getProcessTemplates({ page, limit, filters, sortings }?: {
+        page?: number;
+        limit?: number;
+        filters?: FilterValue[];
+        sortings?: SortersConfig;
+    }): Promise<any>;
+}

package/dist/src/ox-process-template-list.js

@@ -0,0 +1,242 @@
+import { __decorate } from "tslib";
+import '@operato/data-grist';
+import '@operato/input/ox-input-file.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { buildArgs, client } from '@operato/graphql';
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
+const FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam) => {
+    return gql `
+  {
+    processTemplates(${buildArgs(listParam)}) {
+      items {
+        id
+        name
+        description
+        visibility
+        thumbnail
+      }
+      total
+    }
+  }
+`;
+};
+const FETCH_PROCESS_TEMPLATE_GQL = (id) => {
+    return gql `
+  {
+    processTemplate(id: "${id}") {
+      id
+      name
+      description
+      visibility
+      model
+      thumbnail
+    }
+  }
+`;
+};
+let OxProcessTemplateList = class OxProcessTemplateList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.withoutSearch = false;
+    }
+    render() {
+        return html `
+      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+    `;
+    }
+    async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
+        const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings });
+        return {
+            total,
+            records
+        };
+    }
+    get gristConfig() {
+        return {
+            list: {
+                thumbnail: 'thumbnail',
+                fields: ['name'],
+                details: ['description']
+            },
+            columns: [
+                {
+                    type: 'string',
+                    name: 'id',
+                    hidden: true
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: 'name',
+                    record: {
+                        editable: true,
+                        align: 'left'
+                    },
+                    width: 200,
+                    filter: 'search',
+                    sortable: true
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: 'description',
+                    record: {
+                        editable: true,
+                        align: 'left'
+                    },
+                    width: 200,
+                    filter: 'search'
+                },
+                {
+                    type: 'select-buttons',
+                    name: 'visibility',
+                    header: 'visibility',
+                    record: {
+                        editable: false
+                    },
+                    hidden: true,
+                    filter: {
+                        operator: 'in',
+                        options: ['private', 'domain', 'public'],
+                        label: ''
+                    }
+                },
+                {
+                    type: 'image',
+                    name: 'thumbnail',
+                    hidden: true,
+                    record: {
+                        editable: false
+                    }
+                }
+            ],
+            rows: {
+                appendable: false,
+                selectable: {
+                    multiple: false
+                },
+                handlers: {
+                    click: 'select-row-toggle'
+                }
+            },
+            sorters: [
+                {
+                    name: 'name',
+                    desc: false
+                }
+            ],
+            pagination: {
+                pages: [20, 30, 50, 100, 200]
+            }
+        };
+    }
+    async firstUpdated() {
+        this.refreshProcessTemplates();
+    }
+    async getSelected() {
+        var _a, _b;
+        const selected = this.grist.selected;
+        const templateId = selected && ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.id);
+        if (!templateId) {
+            return;
+        }
+        var processTemplateResponse = await client.query({
+            query: FETCH_PROCESS_TEMPLATE_GQL(templateId)
+        });
+        var template = (_b = processTemplateResponse.data) === null || _b === void 0 ? void 0 : _b.processTemplate;
+        if (template) {
+            template = {
+                ...template,
+                model: JSON.parse(template.model)
+            };
+        }
+        return template;
+    }
+    async refreshProcessTemplates() {
+        this.grist.fetch();
+    }
+    async getProcessTemplates({ page = 1, limit = 30, filters = [], sortings = [] } = {}) {
+        var _a;
+        var pagination = {
+            limit,
+            page
+        };
+        var params = {
+            filters,
+            sortings,
+            pagination
+        };
+        var processTemplateListResponse = await client.query({
+            query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)
+        });
+        return ((_a = processTemplateListResponse === null || processTemplateListResponse === void 0 ? void 0 : processTemplateListResponse.data) === null || _a === void 0 ? void 0 : _a.processTemplates) || {};
+    }
+};
+OxProcessTemplateList.styles = [
+    ScrollbarStyles,
+    TooltipStyles,
+    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 {
+        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 {
+        display: flex;
+        flex-direction: row;
+        place-content: space-between;
+        margin: var(--margin-default) 0;
+      }
+
+      select {
+        border: 0;
+        outline: none;
+        text-align: right;
+      }
+
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: 'without-search' })
+], OxProcessTemplateList.prototype, "withoutSearch", void 0);
+__decorate([
+    query('ox-grist')
+], OxProcessTemplateList.prototype, "grist", void 0);
+OxProcessTemplateList = __decorate([
+    customElement('ox-process-template-list')
+], OxProcessTemplateList);
+export { OxProcessTemplateList };
+//# sourceMappingURL=ox-process-template-list.js.map

package/dist/src/ox-process-template-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-process-template-list.js","sourceRoot":"","sources":["../../src/ox-process-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchOption,\n  FilterValue,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\n\nconst FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processTemplates(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        visibility\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {\n  return gql`\n  {\n    processTemplate(id: \"${id}\") {\n      id\n      name\n      description\n      visibility\n      model\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('ox-process-template-list')\nexport class OxProcessTemplateList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['description']\n      },\n      columns: [\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'visibility',\n          header: 'visibility',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: ['private', 'domain', 'public'],\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false\n          }\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        }\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshProcessTemplates()\n  }\n\n  async getSelected() {\n    const selected = this.grist.selected\n    const templateId = selected && selected[0]?.id\n\n    if (!templateId) {\n      return\n    }\n\n    var processTemplateResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_GQL(templateId)\n    })\n\n    var template = processTemplateResponse.data?.processTemplate\n\n    if (template) {\n      template = {\n        ...template,\n        model: JSON.parse(template.model)\n      }\n    }\n\n    return template\n  }\n\n  async refreshProcessTemplates() {\n    this.grist.fetch()\n  }\n\n  async getProcessTemplates({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var processTemplateListResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)\n    })\n\n    return processTemplateListResponse?.data?.processTemplates || {}\n  }\n}\n"]}

package/dist/src/selector/ox-process-creation-card.js

@@ -54,12 +54,14 @@ let ProcessCreationCard = class ProcessCreationCard extends localize(i18next)(Li
         .defaultGroup=${this.defaultGroup}
         .groups=${this.groups}
         @create-process=${async (e) => {
-            var { name, description, groupId } = e.detail;
+            var { name, description, groupId, model, thumbnail } = e.detail;
             this.dispatchEvent(new CustomEvent('create-process', {
                 detail: {
                     name,
                     description,
-                    groupId
+                    groupId,
+                    model,
+                    thumbnail
                 }
             }));
             this.popup && this.popup.close();

package/dist/src/selector/ox-process-creation-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-process-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-process-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACpE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE9C,CAAA;IACV,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;0BACH,KAAK,EAAE,CAAc,EAAE,EAAE;YACzC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAY;AAjC3B,mBAAmB;IAD/B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,mBAAmB,CAmF/B","sourcesContent":["import '@material/mwc-icon'\nimport './process-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-process-creation-card')\nexport class ProcessCreationCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          align-content: center;\n          justify-content: center;\n        }\n\n        div {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        mwc-icon {\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n      `\n    ]\n  }\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any\n\n  private popup: any\n\n  render() {\n    return html`<div @click=${(e: Event) => this.onClick()}>\n      <mwc-icon>add_circle_outline</mwc-icon>create process\n    </div> `\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <process-creation-popup\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-process=${async (e: CustomEvent) => {\n          var { name, description, groupId } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-process', {\n              detail: {\n                name,\n                description,\n                groupId\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></process-creation-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.create-process')\n    })\n  }\n\n  reset() {}\n}\n"]}
+{"version":3,"file":"ox-process-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-process-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACpE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE9C,CAAA;IACV,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;0BACH,KAAK,EAAE,CAAc,EAAE,EAAE;YACzC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE/D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;oBACP,KAAK;oBACL,SAAS;iBACV;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AArD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAY;AAjC3B,mBAAmB;IAD/B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,mBAAmB,CAqF/B","sourcesContent":["import '@material/mwc-icon'\nimport './process-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-process-creation-card')\nexport class ProcessCreationCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          align-content: center;\n          justify-content: center;\n        }\n\n        div {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        mwc-icon {\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n      `\n    ]\n  }\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any\n\n  private popup: any\n\n  render() {\n    return html`<div @click=${(e: Event) => this.onClick()}>\n      <mwc-icon>add_circle_outline</mwc-icon>create process\n    </div> `\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <process-creation-popup\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-process=${async (e: CustomEvent) => {\n          var { name, description, groupId, model, thumbnail } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-process', {\n              detail: {\n                name,\n                description,\n                groupId,\n                model,\n                thumbnail\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></process-creation-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.create-process')\n    })\n  }\n\n  reset() {}\n}\n"]}

package/dist/src/selector/ox-process-selector.d.ts

@@ -38,6 +38,6 @@ export declare class ProcessSelector extends ProcessSelector_base {
         page?: number | undefined;
         limit?: number | undefined;
     }): Promise<any>;
-    createProcess(name: string, description: string, groupId: string): Promise<any>;
+    createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string): Promise<any>;
 }
 export {};

package/dist/src/selector/ox-process-selector.js

@@ -207,8 +207,8 @@ let ProcessSelector = class ProcessSelector extends InfiniteScrollable(localize(
         }));
     }
     async onCreateProcess(e) {
-        var { name, description, groupId } = e.detail;
-        await this.createProcess(name, description, groupId);
+        var { name, description, groupId, model, thumbnail } = e.detail;
+        await this.createProcess(name, description, groupId, model, thumbnail);
         this.refreshProcesses();
     }
     async refreshGroups() {
@@ -263,8 +263,8 @@ let ProcessSelector = class ProcessSelector extends InfiniteScrollable(localize(
         this._page = page;
         return processListResponse.data.processes.items;
     }
-    async createProcess(name, description, groupId) {
-        var model = JSON.stringify({
+    async createProcess(name, description, groupId, modelTemplate, thumbnail) {
+        var model = JSON.stringify(modelTemplate || {
             width: 1200,
             height: 800,
             fillStyle: 'white'

package/dist/src/selector/ox-process-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processes(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n  {\n    processGroups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n  mutation CreateProcess($process: NewProcess!) {\n    createProcess(process: $process) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n          float: right;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) processes: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 20\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.group = (e.currentTarget as any)?.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"\">${i18next.t('label.all')}</option>\n          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n        </select>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-process-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n              ></ox-process-creation-card>\n            `\n          : html``}\n        ${this.processes.map(\n          process => html`\n            <div\n              class=\"card\"\n              @click=${(e: Event) => this.onClickSelect(process)}\n              ?selected=${this.value === process.id}\n            >\n              <img src=${process.thumbnail} />\n              <div class=\"name\">${process.name}</div>\n              <div class=\"description\">${process.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendProcesses()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshProcesses()\n    }\n  }\n\n  onClickSelect(process: any) {\n    this.dispatchEvent(\n      new CustomEvent('process-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          process\n        }\n      })\n    )\n  }\n\n  async onCreateProcess(e: CustomEvent) {\n    var { name, description, groupId } = e.detail\n\n    await this.createProcess(name, description, groupId)\n    this.refreshProcesses()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_PROCESS_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.processGroups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshProcesses() {\n    var processes = await this.getProcesses()\n    this.processes = [...processes]\n\n    var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendProcesses() {\n    var processes = await this.getProcesses({ page: this._page + 1 })\n    this.processes = [...this.processes, ...processes]\n  }\n\n  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n    var processListResponse = await client.query({\n      query: FETCH_PROCESS_LIST_GQL(params),\n      context: gqlContext()\n    })\n\n    if (!processListResponse || !processListResponse.data) return []\n    this._total = processListResponse.data.processes.total\n    this._page = page\n\n    return processListResponse.data.processes.items\n  }\n\n  async createProcess(name: string, description: string, groupId: string) {\n    var model = JSON.stringify({\n      width: 1200,\n      height: 800,\n      fillStyle: 'white'\n    })\n\n    const response = await client.mutate({\n      mutation: CREATE_PROCESS_GQL,\n      variables: {\n        process: {\n          name,\n          description,\n          groupId,\n          model\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}
+{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processes(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n  {\n    processGroups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n  mutation CreateProcess($process: NewProcess!) {\n    createProcess(process: $process) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n          float: right;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) processes: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 20\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.group = (e.currentTarget as any)?.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"\">${i18next.t('label.all')}</option>\n          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n        </select>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-process-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n              ></ox-process-creation-card>\n            `\n          : html``}\n        ${this.processes.map(\n          process => html`\n            <div\n              class=\"card\"\n              @click=${(e: Event) => this.onClickSelect(process)}\n              ?selected=${this.value === process.id}\n            >\n              <img src=${process.thumbnail} />\n              <div class=\"name\">${process.name}</div>\n              <div class=\"description\">${process.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendProcesses()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshProcesses()\n    }\n  }\n\n  onClickSelect(process: any) {\n    this.dispatchEvent(\n      new CustomEvent('process-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          process\n        }\n      })\n    )\n  }\n\n  async onCreateProcess(e: CustomEvent) {\n    var { name, description, groupId, model, thumbnail } = e.detail\n\n    await this.createProcess(name, description, groupId, model, thumbnail)\n    this.refreshProcesses()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_PROCESS_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.processGroups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshProcesses() {\n    var processes = await this.getProcesses()\n    this.processes = [...processes]\n\n    var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendProcesses() {\n    var processes = await this.getProcesses({ page: this._page + 1 })\n    this.processes = [...this.processes, ...processes]\n  }\n\n  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n    var processListResponse = await client.query({\n      query: FETCH_PROCESS_LIST_GQL(params),\n      context: gqlContext()\n    })\n\n    if (!processListResponse || !processListResponse.data) return []\n    this._total = processListResponse.data.processes.total\n    this._page = page\n\n    return processListResponse.data.processes.items\n  }\n\n  async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n    var model = JSON.stringify(\n      modelTemplate || {\n        width: 1200,\n        height: 800,\n        fillStyle: 'white'\n      }\n    )\n\n    const response = await client.mutate({\n      mutation: CREATE_PROCESS_GQL,\n      variables: {\n        process: {\n          name,\n          description,\n          groupId,\n          model\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}