npm - @things-factory/setting-ui - Versions diffs - 10.1.256 → 10.1.257 - Mend

@things-factory/setting-ui 10.1.256 → 10.1.257

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist-client/setting-lets/secure-iplist-setting-let.d.ts CHANGED Viewed

@@ -1,22 +1,24 @@
 import '@material/web/textfield/filled-text-field.js';
 import '@things-factory/setting-base';
 import '@operato/i18n/ox-i18n.js';
-import { LitElement, PropertyValueMap } from 'lit';
+import { LitElement } from 'lit';
 export declare class SecureIPListSettingLet extends LitElement {
     static styles: import("lit").CSSResult[];
-    value?: {
+    private privileges;
+    private iplist;
+    private save;
+    get value(): {
         blacklist?: string[];
         whitelist?: string[];
         protectedlist?: string[];
         privileges?: any[];
-    };
-    private allPrivileges;
+    } | undefined;
+    private get allPrivileges();
     whitelist: any;
     blacklist: any;
     protectedlist: any;
     protectedPrivileges: any;
     render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     checkAll(checked: any): void;
     oncheckAll(e: any): void;
     onSave(): Promise<void>;

package/dist-client/setting-lets/secure-iplist-setting-let.js CHANGED Viewed

@@ -4,13 +4,34 @@ import '@things-factory/setting-base';
 import '@operato/i18n/ox-i18n.js';
 import gql from 'graphql-tag';
 import { html, css, LitElement } from 'lit';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { customElement, query, queryAll } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
-import { client } from '@operato/graphql';
+import { MutationController, QueryController } from '@operato/graphql';
 let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
     constructor() {
         super(...arguments);
-        this.allPrivileges = [];
+        this.privileges = new QueryController(this, gql `
+      query {
+        privileges {
+          items {
+            privilege
+            category
+            description
+          }
+          total
+        }
+      }
+    `);
+        this.iplist = new QueryController(this, gql `
+      query {
+        secureIPList
+      }
+    `);
+        this.save = new MutationController(this, gql `
+      mutation ($iplist: Object!) {
+        updateSecureIPList(iplist: $iplist)
+      }
+    `, { refetch: () => [this.iplist] });
     }
     static { this.styles = [
         css `
@@ -44,6 +65,12 @@ let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
       }
     `
     ]; }
+    get value() {
+        return this.iplist.data?.secureIPList ?? undefined;
+    }
+    get allPrivileges() {
+        return this.privileges.data?.privileges?.items || [];
+    }
     render() {
         const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {};
         return html `
@@ -113,31 +140,6 @@ let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
       </setting-let>
     `;
     }
-    async firstUpdated(_changedProperties) {
-        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.checked = checked));
     }
@@ -160,27 +162,9 @@ let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
             protectedlist,
             privileges
         };
-        const { data } = await client.query({
-            query: gql `
-        mutation ($iplist: Object!) {
-          updateSecureIPList(iplist: $iplist)
-        }
-      `,
-            variables: {
-                iplist
-            }
-        });
-        this.value = data ? data.updateSecureIPList : {};
+        await this.save.run({ iplist });
     }
 };
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], SecureIPListSettingLet.prototype, "value", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], SecureIPListSettingLet.prototype, "allPrivileges", void 0);
 __decorate([
     query('[name="whitelist"]'),
     __metadata("design:type", Object)

package/dist-client/setting-lets/secure-iplist-setting-let.js.map CHANGED Viewed

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