@things-factory/code-ui 8.0.0-beta.9 → 8.0.0

package/client/bootstrap.ts

@@ -0,0 +1,6 @@
+import { registerEditor as registerGristEditor } from '@operato/data-grist'
+import { OxGristEditorI18nLabel } from '@operato/grist-editor/ox-grist-editor-i18n-label.js'
+
+export default function bootstrap() {
+  registerGristEditor('i18n-label', OxGristEditorI18nLabel)
+}

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './pages/code-management'
+export * from './pages/code-management-detail'

package/client/pages/code-management-detail.ts

@@ -0,0 +1,261 @@
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/data-grist/ox-record-creator.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ButtonContainerStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice, adjustFilters } from '@operato/utils'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { DataGrist, FetchOption, QueryFilter } from '@operato/data-grist'
+
+import { getLanguages } from '@things-factory/auth-base/dist-client'
+
+@customElement('code-management-detail')
+export class CodeManagementDetail extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    ButtonContainerStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) codeId?: string
+  @property({ type: Object }) config: any
+
+  @state() mode: 'LIST' | 'GRID' = isMobileDevice() ? 'LIST' : 'GRID'
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    let mode = this.mode
+
+    return html`
+      <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.delete} danger><md-icon>delete</md-icon>${String(i18next.t('button.delete'))}</button>
+        <button @click=${this.save} done><md-icon>save</md-icon>${String(i18next.t('button.save'))}</button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.config = {
+      rows: { selectable: { multiple: true } },
+      pagination: { pages: [100, 200, 500] },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'integer',
+          name: 'rank',
+          record: { align: 'left', editable: true, format: '#,###' },
+          header: i18next.t('field.rank'),
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'string',
+          name: 'name',
+          record: { align: 'left', editable: true },
+          header: i18next.t('field.code'),
+          sortable: true,
+          filter: 'search',
+          width: 320
+        },
+        {
+          type: 'i18n-label',
+          name: 'labels',
+          record: {
+            align: 'left',
+            editable: true,
+            renderer: (value, column, record, rowIndex, field) =>
+              html`<span>${value && typeof value == 'object' ? value[i18next.language] : record['description']}</span>`,
+            options: {
+              objectified: true,
+              languages: await getLanguages(),
+              displayColumn: 'description'
+            }
+          },
+          header: i18next.t('field.i18n-label'),
+          sortable: true,
+          filter: 'search',
+          width: 370
+        },
+        {
+          type: 'object',
+          name: 'updater',
+          record: { align: 'left', editable: false },
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 90
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: { editable: false },
+          sortable: true,
+          width: 180
+        }
+      ]
+    }
+
+    await this.updateComplete
+    this.grist.fetch()
+  }
+
+  async fetchHandler({ filters, page, limit, sorters = [{ name: 'rank' }] }: FetchOption) {
+    if (this.codeId) {
+      filters = adjustFilters(filters || [], [
+        {
+          name: 'commonCodeId',
+          operator: 'eq',
+          value: this.codeId
+        }
+      ]) as QueryFilter[]
+    }
+
+    const response = await client.query({
+      query: gql`
+        query CommonCodeDetails($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          commonCodeDetails(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              rank
+              labels
+              updatedAt
+              updater {
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sorters
+      }
+    })
+
+    if (!response.errors) {
+      return {
+        total: response.data.commonCodeDetails.total || 0,
+        records: response.data.commonCodeDetails.items || []
+      }
+    }
+  }
+
+  async save() {
+    const patches = this.getPatches()
+    if (!patches?.length) {
+      return this.showToast(i18next.t('text.nothing_changed'))
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation updateMultipleCommonCodeDetail($patches: [CommonCodeDetailPatch!]!) {
+          updateMultipleCommonCodeDetail(patches: $patches) {
+            name
+          }
+        }
+      `,
+      variables: { patches }
+    })
+
+    if (!response.errors) this.grist.fetch()
+  }
+
+  async delete() {
+    const ids = this.grist.selected.map(record => record.id)
+    if (!ids?.length) {
+      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
+    }
+
+    if (
+      await OxPrompt.open({
+        type: 'warning',
+        title: i18next.t('button.delete'),
+        text: i18next.t('text.are_you_sure'),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation DeleteCommonCodeDetails($ids: [String!]!) {
+            deleteCommonCodeDetails(ids: $ids)
+          }
+        `,
+        variables: {
+          ids
+        }
+      })
+
+      if (!response.errors) {
+        OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.data_deleted_successfully'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        this.grist.fetch()
+      }
+    }
+  }
+
+  getPatches() {
+    let patches = this.grist.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(code => {
+        let patchField: any = code.id ? { id: code.id } : {}
+        const dirtyFields = code.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.commonCode = { id: this.codeId }
+        patchField.cuFlag = code.__dirty__
+
+        return patchField
+      })
+    }
+
+    return patches
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}

