@operato/process 7.1.30 → 7.1.32

package/src/ox-process-list.ts

@@ -1,401 +0,0 @@
-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, FetchOption, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
-import { OxPopup } from '@operato/popup'
-
-import { createProcess, fetchProcessList } from './graphql/process'
-import { fetchFavoriteProcessList } from './graphql/favorite-process'
-import { fetchProcessGroupList } from './graphql/process-group'
-import { Process } from './types'
-
-@customElement('ox-process-list')
-class ProcessList 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(--spacing-large);
-      border-top: 2px solid rgba(0, 0, 0, 0.2);
-      background-color: var(--md-sys-color-surface);
-      box-shadow: var(--box-shadow);
-    }
-
-    #filters {
-      flex: 1;
-      --md-icon-size: 20px;
-    }
-    #mode {
-      width: 100px;
-    }
-    #add {
-      width: 50px;
-      text-align: right;
-    }
-
-    #modes > * {
-      padding: var(--spacing-small);
-      font-size: 1em;
-      opacity: 0.5;
-      color: var(--md-sys-color-on-primary-container);
-      cursor: pointer;
-    }
-
-    #modes > md-icon[active] {
-      border-radius: 9px;
-      background-color: rgba(var(--primary-color-rgb), 0.05);
-      opacity: 1;
-      color: var(--md-sys-color-on-secondary-container);
-      cursor: default;
-    }
-    #modes > md-icon:hover {
-      opacity: 1;
-      color: var(--md-sys-color-on-secondary-container);
-    }
-
-    #add button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-    }
-
-    #add button:hover {
-      background-color: var(--md-sys-color-on-primary-container);
-      color: var(--md-sys-color-primary-container);
-      box-shadow: var(--box-shadow);
-    }
-
-    #add button md-icon {
-      font-size: 1.5em;
-    }
-
-    #filters {
-      position: relative;
-    }
-    #filters [type='text'] {
-      background-color: transparent;
-      border: 0;
-      border-bottom: var(--border-dim-color);
-      padding: var(--spacing-small) var(--spacing-small) 7px 25px;
-      font-size: var(--fontsize-large);
-    }
-    #filters [type='text']:focus {
-      outline: none;
-    }
-    #filters md-icon {
-      position: absolute;
-      top: 3px;
-      color: var(--md-sys-color-on-secondary-container);
-    }
-    #filters * {
-      margin-right: var(--spacing-medium);
-    }
-
-    @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[] = []
-
-  @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">
-            <md-icon>search</md-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">
-            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-          </div>
-
-          ${this.creatable
-            ? html`
-                <div id="add">
-                  <button><md-icon @click=${() => this.onCreateProcess()}>add</md-icon></button>
-                </div>
-              `
-            : undefined}
-        </div>
-      </ox-grist>
-    `
-  }
-
-  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {
-    const { items: records, total } = await this.getProcesses({ page, limit, sorters })
-
-    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: '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
-        },
-        {
-          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
-        }
-      },
-      sorters: [
-        {
-          name: 'name',
-          desc: false
-        }
-      ],
-      pagination: {
-        pages: [20, 30, 50, 100, 200]
-      }
-    }
-  }
-
-  async refresh() {
-    this.groups = (await fetchProcessGroupList()).processGroups.items
-
-    if (this.groups) {
-      await this.refreshProcesses()
-    }
-  }
-
-  async getProcesses({
-    page = 1,
-    limit = 30,
-    sorters = []
-  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {
-    if (this.groupId && this.groupId == 'favor')
-      return await this.getFavoriteProcesses({
-        page,
-        limit
-      })
-
-    var listParam = {
-      filters: this.groupId
-        ? [
-            {
-              name: 'groupId',
-              operator: 'eq',
-              value: this.groupId
-            }
-          ]
-        : [],
-      sortings: sorters,
-      pagination: {
-        page,
-        limit
-      }
-    }
-
-    return (await fetchProcessList(listParam)).processes
-  }
-
-  async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {
-    var listParam = {
-      pagination: {
-        page,
-        limit
-      }
-    }
-
-    return (await fetchFavoriteProcessList(listParam)).favoriteProcesses
-  }
-
-  async refreshProcesses() {
-    if (!this.groups) {
-      await this.refresh()
-      return
-    }
-
-    this.grist.fetch()
-  }
-
-  async onCreateProcess() {
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 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, model, thumbnail } = e.detail
-
-            var process: Process = {
-              name,
-              description,
-              groupId,
-              model: model || {
-                width: 1600,
-                height: 1200
-              },
-              thumbnail
-            }
-
-            await createProcess(process)
-
-            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
-    })
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-  }
-
-  notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {
-    document.dispatchEvent(
-      new CustomEvent('notify', {
-        detail: {
-          level,
-          message,
-          ex
-        }
-      })
-    )
-  }
-}