@things-factory/integration-ui 7.0.1-alpha.104 → 7.0.1-alpha.105
Sign up to get free protection for your applications and to get access to all the features.
- package/client/analysis/graph-viewer-style.ts +1 -1
- package/client/editors/entity-selector.ts +21 -4
- package/client/editors/things-editor-tag-scenarios.ts +1 -1
- package/client/pages/connection-importer.ts +6 -2
- package/client/pages/connection.ts +9 -2
- package/client/pages/scenario-detail.ts +9 -3
- package/client/pages/scenario-importer.ts +6 -2
- package/client/pages/scenario.ts +24 -8
- package/dist-client/analysis/graph-viewer-style.js +1 -1
- package/dist-client/analysis/graph-viewer-style.js.map +1 -1
- package/dist-client/editors/entity-selector.js +19 -4
- package/dist-client/editors/entity-selector.js.map +1 -1
- package/dist-client/editors/things-editor-tag-scenarios.js +1 -1
- package/dist-client/editors/things-editor-tag-scenarios.js.map +1 -1
- package/dist-client/pages/connection-importer.js +6 -2
- package/dist-client/pages/connection-importer.js.map +1 -1
- package/dist-client/pages/connection.js +9 -2
- package/dist-client/pages/connection.js.map +1 -1
- package/dist-client/pages/scenario-detail.js +9 -3
- package/dist-client/pages/scenario-detail.js.map +1 -1
- package/dist-client/pages/scenario-importer.js +6 -2
- package/dist-client/pages/scenario-importer.js.map +1 -1
- package/dist-client/pages/scenario.js +16 -3
- package/dist-client/pages/scenario.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
|
@@ -21,7 +21,7 @@ export class EntitySelector extends LitElement {
|
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
|
|
24
|
-
background-color:
|
|
24
|
+
background-color: var(--md-sys-color-surface);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
ox-grist {
|
|
@@ -65,7 +65,12 @@ export class EntitySelector extends LitElement {
|
|
|
65
65
|
.fields="${this.searchFields}"
|
|
66
66
|
></search-form>
|
|
67
67
|
|
|
68
|
-
<ox-grist
|
|
68
|
+
<ox-grist
|
|
69
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
70
|
+
.config=${this.config}
|
|
71
|
+
.data=${this.data}
|
|
72
|
+
.fetchHandler="${this.fetchHandler.bind(this)}"
|
|
73
|
+
></ox-grist>
|
|
69
74
|
|
|
70
75
|
<div class="button-container">
|
|
71
76
|
<button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
|
|
@@ -160,9 +165,21 @@ export class EntitySelector extends LitElement {
|
|
|
160
165
|
return {
|
|
161
166
|
label: selectField.header || i18next.t(`field.${selectField.name}`),
|
|
162
167
|
name: selectField.name,
|
|
163
|
-
type:
|
|
168
|
+
type:
|
|
169
|
+
fieldType === 'string'
|
|
170
|
+
? 'text'
|
|
171
|
+
: numberTypes.indexOf(fieldType) >= 0
|
|
172
|
+
? 'number'
|
|
173
|
+
: fieldType === 'boolean'
|
|
174
|
+
? 'checkbox'
|
|
175
|
+
: fieldType,
|
|
164
176
|
queryName: selectField.queryName,
|
|
165
|
-
props:
|
|
177
|
+
props:
|
|
178
|
+
fieldType === 'string'
|
|
179
|
+
? { searchOper: 'i_like' }
|
|
180
|
+
: fieldType === 'object'
|
|
181
|
+
? { searchOper: 'in' }
|
|
182
|
+
: { searchOper: 'eq' },
|
|
166
183
|
attrs: fieldType === 'boolean' ? ['indeterminated'] : []
|
|
167
184
|
}
|
|
168
185
|
})
|
|
@@ -20,7 +20,7 @@ export class ConnectionImporter extends LitElement {
|
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
|
|
23
|
-
background-color:
|
|
23
|
+
background-color: var(--md-sys-color-surface);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
ox-grist {
|
|
@@ -63,7 +63,11 @@ export class ConnectionImporter extends LitElement {
|
|
|
63
63
|
|
|
64
64
|
render() {
|
|
65
65
|
return html`
|
|
66
|
-
<ox-grist
|
|
66
|
+
<ox-grist
|
|
67
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
68
|
+
.config=${this.columns}
|
|
69
|
+
.data=${{ records: this.connections }}
|
|
70
|
+
></ox-grist>
|
|
67
71
|
|
|
68
72
|
<div class="button-container">
|
|
69
73
|
<button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
|
|
@@ -38,7 +38,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
|
|
|
38
38
|
flex-direction: row;
|
|
39
39
|
justify-content: space-between;
|
|
40
40
|
|
|
41
|
-
background-color:
|
|
41
|
+
background-color: var(--md-sys-color-surface);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
#filters > * {
|
|
@@ -93,7 +93,14 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
render() {
|
|
96
|
-
return html`
|
|
96
|
+
return html`
|
|
97
|
+
<ox-grist
|
|
98
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
99
|
+
.config=${this.gristConfig}
|
|
100
|
+
.fetchHandler=${this.fetchHandler.bind(this)}
|
|
101
|
+
>
|
|
102
|
+
</ox-grist>
|
|
103
|
+
`
|
|
97
104
|
}
|
|
98
105
|
|
|
99
106
|
async pageInitialized() {
|
|
@@ -23,7 +23,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
|
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-direction: column;
|
|
25
25
|
|
|
26
|
-
background-color:
|
|
26
|
+
background-color: var(--md-sys-color-surface);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
ox-grist {
|
|
@@ -40,9 +40,15 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
|
|
|
40
40
|
|
|
41
41
|
render() {
|
|
42
42
|
return html`
|
|
43
|
-
<ox-grist
|
|
43
|
+
<ox-grist
|
|
44
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
45
|
+
.config=${this.gristConfig}
|
|
46
|
+
.fetchHandler=${this.fetchHandler.bind(this)}
|
|
47
|
+
></ox-grist>
|
|
44
48
|
<div class="button-container">
|
|
45
|
-
<button danger @click=${this._deleteSteps.bind(this)}
|
|
49
|
+
<button danger @click=${this._deleteSteps.bind(this)}>
|
|
50
|
+
<md-icon>delete</md-icon>${i18next.t('button.delete')}
|
|
51
|
+
</button>
|
|
46
52
|
<button @click=${this._updateSteps.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
|
|
47
53
|
</div>
|
|
48
54
|
`
|
|
@@ -20,7 +20,7 @@ export class ScenarioImporter extends LitElement {
|
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
|
|
23
|
-
background-color:
|
|
23
|
+
background-color: var(--md-sys-color-surface);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
ox-grist {
|
|
@@ -69,7 +69,11 @@ export class ScenarioImporter extends LitElement {
|
|
|
69
69
|
|
|
70
70
|
render() {
|
|
71
71
|
return html`
|
|
72
|
-
<ox-grist
|
|
72
|
+
<ox-grist
|
|
73
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
74
|
+
.config=${this.columns}
|
|
75
|
+
.data=${{ records: this.scenarios }}
|
|
76
|
+
></ox-grist>
|
|
73
77
|
|
|
74
78
|
<div class="button-container">
|
|
75
79
|
<button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
|
package/client/pages/scenario.ts
CHANGED
|
@@ -47,7 +47,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
|
|
|
47
47
|
flex-direction: row;
|
|
48
48
|
justify-content: space-between;
|
|
49
49
|
|
|
50
|
-
background-color:
|
|
50
|
+
background-color: var(--md-sys-color-surface);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
#filters > * {
|
|
@@ -115,7 +115,14 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
|
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
render() {
|
|
118
|
-
return html`
|
|
118
|
+
return html`
|
|
119
|
+
<ox-grist
|
|
120
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
121
|
+
.config=${this.gristConfig}
|
|
122
|
+
.fetchHandler=${this.fetchHandler.bind(this)}
|
|
123
|
+
>
|
|
124
|
+
</ox-grist>
|
|
125
|
+
`
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
async pageInitialized(lifecycle) {
|
|
@@ -174,12 +181,21 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
|
|
|
174
181
|
handlers: {
|
|
175
182
|
click: (columns, data, column, record, rowIndex) => {
|
|
176
183
|
if (!record.id) return
|
|
177
|
-
openPopup(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
184
|
+
openPopup(
|
|
185
|
+
html`
|
|
186
|
+
<scenario-detail
|
|
187
|
+
.scenario=${record}
|
|
188
|
+
.taskTypes=${this.taskTypes}
|
|
189
|
+
@requestRefresh="${() => this.grist.fetch()}"
|
|
190
|
+
></scenario-detail>
|
|
191
|
+
`,
|
|
192
|
+
{
|
|
193
|
+
backdrop: true,
|
|
194
|
+
help: 'integration/ui/scenario-detail',
|
|
195
|
+
size: 'large',
|
|
196
|
+
title: i18next.t('title.scenario-detail')
|
|
197
|
+
}
|
|
198
|
+
)
|
|
183
199
|
}
|
|
184
200
|
}
|
|
185
201
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n * {\n margin: 0;\n padding: 0;\n }\n\n .graph-viewer {\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .graph-info {\n font-size: 16px;\n padding: 10px;\n position: absolute;\n }\n\n .graph-info a {\n border: 1px solid;\n display: inline-block;\n font-size: 14px;\n line-height: 1.428571429;\n margin-left: 5px;\n margin-top: 5px;\n padding: 6px 12px;\n }\n\n .graph-info a.class {\n color: #fff;\n }\n\n .graph-info a.property {\n background-color:
|
|
1
|
+
{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n * {\n margin: 0;\n padding: 0;\n }\n\n .graph-viewer {\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .graph-info {\n font-size: 16px;\n padding: 10px;\n position: absolute;\n }\n\n .graph-info a {\n border: 1px solid;\n display: inline-block;\n font-size: 14px;\n line-height: 1.428571429;\n margin-left: 5px;\n margin-top: 5px;\n padding: 6px 12px;\n }\n\n .graph-info a.class {\n color: #fff;\n }\n\n .graph-info a.property {\n background-color: var(--md-sys-color-surface);\n border-color: #ccc;\n color: #333;\n }\n\n .graph-info a.btn {\n margin-left: 5px;\n margin-top: 5px;\n opacity: 1;\n }\n\n .graph-info a.info {\n background-color: #a5abb6;\n border: 1px solid #9aa1ac;\n color: #fff;\n }\n\n .node.node-highlighted .ring {\n filter: alpha(opacity=50);\n opacity: 0.5;\n stroke: #888;\n stroke-width: 12px;\n }\n\n .node .outline {\n cursor: pointer;\n fill: #a5abb6;\n pointer-events: all;\n stroke: #9aa1ac;\n stroke-width: 2px;\n }\n\n .node .ring {\n fill: none;\n filter: alpha(opacity=0);\n opacity: 0;\n stroke: #6ac6ff;\n stroke-width: 8px;\n }\n\n .node .text.icon {\n font-family: FontAwesome;\n }\n\n .node.selected .ring,\n .node:hover .ring {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n .relationship {\n cursor: default;\n }\n\n .relationship line {\n stroke: #aaa;\n }\n\n .relationship .outline {\n cursor: default;\n }\n\n .relationship .overlay {\n cursor: default;\n fill: #6ac6ff;\n filter: alpha(opacity=0);\n opacity: 0;\n }\n\n .relationship text {\n cursor: default;\n }\n\n .relationship.selected .overlay,\n .relationship:hover .overlay {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n svg {\n cursor: move;\n }\n`\n"]}
|
|
@@ -23,7 +23,12 @@ let EntitySelector = class EntitySelector extends LitElement {
|
|
|
23
23
|
.fields="${this.searchFields}"
|
|
24
24
|
></search-form>
|
|
25
25
|
|
|
26
|
-
<ox-grist
|
|
26
|
+
<ox-grist
|
|
27
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
28
|
+
.config=${this.config}
|
|
29
|
+
.data=${this.data}
|
|
30
|
+
.fetchHandler="${this.fetchHandler.bind(this)}"
|
|
31
|
+
></ox-grist>
|
|
27
32
|
|
|
28
33
|
<div class="button-container">
|
|
29
34
|
<button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
|
|
@@ -108,9 +113,19 @@ let EntitySelector = class EntitySelector extends LitElement {
|
|
|
108
113
|
return {
|
|
109
114
|
label: selectField.header || i18next.t(`field.${selectField.name}`),
|
|
110
115
|
name: selectField.name,
|
|
111
|
-
type: fieldType === 'string'
|
|
116
|
+
type: fieldType === 'string'
|
|
117
|
+
? 'text'
|
|
118
|
+
: numberTypes.indexOf(fieldType) >= 0
|
|
119
|
+
? 'number'
|
|
120
|
+
: fieldType === 'boolean'
|
|
121
|
+
? 'checkbox'
|
|
122
|
+
: fieldType,
|
|
112
123
|
queryName: selectField.queryName,
|
|
113
|
-
props: fieldType === 'string'
|
|
124
|
+
props: fieldType === 'string'
|
|
125
|
+
? { searchOper: 'i_like' }
|
|
126
|
+
: fieldType === 'object'
|
|
127
|
+
? { searchOper: 'in' }
|
|
128
|
+
: { searchOper: 'eq' },
|
|
114
129
|
attrs: fieldType === 'boolean' ? ['indeterminated'] : []
|
|
115
130
|
};
|
|
116
131
|
});
|
|
@@ -217,7 +232,7 @@ EntitySelector.styles = [
|
|
|
217
232
|
display: flex;
|
|
218
233
|
flex-direction: column;
|
|
219
234
|
|
|
220
|
-
background-color:
|
|
235
|
+
background-color: var(--md-sys-color-surface);
|
|
221
236
|
}
|
|
222
237
|
|
|
223
238
|
ox-grist {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../client/editors/entity-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { buildArgs, client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { MultiColumnFormStyles } from '@operato/form'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('entity-selector')\nexport class EntitySelector extends LitElement {\n static styles = [\n ButtonContainerStyles,\n MultiColumnFormStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n }\n\n ox-grist {\n flex: 1;\n }\n\n form {\n position: relative;\n }\n\n [search] {\n position: absolute;\n right: 0;\n }\n `\n ]\n\n @property({ type: String }) value?: string\n @property({ type: Array }) searchFields: any\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n @property({ type: String }) queryName!: string\n @property({ type: Array }) select: any\n @property({ type: Object }) list: any\n @property({ type: Object }) basicArgs: any\n @property({ type: Array }) selectedRecords: any\n\n @query('ox-grist') grist!: DataGrist\n @query('search-form') searchForm!: HTMLFormElement\n\n render() {\n return html`\n <search-form\n id=\"search-form\"\n @keypress=\"${async e => {\n if (e.keyCode === 13) {\n this.data = await this.grist.fetch()\n }\n }}\"\n @submit=\"${async e => (this.data = await this.grist.fetch())}\"\n .fields=\"${this.searchFields}\"\n ></search-form>\n\n <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler=\"${this.fetchHandler.bind(this)}\"></ox-grist>\n\n <div class=\"button-container\">\n <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>\n </div>\n `\n }\n\n onCancel() {\n history.back()\n }\n\n onConfirm() {\n this.dispatchEvent(\n new CustomEvent('entity-selected', {\n detail: {\n entity: this.selected\n }\n })\n )\n }\n\n async fetchHandler({ page, limit, sorters = [] }) {\n const response = await client.query({\n query: gql`\n query {\n ${this.queryName} (${buildArgs(await this._buildConditions(page, limit, sorters))}) {\n ${this.getSelectFields()}\n }\n }\n `\n })\n\n if (!response.errors) {\n const records = response.data[this.queryName].items.map(item => {\n if (this.value === item.id) {\n this.selectedRecords = [item]\n item['__selected__'] = true\n }\n\n return item\n })\n const total = response.data[this.queryName].total\n\n return {\n records,\n total,\n limit,\n page\n }\n }\n }\n\n async firstUpdated() {\n this.config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: false\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n click: 'select-row',\n dblclick: (columns, data, column, record, rowIndex, field) => {\n this.onConfirm()\n }\n },\n appendable: false\n }\n }\n\n if (this.select && this.select.length > 0) {\n let _searchFields = this.select.filter(selectField => !selectField.hidden)\n if (this.list && this.list.fields && this.list.fields.length > 0) {\n _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)\n } else {\n _searchFields = _searchFields.slice(0, 4)\n }\n\n this.searchFields = _searchFields.map(selectField => {\n const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'\n const numberTypes = ['integer', 'float']\n return {\n label: selectField.header || i18next.t(`field.${selectField.name}`),\n name: selectField.name,\n type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,\n queryName: selectField.queryName,\n props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },\n attrs: fieldType === 'boolean' ? ['indeterminated'] : []\n }\n })\n this.config = {\n ...this.config,\n columns: [\n ...this.config.columns,\n ...this.select.map(selectField => {\n return {\n ...selectField,\n type: selectField.type || 'string',\n width: selectField.width || 160,\n header: selectField.header || i18next.t(`field.${selectField.name}`)\n }\n })\n ]\n }\n } else {\n this.searchFields = [\n {\n label: i18next.t('field.name'),\n name: 'name',\n type: 'text',\n props: { searchOper: 'i_like' }\n },\n {\n label: i18next.t('field.description'),\n name: 'description',\n type: 'text',\n props: { searchOper: 'i_like' }\n }\n ]\n\n this.config = {\n ...this.config,\n columns: [\n ...this.config.columns,\n {\n type: 'string',\n name: 'id',\n header: i18next.t('field.id'),\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: {\n align: 'left'\n },\n sortable: true,\n width: 160\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n align: 'left'\n },\n sortable: true,\n width: 300\n }\n ]\n }\n }\n\n this.config = {\n ...this.config,\n list: {\n ...this.list,\n fields:\n this.list && this.list.fields && this.list.fields.length > 0\n ? this.list.fields\n : this.config.columns\n .filter(column => column.type !== 'gutter')\n .slice(0, 3)\n .map(column => column.name)\n }\n }\n\n await this.updateComplete\n this.grist && this.grist.focus()\n }\n\n getSelectFields() {\n if (this.select && this.select.length > 0) {\n return `items {\n ${this.select.map(selectField => {\n return selectField.type === 'object'\n ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`\n : `${selectField.name}`\n })}\n }\n total`\n } else {\n return `\n items {\n id\n name\n description\n }\n total\n `\n }\n }\n\n async _buildConditions(page, limit, sorters) {\n const queryConditions = {\n filters: [],\n ...this.basicArgs\n }\n\n queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]\n queryConditions.pagination = { page, limit }\n queryConditions.sortings = sorters\n return queryConditions\n }\n\n get selected() {\n var selected = this.grist.selected\n\n return selected && selected.length > 0 ? selected[0] : undefined\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../client/editors/entity-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { buildArgs, client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { MultiColumnFormStyles } from '@operato/form'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('entity-selector')\nexport class EntitySelector extends LitElement {\n static styles = [\n ButtonContainerStyles,\n MultiColumnFormStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n ox-grist {\n flex: 1;\n }\n\n form {\n position: relative;\n }\n\n [search] {\n position: absolute;\n right: 0;\n }\n `\n ]\n\n @property({ type: String }) value?: string\n @property({ type: Array }) searchFields: any\n @property({ type: Object }) config: any\n @property({ type: Object }) data: any\n @property({ type: String }) queryName!: string\n @property({ type: Array }) select: any\n @property({ type: Object }) list: any\n @property({ type: Object }) basicArgs: any\n @property({ type: Array }) selectedRecords: any\n\n @query('ox-grist') grist!: DataGrist\n @query('search-form') searchForm!: HTMLFormElement\n\n render() {\n return html`\n <search-form\n id=\"search-form\"\n @keypress=\"${async e => {\n if (e.keyCode === 13) {\n this.data = await this.grist.fetch()\n }\n }}\"\n @submit=\"${async e => (this.data = await this.grist.fetch())}\"\n .fields=\"${this.searchFields}\"\n ></search-form>\n\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.config}\n .data=${this.data}\n .fetchHandler=\"${this.fetchHandler.bind(this)}\"\n ></ox-grist>\n\n <div class=\"button-container\">\n <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>\n </div>\n `\n }\n\n onCancel() {\n history.back()\n }\n\n onConfirm() {\n this.dispatchEvent(\n new CustomEvent('entity-selected', {\n detail: {\n entity: this.selected\n }\n })\n )\n }\n\n async fetchHandler({ page, limit, sorters = [] }) {\n const response = await client.query({\n query: gql`\n query {\n ${this.queryName} (${buildArgs(await this._buildConditions(page, limit, sorters))}) {\n ${this.getSelectFields()}\n }\n }\n `\n })\n\n if (!response.errors) {\n const records = response.data[this.queryName].items.map(item => {\n if (this.value === item.id) {\n this.selectedRecords = [item]\n item['__selected__'] = true\n }\n\n return item\n })\n const total = response.data[this.queryName].total\n\n return {\n records,\n total,\n limit,\n page\n }\n }\n }\n\n async firstUpdated() {\n this.config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: false\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n click: 'select-row',\n dblclick: (columns, data, column, record, rowIndex, field) => {\n this.onConfirm()\n }\n },\n appendable: false\n }\n }\n\n if (this.select && this.select.length > 0) {\n let _searchFields = this.select.filter(selectField => !selectField.hidden)\n if (this.list && this.list.fields && this.list.fields.length > 0) {\n _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)\n } else {\n _searchFields = _searchFields.slice(0, 4)\n }\n\n this.searchFields = _searchFields.map(selectField => {\n const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'\n const numberTypes = ['integer', 'float']\n return {\n label: selectField.header || i18next.t(`field.${selectField.name}`),\n name: selectField.name,\n type:\n fieldType === 'string'\n ? 'text'\n : numberTypes.indexOf(fieldType) >= 0\n ? 'number'\n : fieldType === 'boolean'\n ? 'checkbox'\n : fieldType,\n queryName: selectField.queryName,\n props:\n fieldType === 'string'\n ? { searchOper: 'i_like' }\n : fieldType === 'object'\n ? { searchOper: 'in' }\n : { searchOper: 'eq' },\n attrs: fieldType === 'boolean' ? ['indeterminated'] : []\n }\n })\n this.config = {\n ...this.config,\n columns: [\n ...this.config.columns,\n ...this.select.map(selectField => {\n return {\n ...selectField,\n type: selectField.type || 'string',\n width: selectField.width || 160,\n header: selectField.header || i18next.t(`field.${selectField.name}`)\n }\n })\n ]\n }\n } else {\n this.searchFields = [\n {\n label: i18next.t('field.name'),\n name: 'name',\n type: 'text',\n props: { searchOper: 'i_like' }\n },\n {\n label: i18next.t('field.description'),\n name: 'description',\n type: 'text',\n props: { searchOper: 'i_like' }\n }\n ]\n\n this.config = {\n ...this.config,\n columns: [\n ...this.config.columns,\n {\n type: 'string',\n name: 'id',\n header: i18next.t('field.id'),\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n record: {\n align: 'left'\n },\n sortable: true,\n width: 160\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: {\n align: 'left'\n },\n sortable: true,\n width: 300\n }\n ]\n }\n }\n\n this.config = {\n ...this.config,\n list: {\n ...this.list,\n fields:\n this.list && this.list.fields && this.list.fields.length > 0\n ? this.list.fields\n : this.config.columns\n .filter(column => column.type !== 'gutter')\n .slice(0, 3)\n .map(column => column.name)\n }\n }\n\n await this.updateComplete\n this.grist && this.grist.focus()\n }\n\n getSelectFields() {\n if (this.select && this.select.length > 0) {\n return `items {\n ${this.select.map(selectField => {\n return selectField.type === 'object'\n ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`\n : `${selectField.name}`\n })}\n }\n total`\n } else {\n return `\n items {\n id\n name\n description\n }\n total\n `\n }\n }\n\n async _buildConditions(page, limit, sorters) {\n const queryConditions = {\n filters: [],\n ...this.basicArgs\n }\n\n queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]\n queryConditions.pagination = { page, limit }\n queryConditions.sortings = sorters\n return queryConditions\n }\n\n get selected() {\n var selected = this.grist.selected\n\n return selected && selected.length > 0 ? selected[0] : undefined\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"things-editor-tag-scenarios.js","sourceRoot":"","sources":["../../client/editors/things-editor-tag-scenarios.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\n/**\ntag-scenarios map editor element\n\nExample:\n\n <things-editor-tag-scenarios value=${map}>\n </things-editor-tag-scenarios>\n*/\n@customElement('things-editor-tag-scenarios')\nexport default class ThingsEditorTagScenarios extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n\n width: 100%;\n overflow: visible;\n border: 1px solid #ccc;\n margin: 5px 0;\n\n background-color: #ddd;\n }\n\n div[data-record],\n div[data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n\n div[data-record] > *,\n div[data-record-new] > * {\n min-height: 20px;\n margin: 2px;\n }\n\n button {\n text-align: center;\n border-radius: 50%;\n font-size: 1em;\n }\n\n input,\n ox-select {\n flex: 1;\n }\n\n input {\n padding: 5px;\n box-sizing: border-box;\n }\n\n ox-select {\n --input-padding: 4px;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n background-color: white;\n }\n `\n ]\n\n @property({ type: Object }) value: { [key: string]: string } = {}\n\n _changingNow: boolean = false\n\n @state() private scenarios: string[] = []\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n this.fetchScenarios()\n }\n\n async fetchScenarios() {\n const { data, errors } = await client.query({\n query: gql`\n query {\n scenarios {\n items {\n id\n name\n }\n }\n }\n `\n })\n\n if (data) {\n this.scenarios = (data?.scenarios.items || []).map(item => item.name)\n }\n }\n\n render() {\n const spec = {\n queryName: 'scenarios'\n }\n\n return html`\n ${this._toArray(this.value).map(\n item => html`\n <div data-record>\n <input type=\"text\" data-key placeholder=\"(set tag)\" .value=${item.key} />\n <ox-select data-value placeholder=\"(select scenario)\" .value=${item.value}>\n <ox-popup-list with-search>\n <div option value=\"\"> </div>\n ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n </ox-popup-list>\n </ox-select>\n\n <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n </div>\n `\n )}\n\n <div data-record-new>\n <input type=\"text\" data-key placeholder=\"(set tag)\" value=\"\" />\n ${keyed(\n Date.now(),\n html`\n <ox-select data-value placeholder=\"(select scenario)\" value=\"\">\n <ox-popup-list with-search>\n <div option value=\"\"> </div>\n ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n </ox-popup-list>\n </ox-select>\n `\n )}\n\n <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n </div>\n `\n }\n\n _onChange(e) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n var input = e.target\n var value = input.value\n\n var div = input.parentElement\n\n if (div.hasAttribute('data-record')) {\n var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n for (var i = 0; i < dataList.length; i++) {\n if (dataList[i] !== input) {\n dataList[i].value = value || ''\n }\n }\n }\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?) {\n if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n var newmap = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n if (!inputs || inputs.length == 0) continue\n\n var input = inputs[inputs.length - 1] as HTMLInputElement\n\n var value = input.value\n\n if (key) newmap[key] = value || ''\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map) {\n var array: { key: any; value: any }[] = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i] as HTMLInputElement\n input.value = ''\n }\n\n ;(inputs[0] as HTMLInputElement).focus()\n }\n\n _delete(e) {\n var record = e.target.parentElement\n record.querySelector('[data-key]').value = ''\n this._build()\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"things-editor-tag-scenarios.js","sourceRoot":"","sources":["../../client/editors/things-editor-tag-scenarios.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\n/**\ntag-scenarios map editor element\n\nExample:\n\n <things-editor-tag-scenarios value=${map}>\n </things-editor-tag-scenarios>\n*/\n@customElement('things-editor-tag-scenarios')\nexport default class ThingsEditorTagScenarios extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n\n width: 100%;\n overflow: visible;\n border: 1px solid #ccc;\n margin: 5px 0;\n\n background-color: #ddd;\n }\n\n div[data-record],\n div[data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n\n div[data-record] > *,\n div[data-record-new] > * {\n min-height: 20px;\n margin: 2px;\n }\n\n button {\n text-align: center;\n border-radius: 50%;\n font-size: 1em;\n }\n\n input,\n ox-select {\n flex: 1;\n }\n\n input {\n padding: 5px;\n box-sizing: border-box;\n }\n\n ox-select {\n --input-padding: 4px;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n background-color: var(--md-sys-color-surface);\n }\n `\n ]\n\n @property({ type: Object }) value: { [key: string]: string } = {}\n\n _changingNow: boolean = false\n\n @state() private scenarios: string[] = []\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n this.fetchScenarios()\n }\n\n async fetchScenarios() {\n const { data, errors } = await client.query({\n query: gql`\n query {\n scenarios {\n items {\n id\n name\n }\n }\n }\n `\n })\n\n if (data) {\n this.scenarios = (data?.scenarios.items || []).map(item => item.name)\n }\n }\n\n render() {\n const spec = {\n queryName: 'scenarios'\n }\n\n return html`\n ${this._toArray(this.value).map(\n item => html`\n <div data-record>\n <input type=\"text\" data-key placeholder=\"(set tag)\" .value=${item.key} />\n <ox-select data-value placeholder=\"(select scenario)\" .value=${item.value}>\n <ox-popup-list with-search>\n <div option value=\"\"> </div>\n ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n </ox-popup-list>\n </ox-select>\n\n <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n </div>\n `\n )}\n\n <div data-record-new>\n <input type=\"text\" data-key placeholder=\"(set tag)\" value=\"\" />\n ${keyed(\n Date.now(),\n html`\n <ox-select data-value placeholder=\"(select scenario)\" value=\"\">\n <ox-popup-list with-search>\n <div option value=\"\"> </div>\n ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n </ox-popup-list>\n </ox-select>\n `\n )}\n\n <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n </div>\n `\n }\n\n _onChange(e) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n var input = e.target\n var value = input.value\n\n var div = input.parentElement\n\n if (div.hasAttribute('data-record')) {\n var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n for (var i = 0; i < dataList.length; i++) {\n if (dataList[i] !== input) {\n dataList[i].value = value || ''\n }\n }\n }\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?) {\n if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n var newmap = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n if (!inputs || inputs.length == 0) continue\n\n var input = inputs[inputs.length - 1] as HTMLInputElement\n\n var value = input.value\n\n if (key) newmap[key] = value || ''\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map) {\n var array: { key: any; value: any }[] = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i] as HTMLInputElement\n input.value = ''\n }\n\n ;(inputs[0] as HTMLInputElement).focus()\n }\n\n _delete(e) {\n var record = e.target.parentElement\n record.querySelector('[data-key]').value = ''\n this._build()\n }\n}\n"]}
|
|
@@ -44,7 +44,11 @@ let ConnectionImporter = class ConnectionImporter extends LitElement {
|
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
46
|
return html `
|
|
47
|
-
<ox-grist
|
|
47
|
+
<ox-grist
|
|
48
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
49
|
+
.config=${this.columns}
|
|
50
|
+
.data=${{ records: this.connections }}
|
|
51
|
+
></ox-grist>
|
|
48
52
|
|
|
49
53
|
<div class="button-container">
|
|
50
54
|
<button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
|
|
@@ -74,7 +78,7 @@ ConnectionImporter.styles = [
|
|
|
74
78
|
display: flex;
|
|
75
79
|
flex-direction: column;
|
|
76
80
|
|
|
77
|
-
background-color:
|
|
81
|
+
background-color: var(--md-sys-color-surface);
|
|
78
82
|
}
|
|
79
83
|
|
|
80
84
|
ox-grist {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connection-importer.js","sourceRoot":"","sources":["../../client/pages/connection-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGnE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAmBuB,YAAO,GAAQ;YACzC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;
|
|
1
|
+
{"version":3,"file":"connection-importer.js","sourceRoot":"","sources":["../../client/pages/connection-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGnE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAmBuB,YAAO,GAAQ;YACzC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;IA8BH,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;;;;yBAIpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAE3F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC7C,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AA5EM,yBAAM,GAAG;IACd,qBAAqB;IACrB,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;uDAAiB;AAC3C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDA6B1B;AAhDU,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CA8E9B;SA9EY,kBAAkB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'\n\n@customElement('connection-importer')\nexport class ConnectionImporter extends LitElement {\n static styles = [\n ButtonContainerStyles,\n CommonGristStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n ox-grist {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) connections: any\n @property({ type: Object }) columns: any = {\n list: { fields: ['name', 'description'] },\n pagination: { infinite: true },\n columns: [\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n width: 150\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n width: 200\n },\n {\n type: 'string',\n name: 'type',\n header: i18next.t('field.type'),\n width: 100\n },\n {\n type: 'string',\n name: 'endpoint',\n header: i18next.t('field.endpoint'),\n width: 120\n }\n ]\n }\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.columns}\n .data=${{ records: this.connections }}\n ></ox-grist>\n\n <div class=\"button-container\">\n <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n </div>\n `\n }\n\n async save() {\n const response = await client.mutate({\n mutation: gql`\n mutation importConnections($connections: [ConnectionPatch!]!) {\n importConnections(connections: $connections)\n }\n `,\n variables: { connections: this.connections }\n })\n\n if (response.errors?.length) return\n\n this.dispatchEvent(new CustomEvent('imported'))\n }\n}\n"]}
|
|
@@ -50,7 +50,14 @@ let Connection = class Connection extends connect(store)(localize(i18next)(PageV
|
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return html `
|
|
53
|
+
return html `
|
|
54
|
+
<ox-grist
|
|
55
|
+
.mode=${isMobileDevice() ? 'LIST' : 'GRID'}
|
|
56
|
+
.config=${this.gristConfig}
|
|
57
|
+
.fetchHandler=${this.fetchHandler.bind(this)}
|
|
58
|
+
>
|
|
59
|
+
</ox-grist>
|
|
60
|
+
`;
|
|
54
61
|
}
|
|
55
62
|
async pageInitialized() {
|
|
56
63
|
this.fetchConnectors();
|
|
@@ -437,7 +444,7 @@ Connection.styles = [
|
|
|
437
444
|
flex-direction: row;
|
|
438
445
|
justify-content: space-between;
|
|
439
446
|
|
|
440
|
-
background-color:
|
|
447
|
+
background-color: var(--md-sys-color-surface);
|
|
441
448
|
}
|
|
442
449
|
|
|
443
450
|
#filters > * {
|