@operato/process 7.1.31 → 7.1.32

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

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

package/src/selector/process-creation-popup.ts

@@ -1,151 +0,0 @@
-import '@material/web/textfield/filled-text-field.js'
-import '@material/web/button/text-button.js'
-import '@material/web/select/filled-select.js'
-import '@material/web/select/select-option.js'
-import '../ox-process-template-list'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { OxProcessTemplateList } from '../ox-process-template-list'
-
-@customElement('process-creation-popup')
-export class ProcessCreationPopup extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          padding: 10px;
-
-          background-color: var(--md-sys-color-surface);
-        }
-
-        [body] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: row;
-          gap: 10px;
-
-          overflow: hidden;
-        }
-
-        [content] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-
-          overflow: auto;
-        }
-
-        [content] > md-filled-text-field[type='textarea'] {
-          flex: 1;
-          resize: none;
-        }
-
-        [templates] {
-          flex: 2;
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-
-        [templates] > ox-process-template-list {
-          flex: 1;
-          overflow: hidden;
-        }
-
-        md-text-button {
-          --_container-color: var(--md-sys-color-primary);
-          --_label-text-color: var(--md-sys-color-on-primary);
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups?: { id: string; name: string }[]
-
-  @query('ox-process-template-list') processTemplateList!: OxProcessTemplateList
-
-  render() {
-    var groups = this.groups || []
-
-    return html`
-      <div body>
-        <div content>
-          <md-filled-text-field
-            label=${String(i18next.t('label.name'))}
-            name="name"
-            required
-            field-name
-          ></md-filled-text-field>
-          <md-filled-text-field
-            type="textarea"
-            label=${String(i18next.t('label.description'))}
-            name="description"
-            field-description
-          ></md-filled-text-field>
-          <md-filled-select
-            label=${String(i18next.t('label.group'))}
-            field-group
-            helper="If there is no group to choose, you can leave it empty."
-          >
-            ${groups.map(
-              group => html`
-                <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}
-                  >${group.name}</md-select-option
-                >
-              `
-            )}
-          </md-filled-select>
-        </div>
-
-        <div templates>
-          <div>${i18next.t('label.process-template')}</div>
-          <ox-process-template-list></ox-process-template-list>
-        </div>
-      </div>
-
-      <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}
-        >${String(i18next.t('button.create'))}</md-text-button
-      >
-    `
-  }
-
-  firstUpdated() {
-    setTimeout(() => {
-      ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()
-    }, 100)
-  }
-
-  async onClickSubmit() {
-    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
-      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
-    })
-
-    if (!name) {
-      return
-    }
-
-    const template = await this.processTemplateList.getSelected()
-
-    this.dispatchEvent(
-      new CustomEvent('create-process', {
-        detail: {
-          name,
-          description,
-          groupId,
-          model: template?.model,
-          thumbnail: template?.thumbnail
-        }
-      })
-    )
-  }
-}

package/src/selector/process-thumbnail-card.ts

