@things-factory/setting-ui 8.0.37 → 9.0.0-9.0.0-beta.59.0

package/client/pages/partner-setting-list.ts

@@ -1,379 +0,0 @@
-import '@things-factory/form-ui'
-import '../components/partner-selector'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin'
-
-import { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
-import { client, gqlContext } from '@operato/graphql'
-import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { FetchOption, getEditor, getRenderer } from '@operato/data-grist'
-import { isMobileDevice } from '@operato/utils'
-
-@customElement('partner-setting-list')
-export class PartnerSettingList extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    CommonGristStyles,
-    ScrollbarStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      fieldset {
-        max-width: var(--input-container-max-width);
-        border: none;
-      }
-
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        background-color: var(--md-sys-color-surface);
-        font: var(--input-font);
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      ox-filters-form {
-        flex: 1;
-      }
-    `
-  ]
-
-  @state() private config: any
-  @state() private partnerDomain: any
-  @state() private mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'LIST' : 'GRID'
-
-  @query('ox-grist') private dataGrist: any
-
-  render() {
-    return html`
-      <form class="multi-column-form">
-        <fieldset>
-          <label>${i18next.t('label.partner')}</label>
-          <input
-            readonly
-            name="partnerDomain"
-            value="${this.partnerDomain?.name ? this.partnerDomain.name : ''}"
-            @click="${this.openPartnerSelector.bind(this)}"
-            placeholder=${String(i18next.t('text.please_choose_partner') || '')}
-          />
-        </fieldset>
-      </form>
-
-      <ox-grist
-        .mode=${this.mode}
-        .config=${this.config}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-        @record-change="${this.onRecordChangeHandler.bind(this)}"
-      >
-        <div slot="headroom" class="header">
-          <div class="filters">
-            <ox-filters-form></ox-filters-form>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-
-  get context() {
-    return {
-      title: i18next.t('title.partner_setting'),
-      help: 'setting/partner-setting',
-      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
-        }
-      ]
-    }
-  }
-
-  pageInitialized() {
-    this.config = {
-      list: {
-        fields: ['name', 'description', 'value']
-      },
-      rows: { selectable: { multiple: true } },
-      columns: [
-        { type: 'gutter', gutterName: 'dirty' },
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'object',
-          name: 'setting',
-          header: i18next.t('label.setting'),
-          width: 280,
-          record: {
-            editable: true,
-            options: {
-              queryName: 'settings',
-              select: [
-                { name: 'id', hidden: true },
-                { name: 'name', header: i18next.t('field.name') },
-                { name: 'description', header: i18next.t('field.description') },
-                { name: 'category', header: i18next.t('field.category') }
-              ],
-              list: { fields: ['name', 'description', 'category'] }
-            }
-          }
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: { editable: false, align: 'left' },
-          sortable: true,
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: { editable: false, align: 'left' },
-          sortable: true,
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'code',
-          name: 'category',
-          header: i18next.t('field.category'),
-          record: { editable: false, codeName: 'SETTING_CATEGORIES' },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'value',
-          header: i18next.t('field.value'),
-          record: {
-            editor: function (value, column, record, rowIndex, field) {
-              return getEditor(record.category)(value, column, record, rowIndex, field)
-            },
-            renderer: function (value, column, record, rowIndex, field) {
-              return getRenderer(record.category)(value, column, record, rowIndex, field)
-            },
-            editable: true
-          },
-          sortable: true,
-          width: 180
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: { editable: false, align: 'left' },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: { editable: false, align: 'left' },
-          sortable: true,
-          width: 150
-        }
-      ]
-    }
-  }
-
-  pageUpdated() {
-    if (this.active) {
-      this.partnerDomain = null
-      this.dataGrist.data = { records: [], total: 0 }
-    }
-  }
-
-  async fetchHandler({ filters, page, limit, sorters = [] }: FetchOption) {
-    if (!this.partnerDomain) return { total: 0, records: [] }
-
-    const pagination = { page, limit }
-    const sortings = sorters
-
-    const response = await client.query({
-      query: gql`
-        query partnerSettings(
-          $filters: [Filter!]!
-          $pagination: Pagination!
-          $sortings: [Sorting!]!
-          $partnerDomain: ObjectRef!
-        ) {
-          partnerSettings(
-            filters: $filters
-            pagination: $pagination
-            sortings: $sortings
-            partnerDomain: $partnerDomain
-          ) {
-            items {
-              id
-              setting {
-                id
-                name
-                description
-                category
-              }
-              name
-              description
-              category
-              value
-              updatedAt
-              updater {
-                id
-                name
-                description
-              }
-            }
-            total
-          }
-        }
-      `,
-      variables: { filters, pagination, sortings, partnerDomain: { id: this.partnerDomain.id } },
-      context: gqlContext()
-    })
-
-    return {
-      records:
-        response.data.partnerSettings.items.map(item => {
-          return { ...item, description: item.setting.description, category: item.setting.category }
-        }) || [],
-      total: response.data.partnerSettings.total || 0
-    }
-  }
-
-  async save() {
-    let patches = this.dataGrist.dirtyRecords
-
-    if (!patches?.length) {
-      return this.showToast(i18next.t('text.nothing_changed'))
-    }
-
-    patches = patches.map(partnerSetting => {
-      let patchField: any = {
-        cuFlag: partnerSetting.__dirty__,
-        setting: { id: partnerSetting.setting.id },
-        partnerDomain: { id: this.partnerDomain.id }
-      }
-      if (partnerSetting.id) patchField.id = partnerSetting.id
-      if (partnerSetting.value) patchField.value = partnerSetting.value
-
-      return patchField
-    })
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation updateMultiplePartnerSetting($patches: [PartnerSettingPatch!]!) {
-          updateMultiplePartnerSetting(patches: $patches) {
-            name
-          }
-        }
-      `,
-      variables: { patches },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      this.showToast(i18next.t('text.data_updated_successfully'))
-      this.dataGrist.fetch()
-    }
-  }
-
-  async delete() {
-    if (!this.dataGrist.selected?.length) {
-      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
-    }
-
-    const ids = this.dataGrist.selected.map(record => record.id)
-
-    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 deletePartnerSettings($ids: [String!]!) {
-            deletePartnerSettings(ids: $ids)
-          }
-        `,
-        variables: { ids },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        await OxPrompt.open({
-          type: 'success',
-          title: i18next.t('text.completed'),
-          text: i18next.t('text.data_deleted_successfully'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-
-        this.dataGrist.fetch()
-      }
-    }
-  }
-
-  openPartnerSelector() {
-    openPopup(
-      html`
-        <partner-selector
-          @select="${e => {
-            this.partnerDomain = e.detail
-            this.dataGrist.fetch()
-          }}"
-        ></partner-selector>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('label.partner')
-      }
-    )
-  }
-
-  onRecordChangeHandler({ detail: { after, column } }) {
-    if (column.name === 'setting') {
-      this.fillUpFields(after)
-    }
-  }
-
-  fillUpFields(record) {
-    record.name = record.setting.name
-    record.description = record.setting.description
-    record.category = record.setting.category
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/pages/setting-list.ts

@@ -1,299 +0,0 @@
-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 { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
-import { client, gqlContext } from '@operato/graphql'
-import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { isMobileDevice } from '@operato/utils'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin'
-
-@customElement('setting-list')
-export class SettingList extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    CommonGristStyles,
-    ScrollbarStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      ox-filters-form {
-        flex: 1;
-      }
-    `
-  ]
-
-  @state() private config: any
-  @state() private data: any
-  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'
-  @state() private refreshHandlers: any[] = []
-
-  @query('ox-grist') private dataGrist: any
-
-  render() {
-    return html`
-      <ox-grist .mode=${this.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>
-    `
-  }
-
-  get context() {
-    return {
-      title: i18next.t('title.setting'),
-      help: 'setting/settings',
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this._saveSettings.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this._deleteSettings.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ],
-      exportable: {
-        name: i18next.t('title.setting'),
-        data: this._exportableData.bind(this)
-      },
-      importable: {
-        handler: () => {}
-      }
-    }
-  }
-
-  pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      this.dataGrist.fetch()
-
-      this.config = {
-        list: {
-          fields: ['name', 'description', 'value']
-        },
-        rows: { selectable: { multiple: true } },
-        columns: [
-          { type: 'gutter', gutterName: 'dirty' },
-          { type: 'gutter', gutterName: 'sequence' },
-          { type: 'gutter', gutterName: 'row-selector', multiple: true },
-          {
-            type: 'string',
-            name: 'name',
-            header: i18next.t('field.name'),
-            record: { editable: true, align: 'left' },
-            sortable: true,
-            filter: 'search',
-            width: 235
-          },
-          {
-            type: 'string',
-            name: 'description',
-            header: i18next.t('field.description'),
-            record: { editable: true, align: 'left' },
-            sortable: true,
-            filter: 'search',
-            width: 275
-          },
-          {
-            type: 'code',
-            name: 'category',
-            header: i18next.t('field.category'),
-            record: { editable: true, codeName: 'SETTING_CATEGORIES' },
-            sortable: true,
-            filter: 'search',
-            width: 100
-          },
-          {
-            type: 'string',
-            name: 'value',
-            header: i18next.t('field.value'),
-            record: {
-              editor: function (value, column, record, rowIndex, field) {
-                return getEditor(record.category)(value, column, record, rowIndex, field)
-              },
-              renderer: function (value, column, record, rowIndex, field) {
-                return getRenderer(record.category)(value, column, record, rowIndex, field)
-              },
-              editable: true
-            },
-            sortable: true,
-            width: 180
-          },
-          {
-            type: 'object',
-            name: 'updater',
-            header: i18next.t('field.updater'),
-            record: { editable: false, align: 'left' },
-            sortable: true,
-            width: 90
-          },
-          {
-            type: 'datetime',
-            name: 'updatedAt',
-            header: i18next.t('field.updated_at'),
-            record: { editable: false, align: 'left' },
-            sortable: true,
-            width: 180
-          }
-        ]
-      }
-    }
-  }
-
-  async fetchHandler({ filters, page, limit, sorters = [] }) {
-    const pagination = { page, limit }
-    const sortings = sorters
-
-    const response = await client.query({
-      query: gql`
-        query settings($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          settings(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              name
-              description
-              category
-              value
-              updatedAt
-              updater {
-                id
-                name
-                description
-              }
-            }
-            total
-          }
-        }
-      `,
-      variables: { filters, pagination, sortings },
-      context: gqlContext()
-    })
-
-    return {
-      total: response.data.settings.total || 0,
-      records: response.data.settings.items || []
-    }
-  }
-
-  async _saveSettings() {
-    let patches = this.dataGrist.dirtyRecords
-
-    if (!patches?.length) {
-      return this.showToast(i18next.t('text.nothing_changed'))
-    }
-
-    patches = patches.map(setting => {
-      let patchField: any = setting.id ? { id: setting.id } : {}
-      const dirtyFields = setting.__dirtyfields__
-      for (let key in dirtyFields) {
-        patchField[key] = dirtyFields[key].after
-      }
-      patchField.cuFlag = setting.__dirty__
-
-      return patchField
-    })
-
-    let checkValidation = true
-    patches.forEach(patch => {
-      if (patch.cuFlag === '+' && (!patch.name || !patch.category)) return (checkValidation = false)
-    })
-
-    if (!checkValidation) return this.showToast(i18next.t('error.value is empty', { value: 'name or category' }))
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation updateMultipleSetting($patches: [SettingPatch!]!) {
-          updateMultipleSetting(patches: $patches) {
-            name
-          }
-        }
-      `,
-      variables: { patches },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      this.showToast(i18next.t('text.data_updated_successfully'))
-      this.dataGrist.fetch()
-      this.applyRefreshHandlers()
-    }
-  }
-
-  async _deleteSettings() {
-    if (!this.dataGrist.selected?.length) {
-      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
-    }
-
-    const names = this.dataGrist.selected.map(record => record.name)
-
-    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 deleteSettings($names: [String!]!) {
-            deleteSettings(names: $names)
-          }
-        `,
-        variables: { names },
-        context: gqlContext()
-      })
-
-      if (!response.errors) {
-        await OxPrompt.open({
-          type: 'success',
-          title: i18next.t('text.completed'),
-          text: i18next.t('text.data_deleted_successfully'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-
-        this.dataGrist.fetch()
-        this.applyRefreshHandlers()
-      }
-    }
-  }
-
-  applyRefreshHandlers() {
-    this.refreshHandlers.forEach(refreshHandler => refreshHandler())
-  }
-
-  _exportableData() {
-    return this.dataGrist.exportRecords()
-  }
-
-  stateChanged(state) {
-    this.refreshHandlers = state.setting?.refreshHandlers || []
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}