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

package/client/pages/setting-list.ts

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

package/client/pages/setting.ts

@@ -0,0 +1,47 @@
+import { html, css } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { store, PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('setting-page')
+export class SettingPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    css`
+      :host {
+        overflow-y: auto;
+        background-color: var(--md-sys-color-background);
+      }
+      div {
+        margin: var(--setting-icon-margin);
+        height: var(--setting-icon-height);
+        background: url(/assets/images/icon-setting.png) center top no-repeat;
+        background-size: contain;
+      }
+    `
+  ]
+
+  @state() private _settings: any[] = []
+
+  render() {
+    var _sortedSettings = this._settings.sort((a, b) => {
+      return a.seq - b.seq
+    })
+
+    return html`
+      <div class="page-icon"></div>
+      ${_sortedSettings.map(setting => html` ${setting.template} `)}
+    `
+  }
+
+  stateChanged(state) {
+    this._settings = state.setting.settings
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.setting')
+    }
+  }
+}

package/client/route.ts

@@ -0,0 +1,15 @@
+export default function route(page) {
+  switch (page) {
+    case 'setting':
+      import('./pages/setting')
+      return page
+
+    case 'settings':
+      import('./pages/setting-list')
+      return page
+
+    case 'partner_settings':
+      import('./pages/partner-setting-list')
+      return page
+  }
+}

package/client/set-theme-mode.ts

@@ -0,0 +1,50 @@
+import { clientSettingStore } from '@operato/shell'
+
+var prefersColorSchemeMedia
+
+function getPrefersColorSchemeMedia() {
+  if (!prefersColorSchemeMedia) {
+    prefersColorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+  }
+  return prefersColorSchemeMedia
+}
+
+async function onPreferColorSchemeChanged() {
+  const themeMode = ((await clientSettingStore.get('theme'))?.value || {}).mode || 'light'
+
+  if (themeMode !== 'auto') {
+    getPrefersColorSchemeMedia().removeEventListener('change', onPreferColorSchemeChanged)
+
+    return
+  }
+
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.body.classList.add('dark')
+    document.body.classList.remove('light')
+  } else {
+    document.body.classList.add('light')
+    document.body.classList.remove('dark')
+  }
+}
+
+export function setThemeMode(mode) {
+  getPrefersColorSchemeMedia().removeEventListener('change', onPreferColorSchemeChanged)
+
+  if (mode === 'dark') {
+    document.body.classList.add('dark')
+    document.body.classList.remove('light')
+  } else if (mode === 'light') {
+    document.body.classList.add('light')
+    document.body.classList.remove('dark')
+  } else {
+    if (getPrefersColorSchemeMedia().matches) {
+      document.body.classList.add('dark')
+      document.body.classList.remove('light')
+    } else {
+      document.body.classList.add('light')
+      document.body.classList.remove('dark')
+    }
+
+    getPrefersColorSchemeMedia().addEventListener('change', onPreferColorSchemeChanged)
+  }
+}

package/client/setting-lets/domain-switch-let.ts

@@ -0,0 +1,49 @@
+import '@things-factory/setting-base'
+import '@operato/i18n/ox-i18n.js'
+
+import { store } from '@operato/shell'
+
+import { html, css, LitElement } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+@customElement('domain-switch-let')
+export class DomainSwitchLet extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      select {
+        border: var(--input-field-border);
+        padding: var(--input-padding);
+        border-radius: var(--border-radius);
+        font: var(--input-font);
+      }
+    `
+  ]
+
+  @state() domains: any[] = []
+  @state() domain: any
+
+  render() {
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.switch domain"></ox-i18n>
+
+        <select slot="content" @change=${e => (window.location.pathname = '/auth/checkin/' + e.target.value)}>
+          <option value="">&nbsp</option>
+          ${this.domains.map(
+            option => html`
+              <option value=${option.subdomain} ?selected=${this.domain?.subdomain == option.subdomain}>
+                ${option.name}
+              </option>
+            `
+          )}
+        </select>
+      </setting-let>
+    `
+  }
+
+  stateChanged(state) {
+    this.domains = state.app.domains
+    this.domain = state.app.domain
+  }
+}

package/client/setting-lets/secure-iplist-setting-let.ts

