@things-factory/setting-ui 6.2.49 → 6.2.51

package/client/components/{partner-selector.js → partner-selector.ts}

@@ -9,67 +9,42 @@ import { CommonGristStyles } from '@operato/styles'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
 
+@customElement('partner-selector')
 class PartnerSelector extends LitElement {
-  static get styles() {
-    return [
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: white;
-        }
-        .button-container {
-          padding: var(--button-container-padding);
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-          height: var(--button-container-height);
-        }
-      `
-    ]
-  }
+  static styles = [
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: white;
+      }
+      .button-container {
+        padding: var(--button-container-padding);
+        margin: var(--button-container-margin);
+        text-align: var(--button-container-align);
+        background-color: var(--button-container-background);
+        height: var(--button-container-height);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      config: Object,
-      data: Object,
-      mode: String
-    }
-  }
+  @state() private config: any
+  @state() private data: any
+  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'
+
+  @query('ox-grist') private dataGrist: any
 
   render() {
-    let mode = this.mode
     return html`
-      <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist .mode=${this.mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form></ox-filters-form>
           </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
-          </div>
-
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-          </div>
         </div>
       </ox-grist>
 
@@ -79,15 +54,6 @@ class PartnerSelector extends LitElement {
     `
   }
 
-  constructor() {
-    super()
-    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
-  }
-
-  get dataGrist() {
-    return this.renderRoot?.querySelector('ox-grist')
-  }
-
   firstUpdated() {
     this.config = {
       list: { fields: ['name', 'description'] },
@@ -164,5 +130,3 @@ class PartnerSelector extends LitElement {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-customElements.define('partner-selector', PartnerSelector)

package/client/{fetch-setting-value.js → fetch-setting-value.ts}

@@ -1,15 +1,16 @@
-import { client, buildArgs } from '@operato/graphql'
 import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
 
-export async function fetchSettingRule(setting) {
+export async function fetchSettingRule(name: string) {
   const response = await client.query({
     query: gql`
-      query {
-        setting(${buildArgs({ name: setting })}) {
+      query ($name: String!) {
+        setting(name: $name) {
           value
         }
       }
-    `
+    `,
+    variables: { name }
   })
 
   if (!response.errors) {

package/client/{index.js → index.ts}

@@ -1,5 +1,6 @@
 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/domain-switch-let'
+export * from './setting-lets/secure-iplist-setting-let'

package/client/pages/{partner-setting-list.js → partner-setting-list.ts}

@@ -3,6 +3,7 @@ import '../components/partner-selector'
 
 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'
 
 import { openPopup } from '@operato/layout'
@@ -10,56 +11,51 @@ import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
 import { client, gqlContext } from '@operato/graphql'
 import { ScrollbarStyles, CommonButtonStyles, CommonGristStyles } from '@operato/styles'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 
-import { CustomAlert } from '@things-factory/shell'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 
-import { getEditor, getRenderer } from '@operato/data-grist'
-
+@customElement('partner-setting-list')
 export class PartnerSettingList extends connect(store)(localize(i18next)(PageView)) {
-  static get styles() {
-    return [
-      CommonGristStyles,
-      ScrollbarStyles,
-      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);
-          text-transform: var(--label-text-transform);
-        }
-        input {
-          border: var(--border-dark-color);
-          border-radius: var(--border-radius);
-          margin: var(--input-margin);
-          padding: var(--input-padding);
-          background-color: var(--theme-white-color);
-          font: var(--input-font);
-        }
-      `
-    ]
-  }
+  static styles = [
+    CommonGristStyles,
+    ScrollbarStyles,
+    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);
+        text-transform: var(--label-text-transform);
+      }
+      input {
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        background-color: var(--theme-white-color);
+        font: var(--input-font);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      config: Object,
-      partnerDomain: Object,
-      mode: String
-    }
-  }
+  @state() private config: any
+  @state() private partnerDomain: any
+  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'
+  @state() private refreshHandlers: any[] = []
 
-  render() {
-    let mode = this.mode
+  @query('ox-grist') private dataGrist: any
 
+  render() {
     return html`
       <form class="multi-column-form">
         <fieldset>
@@ -75,7 +71,7 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
       </form>
 
       <ox-grist
-        .mode=${mode}
+        .mode=${this.mode}
         .config=${this.config}
         .fetchHandler="${this.fetchHandler.bind(this)}"
         @record-change="${this.onRecordChangeHandler.bind(this)}"
@@ -84,39 +80,11 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
           <div id="filters">
             <ox-filters-form></ox-filters-form>
           </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
-          </div>
-
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-          </div>
         </div>
       </ox-grist>
     `
   }
 
-  constructor() {
-    super()
-    this.refreshHandlers = []
-    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
-  }
-
   get context() {
     return {
       title: i18next.t('title.partner_setting'),
@@ -234,10 +202,6 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  get dataGrist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async fetchHandler({ filters, page, limit, sorters = [] }) {
     if (!this.partnerDomain) return { total: 0, records: [] }
 
@@ -302,7 +266,7 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
     }
 
     patches = patches.map(partnerSetting => {
-      let patchField = {
+      let patchField: any = {
         cuFlag: partnerSetting.__dirty__,
         setting: { id: partnerSetting.setting.id },
         partnerDomain: { id: this.partnerDomain.id }
@@ -337,34 +301,36 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
     }
 
     const ids = this.dataGrist.selected.map(record => record.id)
-    const answer = await CustomAlert({
-      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') }
-    })
 
-    if (!answer.value) return
+    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()
+      })
 
-    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') }
+        })
 
-    if (!response.errors) {
-      CustomAlert({
-        type: 'success',
-        title: i18next.t('text.completed'),
-        text: i18next.t('text.data_deleted_successfully'),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
-      this.dataGrist.fetch()
+        this.dataGrist.fetch()
+      }
     }
   }
 
@@ -401,5 +367,3 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-window.customElements.define('partner-setting-list', PartnerSettingList)

package/client/pages/{setting-list.js → setting-list.ts}

@@ -5,81 +5,50 @@ import '@operato/data-grist/ox-record-creator.js'
 
 import { getEditor, getRenderer } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
-import { CustomAlert } from '@things-factory/shell'
 import { PageView, store } from '@operato/shell'
 import { client, gqlContext } from '@operato/graphql'
 import { CommonButtonStyles, 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 get styles() {
-    return [
-      CommonGristStyles,
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-      `
-    ]
-  }
+  static styles = [
+    CommonGristStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      config: Object,
-      data: Object,
-      mode: String
-    }
-  }
+  @state() private config: any
+  @state() private data: any
+  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'
+  @state() private refreshHandlers: any[] = []
 
-  render() {
-    let mode = this.mode
+  @query('ox-grist') private dataGrist: any
 
+  render() {
     return html`
-      <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist .mode=${this.mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form></ox-filters-form>
           </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
-          </div>
-
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-          </div>
         </div>
       </ox-grist>
     `
   }
 
-  constructor() {
-    super()
-    this.refreshHandlers = []
-    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
-  }
-
   get context() {
     return {
       title: i18next.t('title.setting'),
@@ -183,10 +152,6 @@ export class SettingList extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  get dataGrist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async fetchHandler({ filters, page, limit, sorters = [] }) {
     const pagination = { page, limit }
     const sortings = sorters
@@ -230,7 +195,7 @@ export class SettingList extends connect(store)(localize(i18next)(PageView)) {
     }
 
     patches = patches.map(setting => {
-      let patchField = setting.id ? { id: setting.id } : {}
+      let patchField: any = setting.id ? { id: setting.id } : {}
       const dirtyFields = setting.__dirtyfields__
       for (let key in dirtyFields) {
         patchField[key] = dirtyFields[key].after
@@ -272,35 +237,37 @@ export class SettingList extends connect(store)(localize(i18next)(PageView)) {
     }
 
     const names = this.dataGrist.selected.map(record => record.name)
-    const anwer = await CustomAlert({
-      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') }
-    })
 
-    if (!anwer.value) return
+    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()
+      })
 
-    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') }
+        })
 
-    if (!response.errors) {
-      CustomAlert({
-        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()
+        this.dataGrist.fetch()
+        this.applyRefreshHandlers()
+      }
     }
   }
 
@@ -320,5 +287,3 @@ export class SettingList extends connect(store)(localize(i18next)(PageView)) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-window.customElements.define('setting-list', SettingList)

package/client/pages/{setting.js → setting.ts}

@@ -1,32 +1,28 @@
 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 get styles() {
-    return [
-      css`
-        :host {
-          overflow-y: auto;
-          background-color: var(--setting-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;
-        }
-      `
-    ]
-  }
+  static styles = [
+    css`
+      :host {
+        overflow-y: auto;
+        background-color: var(--setting-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;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      _settings: Array
-    }
-  }
+  @state() private _settings: any[] = []
 
   render() {
     var _sortedSettings = this._settings.sort((a, b) => {
@@ -49,5 +45,3 @@ export class SettingPage extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 }
-
-window.customElements.define('setting-page', SettingPage)

package/client/setting-lets/{domain-switch-let.js → domain-switch-let.ts}

@@ -4,27 +4,24 @@ 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 get styles() {
-    return [
-      css`
-        select {
-          border: var(--input-field-border);
-          padding: var(--input-padding);
-          border-radius: var(--border-radius);
-          font: var(--input-font);
-        }
-      `
-    ]
-  }
-  static get properties() {
-    return {
-      domains: Array,
-      domain: Object
-    }
-  }
+  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`
@@ -50,5 +47,3 @@ export class DomainSwitchLet extends connect(store)(LitElement) {
     this.domain = state.app.domain
   }
 }
-
-customElements.define('domain-switch-let', DomainSwitchLet)