@things-factory/operato-tools 7.0.1-alpha.9 → 7.0.1-alpha.90

Sign up to get free protection for your applications and to get access to all the features.
@@ -4,324 +4,393 @@ import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
4
4
  import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
5
5
  import { getRenderer } from '@operato/data-grist'
6
6
 
7
+ /**
8
+ * @license
9
+ * Copyright © HatioLab Inc. All rights reserved.
10
+ * @author Shortstop shortstop@hatiolab.com
11
+ * @description 메뉴 상세 화면 - 버튼 설정 탭 믹스인
12
+ */
7
13
  export const ButtonConfigTabMixin = baseElement =>
8
14
  class extends baseElement {
9
- setButtonConfigTabValues(data) {
10
- data?.forEach((column, index) => {
11
- let rank = index + 1
12
- column.rank = rank * 10
13
- column.id = rank
14
15
 
15
- if (column.logic && !column.logic.logic) {
16
- let logicString = JSON.stringify(column.logic, null, 2)
17
- column.logic = {}
18
- column.logic.logic = logicString
19
- }
16
+ /**
17
+ * @description 버튼 설정 설정 값을 화면 오브젝트에 설정
18
+ *************************************************
19
+ * @param {Object} 버튼 설정 데이터
20
+ */
21
+ setButtonConfigTabValues(data) {
22
+ data?.forEach((column, index) => {
23
+ let rank = index + 1
24
+ column.rank = rank * 10
25
+ column.id = rank
20
26
 
21
- if (column.style && Array.isArray(column.style)) {
22
- column.style = JSON.stringify(column.style, null, 2)
23
- }
24
- })
27
+ if (column.logic && !column.logic.logic) {
28
+ let logicString = JSON.stringify(column.logic, null, 2)
29
+ column.logic = {}
30
+ column.logic.logic = logicString
31
+ }
25
32
 
26
- this.viewButtonData = data
27
- this.buttonTabGrist?.fetch()
28
- }
33
+ if (column.style && Array.isArray(column.style)) {
34
+ column.style = JSON.stringify(column.style, null, 2)
35
+ }
36
+ })
29
37
 
30
- getButtonConfigTabValues() {
31
- // 기본 return object
32
- let retObject = {
33
- button: [],
34
- grid: {
35
- button: []
36
- }
38
+ this.viewButtonData = data
39
+ this.buttonTabGrist?.fetch()
40
+ }
41
+
42
+ /**
43
+ * @description 버튼 설정 탭 설정 값 리턴
44
+ ************************************
45
+ * @return {Object} 버튼 설정 데이터 리턴
46
+ */
47
+ getButtonConfigTabValues() {
48
+ // 기본 return object
49
+ let retObject = {
50
+ button: [],
51
+ grid: {
52
+ button: []
37
53
  }
54
+ }
38
55
 
39
- // grid 에서 데이터 가져오기
40
- let gridValue = this.getElementValueById('button-tab-grid')
56
+ // grid 에서 데이터 가져오기
57
+ let gridValue = this.getElementValueById('button-tab-grid')
41
58
 
42
- // rank 로 정렬
43
- this.sortRecordByRank(gridValue)?.forEach(x => {
44
- var { name = undefined, label = undefined, style = undefined, type = 'basic', logic = undefined, auth = undefined } = x
59
+ // rank 로 정렬
60
+ this.sortRecordByRank(gridValue)?.forEach(x => {
61
+ var { name = undefined, label = undefined, style = undefined, type = 'basic', logic = undefined, auth = undefined } = x
45
62
 
46
- if (!name) return
63
+ if (!name) return
47
64
 
48
- // 그리드, 일반 버튼 동일
49
- let button = {
50
- name: name,
51
- type: type.replaceAll('grid-', ''),
52
- label: label ? label : name,
53
- auth: auth
54
- }
65
+ // 그리드, 일반 버튼 동일
66
+ let button = {
67
+ name: name,
68
+ type: type.replaceAll('grid-', ''),
69
+ label: label ? label : name,
70
+ auth: auth
71
+ }
55
72
 
56
- // logic 이 있으면 반영
57
- if (logic) {
58
- if (typeof logic === 'string') {
59
- logic = JSON.parse(logic)
60
- }
73
+ // logic 이 있으면 반영
74
+ if (logic) {
75
+ if (typeof logic === 'string') {
76
+ logic = JSON.parse(logic)
77
+ }
61
78
 
62
- if (logic.logic) {
63
- button.logic = JSON.parse(logic.logic)
64
- }
79
+ if (logic.logic) {
80
+ button.logic = JSON.parse(logic.logic)
65
81
  }
82
+ }
66
83
 
67
- // grid 버튼은 icon / 일반 버튼은 style
68
- if (type.startsWith('grid')) {
69
- if (style) {
70
- style = style.trim()
71
- if (style.startsWith('[')) {
72
- style = JSON.parse(style)
73
- }
74
- button.icon = style
84
+ // grid 버튼은 icon / 일반 버튼은 style
85
+ if (type.startsWith('grid')) {
86
+ if (style) {
87
+ style = style.trim()
88
+ if (style.startsWith('[')) {
89
+ style = JSON.parse(style)
75
90
  }
76
- retObject.grid.button.push(button)
77
- } else {
78
- if (style) button.style = style
79
- retObject.button.push(button)
91
+ button.icon = style
80
92
  }
81
- })
93
+ retObject.grid.button.push(button)
94
+ } else {
95
+ if (style) button.style = style
96
+ retObject.button.push(button)
97
+ }
98
+ })
82
99
 
83
- return retObject
84
- }
100
+ return retObject
101
+ }
85
102
 
86
- renderButtonConfigTab() {
87
- return html`
88
- <ox-grist auto-fetch id="button-tab-grid" .config=${this.buttonTabGridConfig} .mode="GRID" .fetchHandler=${this.fetchButtonConfigTabHandler.bind(this)}>
89
- </ox-grist>
90
- `
91
- }
103
+ /**
104
+ * @description 렌더링
105
+ ***********************
106
+ */
107
+ renderButtonConfigTab() {
108
+ return html`
109
+ <ox-grist auto-fetch id="button-tab-grid" .config=${this.buttonTabGridConfig} .mode="GRID" .fetchHandler=${this.fetchButtonConfigTabHandler.bind(this)}>
110
+ </ox-grist>
111
+ `
112
+ }
92
113
 
93
- get buttonTabGrist() {
94
- return this.shadowRoot.querySelector('#button-tab-grid')
95
- }
114
+ /**
115
+ * @description 버튼 탭 그리드 오브젝트 리턴
116
+ **************************************
117
+ */
118
+ get buttonTabGrist() {
119
+ return this.shadowRoot.querySelector('#button-tab-grid')
120
+ }
96
121
 
97
- async fetchButtonConfigTabHandler() {
98
- return {
99
- total: 0,
100
- records: this.viewButtonData || []
101
- }
122
+ /**
123
+ * @description 버튼 설정 탭 화면 관련 정보 추출
124
+ *****************************************
125
+ */
126
+ async fetchButtonConfigTabHandler() {
127
+ return {
128
+ total: 0,
129
+ records: this.viewButtonData || []
102
130
  }
131
+ }
103
132
 
104
- setButtonConfigTabConfig() {
105
- // 그리드 설정
106
- this.buttonTabGridConfig = {
107
- rows: MetaApi.getGristSelectableConfig(true),
108
- pagination: { infinite: true },
109
- sorters: [{ name: 'rank', desc: false }],
110
- appendable: true,
111
- columns: [
112
- ...MetaApi.getGristGuttersConfig(false, false),
113
- {
114
- type: 'gutter',
115
- gutterName: 'button',
116
- icon: 'delete',
117
- handlers: {
118
- click: (_columns, _data, _column, record, _rowIndex) => {
119
- if (record.id) {
120
- this.deleteRow(this.buttonTabGrist, record)
121
- }
133
+ /**
134
+ * @description 버튼 설정 탭 화면 관련 정보 설정
135
+ *****************************************
136
+ */
137
+ setButtonConfigTabConfig() {
138
+ // 그리드 설정
139
+ this.buttonTabGridConfig = {
140
+ rows: MetaApi.getGristSelectableConfig(true),
141
+ pagination: { infinite: true },
142
+ sorters: [{ name: 'rank', desc: false }],
143
+ appendable: true,
144
+ columns: [
145
+ ...MetaApi.getGristGuttersConfig(false, false),
146
+ {
147
+ type: 'gutter',
148
+ gutterName: 'button',
149
+ icon: 'delete',
150
+ handlers: {
151
+ click: (_columns, _data, _column, record, _rowIndex) => {
152
+ if (record.id) {
153
+ this.deleteRow(this.buttonTabGrist, record)
122
154
  }
123
155
  }
124
- },
125
- {
126
- type: 'string',
127
- name: 'id',
128
- hidden: true
129
- },
130
- {
131
- type: 'integer',
132
- name: 'rank',
133
- header: TermsUtil.tLabel('rank'),
134
- sortable: false,
135
- width: 55,
136
- record: {
137
- align: 'right',
138
- editable: true,
139
- mandatory: true
140
- }
141
- },
142
- {
143
- type: 'string',
144
- name: 'name',
145
- header: TermsUtil.tLabel('name'),
146
- sortable: false,
147
- width: 150,
148
- record: {
149
- align: 'left',
150
- editable: true,
151
- mandatory: true
152
- }
153
- },
154
- {
155
- type: 'string',
156
- name: 'label',
157
- header: TermsUtil.tLabel('label'),
158
- sortable: false,
159
- width: 150,
160
- record: {
161
- align: 'left',
162
- editable: true,
163
- mandatory: true
164
- }
165
- },
166
- {
167
- type: 'string',
168
- name: 'display',
169
- header: TermsUtil.tLabel('display'),
170
- sortable: false,
171
- width: 150,
172
- record: {
173
- align: 'left',
174
- editable: false,
175
- mandatory: false,
176
- renderer: (value, column, record, rowIndex, field) => {
177
- let tLabel = record.label ? record.label : record.name
178
- return TermsUtil.tButton(tLabel)
179
- }
180
- }
181
- },
182
- {
183
- type: 'select',
184
- name: 'type',
185
- header: TermsUtil.tLabel('type'),
186
- sortable: false,
187
- width: 100,
188
- record: {
189
- align: 'left',
190
- editable: true,
191
- mandatory: true,
192
- options: ['', 'basic', 'custom', 'grid-basic', 'grid-custom']
193
- }
194
- },
195
- {
196
- type: 'string',
197
- name: 'style',
198
- header: TermsUtil.tLabel('style'),
199
- sortable: false,
200
- width: 100,
201
- record: {
202
- align: 'left',
203
- editable: true,
204
- mandatory: false
205
- }
206
- },
207
- {
208
- type: 'select',
209
- name: 'auth',
210
- header: TermsUtil.tLabel('auth'),
211
- sortable: false,
212
- width: 80,
213
- record: {
214
- align: 'left',
215
- editable: true,
216
- mandatory: true,
217
- options: [
218
- { value: '', display: '' },
219
- { value: 'R', display: 'SELECT' },
220
- { value: 'C', display: 'CREATE' },
221
- { value: 'U', display: 'UPDATE' },
222
- { value: 'D', display: 'DELETE' }
223
- ]
156
+ }
157
+ },
158
+ {
159
+ type: 'string',
160
+ name: 'id',
161
+ hidden: true
162
+ },
163
+ {
164
+ type: 'integer',
165
+ name: 'rank',
166
+ header: TermsUtil.tLabel('rank'),
167
+ sortable: false,
168
+ width: 55,
169
+ record: {
170
+ align: 'right',
171
+ editable: true,
172
+ mandatory: true
173
+ }
174
+ },
175
+ {
176
+ type: 'string',
177
+ name: 'name',
178
+ header: TermsUtil.tLabel('name'),
179
+ sortable: false,
180
+ width: 150,
181
+ record: {
182
+ align: 'left',
183
+ editable: true,
184
+ mandatory: true
185
+ }
186
+ },
187
+ {
188
+ type: 'string',
189
+ name: 'label',
190
+ header: TermsUtil.tLabel('label'),
191
+ sortable: false,
192
+ width: 150,
193
+ record: {
194
+ align: 'left',
195
+ editable: true,
196
+ mandatory: true
197
+ }
198
+ },
199
+ {
200
+ type: 'string',
201
+ name: 'display',
202
+ header: TermsUtil.tLabel('display'),
203
+ sortable: false,
204
+ width: 150,
205
+ record: {
206
+ align: 'left',
207
+ editable: false,
208
+ mandatory: false,
209
+ renderer: (value, column, record, rowIndex, field) => {
210
+ let tLabel = record.label ? record.label : record.name
211
+ return TermsUtil.tButton(tLabel)
224
212
  }
225
- },
226
- {
227
- type: 'parameters',
228
- name: 'logic',
229
- header: TermsUtil.tLabel('logic'),
230
- sortable: false,
231
- width: 390,
232
- record: {
233
- align: 'left',
234
- editable: true,
235
- mandatory: false,
236
- renderer: (value, column, record, rowIndex, field) => {
237
- if (!record.logic) {
238
- if (record.type === 'basic') {
239
- delete record.logic
240
- } else if (record.type === 'custom') {
241
- let guide = {
242
- logic: JSON.stringify(
243
- {
244
- open_popup: {
245
- title: 'menu.variables',
246
- title_detail: 'name',
247
- type: 'popup',
248
- menu: 'menu-routing',
249
- tagname: 'meta-grist-element',
250
- location: 'pages/meta-grist-element.js',
251
- size: 'large',
252
- popup_field: 'param_field',
253
- parent_field: 'id',
254
- param: ['filter', 'grist_one', 'grist_selected', 'grist_changed']
255
- },
256
- call_scenario: {
257
- type: 'scenario',
258
- name: 'testScenario',
259
- after: 'fetch',
260
- param: ['filter', 'grist_all', 'grist_selected']
261
- }
213
+ }
214
+ },
215
+ {
216
+ type: 'select',
217
+ name: 'type',
218
+ header: TermsUtil.tLabel('type'),
219
+ sortable: false,
220
+ width: 100,
221
+ record: {
222
+ align: 'left',
223
+ editable: true,
224
+ mandatory: true,
225
+ options: ['', 'basic', 'custom', 'grid-basic', 'grid-custom']
226
+ }
227
+ },
228
+ {
229
+ type: 'string',
230
+ name: 'style',
231
+ header: TermsUtil.tLabel('style'),
232
+ sortable: false,
233
+ width: 100,
234
+ record: {
235
+ align: 'left',
236
+ editable: true,
237
+ mandatory: false
238
+ }
239
+ },
240
+ {
241
+ type: 'select',
242
+ name: 'auth',
243
+ header: TermsUtil.tLabel('auth'),
244
+ sortable: false,
245
+ width: 80,
246
+ record: {
247
+ align: 'left',
248
+ editable: true,
249
+ mandatory: true,
250
+ options: [
251
+ { value: '', display: '' },
252
+ { value: 'R', display: 'SELECT' },
253
+ { value: 'C', display: 'CREATE' },
254
+ { value: 'U', display: 'UPDATE' },
255
+ { value: 'D', display: 'DELETE' }
256
+ ]
257
+ }
258
+ },
259
+ {
260
+ type: 'parameters',
261
+ name: 'logic',
262
+ header: TermsUtil.tLabel('logic'),
263
+ sortable: false,
264
+ width: 390,
265
+ record: {
266
+ align: 'left',
267
+ editable: true,
268
+ mandatory: false,
269
+ renderer: (value, column, record, rowIndex, field) => {
270
+ if (!record.logic) {
271
+ if (record.type === 'basic') {
272
+ delete record.logic
273
+ } else if (record.type === 'custom') {
274
+ let guide = {
275
+ logic: JSON.stringify(
276
+ {
277
+ open_popup: {
278
+ title: 'menu.variables',
279
+ title_detail: 'name',
280
+ type: 'popup',
281
+ menu: 'menu-routing',
282
+ tagname: 'meta-grist-element',
283
+ location: 'pages/meta-grist-element.js',
284
+ size: 'large',
285
+ popup_field: 'param_field',
286
+ parent_field: 'id',
287
+ param: ['filter', 'grist_one', 'grist_selected', 'grist_changed']
262
288
  },
263
- null,
264
- 2
265
- )
266
- }
267
- record.logic = guide
268
- } else if (record.type === 'grid-basic') {
269
- let guide = {
270
- logic: '"record-view"'
271
- }
272
- record.logic = guide
273
- } else if (record.type === 'grid-custom') {
274
- let guide = {
275
- logic: JSON.stringify(
276
- {
277
- open_popup: {
278
- title: 'menu.variables',
279
- title_detail: 'name',
280
- type: 'popup',
281
- menu: 'menu-routing',
282
- tagname: 'meta-grist-element',
283
- location: 'pages/meta-grist-element.js',
284
- size: 'large',
285
- popup_field: 'param_field',
286
- parent_field: 'id'
289
+ graphql: {
290
+ "type": "graphql",
291
+ "graphql_type": "mutation",
292
+ "mutation_name": "updateDocTemplate",
293
+ "mutation_type": "id-data",
294
+ "id_field": "id",
295
+ "param_type": "DocTemplatePatch",
296
+ "param_name": "patch",
297
+ "return_fields": "id",
298
+ "param": ["grist_one"],
299
+ "data": {
300
+ "id": "$id",
301
+ "name": "$name",
302
+ "description": "$description",
303
+ "cuFlag": "M"
287
304
  },
288
- open_form_popup: {
289
- type: 'form',
290
- title: 'title.detail',
291
- title_detail: 'name',
292
- size: 'large',
293
- menu: 'operation-master'
305
+ "after": "fetch"
306
+ },
307
+ call_scenario: {
308
+ type: 'scenario',
309
+ name: 'testScenario',
310
+ after: 'fetch',
311
+ param: ['filter', 'grist_all', 'grist_selected']
312
+ }
313
+ },
314
+ null,
315
+ 2
316
+ )
317
+ }
318
+ record.logic = guide
319
+ } else if (record.type === 'grid-basic') {
320
+ let guide = {
321
+ logic: '"record-view"'
322
+ }
323
+ record.logic = guide
324
+ } else if (record.type === 'grid-custom') {
325
+ let guide = {
326
+ logic: JSON.stringify(
327
+ {
328
+ open_popup: {
329
+ title: 'menu.variables',
330
+ title_detail: 'name',
331
+ type: 'popup',
332
+ menu: 'menu-routing',
333
+ tagname: 'meta-grist-element',
334
+ location: 'pages/meta-grist-element.js',
335
+ size: 'large',
336
+ popup_field: 'param_field',
337
+ parent_field: 'id'
338
+ },
339
+ open_form_popup: {
340
+ type: 'form',
341
+ title: 'title.detail',
342
+ title_detail: 'name',
343
+ size: 'large',
344
+ menu: 'operation-master'
345
+ },
346
+ graphql: {
347
+ "type": "graphql",
348
+ "graphql_type": "mutation",
349
+ "mutation_name": "updateDocTemplate",
350
+ "mutation_type": "id-data",
351
+ "id_field": "id",
352
+ "param_type": "DocTemplatePatch",
353
+ "param_name": "patch",
354
+ "return_fields": "id",
355
+ "param": ["grist_one"],
356
+ "data": {
357
+ "id": "$id",
358
+ "name": "$name",
359
+ "description": "$description",
360
+ "cuFlag": "M"
294
361
  },
295
- call_scenario: {
296
- type: 'scenario',
297
- name: 'testScenario',
298
- after: 'fetch'
299
- }
362
+ "after": "fetch"
300
363
  },
301
- null,
302
- 2
303
- )
304
- }
305
- record.logic = guide
306
- } else {
307
- record.logic = undefined
364
+ call_scenario: {
365
+ type: 'scenario',
366
+ name: 'testScenario',
367
+ after: 'fetch'
368
+ }
369
+ },
370
+ null,
371
+ 2
372
+ )
308
373
  }
374
+ record.logic = guide
309
375
  } else {
310
- if (record.type === 'basic') {
311
- record.logic = undefined
312
- }
376
+ record.logic = undefined
377
+ }
378
+ } else {
379
+ if (record.type === 'basic') {
380
+ record.logic = undefined
313
381
  }
314
- return getRenderer('json5')(value, column, record, rowIndex, field)
315
- },
316
- options: (value, column, record, row, field) => {
317
- var { name, help } = { name: TermsUtil.tLabel('logic'), help: '' }
318
- let spec = [{ label: 'script', name: 'logic', type: 'textarea' }]
319
- const context = this.buttonTabGrist
320
- return { name, spec, help, context }
321
382
  }
383
+ return getRenderer('json5')(value, column, record, rowIndex, field)
384
+ },
385
+ options: (value, column, record, row, field) => {
386
+ var { name, help } = { name: TermsUtil.tLabel('logic'), help: '' }
387
+ let spec = [{ label: 'script', name: 'logic', type: 'textarea' }]
388
+ const context = this.buttonTabGrist
389
+ return { name, spec, help, context }
322
390
  }
323
391
  }
324
- ]
325
- }
392
+ }
393
+ ]
326
394
  }
327
395
  }
396
+ }