@things-factory/setting-ui 7.0.1-alpha.4 → 7.0.1-alpha.44
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.
- package/client/components/partner-selector.ts +4 -9
- package/client/setting-lets/secure-iplist-setting-let.ts +22 -22
- package/dist-client/components/partner-selector.d.ts +1 -1
- package/dist-client/components/partner-selector.js +4 -9
- package/dist-client/components/partner-selector.js.map +1 -1
- package/dist-client/setting-lets/secure-iplist-setting-let.d.ts +1 -2
- package/dist-client/setting-lets/secure-iplist-setting-let.js +20 -16
- package/dist-client/setting-lets/secure-iplist-setting-let.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -9
- package/translations/en.json +4 -1
- package/translations/ja.json +4 -1
- package/translations/ko.json +3 -0
- package/translations/ms.json +8 -5
- package/translations/zh.json +4 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js'
|
|
2
2
|
import '@things-factory/form-ui'
|
|
3
3
|
import '@operato/data-grist'
|
|
4
4
|
|
|
@@ -10,10 +10,12 @@ import { CommonGristStyles } from '@operato/styles'
|
|
|
10
10
|
import gql from 'graphql-tag'
|
|
11
11
|
import { css, html, LitElement } from 'lit'
|
|
12
12
|
import { customElement, query, state } from 'lit/decorators.js'
|
|
13
|
+
import { ButtonContainerStyles } from '@operato/styles'
|
|
13
14
|
|
|
14
15
|
@customElement('partner-selector')
|
|
15
16
|
class PartnerSelector extends LitElement {
|
|
16
17
|
static styles = [
|
|
18
|
+
ButtonContainerStyles,
|
|
17
19
|
CommonGristStyles,
|
|
18
20
|
css`
|
|
19
21
|
:host {
|
|
@@ -22,13 +24,6 @@ class PartnerSelector extends LitElement {
|
|
|
22
24
|
overflow: hidden;
|
|
23
25
|
background-color: white;
|
|
24
26
|
}
|
|
25
|
-
.button-container {
|
|
26
|
-
padding: var(--button-container-padding);
|
|
27
|
-
margin: var(--button-container-margin);
|
|
28
|
-
text-align: var(--button-container-align);
|
|
29
|
-
background-color: var(--button-container-background);
|
|
30
|
-
height: var(--button-container-height);
|
|
31
|
-
}
|
|
32
27
|
`
|
|
33
28
|
]
|
|
34
29
|
|
|
@@ -49,7 +44,7 @@ class PartnerSelector extends LitElement {
|
|
|
49
44
|
</ox-grist>
|
|
50
45
|
|
|
51
46
|
<div class="button-container">
|
|
52
|
-
<
|
|
47
|
+
<button @click="${this.select.bind(this)}"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>
|
|
53
48
|
</div>
|
|
54
49
|
`
|
|
55
50
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
2
|
-
import '@material/mwc-textfield'
|
|
1
|
+
import '@material/web/textfield/filled-text-field.js'
|
|
3
2
|
import '@things-factory/setting-base'
|
|
4
3
|
import '@operato/i18n/ox-i18n.js'
|
|
5
4
|
|
|
@@ -58,9 +57,9 @@ export class SecureIPListSettingLet extends LitElement {
|
|
|
58
57
|
description: string
|
|
59
58
|
}[] = []
|
|
60
59
|
|
|
61
|
-
@query('
|
|
62
|
-
@query('
|
|
63
|
-
@query('
|
|
60
|
+
@query('[name="whitelist"]') whitelist
|
|
61
|
+
@query('[name="blacklist"]') blacklist
|
|
62
|
+
@query('[name="protectedlist"]') protectedlist
|
|
64
63
|
@queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges
|
|
65
64
|
|
|
66
65
|
render() {
|
|
@@ -68,35 +67,40 @@ export class SecureIPListSettingLet extends LitElement {
|
|
|
68
67
|
|
|
69
68
|
return html`
|
|
70
69
|
<setting-let>
|
|
71
|
-
<ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list"
|
|
72
|
-
>secure IP list</ox-title-with-help
|
|
73
|
-
>
|
|
70
|
+
<ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list">secure IP list</ox-title-with-help>
|
|
74
71
|
|
|
75
72
|
<div slot="content" @change=${() => this.onSave()}>
|
|
76
|
-
<
|
|
73
|
+
<md-filled-text-field
|
|
77
74
|
type="text"
|
|
78
75
|
name="whitelist"
|
|
79
76
|
.label=${String(i18next.t('label.whitelist'))}
|
|
80
77
|
icon="health_and_safety"
|
|
81
78
|
value=${whitelist.join(', ')}
|
|
79
|
+
supporting-text=${String(i18next.t('text.supporting text for whitelist'))}
|
|
82
80
|
hidden
|
|
83
|
-
|
|
81
|
+
>
|
|
82
|
+
<md-icon slot="leading-icon">health_and_safety</md-icon>
|
|
83
|
+
</md-filled-text-field>
|
|
84
84
|
|
|
85
|
-
<
|
|
85
|
+
<md-filled-text-field
|
|
86
86
|
type="text"
|
|
87
87
|
name="blacklist"
|
|
88
88
|
.label=${String(i18next.t('label.blacklist'))}
|
|
89
|
-
icon="block"
|
|
90
89
|
value=${blacklist.join(', ')}
|
|
91
|
-
|
|
90
|
+
supporting-text=${String(i18next.t('text.supporting text for blacklist'))}
|
|
91
|
+
>
|
|
92
|
+
<md-icon slot="leading-icon">block</md-icon>
|
|
93
|
+
</md-filled-text-field>
|
|
92
94
|
|
|
93
|
-
<
|
|
95
|
+
<md-filled-text-field
|
|
94
96
|
type="text"
|
|
95
97
|
name="protectedlist"
|
|
96
98
|
.label=${String(i18next.t('label.protectedlist'))}
|
|
97
|
-
icon="security"
|
|
98
99
|
value=${protectedlist.join(', ')}
|
|
99
|
-
|
|
100
|
+
supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}
|
|
101
|
+
>
|
|
102
|
+
<md-icon slot="leading-icon">security</md-icon>
|
|
103
|
+
</md-filled-text-field>
|
|
100
104
|
|
|
101
105
|
<div>
|
|
102
106
|
<h3><ox-i18n msgid="title.protected-privileges"></ox-i18n></h3>
|
|
@@ -113,9 +117,7 @@ export class SecureIPListSettingLet extends LitElement {
|
|
|
113
117
|
<input
|
|
114
118
|
type="checkbox"
|
|
115
119
|
id=${id}
|
|
116
|
-
.checked=${!!privileges.find(
|
|
117
|
-
p => p.privilege == privilege.privilege && p.category == privilege.category
|
|
118
|
-
)}
|
|
120
|
+
.checked=${!!privileges.find(p => p.privilege == privilege.privilege && p.category == privilege.category)}
|
|
119
121
|
.data-privilege=${privilege}
|
|
120
122
|
/>
|
|
121
123
|
<label for="${id}">${privilege.description}</label>
|
|
@@ -159,9 +161,7 @@ export class SecureIPListSettingLet extends LitElement {
|
|
|
159
161
|
}
|
|
160
162
|
|
|
161
163
|
checkAll(checked) {
|
|
162
|
-
Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(
|
|
163
|
-
checkbox => ((checkbox as HTMLInputElement).checked = checked)
|
|
164
|
-
)
|
|
164
|
+
Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(checkbox => ((checkbox as HTMLInputElement).checked = checked))
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
oncheckAll(e) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@things-factory/form-ui';
|
|
4
4
|
import '@operato/data-grist';
|
|
5
5
|
import { i18next } from '@operato/i18n';
|
|
@@ -9,6 +9,7 @@ import { CommonGristStyles } from '@operato/styles';
|
|
|
9
9
|
import gql from 'graphql-tag';
|
|
10
10
|
import { css, html, LitElement } from 'lit';
|
|
11
11
|
import { customElement, query, state } from 'lit/decorators.js';
|
|
12
|
+
import { ButtonContainerStyles } from '@operato/styles';
|
|
12
13
|
let PartnerSelector = class PartnerSelector extends LitElement {
|
|
13
14
|
constructor() {
|
|
14
15
|
super(...arguments);
|
|
@@ -25,7 +26,7 @@ let PartnerSelector = class PartnerSelector extends LitElement {
|
|
|
25
26
|
</ox-grist>
|
|
26
27
|
|
|
27
28
|
<div class="button-container">
|
|
28
|
-
<
|
|
29
|
+
<button @click="${this.select.bind(this)}"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>
|
|
29
30
|
</div>
|
|
30
31
|
`;
|
|
31
32
|
}
|
|
@@ -97,6 +98,7 @@ let PartnerSelector = class PartnerSelector extends LitElement {
|
|
|
97
98
|
}
|
|
98
99
|
};
|
|
99
100
|
PartnerSelector.styles = [
|
|
101
|
+
ButtonContainerStyles,
|
|
100
102
|
CommonGristStyles,
|
|
101
103
|
css `
|
|
102
104
|
:host {
|
|
@@ -105,13 +107,6 @@ PartnerSelector.styles = [
|
|
|
105
107
|
overflow: hidden;
|
|
106
108
|
background-color: white;
|
|
107
109
|
}
|
|
108
|
-
.button-container {
|
|
109
|
-
padding: var(--button-container-padding);
|
|
110
|
-
margin: var(--button-container-margin);
|
|
111
|
-
text-align: var(--button-container-align);
|
|
112
|
-
background-color: var(--button-container-background);
|
|
113
|
-
height: var(--button-container-height);
|
|
114
|
-
}
|
|
115
110
|
`
|
|
116
111
|
];
|
|
117
112
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"partner-selector.js","sourceRoot":"","sources":["../../client/components/partner-selector.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"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 } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('partner-selector')\nclass PartnerSelector extends LitElement {\n static styles = [\n ButtonContainerStyles,\n CommonGristStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background-color: white;\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\">\n <div id=\"filters\">\n <ox-filters-form></ox-filters-form>\n </div>\n </div>\n </ox-grist>\n\n <div class=\"button-container\">\n <button @click=\"${this.select.bind(this)}\"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</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 = [] }) {\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"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata, __rest } from "tslib";
|
|
2
|
-
import '@material/
|
|
3
|
-
import '@material/mwc-textfield';
|
|
2
|
+
import '@material/web/textfield/filled-text-field.js';
|
|
4
3
|
import '@things-factory/setting-base';
|
|
5
4
|
import '@operato/i18n/ox-i18n.js';
|
|
6
5
|
import gql from 'graphql-tag';
|
|
@@ -17,35 +16,40 @@ let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
|
|
|
17
16
|
const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {};
|
|
18
17
|
return html `
|
|
19
18
|
<setting-let>
|
|
20
|
-
<ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list"
|
|
21
|
-
>secure IP list</ox-title-with-help
|
|
22
|
-
>
|
|
19
|
+
<ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list">secure IP list</ox-title-with-help>
|
|
23
20
|
|
|
24
21
|
<div slot="content" @change=${() => this.onSave()}>
|
|
25
|
-
<
|
|
22
|
+
<md-filled-text-field
|
|
26
23
|
type="text"
|
|
27
24
|
name="whitelist"
|
|
28
25
|
.label=${String(i18next.t('label.whitelist'))}
|
|
29
26
|
icon="health_and_safety"
|
|
30
27
|
value=${whitelist.join(', ')}
|
|
28
|
+
supporting-text=${String(i18next.t('text.supporting text for whitelist'))}
|
|
31
29
|
hidden
|
|
32
|
-
|
|
30
|
+
>
|
|
31
|
+
<md-icon slot="leading-icon">health_and_safety</md-icon>
|
|
32
|
+
</md-filled-text-field>
|
|
33
33
|
|
|
34
|
-
<
|
|
34
|
+
<md-filled-text-field
|
|
35
35
|
type="text"
|
|
36
36
|
name="blacklist"
|
|
37
37
|
.label=${String(i18next.t('label.blacklist'))}
|
|
38
|
-
icon="block"
|
|
39
38
|
value=${blacklist.join(', ')}
|
|
40
|
-
|
|
39
|
+
supporting-text=${String(i18next.t('text.supporting text for blacklist'))}
|
|
40
|
+
>
|
|
41
|
+
<md-icon slot="leading-icon">block</md-icon>
|
|
42
|
+
</md-filled-text-field>
|
|
41
43
|
|
|
42
|
-
<
|
|
44
|
+
<md-filled-text-field
|
|
43
45
|
type="text"
|
|
44
46
|
name="protectedlist"
|
|
45
47
|
.label=${String(i18next.t('label.protectedlist'))}
|
|
46
|
-
icon="security"
|
|
47
48
|
value=${protectedlist.join(', ')}
|
|
48
|
-
|
|
49
|
+
supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}
|
|
50
|
+
>
|
|
51
|
+
<md-icon slot="leading-icon">security</md-icon>
|
|
52
|
+
</md-filled-text-field>
|
|
49
53
|
|
|
50
54
|
<div>
|
|
51
55
|
<h3><ox-i18n msgid="title.protected-privileges"></ox-i18n></h3>
|
|
@@ -176,15 +180,15 @@ __decorate([
|
|
|
176
180
|
__metadata("design:type", Array)
|
|
177
181
|
], SecureIPListSettingLet.prototype, "allPrivileges", void 0);
|
|
178
182
|
__decorate([
|
|
179
|
-
query('
|
|
183
|
+
query('[name="whitelist"]'),
|
|
180
184
|
__metadata("design:type", Object)
|
|
181
185
|
], SecureIPListSettingLet.prototype, "whitelist", void 0);
|
|
182
186
|
__decorate([
|
|
183
|
-
query('
|
|
187
|
+
query('[name="blacklist"]'),
|
|
184
188
|
__metadata("design:type", Object)
|
|
185
189
|
], SecureIPListSettingLet.prototype, "blacklist", void 0);
|
|
186
190
|
__decorate([
|
|
187
|
-
query('
|
|
191
|
+
query('[name="protectedlist"]'),
|
|
188
192
|
__metadata("design:type", Object)
|
|
189
193
|
], SecureIPListSettingLet.prototype, "protectedlist", void 0);
|
|
190
194
|
__decorate([
|
|
@@ -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/mwc-formfield'\nimport '@material/mwc-textfield'\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(--theme-white-color);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin: 0;\n padding: var(--padding-default);\n list-style: none;\n border: 1px dashed rgba(0, 0, 0, 0.1);\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('mwc-textfield[name=\"whitelist\"]') whitelist\n @query('mwc-textfield[name=\"blacklist\"]') blacklist\n @query('mwc-textfield[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 <mwc-textfield\n type=\"text\"\n name=\"whitelist\"\n .label=${String(i18next.t('label.whitelist'))}\n icon=\"health_and_safety\"\n value=${whitelist.join(', ')}\n hidden\n ></mwc-textfield>\n\n <mwc-textfield\n type=\"text\"\n name=\"blacklist\"\n .label=${String(i18next.t('label.blacklist'))}\n icon=\"block\"\n value=${blacklist.join(', ')}\n ></mwc-textfield>\n\n <mwc-textfield\n type=\"text\"\n name=\"protectedlist\"\n .label=${String(i18next.t('label.protectedlist'))}\n icon=\"security\"\n value=${protectedlist.join(', ')}\n ></mwc-textfield>\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\">Check all</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, 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(--theme-white-color);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin: 0;\n padding: var(--padding-default);\n list-style: none;\n border: 1px dashed rgba(0, 0, 0, 0.1);\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\">secure IP list</ox-title-with-help>\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\">Check all</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(p => p.privilege == privilege.privilege && p.category == privilege.category)}\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(checkbox => ((checkbox as HTMLInputElement).checked = checked))\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"]}
|