@things-factory/integration-ui 7.0.10 → 7.0.13
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/editors/property-editor.ts +6 -3
- package/client/editors/{things-editor-oracle-procedure.ts → things-editor-db-procedure.ts} +100 -28
- package/dist-client/editors/property-editor.d.ts +1 -1
- package/dist-client/editors/property-editor.js +5 -3
- package/dist-client/editors/property-editor.js.map +1 -1
- package/dist-client/editors/{things-editor-oracle-procedure.d.ts → things-editor-db-procedure.d.ts} +5 -2
- package/dist-client/editors/{things-editor-oracle-procedure.js → things-editor-db-procedure.js} +92 -29
- package/dist-client/editors/things-editor-db-procedure.js.map +1 -0
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/dist-client/editors/things-editor-oracle-procedure.js.map +0 -1
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import './things-editor-http-headers'
|
|
5
5
|
import './things-editor-http-parameters'
|
|
6
6
|
import './things-editor-http-body'
|
|
7
|
-
import './things-editor-
|
|
7
|
+
import './things-editor-db-procedure'
|
|
8
8
|
import './things-editor-tag-scenarios'
|
|
9
9
|
|
|
10
10
|
import { html } from 'lit'
|
|
@@ -84,16 +84,19 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
|
|
|
84
84
|
editorTemplate(value, spec) {
|
|
85
85
|
/* context must be a datagrid(grist) instance, and host must be a record */
|
|
86
86
|
const { context: grid, host: record } = spec
|
|
87
|
+
const { dbtype = 'oracle' } = spec.property || {}
|
|
88
|
+
|
|
87
89
|
const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []
|
|
88
90
|
|
|
89
91
|
return html`
|
|
90
|
-
<things-editor-
|
|
92
|
+
<things-editor-db-procedure
|
|
91
93
|
id="editor"
|
|
92
94
|
.value=${value}
|
|
93
95
|
.properties=${spec.property}
|
|
94
96
|
.steps=${steps}
|
|
97
|
+
.dbtype=${dbtype}
|
|
95
98
|
fullwidth
|
|
96
|
-
></things-editor-
|
|
99
|
+
></things-editor-db-procedure>
|
|
97
100
|
`
|
|
98
101
|
}
|
|
99
102
|
}
|
|
@@ -25,16 +25,19 @@ type ValueType = {
|
|
|
25
25
|
parameters?: ProcedureParameterType[]
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
const NUMBERS = ['TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'READ', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY']
|
|
29
|
+
const PARAMETERIZED_TYPES = ['NCHAR', 'VARCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'DECIMAL', 'NUMERIC']
|
|
30
|
+
|
|
28
31
|
/**
|
|
29
32
|
input component for procedure-parameters
|
|
30
33
|
|
|
31
34
|
Example:
|
|
32
35
|
|
|
33
|
-
<things-editor-
|
|
36
|
+
<things-editor-db-procedure
|
|
34
37
|
value=${map}
|
|
35
|
-
</things-editor-
|
|
38
|
+
</things-editor-db-procedure>
|
|
36
39
|
*/
|
|
37
|
-
@customElement('things-editor-
|
|
40
|
+
@customElement('things-editor-db-procedure')
|
|
38
41
|
export class ThingsEditorProcedureParameters extends OxFormField {
|
|
39
42
|
static styles = [
|
|
40
43
|
css`
|
|
@@ -60,11 +63,12 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
60
63
|
padding: 4px 6px;
|
|
61
64
|
font-size: 1.5em;
|
|
62
65
|
display: flex;
|
|
66
|
+
border-radius: var(--spacing-small);
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
code {
|
|
66
70
|
flex: 1;
|
|
67
|
-
white-space:
|
|
71
|
+
white-space: pre;
|
|
68
72
|
min-height: 32px;
|
|
69
73
|
}
|
|
70
74
|
|
|
@@ -100,7 +104,6 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
100
104
|
border-bottom: var(--border-dim-color);
|
|
101
105
|
padding: var(--input-padding);
|
|
102
106
|
font: var(--input-font);
|
|
103
|
-
color: var(--primary-text-color);
|
|
104
107
|
min-width: 50px;
|
|
105
108
|
}
|
|
106
109
|
|
|
@@ -125,6 +128,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
125
128
|
|
|
126
129
|
@property({ type: Object }) value: ValueType = {}
|
|
127
130
|
@property({ type: Array }) steps: string[] = []
|
|
131
|
+
@property({ type: String }) dbtype: 'oracle' | 'mssql' = 'oracle'
|
|
128
132
|
|
|
129
133
|
@state() private procedure?: string = ''
|
|
130
134
|
@state() private parameters?: ProcedureParameterType[] = []
|
|
@@ -140,6 +144,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
140
144
|
const code = this.value?.code || ''
|
|
141
145
|
const parameters = this.parameters || []
|
|
142
146
|
const procedure = this.procedure || ''
|
|
147
|
+
const dbtype = this.dbtype || 'oracle'
|
|
143
148
|
|
|
144
149
|
const steps = this.steps || []
|
|
145
150
|
|
|
@@ -178,16 +183,21 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
178
183
|
<option value="Out" ?selected=${item.dir == 'Out'}>Out</option>
|
|
179
184
|
</select>
|
|
180
185
|
<select data-type placeholder="type" .value=${item.type}>
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
186
|
+
${dbtype == 'oracle' ? html`
|
|
187
|
+
<option value="" ?selected=${item.type == ''}> </option>
|
|
188
|
+
<option value="String" ?selected=${item.type == 'String'}>String</option>
|
|
189
|
+
<option value="Number" ?selected=${item.type == 'Number'}>Number</option>
|
|
190
|
+
<option value="Date" ?selected=${item.type == 'Date'}>Date</option>
|
|
191
|
+
<!--
|
|
192
|
+
<option value="Buffer" ?selected=${item.type == 'Buffer'}>Buffer</option>
|
|
193
|
+
<option value="Blob" ?selected=${item.type == 'Blob'}>Blob</option>
|
|
194
|
+
<option value="Clob" ?selected=${item.type == 'Clob'}>Clob</option>
|
|
195
|
+
-->
|
|
196
|
+
<option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
|
|
197
|
+
`: html`
|
|
198
|
+
<option value="" ?selected=${item.type == ''}> </option>
|
|
199
|
+
${['CHAR', 'VARCHAR', 'NCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'REAL', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY', 'SMALLDATETIME', 'DATE', 'TIME', 'DATETIME', 'DATETIME2', 'DATETIMEOFFSET'].map(type => html`<option value=${type} ?selected=${item.type == type}>${type}</option>`)}
|
|
200
|
+
`}
|
|
191
201
|
</select>
|
|
192
202
|
<input type="text" data-accessor placeholder="accessor" .value=${item.accessor || ''} list="step-list" />
|
|
193
203
|
<input type="text" data-val placeholder="val" .value=${item.val || ''} />
|
|
@@ -215,16 +225,22 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
215
225
|
<option value="Out">Out</option>
|
|
216
226
|
</select>
|
|
217
227
|
<select data-type placeholder="type" value="">
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
228
|
+
${dbtype == 'oracle' ? html`
|
|
229
|
+
<option value="" selected> </option>
|
|
230
|
+
<option value="String" >String</option>
|
|
231
|
+
<option value="Number" >Number</option>
|
|
232
|
+
<option value="Date" >Date</option>
|
|
233
|
+
<!--
|
|
223
234
|
<option value="Buffer">Buffer</option>
|
|
224
235
|
<option value="Blob">Blob</option>
|
|
225
236
|
<option value="Clob">Clob</option>
|
|
226
|
-
|
|
227
|
-
|
|
237
|
+
-->
|
|
238
|
+
<option value="Cursor">Cursor</option>
|
|
239
|
+
`: html`
|
|
240
|
+
<option value="" selected> </option>
|
|
241
|
+
${['CHAR', 'VARCHAR', 'NCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'REAL', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY', 'SMALLDATETIME', 'DATE', 'TIME', 'DATETIME', 'DATETIME2', 'DATETIMEOFFSET'].map(type => html`<option value=${type}>${type}</option>`)}
|
|
242
|
+
`}
|
|
243
|
+
|
|
228
244
|
</select>
|
|
229
245
|
<input type="text" data-accessor placeholder="accessor" value="" list="step-list" />
|
|
230
246
|
<input type="text" data-val placeholder="val" value="" />
|
|
@@ -246,7 +262,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
246
262
|
/* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */
|
|
247
263
|
const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value) as ValueType
|
|
248
264
|
|
|
249
|
-
const { procedure, parameters } = value
|
|
265
|
+
const { procedure, parameters } = value || {}
|
|
250
266
|
|
|
251
267
|
this.procedure = procedure
|
|
252
268
|
this.parameters = parameters
|
|
@@ -287,8 +303,16 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
287
303
|
} as ProcedureParameterType
|
|
288
304
|
|
|
289
305
|
if (
|
|
290
|
-
|
|
291
|
-
(type == 'String' || type == 'Buffer') &&
|
|
306
|
+
/* for oracle */
|
|
307
|
+
dir != 'In' && (type == 'String' || type == 'Buffer') &&
|
|
308
|
+
maxSize !== null &&
|
|
309
|
+
maxSize !== undefined &&
|
|
310
|
+
!isNaN(maxSize)
|
|
311
|
+
) {
|
|
312
|
+
entry.maxSize = maxSize
|
|
313
|
+
} else if (
|
|
314
|
+
/* for mssql */
|
|
315
|
+
(PARAMETERIZED_TYPES.includes(type)) &&
|
|
292
316
|
maxSize !== null &&
|
|
293
317
|
maxSize !== undefined &&
|
|
294
318
|
!isNaN(maxSize)
|
|
@@ -297,7 +321,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
297
321
|
}
|
|
298
322
|
|
|
299
323
|
if (dir != 'Out' && val !== null && val !== undefined && val != '') {
|
|
300
|
-
entry.val = type == 'Number' ? Number(val) : val
|
|
324
|
+
entry.val = type == 'Number' || NUMBERS.includes(type) ? Number(val) : val
|
|
301
325
|
}
|
|
302
326
|
|
|
303
327
|
return entry
|
|
@@ -339,11 +363,59 @@ export class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
339
363
|
this._updateValue()
|
|
340
364
|
}
|
|
341
365
|
|
|
342
|
-
|
|
366
|
+
_buildOracleCode() {
|
|
343
367
|
const args = (this.parameters || []).map(p => ':' + p.name).join(', ')
|
|
344
368
|
|
|
369
|
+
return `${this.procedure}(${args});`
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
_buildMssqlCode() {
|
|
373
|
+
const declareClauses = this.parameters
|
|
374
|
+
?.map(({ name, dir, type, val, maxSize = 0 }) => {
|
|
375
|
+
const ptype =
|
|
376
|
+
PARAMETERIZED_TYPES.includes(type) ? `${type}(${maxSize})` : type
|
|
377
|
+
|
|
378
|
+
if (dir == 'Out') {
|
|
379
|
+
return `DECLARE @${name} ${ptype};`
|
|
380
|
+
} else {
|
|
381
|
+
const pvalue = NUMBERS.includes(type) ? `${val}` : `'${val}'`
|
|
382
|
+
return `DECLARE @${name} ${ptype} ${pvalue};`
|
|
383
|
+
}
|
|
384
|
+
})
|
|
385
|
+
.join('\n')
|
|
386
|
+
|
|
387
|
+
const execClause =
|
|
388
|
+
[
|
|
389
|
+
`EXEC ${this.procedure}`,
|
|
390
|
+
...(this.parameters?.map(({ name, dir }, index, array) => {
|
|
391
|
+
const period = index === array.length - 1 ? '' : ','
|
|
392
|
+
|
|
393
|
+
if (dir == 'In') {
|
|
394
|
+
return ` @${name} = @${name}${period}`
|
|
395
|
+
} else {
|
|
396
|
+
return ` @${name} = @${name} OUTPUT${period}`
|
|
397
|
+
}
|
|
398
|
+
}) || [])
|
|
399
|
+
].join('\n') + ';'
|
|
400
|
+
|
|
401
|
+
const seleceClause =
|
|
402
|
+
`SELECT ` +
|
|
403
|
+
this.parameters
|
|
404
|
+
?.filter(({ dir }) => dir !== 'In')
|
|
405
|
+
.map(({ name }, index, array) => {
|
|
406
|
+
const period = index === array.length - 1 ? '' : ','
|
|
407
|
+
|
|
408
|
+
return `@${name} AS ${name}${period}`
|
|
409
|
+
})
|
|
410
|
+
.join(' ') +
|
|
411
|
+
';'
|
|
412
|
+
|
|
413
|
+
return [declareClauses, execClause, seleceClause].filter(Boolean).join('\n\n')
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
_updateValue() {
|
|
345
417
|
this.value = {
|
|
346
|
-
code:
|
|
418
|
+
code: this.dbtype == 'oracle' ? this._buildOracleCode() : this._buildMssqlCode(),
|
|
347
419
|
procedure: this.procedure,
|
|
348
420
|
parameters: this.parameters
|
|
349
421
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './things-editor-http-headers';
|
|
2
2
|
import './things-editor-http-parameters';
|
|
3
3
|
import './things-editor-http-body';
|
|
4
|
-
import './things-editor-
|
|
4
|
+
import './things-editor-db-procedure';
|
|
5
5
|
import './things-editor-tag-scenarios';
|
|
6
6
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
7
7
|
export declare class PropertyEditorScenarioStepInput extends OxPropertyEditor {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import './things-editor-http-headers';
|
|
5
5
|
import './things-editor-http-parameters';
|
|
6
6
|
import './things-editor-http-body';
|
|
7
|
-
import './things-editor-
|
|
7
|
+
import './things-editor-db-procedure';
|
|
8
8
|
import './things-editor-tag-scenarios';
|
|
9
9
|
import { html } from 'lit';
|
|
10
10
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
@@ -67,15 +67,17 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
|
|
|
67
67
|
editorTemplate(value, spec) {
|
|
68
68
|
/* context must be a datagrid(grist) instance, and host must be a record */
|
|
69
69
|
const { context: grid, host: record } = spec;
|
|
70
|
+
const { dbtype = 'oracle' } = spec.property || {};
|
|
70
71
|
const steps = (grid === null || grid === void 0 ? void 0 : grid.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name)) || [];
|
|
71
72
|
return html `
|
|
72
|
-
<things-editor-
|
|
73
|
+
<things-editor-db-procedure
|
|
73
74
|
id="editor"
|
|
74
75
|
.value=${value}
|
|
75
76
|
.properties=${spec.property}
|
|
76
77
|
.steps=${steps}
|
|
78
|
+
.dbtype=${dbtype}
|
|
77
79
|
fullwidth
|
|
78
|
-
></things-editor-
|
|
80
|
+
></things-editor-db-procedure>
|
|
79
81
|
`;
|
|
80
82
|
}
|
|
81
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,2BAA2B,CAAA;AAClC,OAAO,
|
|
1
|
+
{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-db-procedure'\nimport './things-editor-tag-scenarios'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n `\n }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n ></things-editor-http-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n `\n }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const { dbtype = 'oracle' } = spec.property || {}\n\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <things-editor-db-procedure\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n .steps=${steps}\n .dbtype=${dbtype}\n fullwidth\n ></things-editor-db-procedure>\n `\n }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n\nexport class PropertyEditorTagScenarios extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <things-editor-tag-scenarios\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n .steps=${steps}\n fullwidth\n ></things-editor-tag-scenarios>\n `\n }\n}\n\ncustomElements.define('property-editor-tag-scenarios', PropertyEditorTagScenarios)\n"]}
|
package/dist-client/editors/{things-editor-oracle-procedure.d.ts → things-editor-db-procedure.d.ts}
RENAMED
|
@@ -22,14 +22,15 @@ type ValueType = {
|
|
|
22
22
|
|
|
23
23
|
Example:
|
|
24
24
|
|
|
25
|
-
<things-editor-
|
|
25
|
+
<things-editor-db-procedure
|
|
26
26
|
value=${map}
|
|
27
|
-
</things-editor-
|
|
27
|
+
</things-editor-db-procedure>
|
|
28
28
|
*/
|
|
29
29
|
export declare class ThingsEditorProcedureParameters extends OxFormField {
|
|
30
30
|
static styles: import("lit").CSSResult[];
|
|
31
31
|
value: ValueType;
|
|
32
32
|
steps: string[];
|
|
33
|
+
dbtype: 'oracle' | 'mssql';
|
|
33
34
|
private procedure?;
|
|
34
35
|
private parameters?;
|
|
35
36
|
private _changingNow;
|
|
@@ -40,6 +41,8 @@ export declare class ThingsEditorProcedureParameters extends OxFormField {
|
|
|
40
41
|
_onChange(e: Event): void;
|
|
41
42
|
_adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType;
|
|
42
43
|
_build(includeNewRecord?: boolean): void;
|
|
44
|
+
_buildOracleCode(): string;
|
|
45
|
+
_buildMssqlCode(): string;
|
|
43
46
|
_updateValue(): void;
|
|
44
47
|
_add(): void;
|
|
45
48
|
_delete(e: MouseEvent): void;
|
package/dist-client/editors/{things-editor-oracle-procedure.js → things-editor-db-procedure.js}
RENAMED
|
@@ -7,20 +7,23 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property, queryAll, state } from 'lit/decorators.js';
|
|
9
9
|
import { OxFormField } from '@operato/input';
|
|
10
|
+
const NUMBERS = ['TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'READ', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY'];
|
|
11
|
+
const PARAMETERIZED_TYPES = ['NCHAR', 'VARCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'DECIMAL', 'NUMERIC'];
|
|
10
12
|
/**
|
|
11
13
|
input component for procedure-parameters
|
|
12
14
|
|
|
13
15
|
Example:
|
|
14
16
|
|
|
15
|
-
<things-editor-
|
|
17
|
+
<things-editor-db-procedure
|
|
16
18
|
value=${map}
|
|
17
|
-
</things-editor-
|
|
19
|
+
</things-editor-db-procedure>
|
|
18
20
|
*/
|
|
19
21
|
let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters extends OxFormField {
|
|
20
22
|
constructor() {
|
|
21
23
|
super(...arguments);
|
|
22
24
|
this.value = {};
|
|
23
25
|
this.steps = [];
|
|
26
|
+
this.dbtype = 'oracle';
|
|
24
27
|
this.procedure = '';
|
|
25
28
|
this.parameters = [];
|
|
26
29
|
this._changingNow = false;
|
|
@@ -33,6 +36,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
33
36
|
const code = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.code) || '';
|
|
34
37
|
const parameters = this.parameters || [];
|
|
35
38
|
const procedure = this.procedure || '';
|
|
39
|
+
const dbtype = this.dbtype || 'oracle';
|
|
36
40
|
const steps = this.steps || [];
|
|
37
41
|
return html `
|
|
38
42
|
<div>
|
|
@@ -68,16 +72,21 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
68
72
|
<option value="Out" ?selected=${item.dir == 'Out'}>Out</option>
|
|
69
73
|
</select>
|
|
70
74
|
<select data-type placeholder="type" .value=${item.type}>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
${dbtype == 'oracle' ? html `
|
|
76
|
+
<option value="" ?selected=${item.type == ''}> </option>
|
|
77
|
+
<option value="String" ?selected=${item.type == 'String'}>String</option>
|
|
78
|
+
<option value="Number" ?selected=${item.type == 'Number'}>Number</option>
|
|
79
|
+
<option value="Date" ?selected=${item.type == 'Date'}>Date</option>
|
|
80
|
+
<!--
|
|
81
|
+
<option value="Buffer" ?selected=${item.type == 'Buffer'}>Buffer</option>
|
|
82
|
+
<option value="Blob" ?selected=${item.type == 'Blob'}>Blob</option>
|
|
83
|
+
<option value="Clob" ?selected=${item.type == 'Clob'}>Clob</option>
|
|
84
|
+
-->
|
|
85
|
+
<option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
|
|
86
|
+
` : html `
|
|
87
|
+
<option value="" ?selected=${item.type == ''}> </option>
|
|
88
|
+
${['CHAR', 'VARCHAR', 'NCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'REAL', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY', 'SMALLDATETIME', 'DATE', 'TIME', 'DATETIME', 'DATETIME2', 'DATETIMEOFFSET'].map(type => html `<option value=${type} ?selected=${item.type == type}>${type}</option>`)}
|
|
89
|
+
`}
|
|
81
90
|
</select>
|
|
82
91
|
<input type="text" data-accessor placeholder="accessor" .value=${item.accessor || ''} list="step-list" />
|
|
83
92
|
<input type="text" data-val placeholder="val" .value=${item.val || ''} />
|
|
@@ -104,16 +113,22 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
104
113
|
<option value="Out">Out</option>
|
|
105
114
|
</select>
|
|
106
115
|
<select data-type placeholder="type" value="">
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
116
|
+
${dbtype == 'oracle' ? html `
|
|
117
|
+
<option value="" selected> </option>
|
|
118
|
+
<option value="String" >String</option>
|
|
119
|
+
<option value="Number" >Number</option>
|
|
120
|
+
<option value="Date" >Date</option>
|
|
121
|
+
<!--
|
|
112
122
|
<option value="Buffer">Buffer</option>
|
|
113
123
|
<option value="Blob">Blob</option>
|
|
114
124
|
<option value="Clob">Clob</option>
|
|
115
|
-
|
|
116
|
-
|
|
125
|
+
-->
|
|
126
|
+
<option value="Cursor">Cursor</option>
|
|
127
|
+
` : html `
|
|
128
|
+
<option value="" selected> </option>
|
|
129
|
+
${['CHAR', 'VARCHAR', 'NCHAR', 'NVARCHAR', 'TEXT', 'NTEXT', 'TINYINT', 'SMALLINT', 'INT', 'BIGINT', 'FLOAT', 'REAL', 'DECIMAL', 'NUMERIC', 'MONEY', 'SMALLMONEY', 'SMALLDATETIME', 'DATE', 'TIME', 'DATETIME', 'DATETIME2', 'DATETIMEOFFSET'].map(type => html `<option value=${type}>${type}</option>`)}
|
|
130
|
+
`}
|
|
131
|
+
|
|
117
132
|
</select>
|
|
118
133
|
<input type="text" data-accessor placeholder="accessor" value="" list="step-list" />
|
|
119
134
|
<input type="text" data-val placeholder="val" value="" />
|
|
@@ -133,7 +148,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
133
148
|
if (changes.has('value')) {
|
|
134
149
|
/* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */
|
|
135
150
|
const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value);
|
|
136
|
-
const { procedure, parameters } = value;
|
|
151
|
+
const { procedure, parameters } = value || {};
|
|
137
152
|
this.procedure = procedure;
|
|
138
153
|
this.parameters = parameters;
|
|
139
154
|
}
|
|
@@ -166,15 +181,24 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
166
181
|
dir,
|
|
167
182
|
accessor: accessor && String(accessor).trim()
|
|
168
183
|
};
|
|
169
|
-
if (
|
|
170
|
-
|
|
184
|
+
if (
|
|
185
|
+
/* for oracle */
|
|
186
|
+
dir != 'In' && (type == 'String' || type == 'Buffer') &&
|
|
187
|
+
maxSize !== null &&
|
|
188
|
+
maxSize !== undefined &&
|
|
189
|
+
!isNaN(maxSize)) {
|
|
190
|
+
entry.maxSize = maxSize;
|
|
191
|
+
}
|
|
192
|
+
else if (
|
|
193
|
+
/* for mssql */
|
|
194
|
+
(PARAMETERIZED_TYPES.includes(type)) &&
|
|
171
195
|
maxSize !== null &&
|
|
172
196
|
maxSize !== undefined &&
|
|
173
197
|
!isNaN(maxSize)) {
|
|
174
198
|
entry.maxSize = maxSize;
|
|
175
199
|
}
|
|
176
200
|
if (dir != 'Out' && val !== null && val !== undefined && val != '') {
|
|
177
|
-
entry.val = type == 'Number' ? Number(val) : val;
|
|
201
|
+
entry.val = type == 'Number' || NUMBERS.includes(type) ? Number(val) : val;
|
|
178
202
|
}
|
|
179
203
|
return entry;
|
|
180
204
|
}
|
|
@@ -205,10 +229,45 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
|
|
|
205
229
|
this.parameters = newmap;
|
|
206
230
|
this._updateValue();
|
|
207
231
|
}
|
|
208
|
-
|
|
232
|
+
_buildOracleCode() {
|
|
209
233
|
const args = (this.parameters || []).map(p => ':' + p.name).join(', ');
|
|
234
|
+
return `${this.procedure}(${args});`;
|
|
235
|
+
}
|
|
236
|
+
_buildMssqlCode() {
|
|
237
|
+
var _a, _b, _c;
|
|
238
|
+
const declareClauses = (_a = this.parameters) === null || _a === void 0 ? void 0 : _a.map(({ name, dir, type, val, maxSize = 0 }) => {
|
|
239
|
+
const ptype = PARAMETERIZED_TYPES.includes(type) ? `${type}(${maxSize})` : type;
|
|
240
|
+
if (dir == 'Out') {
|
|
241
|
+
return `DECLARE @${name} ${ptype};`;
|
|
242
|
+
}
|
|
243
|
+
else {
|
|
244
|
+
const pvalue = NUMBERS.includes(type) ? `${val}` : `'${val}'`;
|
|
245
|
+
return `DECLARE @${name} ${ptype} ${pvalue};`;
|
|
246
|
+
}
|
|
247
|
+
}).join('\n');
|
|
248
|
+
const execClause = [
|
|
249
|
+
`EXEC ${this.procedure}`,
|
|
250
|
+
...(((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.map(({ name, dir }, index, array) => {
|
|
251
|
+
const period = index === array.length - 1 ? '' : ',';
|
|
252
|
+
if (dir == 'In') {
|
|
253
|
+
return ` @${name} = @${name}${period}`;
|
|
254
|
+
}
|
|
255
|
+
else {
|
|
256
|
+
return ` @${name} = @${name} OUTPUT${period}`;
|
|
257
|
+
}
|
|
258
|
+
})) || [])
|
|
259
|
+
].join('\n') + ';';
|
|
260
|
+
const seleceClause = `SELECT ` +
|
|
261
|
+
((_c = this.parameters) === null || _c === void 0 ? void 0 : _c.filter(({ dir }) => dir !== 'In').map(({ name }, index, array) => {
|
|
262
|
+
const period = index === array.length - 1 ? '' : ',';
|
|
263
|
+
return `@${name} AS ${name}${period}`;
|
|
264
|
+
}).join(' ')) +
|
|
265
|
+
';';
|
|
266
|
+
return [declareClauses, execClause, seleceClause].filter(Boolean).join('\n\n');
|
|
267
|
+
}
|
|
268
|
+
_updateValue() {
|
|
210
269
|
this.value = {
|
|
211
|
-
code:
|
|
270
|
+
code: this.dbtype == 'oracle' ? this._buildOracleCode() : this._buildMssqlCode(),
|
|
212
271
|
procedure: this.procedure,
|
|
213
272
|
parameters: this.parameters
|
|
214
273
|
};
|
|
@@ -293,11 +352,12 @@ ThingsEditorProcedureParameters.styles = [
|
|
|
293
352
|
padding: 4px 6px;
|
|
294
353
|
font-size: 1.5em;
|
|
295
354
|
display: flex;
|
|
355
|
+
border-radius: var(--spacing-small);
|
|
296
356
|
}
|
|
297
357
|
|
|
298
358
|
code {
|
|
299
359
|
flex: 1;
|
|
300
|
-
white-space:
|
|
360
|
+
white-space: pre;
|
|
301
361
|
min-height: 32px;
|
|
302
362
|
}
|
|
303
363
|
|
|
@@ -333,7 +393,6 @@ ThingsEditorProcedureParameters.styles = [
|
|
|
333
393
|
border-bottom: var(--border-dim-color);
|
|
334
394
|
padding: var(--input-padding);
|
|
335
395
|
font: var(--input-font);
|
|
336
|
-
color: var(--primary-text-color);
|
|
337
396
|
min-width: 50px;
|
|
338
397
|
}
|
|
339
398
|
|
|
@@ -363,6 +422,10 @@ __decorate([
|
|
|
363
422
|
property({ type: Array }),
|
|
364
423
|
__metadata("design:type", Array)
|
|
365
424
|
], ThingsEditorProcedureParameters.prototype, "steps", void 0);
|
|
425
|
+
__decorate([
|
|
426
|
+
property({ type: String }),
|
|
427
|
+
__metadata("design:type", String)
|
|
428
|
+
], ThingsEditorProcedureParameters.prototype, "dbtype", void 0);
|
|
366
429
|
__decorate([
|
|
367
430
|
state(),
|
|
368
431
|
__metadata("design:type", String)
|
|
@@ -376,7 +439,7 @@ __decorate([
|
|
|
376
439
|
__metadata("design:type", Object)
|
|
377
440
|
], ThingsEditorProcedureParameters.prototype, "records", void 0);
|
|
378
441
|
ThingsEditorProcedureParameters = __decorate([
|
|
379
|
-
customElement('things-editor-
|
|
442
|
+
customElement('things-editor-db-procedure')
|
|
380
443
|
], ThingsEditorProcedureParameters);
|
|
381
444
|
export { ThingsEditorProcedureParameters };
|
|
382
|
-
//# sourceMappingURL=things-editor-
|
|
445
|
+
//# sourceMappingURL=things-editor-db-procedure.js.map
|