@things-factory/setting-ui 8.0.0-beta.9 → 8.0.2

package/client/bootstrap.ts

@@ -0,0 +1,8 @@
+import { clientSettingStore } from '@operato/shell'
+import { setThemeMode } from './set-theme-mode.js'
+
+export default async function bootstrap() {
+  const themeMode = ((await clientSettingStore.get('theme'))?.value || {}).mode || 'light'
+
+  setThemeMode(themeMode)
+}

package/client/components/partner-selector.ts

@@ -0,0 +1,139 @@
+import '@material/web/icon/icon.js'
+import '@things-factory/form-ui'
+import '@operato/data-grist'
+
+import { i18next } from '@operato/i18n'
+import { client, gqlContext } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
+import { CommonGristStyles, CommonHeaderStyles } from '@operato/styles'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import { FetchOption } from '@operato/data-grist'
+
+@customElement('partner-selector')
+class PartnerSelector extends LitElement {
+  static styles = [
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      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'
+
+  @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>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.select.bind(this)} done>
+          <md-icon>select_check_box</md-icon>${i18next.t('button.select')}
+        </button>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.config = {
+      list: { fields: ['name', 'description'] },
+      rows: { selectable: { multiple: true }, appendable: false, handlers: { click: 'select-row-toggle' } },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: false },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: { editable: false, align: 'left' },
+          sortable: true,
+          filter: 'search',
+          width: 100
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: { editable: false, align: 'left' },
+          sortable: true,
+          filter: 'search',
+          width: 200
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sorters = [] }: FetchOption) {
+    const pagination = { page, limit }
+    const sortings = sorters
+
+    const response = await client.query({
+      query: gql`
+        query searchCustomers($filters: [Filter!]!, $pagination: Pagination!, $sortings: [Sorting!]!) {
+          searchCustomers(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters, pagination, sortings },
+      context: gqlContext()
+    })
+
+    return {
+      records: response.data.searchCustomers.items || [],
+      total: response.data.searchCustomers.total || 0
+    }
+  }
+
+  select() {
+    const selectedItems = this.dataGrist.selected
+    if (!selectedItems.length) {
+      this.showToast(i18next.t('text.nothing_selected'))
+      return
+    }
+
+    history.back()
+
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        detail: selectedItems[0]
+      })
+    )
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}

package/client/fetch-setting-value.ts

@@ -0,0 +1,30 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+
+export async function fetchSettingRule(name: string) {
+  const response = await client.query({
+    query: gql`
+      query ($name: String!) {
+        setting(name: $name) {
+          value
+        }
+      }
+    `,
+    variables: { name }
+  })
+
+  if (!response.errors) {
+    if (response.data.setting?.value) {
+      switch (response.data.setting.value.toLowerCase().trim()) {
+        case 'true':
+          return true
+        case 'false':
+          return false
+        default:
+          return response.data.setting.value.trim()
+      }
+    }
+
+    return false
+  }
+}

package/client/index.ts

@@ -0,0 +1,7 @@
+export * from './fetch-setting-value'
+export { SettingPage } from './pages/setting'
+export { SettingList } from './pages/setting-list'
+
+export * from './setting-lets/domain-switch-let'
+export * from './setting-lets/secure-iplist-setting-let'
+export * from './setting-lets/theme-mode-setting-let'

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

@@ -0,0 +1,379 @@
+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 } } }))
+  }
+}