@@ -0,0 +1,208 @@
+import '@material/web/textfield/filled-text-field.js'
+import '@things-factory/setting-base'
+import '@operato/i18n/ox-i18n.js'
+
+import gql from 'graphql-tag'
+import { html, css, LitElement, PropertyValueMap } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { client } from '@operato/graphql'
+
+@customElement('secure-iplist-setting-let')
+export class SecureIPListSettingLet extends LitElement {
+  static styles = [
+    css`
+      div[slot='content'] {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      ul {
+        flex: 1;
+        background-color: var(--md-sys-color-surface);
+        overflow: auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin: 0;
+        padding: var(--spacing-medium);
+        list-style: none;
+        border: 1px dashed var(--md-sys-color-outline);
+        border-width: 1px 0;
+      }
+
+      [hidden] {
+        display: none;
+      }
+
+      @media screen and (max-width: 480px) {
+        ul {
+          grid-template-columns: 1fr;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: {
+    blacklist?: string[]
+    whitelist?: string[]
+    protectedlist?: string[]
+    privileges?: any[]
+  }
+
+  @state() private allPrivileges: {
+    privilege: string
+    category: string
+    description: string
+  }[] = []
+
+  @query('[name="whitelist"]') whitelist
+  @query('[name="blacklist"]') blacklist
+  @query('[name="protectedlist"]') protectedlist
+  @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges
+
+  render() {
+    const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {}
+
+    return html`
+      <setting-let>
+        <ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list"
+          >secure IP list</ox-title-with-help
+        >
+
+        <div slot="content" @change=${() => this.onSave()}>
+          <md-filled-text-field
+            type="text"
+            name="whitelist"
+            .label=${String(i18next.t('label.whitelist'))}
+            icon="health_and_safety"
+            value=${whitelist.join(', ')}
+            supporting-text=${String(i18next.t('text.supporting text for whitelist'))}
+            hidden
+          >
+            <md-icon slot="leading-icon">health_and_safety</md-icon>
+          </md-filled-text-field>
+
+          <md-filled-text-field
+            type="text"
+            name="blacklist"
+            .label=${String(i18next.t('label.blacklist'))}
+            value=${blacklist.join(', ')}
+            supporting-text=${String(i18next.t('text.supporting text for blacklist'))}
+          >
+            <md-icon slot="leading-icon">block</md-icon>
+          </md-filled-text-field>
+
+          <md-filled-text-field
+            type="text"
+            name="protectedlist"
+            .label=${String(i18next.t('label.protectedlist'))}
+            value=${protectedlist.join(', ')}
+            supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}
+          >
+            <md-icon slot="leading-icon">security</md-icon>
+          </md-filled-text-field>
+
+          <div>
+            <h3><ox-i18n msgid="title.protected-privileges"></ox-i18n></h3>
+            <div>
+              <input id="checkAll" type="checkbox" @change=${e => this.oncheckAll(e)} />
+              <label for="checkAll">Check all</label>
+            </div>
+
+            <ul privileges>
+              ${this.allPrivileges.map(privilege => {
+                const id = `${privilege.category}-${privilege.privilege}`
+                return html`
+                  <li>
+                    <input
+                      type="checkbox"
+                      id=${id}
+                      .checked=${!!privileges.find(
+                        p => p.privilege == privilege.privilege && p.category == privilege.category
+                      )}
+                      .data-privilege=${privilege}
+                    />
+                    <label for="${id}">${privilege.description}</label>
+                  </li>
+                `
+              })}
+            </ul>
+          </div>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
+    var { data } = await client.query({
+      query: gql`
+        query {
+          privileges {
+            items {
+              privilege
+              category
+              description
+            }
+            total
+          }
+        }
+      `
+    })
+
+    this.allPrivileges = data?.privileges.items || []
+
+    var { data } = await client.query({
+      query: gql`
+        query {
+          secureIPList
+        }
+      `
+    })
+
+    this.value = data ? data.secureIPList : {}
+  }
+
+  checkAll(checked) {
+    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(
+      checkbox => ((checkbox as HTMLInputElement).checked = checked)
+    )
+  }
+
+  oncheckAll(e) {
+    this.checkAll(e.target.checked)
+  }
+
+  async onSave() {
+    const whitelist = !this.whitelist.value ? [] : this.whitelist.value.split(',').map(ip => ip.trim())
+    const blacklist = !this.blacklist.value ? [] : this.blacklist.value.split(',').map(ip => ip.trim())
+    const protectedlist = !this.protectedlist.value ? [] : this.protectedlist.value.split(',').map(ip => ip.trim())
+    const privileges = Array.from(this.protectedPrivileges)
+      .map((e: any) => e['data-privilege'])
+      .map((priv: any) => {
+        const { description, ...others } = priv
+        return others
+      })
+
+    const iplist = {
+      whitelist,
+      blacklist,
+      protectedlist,
+      privileges
+    }
+
+    const { data } = await client.query({
+      query: gql`
+        mutation ($iplist: Object!) {
+          updateSecureIPList(iplist: $iplist)
+        }
+      `,
+      variables: {
+        iplist
+      }
+    })
+
+    this.value = data ? data.updateSecureIPList : {}
+  }
+}