@agung_dhewe/webapps 1.1.2 → 1.2.4

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.
Files changed (94) hide show
  1. package/lib/fgta5js-dist/fgta5js-v1.8.5.min.js +11 -0
  2. package/lib/fgta5js-dist/fgta5js-v1.8.5.min.js.map +1 -0
  3. package/{libs → lib}/webmodule/module-edit.css +73 -18
  4. package/{libs → lib}/webmodule/module-list.css +13 -0
  5. package/lib/webmodule/module-print.css +28 -0
  6. package/{libs → lib}/webmodule/module.css +13 -6
  7. package/{libs → lib}/webmodule/module.js +14 -4
  8. package/lib/webmodule/pagehelper.mjs +129 -0
  9. package/modules/generator/appgen-io.mjs +153 -76
  10. package/modules/generator/appgen-ui.mjs +234 -167
  11. package/modules/generator/generator-designtemplate-def.html +38 -0
  12. package/modules/generator/generator-designtemplate.html +11 -1492
  13. package/modules/generator/generator.css +103 -65
  14. package/modules/generator/generator.mjs +1 -1
  15. package/modules/generator/generator.svg +98 -0
  16. package/modules/generator/generatorEdit.mjs +43 -35
  17. package/modules/generator/generatorList.mjs +27 -0
  18. package/modules/generator/tpl-designerinfo.html +100 -0
  19. package/modules/generator/tpl-field-checkbox.html +200 -0
  20. package/modules/generator/tpl-field-combobox.html +228 -0
  21. package/modules/generator/tpl-field-datepicker.html +192 -0
  22. package/modules/generator/tpl-field-filebox.html +189 -0
  23. package/modules/generator/tpl-field-numberbox.html +218 -0
  24. package/modules/generator/tpl-field-textbox.html +255 -0
  25. package/modules/generator/tpl-field-timepicker.html +192 -0
  26. package/modules/generator/tpl-searchdesign.html +32 -0
  27. package/modules/generator/tpl-uniquedesign.html +25 -0
  28. package/modules/login/login.css +10 -2
  29. package/package.json +5 -3
  30. package/percobaan/coba-sequencer.js +16 -0
  31. package/src/api.js +12 -9
  32. package/src/apis/generator.api.js +35 -23
  33. package/src/apis/login.api.js +1 -0
  34. package/src/context.js +12 -2
  35. package/src/db.js +58 -32
  36. package/src/generator/createApiModule.js +4 -1
  37. package/src/generator/createIcon.js +24 -2
  38. package/src/generator/createLayoutCss.js +107 -0
  39. package/src/generator/createModuleDetilEditHtml.js +12 -1
  40. package/src/generator/createModuleDetilEditMjs.js +32 -28
  41. package/src/generator/createModuleDetilListHtml.js +14 -7
  42. package/src/generator/createModuleDetilListMjs.js +13 -1
  43. package/src/generator/createModuleHeaderEditHtml.js +13 -1
  44. package/src/generator/createModuleHeaderEditMjs.js +23 -2
  45. package/src/generator/createProgramData.js +3 -2
  46. package/src/generator/createTable.js +42 -38
  47. package/src/generator/helper.js +45 -27
  48. package/src/generator/templates/__rollup-module copy.ejs +90 -0
  49. package/src/generator/templates/__rollup-module.ejs +102 -31
  50. package/src/generator/templates/api-module.js.ejs +171 -32
  51. package/src/generator/templates/layout.css.ejs +24 -0
  52. package/src/generator/templates/module-ext.html.ejs +1 -1
  53. package/src/generator/templates/module-ext.mjs.ejs +19 -1
  54. package/src/generator/templates/module.ejs.ejs +8 -0
  55. package/src/generator/templates/module.mjs.ejs +42 -5
  56. package/src/generator/templates/moduleDetilEdit.html.ejs +11 -0
  57. package/src/generator/templates/moduleDetilEdit.mjs.ejs +135 -30
  58. package/src/generator/templates/moduleDetilList.html.ejs +2 -1
  59. package/src/generator/templates/moduleDetilList.mjs.ejs +86 -11
  60. package/src/generator/templates/moduleHeaderEdit.html.ejs +8 -1
  61. package/src/generator/templates/moduleHeaderEdit.mjs.ejs +123 -36
  62. package/src/generator/templates/moduleHeaderList.html.ejs +5 -1
  63. package/src/generator/templates/moduleHeaderList.mjs.ejs +47 -15
  64. package/src/generator/trygenerate.js +18 -2
  65. package/src/generator/worker.js +83 -72
  66. package/src/helper.js +12 -13
  67. package/src/logger.js +12 -12
  68. package/src/notifier.js +29 -0
  69. package/src/routers/generatorApi.js +9 -3
  70. package/src/routers/generatorPage.js +3 -1
  71. package/src/routers/moduleApi.js +1 -1
  72. package/src/routers/modulePage.js +42 -7
  73. package/src/sequencerdoc.js +22 -46
  74. package/src/sequencerline.js +16 -4
  75. package/src/session.js +69 -33
  76. package/src/startup.js +47 -10
  77. package/src/webapps.js +62 -18
  78. package/templates/_lib_debug.ejs +8 -8
  79. package/templates/_lib_production.ejs +2 -2
  80. package/templates/application.page.ejs +43 -8
  81. package/templates/generator.page.ejs +4 -3
  82. package/templates/index.page.ejs +2 -2
  83. package/templates/login.page.ejs +3 -3
  84. package/libs/fgta5js-dist/fgta5js-v1.8.3.min.js +0 -11
  85. package/libs/fgta5js-dist/fgta5js-v1.8.3.min.js.map +0 -1
  86. package/libs/webmodule/pagehelper.mjs +0 -45
  87. package/modules/generator/generator.png +0 -0
  88. /package/{libs/fgta5js-dist/fgta5js-v1.8.3.min.css → lib/fgta5js-dist/fgta5js-v1.8.5.min.css} +0 -0
  89. /package/{libs → lib}/fgta5js-dist/fonts/karla-italic-latin-ext.woff2 +0 -0
  90. /package/{libs → lib}/fgta5js-dist/fonts/karla-italic-latin.woff2 +0 -0
  91. /package/{libs → lib}/fgta5js-dist/fonts/karla-normal-latin-ext.woff2 +0 -0
  92. /package/{libs → lib}/fgta5js-dist/fonts/karla-normal-latin.woff2 +0 -0
  93. /package/{libs → lib}/fgta5js-dist/fonts/karla.css +0 -0
  94. /package/{libs → lib}/webmodule/module-footer.css +0 -0