package/client/pages/code-management.ts

@@ -0,0 +1,288 @@
+import './code-management-detail'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/data-grist/ox-record-creator.js'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { openPopup } from '@operato/layout'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { PageView } from '@operato/shell'
+import { CommonButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+@customElement('code-management')
+export class CodeManagement extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+    `
+  ]
+
+  @state() config?: any
+  @state() data?: any
+  @state() mode: 'LIST' | 'GRID' = isMobileDevice() ? 'LIST' : 'GRID'
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    let mode = this.mode
+
+    return html`
+      <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.code-management'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this.save.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this.delete.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ],
+      help: 'code/code-management',
+      toolbar: false
+    }
+  }
+
+  pageUpdated(_changed, _lifecycle) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+
+  pageInitialized() {
+    this.config = {
+      rows: { selectable: { multiple: true } },
+      pagination: { pages: [50, 100, 200] },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'reorder',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id && record.name) this.openCodeDetail(record.id, record.name)
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.common-code'),
+          record: { editable: true, align: 'left' },
+          sortable: true,
+          filter: 'search',
+          width: 375
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: { editable: true, align: 'left' },
+          sortable: true,
+          filter: 'search',
+          width: 500
+        },
+        {
+          type: 'object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: { editable: false },
+          sortable: true,
+          width: 90
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: { editable: false },
+          sortable: true,
+          width: 180
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sorters = [{ name: 'name' }, { name: 'updatedAt' }] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query CommonCodes($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          commonCodes(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              updatedAt
+              updater {
+                id
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sorters
+      }
+    })
+
+    return {
+      total: response.data.commonCodes.total || 0,
+      records: response.data.commonCodes.items || []
+    }
+  }
+
+  async save() {
+    const patches = this.getPatches()
+    if (!patches?.length) {
+      return this.showToast(i18next.t('text.nothing_changed'))
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation UpdateMultipleCommonCode($patches: [CommonCodePatch!]!) {
+          updateMultipleCommonCode(patches: $patches) {
+            name
+          }
+        }
+      `,
+      variables: { patches }
+    })
+
+    if (!response.errors) {
+      this.showToast(i18next.t('text.data_updated_successfully'))
+      this.grist.fetch()
+    }
+  }
+
+  async delete() {
+    const ids = this.grist.selected.map(record => record.id)
+    if (!ids?.length) {
+      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
+    }
+
+    if (
+      await OxPrompt.open({
+        type: 'warning',
+        title: i18next.t('button.delete'),
+        text: i18next.t('text.are_you_sure'),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation DeleteCommonCodes($ids: [String!]!) {
+            deleteCommonCodes(ids: $ids)
+          }
+        `,
+        variables: {
+          ids
+        }
+      })
+
+      if (!response.errors) {
+        OxPrompt.open({
+          type: 'success',
+          title: i18next.t('text.completed'),
+          text: i18next.t('text.data_deleted_successfully'),
+          confirmButton: { text: i18next.t('button.confirm') }
+        })
+
+        this.grist.fetch()
+      }
+    }
+  }
+
+  getPatches() {
+    let patches = this.grist.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(code => {
+        let patchField: any = code.id ? { id: code.id } : {}
+        const dirtyFields = code.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.cuFlag = code.__dirty__
+
+        return patchField
+      })
+    }
+
+    return patches
+  }
+
+  openCodeDetail(codeId, codeName) {
+    openPopup(html` <code-management-detail .codeId="${codeId}"></code-management-detail> `, {
+      backdrop: true,
+      size: 'large',
+      title: `${i18next.t('title.code-management-detail')} - ${codeName}`
+    })
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page) {
+  switch (page) {
+    case 'codes':
+      import('./pages/code-management')
+      return page
+  }
+}