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

package/client/pages/setting.ts

@@ -1,47 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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 : {}
-  }
-}

package/client/setting-lets/theme-mode-setting-let.ts

@@ -1,80 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-import '@material/web/radio/radio.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { clientSettingStore } from '@operato/shell'
-import { MdRadio } from '@material/web/radio/radio.js'
-import { setThemeMode } from '../set-theme-mode.js'
-
-@customElement('theme-mode-setting-let')
-export class ThemeModeSettingLet extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      label {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-
-        font: var(--label-font);
-        color: var(--md-sys-color-on-surface);
-        text-transform: var(--label-text-transform);
-      }
-
-      div[slot='content'] {
-        display: flex;
-        gap: 10px;
-      }
-    `
-  ]
-
-  @property({ type: String, attribute: 'theme-mode' }) themeMode: 'dark' | 'light' | 'auto' = 'light'
-
-  render() {
-    const themeMode = this.themeMode
-
-    return html`
-      <setting-let>
-        <ox-i18n slot="title" msgid="title.theme setting"></ox-i18n>
-
-        <div slot="content" @change=${(e: Event) => this.onChangeThemeMode(e)}>
-          <md-radio id="dark-mode" name="theme-mode" value="dark" ?checked=${themeMode == 'dark'}></md-radio>
-          <label for="dark-mode">dark mode</label>
-
-          <md-radio id="light-mode" name="theme-mode" value="light" ?checked=${themeMode == 'light'}></md-radio>
-          <label for="light-mode">light mode</label>
-
-          <md-radio id="auto-mode" name="theme-mode" value="auto" ?checked=${themeMode == 'auto'}></md-radio>
-          <label for="auto-mode">auto mode</label>
-        </div>
-      </setting-let>
-    `
-  }
-
-  async firstUpdated() {
-    this.themeMode = ((await clientSettingStore.get('theme'))?.value || {}).mode || 'light'
-  }
-
-  async onChangeThemeMode(e: Event) {
-    const target = e.target as MdRadio
-    const value = target.value
-    const mode = (this.querySelector('md-radio[checked]') as MdRadio)?.value || value
-
-    if (mode) {
-      try {
-        await clientSettingStore.put({
-          key: 'theme',
-          value: {
-            mode
-          }
-        })
-
-        setThemeMode(mode)
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  }
-}

package/client/themes/setting-theme.css

@@ -1,32 +0,0 @@
-body {
-  --setting-background: var(--md-sys-color-background);
-
-  --setting-let-background: var(--md-sys-color-on-primary);
-  --setting-let-margin: var(--margin-wide);
-  --setting-let-border-radius: var(--border-radius);
-  --setting-let-border: var(--border-dim-color);
-
-  --setting-title-font: var(--subtitle-font);
-  --setting-title-color: var(--subtitle-text-color);
-
-  --setting-content-padding: var(--padding-wide);
-  --setting-content-font: normal 0.9em var(--theme-font);
-  --setting-content-color: var(--md-sys-color-secondary);
-
-  --setting-info-content-padding: 10px 15px;
-  --setting-info-background-color: #f0f0f0;
-  --setting-info-font: normal 14px/14px var(--theme-font);
-  --setting-info-color: #666;
-  --setting-info-appname-color: var(--md-sys-color-primary);
-
-  --setting-icon-height: 170px;
-  --setting-icon-margin: 40px 0 5px 0;
-}
-@media screen and (max-width: 460px) {
-  body {
-    --setting-let-margin: var(--margin-default);
-    --setting-content-padding: var(--padding-default);
-    --setting-icon-height: 140px;
-    --setting-icon-margin: var(--margin-wide) 0;
-  }
-}

package/dist-client/components/partner-selector.d.ts

@@ -1,3 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@things-factory/form-ui';
-import '@operato/data-grist';

package/dist-client/components/partner-selector.js

@@ -1,142 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-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';
-let PartnerSelector = class PartnerSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = isMobileDevice() ? 'LIST' : 'GRID';
-    }
-    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 = [] }) {
-        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 } } }));
-    }
-};
-PartnerSelector.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;
-      }
-    `
-];
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], PartnerSelector.prototype, "config", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], PartnerSelector.prototype, "data", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], PartnerSelector.prototype, "mode", void 0);
-__decorate([
-    query('ox-grist'),
-    __metadata("design:type", Object)
-], PartnerSelector.prototype, "dataGrist", void 0);
-PartnerSelector = __decorate([
-    customElement('partner-selector')
-], PartnerSelector);
-//# sourceMappingURL=partner-selector.js.map

package/dist-client/components/partner-selector.js.map

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