@@ -1,175 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-
-@customElement('process-thumbnail-card')
-export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-
-          padding: 0;
-          margin: 0;
-          height: 100%;
-
-          -webkit-transform-style: preserve-3d;
-          transform-style: preserve-3d;
-          -webkit-transition: all 0.5s ease-in-out;
-          transition: all 0.5s ease-in-out;
-        }
-
-        :host(.flipped) {
-          -webkit-transform: var(--card-list-flip-transform);
-          transform: var(--card-list-flip-transform);
-        }
-
-        [front],
-        [back] {
-          position: absolute;
-
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          padding: 0;
-
-          border: var(--card-list-create-border);
-          border-radius: var(--card-list-create-border-radius);
-
-          background-color: var(--md-sys-color-surface);
-
-          -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-        }
-
-        [front] {
-          text-align: center;
-          font-size: 0.8em;
-          color: var(--card-list-create-color);
-          text-transform: capitalize;
-        }
-
-        [front] md-icon {
-          margin-top: 15%;
-          display: block;
-          font-size: 3.5em;
-          color: var(--card-list-create-icon-color);
-        }
-
-        [back] {
-          -webkit-transform: var(--card-list-flip-transform);
-          transform: var(--card-list-flip-transform);
-        }
-
-        [back] form {
-          padding: var(--card-list-create-form-padding);
-          display: flex;
-          flex-flow: row wrap;
-        }
-
-        [back] form label {
-          flex: 1 1 25%;
-          font: var(--card-list-create-label-font);
-          color: var(--card-list-create-label-color);
-        }
-
-        [back] form input,
-        [back] form select {
-          flex: 1 1 60%;
-          width: 10px;
-          background-color: var(--md-sys-color-surface);
-          border: var(--card-list-create-input-border);
-          border-radius: var(--card-list-create-input-border-radius);
-          padding: var(--card-list-create-input-padding);
-          font: var(--card-list-create-input-font);
-          color: var(--card-list-create-input-color);
-        }
-
-        form * {
-          margin: var(--card-list-create-margin);
-        }
-
-        input[type='submit'] {
-          background-color: var(--button-background-color) !important;
-          margin: var(--button-margin);
-          font: var(--button-font);
-          color: var(--button-color) !important;
-          border-radius: var(--button-radius);
-          border: var(--button-border);
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups?: { id: string; name: string }[]
-
-  render() {
-    var groups = this.groups || []
-
-    return html`
-      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create process</div>
-
-      <div @click=${(e: Event) => this.onClickFlip(e)} back>
-        <form @submit=${(e: Event) => this.onClickSubmit(e)}>
-          <label>${i18next.t('label.name')}</label>
-          <input type="text" name="name" />
-
-          <label>${i18next.t('label.description')}</label>
-          <input type="text" name="description" />
-
-          <label>${i18next.t('label.group')}</label>
-          <select .value=${this.defaultGroup || ''} name="groupId">
-            ${groups.map(
-              group => html`
-                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>
-              `
-            )}
-          </select>
-
-          <input type="submit" value=${String(i18next.t('button.create'))} />
-        </form>
-      </div>
-    `
-  }
-
-  onClickFlip(e: Event) {
-    if ((e.currentTarget as any)?.hasAttribute('front') || (e.target as any)?.hasAttribute('back')) {
-      this.classList.toggle('flipped')
-    }
-
-    e.stopPropagation()
-  }
-
-  onClickSubmit(e: Event) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    var form = e.target as any
-
-    var name = form.elements['name'].value
-    var description = form.elements['description'].value
-    var groupId = form.elements['groupId'].value
-
-    this.dispatchEvent(
-      new CustomEvent('create-process', {
-        detail: {
-          name,
-          description,
-          groupId
-        }
-      })
-    )
-  }
-
-  reset() {
-    var form = this.shadowRoot?.querySelector('form')
-    if (form) {
-      form.reset()
-    }
-
-    this.classList.remove('flipped')
-  }
-}

package/src/types.ts

@@ -1,57 +0,0 @@
-import { Model } from '@hatiolab/things-scene'
-
-export interface PalletItem {
-  type: string
-  description: string
-  icon: HTMLImageElement
-  group: string | string[]
-  model: Model
-}
-
-export interface Pallet {
-  name: string
-  templates: PalletItem[]
-}
-
-export type ComponentTemplate = {
-  type: string
-  description: string
-  group:
-    | 'line'
-    | 'shape'
-    | 'textAndMedia'
-    | 'chartAndGauge'
-    | 'table'
-    | 'container'
-    | 'dataSource'
-    | 'IoT'
-    | '3D'
-    | 'warehouse'
-    | 'form'
-    | 'etc'
-    | string
-  icon: any
-  model: Model
-}
-
-export type ComponentGroup = {
-  name: string
-  description: string
-  icon: string
-  templates: ComponentTemplate[]
-}
-
-export type Process = {
-  id?: string
-  name?: string
-  description?: string
-  model?: any
-  groupId?: string
-  thumbnail?: string
-}
-
-export type ProcessGroup = {
-  id?: string
-  name?: string
-  description?: string
-}