package/modules/generator/tpl-field-combobox.html ADDED
@@ -0,0 +1,228 @@
1
+ <!-- COMBOBOX -->
2
+ <div name="design-data-field" class="design-data-field" data-template="combobox">
3
+ <div name="component-type" data-detil data-fieldtitle>
4
+ <div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
5
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
6
+ <div name="icon" class="design-data-field-icon">
7
+ <svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
8
+ <rect x="3" y="8" width="42" height="32" fill="#fff" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
9
+ <path d="m8.4 13 15.591 22 17.009-22z"/>
10
+ </svg>
11
+ </div>
12
+ <div name="title">
13
+ Combobox
14
+ </div>
15
+ <div class="field-remove-button">
16
+ </div>
17
+ </div>
18
+ </div>
19
+
20
+ <div data-detil data-fieldform>
21
+ <!-- 1 2 3 4 5 6 -->
22
+ <label>Field name</label><div>
23
+ <input type="text" name="fieldname"></div>
24
+
25
+ <label>Type</label>
26
+ <div>
27
+ <select name="datatype">
28
+ <option value="varchar" selected>varchar</option>
29
+ <option value="char">char</option>
30
+ <option value="text">text</option>
31
+ <option value="smallint">small integer</option>
32
+ <option value="int">integer</option>
33
+ <option value="bigint">bigint</option>
34
+ </select>
35
+ </div>
36
+
37
+ <label>Length</label>
38
+ <div>
39
+ <input type="number" name="datalength" value="30">
40
+ <input type="hidden" name="dataprecission" value="0">
41
+ </div>
42
+
43
+
44
+
45
+ <label>Default Value</label>
46
+ <div>
47
+ <input name="defaultvalue" type="text" >
48
+ </div>
49
+ <div></div>
50
+ <label >
51
+ <input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);" checked>
52
+ Allow Null
53
+ </label>
54
+ <div></div>
55
+ <div></div>
56
+
57
+
58
+ <label>Description</label>
59
+ <div style="grid-column: span 5;">
60
+ <input name="description" type="text" >
61
+ </div>
62
+
63
+
64
+ <div>
65
+ <input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
66
+ </div>
67
+ <div style="grid-column: span 5; display: flex; align-items: center;">
68
+ <label>
69
+ <input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
70
+ Show in GridView
71
+ </label>
72
+ <label style="margin-left: 40px">
73
+ <input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
74
+ Show in Form
75
+ </label>
76
+ <label style="margin-left: 20px">
77
+ <input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
78
+ Disabled
79
+ </label>
80
+ </div>
81
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
82
+
83
+
84
+ <label>Object Name</label>
85
+ <input type="text" name="objectname">
86
+ <div style="grid-column: span 4;"></div>
87
+
88
+ <label>D.Position</label>
89
+ <div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
90
+ <label style="transform: translateY(-1px); margin-left: 20px">Row</label>
91
+ <input type="text" name="input-dposrow" style="width: 30px" value="auto">
92
+
93
+ <label style="transform: translateY(-1px);">Span</label>
94
+ <input type="text" name="input-dposrowspan" style="width: 30px">
95
+
96
+ <label style="transform: translateY(-1px); margin-left: 50px">Col</label>
97
+ <input type="text" name="input-dposcol" style="width: 30px" value="1">
98
+
99
+ <label style="transform: translateY(-1px);">Span</label>
100
+ <input type="text" name="input-dposcolspan" style="width: 30px" value="2">
101
+
102
+ <label style="transform: translateY(-1px); margin-left: 50px">Style</label>
103
+ <input type="text" name="input-dposstyle" style="width: 100%">
104
+ </div>
105
+
106
+ <label>Label Text</label>
107
+ <input type="text" name="labeltext">
108
+
109
+ <label>Placeholder</label>
110
+ <div style="grid-column: span 3;">
111
+ <input type="text" name="placeholder">
112
+ </div>
113
+
114
+ <label>Information</label>
115
+ <div style="grid-column: span 5;">
116
+ <input name="information" type="text" >
117
+ </div>
118
+
119
+
120
+ <label>Container CSS</label>
121
+ <input type="text" name="input-containercss">
122
+
123
+ <label>InLine Style</label>
124
+ <div style="grid-column: span 3;">
125
+ <input type="text" name="input-inlinestyle">
126
+ </div>
127
+
128
+
129
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
130
+ <label>Grid</label>
131
+ <div style="grid-column: span 5;" name="validation">
132
+
133
+ <label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
134
+ <input name="gridformatter" type="text">
135
+
136
+ <label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
137
+ <input name="gridcss" type="text">
138
+
139
+ <label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
140
+ <input name="gridinlinestyle" type="text">
141
+
142
+ <label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
143
+ <div style="display: flex">
144
+ <input type="text" name="index" value="0" style="width: 50px">
145
+ <label style="margin-left: 20px">
146
+ <input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
147
+ Sorting
148
+ </label>
149
+ </div>
150
+
151
+ </div>
152
+
153
+
154
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
155
+ <label>Validation</label>
156
+ <div style="grid-column: span 5;" name="validation">
157
+
158
+ <div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
159
+ <input type="text" name="msg_invalid_default" placeholder="invalid message">
160
+
161
+ <label>
162
+ <input name="isrequired" type="checkbox" value="1" style="transform: translateY(2px);">
163
+ Required
164
+ </label>
165
+ <div></div>
166
+ <input name="msg_invalid_required" type="text" placeholder="invalid message">
167
+
168
+ <label style="grid-column: span 2;">
169
+ <input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
170
+ Custom Validator
171
+ </label>
172
+ <input name="validator" type="text" >
173
+ </div>
174
+
175
+
176
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
177
+ <label>Reference</label>
178
+ <input type="text" name="ref_table" placeholder="table">
179
+ <label>Binding</label>
180
+ <div style="grid-column: span 3; display: flex; gap: 10px" >
181
+ <div><input type="text" name="ref_id" placeholder="value fieldname"></div>
182
+ <div><input type="text" name="ref_text" placeholder="text fieldname"></div>
183
+ <div><input type="text" name="ref_display" placeholder="display as"></div>
184
+ </div>
185
+
186
+ <label>Loader API</label>
187
+ <input type="text" name="loaderapimodule" placeholder="apps name">
188
+ <div style="grid-column: span 4;" >
189
+ <input type="text" name="loaderapipath" placeholder="path">
190
+ </div>
191
+
192
+
193
+
194
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
195
+ <label name="validation" style="transform: translateY(10px);">Handle Event</label>
196
+ <div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
197
+
198
+ <label>
199
+ <input name="ishandleselecting" type="checkbox" value="1" style="transform: translateY(2px);" value="1" checked disabled>
200
+ Selecting
201
+ </label>
202
+
203
+ <label>
204
+ <input name="ishandleselected" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
205
+ Selected
206
+ </label>
207
+
208
+ <label>
209
+ <input name="ishandlepopulating" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
210
+ Populating
211
+ </label>
212
+
213
+ <label>
214
+ <input name="ishandleloadingdata" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
215
+ LoadingData
216
+ </label>
217
+ </div>
218
+ </div>
219
+ <div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
220
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
221
+ <div name="icon" class="design-data-field-icon"></div>
222
+ <div name="title">
223
+ <input type="text" name="fieldname-summary" placeholder="texcomboboxt field name">
224
+ </div>
225
+ <div class="field-remove-button">
226
+ </div>
227
+ </div>
228
+ </div>
package/modules/generator/tpl-field-datepicker.html ADDED
@@ -0,0 +1,192 @@
1
+ <!-- DATEPICKER -->
2
+ <div name="design-data-field" class="design-data-field" data-template="datepicker">
3
+ <div name="component-type" data-detil data-fieldtitle>
4
+ <div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
5
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
6
+ <div name="icon" class="design-data-field-icon">
7
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
8
+ <path d="M3 8h42v32H3z" style="fill:#fff;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"/>
9
+ <path d="M9 13h30v5H9z" style="fill:#000;stroke:#000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"/>
10
+ <path d="M17.741 24.561v15.263h-4.217V29.823q-1.024.778-1.986 1.26-.952.48-2.396.92v-3.419q2.13-.686 3.307-1.648t1.842-2.375zm4.607.256h12.171v2.815q-1.586 1.433-2.65 3.102-1.29 2.027-2.038 4.515-.594 1.934-.798 4.575h-4.157q.492-3.675 1.546-6.162t3.337-5.323h-7.411z" aria-label="17" style="font-size:20.9652px;font-family:&quot;Arial Black&quot;;-inkscape-font-specification:&quot;Arial Black, Normal&quot;;stroke-width:4;stroke-linecap:round;stroke-linejoin:round" transform="scale(1.07634 .92908)"/>
11
+ </svg>
12
+ </div>
13
+ <div name="title">
14
+ Datepicker
15
+ </div>
16
+ <div class="field-remove-button">
17
+ </div>
18
+ </div>
19
+ </div>
20
+
21
+ <div data-detil data-fieldform>
22
+ <!-- 1 2 3 4 5 6 -->
23
+ <label>Field name</label><div>
24
+ <input type="text" name="fieldname"></div>
25
+
26
+ <label>Type</label>
27
+ <div>
28
+ <select name="datatype">
29
+ <option value="date" selected>date</option>
30
+ </select>
31
+ </div>
32
+
33
+ <label>Length</label>
34
+ <div>
35
+ <input type="number" name="datalength" value="8" disabled>
36
+ <input type="hidden" name="dataprecission" value="0">
37
+ </div>
38
+
39
+
40
+
41
+ <label>Default Value</label>
42
+ <div>
43
+ <input name="defaultvalue" type="text" disabled value="now()">
44
+ </div>
45
+ <div></div>
46
+ <label >
47
+ <input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);" checked>
48
+ Allow Null
49
+ </label>
50
+ <div></div>
51
+ <div></div>
52
+
53
+
54
+
55
+ <label>Description</label>
56
+ <div style="grid-column: span 5;">
57
+ <input name="description" type="text" >
58
+ </div>
59
+
60
+
61
+ <div>
62
+ <input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
63
+ </div>
64
+ <div style="grid-column: span 5; display: flex; align-items: center;">
65
+ <label>
66
+ <input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
67
+ Show in GridView
68
+ </label>
69
+ <label style="margin-left: 40px">
70
+ <input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
71
+ Show in Form
72
+ </label>
73
+ <label style="margin-left: 20px">
74
+ <input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
75
+ Disabled
76
+ </label>
77
+ </div>
78
+
79
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
80
+
81
+
82
+ <label>Object Name</label>
83
+ <input type="text" name="objectname">
84
+ <div style="grid-column: span 4;"></div>
85
+
86
+ <label>D.Position</label>
87
+ <div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
88
+ <label style="transform: translateY(-1px); margin-left: 20px">Row</label>
89
+ <input type="text" name="input-dposrow" style="width: 30px" value="auto">
90
+
91
+ <label style="transform: translateY(-1px);">Span</label>
92
+ <input type="text" name="input-dposrowspan" style="width: 30px">
93
+
94
+ <label style="transform: translateY(-1px); margin-left: 50px">Col</label>
95
+ <input type="text" name="input-dposcol" style="width: 30px" value="1">
96
+
97
+ <label style="transform: translateY(-1px);">Span</label>
98
+ <input type="text" name="input-dposcolspan" style="width: 30px" value="2">
99
+
100
+ <label style="transform: translateY(-1px); margin-left: 50px">Style</label>
101
+ <input type="text" name="input-dposstyle" style="width: 100%">
102
+ </div>
103
+
104
+ <label>Label Text</label>
105
+ <input type="text" name="labeltext">
106
+
107
+ <label>Placeholder</label>
108
+ <div style="grid-column: span 3;">
109
+ <input type="text" name="placeholder">
110
+ </div>
111
+
112
+
113
+ <label>Information</label>
114
+ <div style="grid-column: span 5;">
115
+ <input name="information" type="text" >
116
+ </div>
117
+
118
+ <label>Container CSS</label>
119
+ <input type="text" name="input-containercss">
120
+
121
+ <label>InLine Style</label>
122
+ <div style="grid-column: span 3;">
123
+ <input type="text" name="input-inlinestyle">
124
+ </div>
125
+
126
+
127
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
128
+ <label>Grid</label>
129
+ <div style="grid-column: span 5;" name="validation">
130
+
131
+ <label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
132
+ <input name="gridformatter" type="text" value="dateshort(v)">
133
+
134
+ <label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
135
+ <input name="gridcss" type="text">
136
+
137
+ <label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
138
+ <input name="gridinlinestyle" type="text">
139
+
140
+ <label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
141
+ <div style="display: flex">
142
+ <input type="text" name="index" value="0" style="width: 50px">
143
+ <label style="margin-left: 20px">
144
+ <input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
145
+ Sorting
146
+ </label>
147
+ </div>
148
+
149
+ </div>
150
+
151
+
152
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
153
+ <label>Validation</label>
154
+ <div style="grid-column: span 5;" name="validation">
155
+
156
+ <div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
157
+ <input type="text" name="msg_invalid_default" placeholder="invalid message">
158
+
159
+ <label>
160
+ <input name="isrequired" type="checkbox" value="1" style="transform: translateY(2px);">
161
+ Required
162
+ </label>
163
+ <div></div>
164
+ <input name="msg_invalid_required" type="text" placeholder="invalid message">
165
+
166
+ <label style="grid-column: span 2;">
167
+ <input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
168
+ Custom Validator
169
+ </label>
170
+ <input name="validator" type="text" >
171
+
172
+ </div>
173
+
174
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
175
+ <label name="validation" style="transform: translateY(10px);">Handle Event</label>
176
+ <div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
177
+ <label>
178
+ <input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
179
+ Changed
180
+ </label>
181
+ </div>
182
+ </div>
183
+ <div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
184
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
185
+ <div name="icon" class="design-data-field-icon"></div>
186
+ <div name="title">
187
+ <input type="text" name="fieldname-summary" placeholder="date field name">
188
+ </div>
189
+ <div class="field-remove-button">
190
+ </div>
191
+ </div>
192
+ </div>
package/modules/generator/tpl-field-filebox.html ADDED
@@ -0,0 +1,189 @@
1
+ <!-- FILEBOX -->
2
+ <div name="design-data-field" class="design-data-field" data-template="filebox">
3
+ <div name="component-type" data-detil data-fieldtitle>
4
+ <div style="display: flex; justify-content: left; align-items: center; gap: 5px;" field-handle-bar class="field-handle-bar">
5
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
6
+ <div name="icon" class="design-data-field-icon">
7
+ <svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
8
+ <path d="m6 31v6h36v-6" fill="none" stroke="#000" stroke-linecap="square" stroke-width="6"/>
9
+ <path d="m19 29h10v-7h11l-16-15-16 15h11z"/>
10
+ </svg>
11
+ </div>
12
+ <div name="title">
13
+ Filebox
14
+ </div>
15
+ <div class="field-remove-button">
16
+ </div>
17
+ </div>
18
+ </div>
19
+
20
+ <div data-detil data-fieldform>
21
+ <!-- 1 2 3 4 5 6 -->
22
+ <label>Field name</label><div>
23
+ <input type="text" name="fieldname"></div>
24
+
25
+ <label>Type</label>
26
+ <div>
27
+ <select name="datatype">
28
+ <option value="text" selected>text</option>
29
+ </select>
30
+ </div>
31
+
32
+ <label>Length</label>
33
+ <div>
34
+ <input type="number" name="datalength" value="255">
35
+ <input type="hidden" name="dataprecission" value="0">
36
+ </div>
37
+
38
+
39
+
40
+ <label>Default Value</label>
41
+ <div>
42
+ <input name="defaultvalue" type="text" >
43
+ </div>
44
+ <div></div>
45
+ <label >
46
+ <input name="allownull" type="checkbox" value="1" style="transform: translateY(2px);" checked>
47
+ Allow Null
48
+ </label>
49
+ <div></div>
50
+ <div></div>
51
+
52
+
53
+ <label>Description</label>
54
+ <div style="grid-column: span 5;">
55
+ <input name="description" type="text" >
56
+ </div>
57
+
58
+
59
+
60
+
61
+ <div>
62
+ <input type="text" style="visibility: hidden;"> <!-- agar tinggi baris tidak terlihat sempet, karena di baris ini hanya checkbox-->
63
+ </div>
64
+ <div style="grid-column: span 5; display: flex; align-items: center;">
65
+ <label>
66
+ <input type="checkbox" name="showingrid" style="transform: translateY(2px);" checked >
67
+ Show in GridView
68
+ </label>
69
+ <label style="margin-left: 40px">
70
+ <input type="checkbox" name="showinform" style="transform: translateY(2px);" checked>
71
+ Show in Form
72
+ </label>
73
+ <label style="margin-left: 20px">
74
+ <input type="checkbox" name="disabledinform" style="transform: translateY(2px);">
75
+ Disabled
76
+ </label>
77
+ </div>
78
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
79
+
80
+
81
+ <label>Object Name</label>
82
+ <input type="text" name="objectname">
83
+ <div style="grid-column: span 4;"></div>
84
+
85
+ <label>D.Position</label>
86
+ <div style="grid-column: span 5; display: flex; column-gap: 10px; align-items: center;">
87
+ <label style="transform: translateY(-1px); margin-left: 20px">Row</label>
88
+ <input type="text" name="input-dposrow" style="width: 30px" value="auto">
89
+
90
+ <label style="transform: translateY(-1px);">Span</label>
91
+ <input type="text" name="input-dposrowspan" style="width: 30px">
92
+
93
+ <label style="transform: translateY(-1px); margin-left: 50px">Col</label>
94
+ <input type="text" name="input-dposcol" style="width: 30px" value="1">
95
+
96
+ <label style="transform: translateY(-1px);">Span</label>
97
+ <input type="text" name="input-dposcolspan" style="width: 30px" value="2">
98
+
99
+ <label style="transform: translateY(-1px); margin-left: 50px">Style</label>
100
+ <input type="text" name="input-dposstyle" style="width: 100%">
101
+ </div>
102
+
103
+ <label>Label Text</label>
104
+ <input type="text" name="labeltext">
105
+
106
+ <label>Placeholder</label>
107
+ <div style="grid-column: span 3;">
108
+ <input type="text" name="placeholder">
109
+ </div>
110
+
111
+ <label>Information</label>
112
+ <div style="grid-column: span 5;">
113
+ <input name="information" type="text" >
114
+ </div>
115
+
116
+ <label>Container CSS</label>
117
+ <input type="text" name="input-containercss">
118
+
119
+ <label>InLine Style</label>
120
+ <div style="grid-column: span 3;">
121
+ <input type="text" name="input-inlinestyle">
122
+ </div>
123
+
124
+
125
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
126
+ <label>Grid</label>
127
+ <div style="grid-column: span 5;" name="validation">
128
+
129
+ <label style="grid-column: span 2; transform: translateY(5px); ">Formatter</label>
130
+ <input name="gridformatter" type="text">
131
+
132
+ <label style="grid-column: span 2; transform: translateY(5px); ">CSS</label>
133
+ <input name="gridcss" type="text">
134
+
135
+ <label style="grid-column: span 2; transform: translateY(5px); ">Inline Style</label>
136
+ <input name="gridinlinestyle" type="text">
137
+
138
+ <label style="grid-column: span 2; transform: translateY(5px); ">Index</label>
139
+ <div style="display: flex">
140
+ <input type="text" name="index" value="0" style="width: 50px">
141
+ <label style="margin-left: 20px">
142
+ <input name="gridsorting" type="checkbox" value="1" style="transform: translateY(2px);" >
143
+ Sorting
144
+ </label>
145
+ </div>
146
+
147
+ </div>
148
+
149
+
150
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
151
+ <label>Validation</label>
152
+ <div style="grid-column: span 5;" name="validation">
153
+
154
+ <div name="defaultinvalidmessage" style="grid-column: span 2;">Default Invalid Message</div>
155
+ <input type="text" name="msg_invalid_default" placeholder="invalid message">
156
+
157
+ <label>
158
+ <input name="isrequired" type="checkbox" value="1" style="transform: translateY(2px);">
159
+ Required
160
+ </label>
161
+ <div></div>
162
+ <input name="msg_invalid_required" type="text" placeholder="invalid message">
163
+
164
+ <label style="grid-column: span 2;">
165
+ <input name="hascustomvalidator" type="checkbox" value="1" style="transform: translateY(2px);" >
166
+ Custom Validator
167
+ </label>
168
+ <input name="validator" type="text" >
169
+ </div>
170
+
171
+ <div style="display: block; height: 1rem; grid-column: span 6;"></div>
172
+ <label name="validation" style="transform: translateY(10px);">Handle Event</label>
173
+ <div style="grid-column: span 5; padding-left: 10px; display: flex; gap: 30px; flex-wrap: wrap;" >
174
+ <label>
175
+ <input name="ishandlechanged" type="checkbox" value="1" style="transform: translateY(2px);" value="1">
176
+ Changed
177
+ </label>
178
+ </div>
179
+ </div>
180
+ <div name="component-summary" data-summary style="display: none;" draggable="true" field-handle-bar class="field-handle-bar">
181
+ <div name="icon-pk" class="design-data-field-icon-pk"></div>
182
+ <div name="icon" class="design-data-field-icon"></div>
183
+ <div name="title">
184
+ <input type="text" name="fieldname-summary" placeholder="filebox field name">
185
+ </div>
186
+ <div class="field-remove-button">
187
+ </div>
188
+ </div>
189
+ </div>