@things-factory/operato-tools 7.0.1-alpha.31 → 7.0.1-alpha.34

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.
@@ -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
+ }
@@ -140,7 +140,7 @@ body {
140
140
  --label-color: var(--secondary-color);
141
141
  --label-text-transform: capitalize;
142
142
  --input-margin: var(--margin-narrow) 0;
143
- --input-padding: var(--padding-default);
143
+ --input-padding: 6px 2px;
144
144
  --input-min-width: 200px;
145
145
  --input-font: normal var(--fontsize-default) var(--theme-font);
146
146
  --input-hint-font: normal var(--fontsize-small) var(--theme-font);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/operato-tools",
3
- "version": "7.0.1-alpha.31",
3
+ "version": "7.0.1-alpha.34",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "client/index.js",
6
6
  "things-factory": true,
@@ -41,7 +41,7 @@
41
41
  },
42
42
  "devDependencies": {
43
43
  "@things-factory/builder": "^7.0.1-alpha.29",
44
- "@things-factory/meta-ui": "^7.0.1-alpha.31"
44
+ "@things-factory/meta-ui": "^7.0.1-alpha.34"
45
45
  },
46
- "gitHead": "7bedb49d231cfa3735343edfa7f63ad8f208e92a"
46
+ "gitHead": "d3b1e48a7f78d56a57f80fee3d548d43883187a5"
47
47
  }