zet-lib 1.0.56 → 1.0.58
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/lib/Form.js +666 -649
- package/lib/zRoleRouter.js +6 -6
- package/lib/zRoute.js +87 -2
- package/package.json +1 -1
package/lib/Form.js
CHANGED
|
@@ -3,388 +3,396 @@
|
|
|
3
3
|
* Created by sintret dev on 8/23/2021.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
const Util = require(
|
|
6
|
+
const Util = require('./Util')
|
|
7
7
|
|
|
8
|
-
const Form = {}
|
|
8
|
+
const Form = {}
|
|
9
9
|
const addProperties = (obj, defaultObj = {}) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
10
|
+
let html = ''
|
|
11
|
+
for (var key in obj) {
|
|
12
|
+
var value = defaultObj.hasOwnProperty(key) ? defaultObj[key] + obj[key] : obj[key]
|
|
13
|
+
html += ` ${key}="${obj[key]}" `
|
|
14
|
+
}
|
|
15
|
+
return html
|
|
16
|
+
}
|
|
17
17
|
|
|
18
18
|
Form.options = {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
19
|
+
button: {
|
|
20
|
+
id: 'form-submit',
|
|
21
|
+
type: 'button',
|
|
22
|
+
class: 'btn btn-success boxy',
|
|
23
|
+
label: `<img src="/assets/icons/send.svg" class="icons-bg-white" > Submit`,
|
|
24
|
+
},
|
|
25
|
+
field: {},
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
Form.label = (field, label, required, htmlOptions = '') => {
|
|
29
|
+
required = required || false
|
|
30
|
+
const mark = required ? '*' : ''
|
|
31
|
+
return `<label for="${field}">${label} ${mark} ${htmlOptions}</label>`
|
|
32
|
+
}
|
|
34
33
|
|
|
35
34
|
Form.textarea = (obj) => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
35
|
+
obj.type = 'textarea'
|
|
36
|
+
return Form.field(obj)
|
|
37
|
+
}
|
|
39
38
|
|
|
40
39
|
Form.input = (obj) => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
40
|
+
obj.type = 'input'
|
|
41
|
+
return Form.field(obj)
|
|
42
|
+
}
|
|
44
43
|
|
|
45
44
|
Form.addProperty = (property, options = []) => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
45
|
+
///We expect options to be a non-empty Array
|
|
46
|
+
if (!options.length) return
|
|
47
|
+
var optionsString = options.join(' ')
|
|
48
|
+
return ` ${property}="${optionsString}" `
|
|
49
|
+
}
|
|
51
50
|
|
|
52
51
|
Form.field = (obj) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
52
|
+
//options and default options
|
|
53
|
+
let options = obj.options || {}
|
|
54
|
+
let htmlOptions = ''
|
|
55
|
+
for (let key in options) {
|
|
56
|
+
let val = options[key]
|
|
57
|
+
val = Util.replaceAll(val, '"', '')
|
|
58
|
+
if (obj.hasOwnProperty(key)) {
|
|
59
|
+
obj[key] = options[key]
|
|
60
|
+
} else {
|
|
61
|
+
htmlOptions += ` ${key}=${val} `
|
|
64
62
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
63
|
+
}
|
|
64
|
+
let type = obj.type || 'text',
|
|
65
|
+
id = Form.addProperty('id', [obj.id]),
|
|
66
|
+
name = obj.name ? ` name="${obj.name}" ` : '',
|
|
67
|
+
title = obj.title || '',
|
|
68
|
+
prepend = obj.prepend || '',
|
|
69
|
+
append = obj.append || '',
|
|
70
|
+
placeholder = Form.addProperty('placeholder', [obj.placeholder]),
|
|
71
|
+
tabindex = Form.addProperty('tabindex', [obj.tabindex]),
|
|
72
|
+
value = obj.value == undefined ? '' : obj.value,
|
|
73
|
+
classview = obj.class ? ` class="${obj.class}" ` : ` class=" " `,
|
|
74
|
+
disabled = obj.disabled ? ` disabled="disabled" ` : '',
|
|
75
|
+
data = obj.data,
|
|
76
|
+
required = obj.required == true ? ` required ` : '',
|
|
77
|
+
table = !obj.table ? '' : obj.table,
|
|
78
|
+
frameworkcss = !obj.frameworkcss ? 'bootstrap5' : obj.frameworkcss,
|
|
79
|
+
form_css = !obj.form_css ? 'bootstrap' : obj.form_css,
|
|
80
|
+
attributes = !obj.attributes ? {} : obj.attributes,
|
|
81
|
+
style = !obj.style ? '' : ` style=${obj.style} `,
|
|
82
|
+
information = !obj.information ? '' : `<div id="information-${obj.id}" class="form-text">${Util.replaceAll(obj.information.substring(1, obj.information.length - 1), '\r\n', '<br>')}</div>`
|
|
83
|
+
//replaceAll("\r\n","<br>")
|
|
84
|
+
let attributeDate = ''
|
|
85
|
+
if (obj.hasOwnProperty.attributeData) {
|
|
86
|
+
for (let key in obj.attributeData) {
|
|
87
|
+
attributeDate += ` data-${key}="${obj.attributeData[key]}" `
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
let hasInputGroup = false
|
|
91
|
+
let inputGroupLeft = '',
|
|
92
|
+
inputGroupRight = '',
|
|
93
|
+
inputGroupDivLeft = ''
|
|
94
|
+
if (attributes.hasOwnProperty('hasInputGroup') && attributes.hasInputGroup) {
|
|
95
|
+
hasInputGroup = true
|
|
96
|
+
prepend = `<div class="input-group mb-3">`
|
|
97
|
+
append = `</div>`
|
|
98
|
+
if (attributes.hasOwnProperty('inputGroupLeft') && attributes.inputGroupLeft) {
|
|
99
|
+
inputGroupLeft = `<span class="input-group-text">${attributes.inputGroupLeft}</span>`
|
|
100
|
+
}
|
|
101
|
+
if (attributes.hasOwnProperty('inputGroupRight') && attributes.inputGroupRight) {
|
|
102
|
+
inputGroupRight = `<span class="input-group-text">${attributes.inputGroupRight}</span>`
|
|
91
103
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
104
|
+
}
|
|
105
|
+
let displayForm = ''
|
|
106
|
+
let readonly = obj.readonly ? `readonly` : ``
|
|
107
|
+
let boxyclass = '',
|
|
108
|
+
checked = '',
|
|
109
|
+
selects = ''
|
|
110
|
+
switch (type) {
|
|
111
|
+
case 'text':
|
|
112
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" ${disabled} ${readonly} autofocus="" ${tabindex} type="${type}" ${classview} ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
113
|
+
break
|
|
114
|
+
|
|
115
|
+
case 'checkbox':
|
|
116
|
+
checked = value == 1 ? 'checked' : ''
|
|
117
|
+
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} ${disabled} ${readonly} ${style} type="checkbox" class="form-check-input ${obj.class}" ${id} ${name} ${checked} ${htmlOptions}>${information}${append}`
|
|
118
|
+
break
|
|
119
|
+
|
|
120
|
+
case 'tags':
|
|
121
|
+
classview = ` class="form-control tags ${obj.class ? obj.class : ''} " `
|
|
122
|
+
let datahtml = ''
|
|
123
|
+
if (value) {
|
|
124
|
+
let dataValue = []
|
|
125
|
+
if (typeof value == 'string') {
|
|
126
|
+
dataValue = JSON.parse(value) || []
|
|
127
|
+
} else {
|
|
128
|
+
dataValue = value || []
|
|
100
129
|
}
|
|
101
|
-
|
|
102
|
-
|
|
130
|
+
dataValue.forEach(function (item) {
|
|
131
|
+
datahtml += `<option value="${item}" selected="selected">${item}</option>`
|
|
132
|
+
})
|
|
133
|
+
}
|
|
134
|
+
displayForm = `${prepend}<select ${classview} ${id} ${name} ${placeholder} multiple data-allow-new="true">${datahtml}</select>${information}${append}`
|
|
135
|
+
break
|
|
136
|
+
|
|
137
|
+
case 'range':
|
|
138
|
+
let min = !obj.min ? 0 : obj.min
|
|
139
|
+
let max = !obj.max ? 100 : obj.max
|
|
140
|
+
displayForm = `${prepend}${inputGroupLeft}<input onmouseover="titlerange(this)" onchange="titlerange(this)" autocomplete="off" autofocus="" ${tabindex} type="${type}" class="form-range" step="1" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" min="${min}" max="${max}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
141
|
+
break
|
|
142
|
+
|
|
143
|
+
case 'hidden':
|
|
144
|
+
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} type="${type}" ${style} ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${append}`
|
|
145
|
+
break
|
|
146
|
+
|
|
147
|
+
case 'textarea':
|
|
148
|
+
displayForm = `${prepend}${inputGroupLeft}<textarea ${tabindex} ${disabled} ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${value}</textarea>${inputGroupRight}${information}${append}`
|
|
149
|
+
break
|
|
150
|
+
|
|
151
|
+
case 'image':
|
|
152
|
+
boxyclass = value ? 'boxy' : ''
|
|
153
|
+
let stringvalue = value ? value.substring(13) : ''
|
|
154
|
+
let trashicon = stringvalue ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : ''
|
|
155
|
+
displayForm = `${prepend}<input ${tabindex} type="file" accept="image/*" onchange="loadFile(this,'${obj.id}' )" data-width="${obj.width}" class="form-control ${obj.class || ''}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
156
|
+
<div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-table="${obj.routeName}" data-width="${obj.width}" data-name="${obj.title}" data-filename="${value}" data-required="${obj.required}"> <img class="mb-3" id="file${obj.id}" /><br><a class="text-success" target="_blank" href="/uploads/${
|
|
157
|
+
obj.routeName
|
|
158
|
+
}/${value}"> ${stringvalue}</a> ${trashicon}</div>${append}`
|
|
159
|
+
break
|
|
160
|
+
|
|
161
|
+
case 'file':
|
|
162
|
+
boxyclass = value ? 'boxy' : ''
|
|
163
|
+
let stringvaluefile = value ? value.substring(13) : ''
|
|
164
|
+
let trashiconfile = stringvaluefile ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : ''
|
|
165
|
+
displayForm = `${prepend}<input ${tabindex} type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,text/plain, application/pdf,.css,.js,.jpg,.png,.gif" onchange="loadFile(this,'${obj.id}' )" class="form-control ${
|
|
166
|
+
obj.class || ''
|
|
167
|
+
}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
168
|
+
<div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-name="${obj.title}" data-table="${obj.routeName}" data-filename="${value}" data-required="${obj.required}"> <img class="mb-3" id="file${obj.id}" /><a class="text-success" target="_blank" href="/uploads/${
|
|
169
|
+
obj.routeName
|
|
170
|
+
}/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`
|
|
171
|
+
break
|
|
172
|
+
|
|
173
|
+
case 'email':
|
|
174
|
+
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${readonly} ${disabled} ${tabindex} ${style} type="email" ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`
|
|
175
|
+
break
|
|
176
|
+
|
|
177
|
+
case 'number':
|
|
178
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control number ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
179
|
+
break
|
|
180
|
+
|
|
181
|
+
case 'integer':
|
|
182
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
183
|
+
break
|
|
184
|
+
|
|
185
|
+
case 'datepicker':
|
|
186
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control datepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
187
|
+
break
|
|
188
|
+
|
|
189
|
+
case 'datetimepicker':
|
|
190
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} type="text" ${style} class="form-control datetimepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
191
|
+
break
|
|
192
|
+
|
|
193
|
+
case 'password':
|
|
194
|
+
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="password" ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}><span toggle="#password" class="bx bi-eye field-icon toggle-password"></span>${inputGroupRight}${information}${append}`
|
|
195
|
+
break
|
|
196
|
+
|
|
197
|
+
case 'switch':
|
|
198
|
+
checked = value == 1 ? ' checked ' : ''
|
|
199
|
+
displayForm = `${prepend}<p><input ${tabindex} type="checkbox" ${classview} ${readonly} ${style} ${id} ${name} ${checked} ></p>${information}${append}`
|
|
200
|
+
break
|
|
201
|
+
|
|
202
|
+
case 'lexical':
|
|
203
|
+
displayForm = `${prepend}<div ${id}>${information}${append}`
|
|
204
|
+
break
|
|
205
|
+
|
|
206
|
+
case 'checkbox':
|
|
207
|
+
checked = value == 1 ? ' checked ' : ''
|
|
208
|
+
displayForm = `${prepend}<input ${tabindex} type="${type}" ${classview} ${readonly} ${style} ${id} ${name} ${checked} >${information}${append}`
|
|
209
|
+
break
|
|
210
|
+
|
|
211
|
+
case 'dropdown_checkbox':
|
|
212
|
+
let checkboxes = ''
|
|
213
|
+
let val = []
|
|
214
|
+
if (typeof value == 'object') {
|
|
215
|
+
val = value
|
|
216
|
+
} else if (typeof value == 'string') {
|
|
217
|
+
if (value) {
|
|
218
|
+
val = JSON.parse(value)
|
|
103
219
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
switch (type) {
|
|
109
|
-
case "text" :
|
|
110
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" ${disabled} ${readonly} autofocus="" ${tabindex} type="${type}" ${classview} ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
111
|
-
break;
|
|
112
|
-
|
|
113
|
-
case "checkbox" :
|
|
114
|
-
checked = value == 1 ? "checked" : "";
|
|
115
|
-
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} ${disabled} ${readonly} ${style} type="checkbox" class="form-check-input ${obj.class}" ${id} ${name} ${checked} ${htmlOptions}>${information}${append}`;
|
|
116
|
-
break;
|
|
117
|
-
|
|
118
|
-
case "tags" :
|
|
119
|
-
classview = ` class="form-control tags ${obj.class ? obj.class : ''} " `;
|
|
120
|
-
let datahtml = "";
|
|
121
|
-
if (value) {
|
|
122
|
-
let dataValue = [];
|
|
123
|
-
if(typeof value == "string") {
|
|
124
|
-
dataValue= JSON.parse(value) || [];
|
|
125
|
-
} else {
|
|
126
|
-
dataValue = value || [];
|
|
127
|
-
}
|
|
128
|
-
dataValue.forEach(function (item) {
|
|
129
|
-
datahtml += `<option value="${item}" selected="selected">${item}</option>`
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
displayForm = `${prepend}<select ${classview} ${id} ${name} ${placeholder} multiple data-allow-new="true">${datahtml}</select>${information}${append}`;
|
|
133
|
-
break;
|
|
134
|
-
|
|
135
|
-
case "range" :
|
|
136
|
-
let min = !obj.min ? 0 : obj.min;
|
|
137
|
-
let max = !obj.max ? 100 : obj.max;
|
|
138
|
-
displayForm = `${prepend}${inputGroupLeft}<input onmouseover="titlerange(this)" onchange="titlerange(this)" autocomplete="off" autofocus="" ${tabindex} type="${type}" class="form-range" step="1" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" min="${min}" max="${max}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
139
|
-
break;
|
|
140
|
-
|
|
141
|
-
case "hidden" :
|
|
142
|
-
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} type="${type}" ${style} ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${append}`;
|
|
143
|
-
break;
|
|
144
|
-
|
|
145
|
-
case "textarea" :
|
|
146
|
-
displayForm = `${prepend}${inputGroupLeft}<textarea ${tabindex} ${disabled} ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${value}</textarea>${inputGroupRight}${information}${append}`;
|
|
147
|
-
break;
|
|
148
|
-
|
|
149
|
-
case "image" :
|
|
150
|
-
boxyclass = value ? "boxy" : "";
|
|
151
|
-
let stringvalue = value ? value.substring(13) : '';
|
|
152
|
-
let trashicon = stringvalue ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : '';
|
|
153
|
-
displayForm = `${prepend}<input ${tabindex} type="file" accept="image/*" onchange="loadFile(this,'${obj.id}' )" data-width="${obj.width}" class="form-control ${obj.class || ''}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
154
|
-
<div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-table="${obj.routeName}" data-width="${obj.width}" data-name="${obj.title}" data-filename="${value}" data-required="${obj.required}"> <img class="mb-3" id="file${obj.id}" /><br><a class="text-success" target="_blank" href="/uploads/${obj.routeName}/${value}"> ${stringvalue}</a> ${trashicon}</div>${append}`;
|
|
155
|
-
break;
|
|
156
|
-
|
|
157
|
-
case "file" :
|
|
158
|
-
boxyclass = value ? "boxy" : "";
|
|
159
|
-
let stringvaluefile = value ? value.substring(13) : '';
|
|
160
|
-
let trashiconfile = stringvaluefile ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : '';
|
|
161
|
-
displayForm = `${prepend}<input ${tabindex} type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,text/plain, application/pdf,.css,.js,.jpg,.png,.gif" onchange="loadFile(this,'${obj.id}' )" class="form-control ${obj.class || ''}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
162
|
-
<div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-name="${obj.title}" data-table="${obj.routeName}" data-filename="${value}" data-required="${obj.required}"> <img class="mb-3" id="file${obj.id}" /><a class="text-success" target="_blank" href="/uploads/${obj.routeName}/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`;
|
|
163
|
-
break;
|
|
164
|
-
|
|
165
|
-
case "email" :
|
|
166
|
-
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${readonly} ${disabled} ${tabindex} ${style} type="email" ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`;
|
|
167
|
-
break;
|
|
168
|
-
|
|
169
|
-
case "number" :
|
|
170
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control number ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
171
|
-
break;
|
|
172
|
-
|
|
173
|
-
case "integer" :
|
|
174
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
175
|
-
break;
|
|
176
|
-
|
|
177
|
-
case "datepicker" :
|
|
178
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="text" class="form-control datepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
179
|
-
break;
|
|
180
|
-
|
|
181
|
-
case "datetimepicker" :
|
|
182
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} type="text" ${style} class="form-control datetimepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
|
|
183
|
-
break;
|
|
184
|
-
|
|
185
|
-
case "password" :
|
|
186
|
-
displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${tabindex} ${style} type="password" ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}><span toggle="#password" class="bx bi-eye field-icon toggle-password"></span>${inputGroupRight}${information}${append}`;
|
|
187
|
-
break;
|
|
188
|
-
|
|
189
|
-
case "switch" :
|
|
190
|
-
checked = value == 1 ? " checked " : "";
|
|
191
|
-
displayForm = `${prepend}<p><input ${tabindex} type="checkbox" ${classview} ${readonly} ${style} ${id} ${name} ${checked} ></p>${information}${append}`;
|
|
192
|
-
break;
|
|
193
|
-
|
|
194
|
-
case "lexical" :
|
|
195
|
-
displayForm = `${prepend}<div ${id}>${information}${append}`;
|
|
196
|
-
break;
|
|
197
|
-
|
|
198
|
-
case "checkbox" :
|
|
199
|
-
checked = value == 1 ? " checked " : "";
|
|
200
|
-
displayForm = `${prepend}<input ${tabindex} type="${type}" ${classview} ${readonly} ${style} ${id} ${name} ${checked} >${information}${append}`;
|
|
201
|
-
break;
|
|
202
|
-
|
|
203
|
-
case "dropdown_checkbox" :
|
|
204
|
-
let checkboxes = "";
|
|
205
|
-
let val = [];
|
|
206
|
-
if (typeof value == "object") {
|
|
207
|
-
val = value;
|
|
208
|
-
} else if (typeof value == "string") {
|
|
209
|
-
if (value) {
|
|
210
|
-
val = JSON.parse(value);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
data.forEach(function (item) {
|
|
214
|
-
const checked = Util.in_array(item, val) ? " checked " : "";
|
|
215
|
-
checkboxes += `<div class="checkbox">
|
|
220
|
+
}
|
|
221
|
+
data.forEach(function (item) {
|
|
222
|
+
const checked = Util.in_array(item, val) ? ' checked ' : ''
|
|
223
|
+
checkboxes += `<div class="checkbox">
|
|
216
224
|
<label class="">
|
|
217
225
|
<input type="checkbox" name="${obj.name}[${item}]" ${checked} value="${item}">
|
|
218
226
|
${item}
|
|
219
227
|
</label>
|
|
220
|
-
</div
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
} else {
|
|
253
|
-
if (Array.isArray(data)) {
|
|
254
|
-
data.map((item) => {
|
|
255
|
-
const selected = item.id == value ? ' selected ' : '';
|
|
256
|
-
selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`;
|
|
257
|
-
});
|
|
258
|
-
} else {
|
|
259
|
-
for (let keys in data) {
|
|
260
|
-
let selected = keys == value ? ' selected ' : '';
|
|
261
|
-
selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
if (form_css == "material_design") {
|
|
266
|
-
classview = Form.addProperty("class", ["selectpicker", obj.class]);
|
|
228
|
+
</div>`
|
|
229
|
+
})
|
|
230
|
+
displayForm = `${prepend}<div class="form-check">${checkboxes}</div>${information}${append}`
|
|
231
|
+
break
|
|
232
|
+
|
|
233
|
+
case 'select':
|
|
234
|
+
if (obj.hasOwnProperty('array')) {
|
|
235
|
+
var items = obj.array || []
|
|
236
|
+
var please_select = obj.please_select
|
|
237
|
+
if (please_select != undefined) {
|
|
238
|
+
if (please_select != '') {
|
|
239
|
+
selects += `<option value="">${please_select}</option>`
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
if (items.length) {
|
|
243
|
+
items.forEach(function (item) {
|
|
244
|
+
const selected = item.value == value ? ' selected ' : ''
|
|
245
|
+
selects += `<option value="${item.value}" ${selected}>${item.label}</option>`
|
|
246
|
+
})
|
|
247
|
+
} else {
|
|
248
|
+
if (Array.isArray(data)) {
|
|
249
|
+
data.map((item) => {
|
|
250
|
+
var selected = item.id == value ? ' selected ' : ''
|
|
251
|
+
selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
|
|
252
|
+
})
|
|
253
|
+
} else {
|
|
254
|
+
for (var keys in data) {
|
|
255
|
+
var selected = keys == value ? ' selected ' : ''
|
|
256
|
+
selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`
|
|
267
257
|
}
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
} else {
|
|
261
|
+
if (Array.isArray(data)) {
|
|
262
|
+
data.map((item) => {
|
|
263
|
+
const selected = item.id == value ? ' selected ' : ''
|
|
264
|
+
selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
|
|
265
|
+
})
|
|
266
|
+
} else {
|
|
267
|
+
for (let keys in data) {
|
|
268
|
+
let selected = keys == value ? ' selected ' : ''
|
|
269
|
+
selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
if (form_css == 'material_design') {
|
|
274
|
+
classview = Form.addProperty('class', ['selectpicker', obj.class])
|
|
275
|
+
}
|
|
276
|
+
displayForm = `${prepend}<select ${tabindex} ${style} ${disabled} ${readonly} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
|
|
277
|
+
break
|
|
278
|
+
|
|
279
|
+
case 'radio':
|
|
280
|
+
let radios = ''
|
|
281
|
+
let arr = obj.array || []
|
|
282
|
+
arr.map((item, index) => {
|
|
283
|
+
//var selected = item.value == value ? ' selected ' : '';
|
|
284
|
+
const checked = item.value == value ? ' checked ' : ''
|
|
285
|
+
radios += `<div class="form-check">
|
|
278
286
|
<input class="form-check-input" type="radio" name="${obj.name}" value="${item.value}" id="${obj.id}${index}" ${checked}>
|
|
279
287
|
<label class="form-check-label" for="${obj.id}${index}">
|
|
280
288
|
${item.label}
|
|
281
289
|
</label>
|
|
282
|
-
</div
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
290
|
+
</div>`
|
|
291
|
+
})
|
|
292
|
+
displayForm = `${prepend} ${radios} ${information}${append}`
|
|
293
|
+
break
|
|
294
|
+
|
|
295
|
+
case 'select_user':
|
|
296
|
+
selects = ''
|
|
297
|
+
data.map((item) => {
|
|
298
|
+
const selected = item.value == value ? ' selected ' : ''
|
|
299
|
+
selects += `<option value="${item.id}" ${selected}>${item.fullname}</option>`
|
|
300
|
+
})
|
|
301
|
+
|
|
302
|
+
if (form_css == 'material_design') {
|
|
303
|
+
classview = Form.addProperty('class', ['selectpicker', obj.class])
|
|
304
|
+
}
|
|
305
|
+
displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
|
|
306
|
+
break
|
|
307
|
+
|
|
308
|
+
case 'chain':
|
|
309
|
+
selects = ''
|
|
310
|
+
// for array item.value and item.text
|
|
311
|
+
// proptery is value and text
|
|
312
|
+
data.map((item) => {
|
|
313
|
+
var selected = item.id == value ? ' selected ' : ''
|
|
314
|
+
selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
|
|
315
|
+
})
|
|
316
|
+
if (form_css == 'material_design') {
|
|
317
|
+
classview = Form.addProperty('class', ['selectpicker', obj.class])
|
|
318
|
+
}
|
|
319
|
+
displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
|
|
320
|
+
break
|
|
321
|
+
|
|
322
|
+
case 'multi':
|
|
323
|
+
selects = ''
|
|
324
|
+
if (data) {
|
|
325
|
+
data.map((item) => {
|
|
326
|
+
var selected = value == item.id ? ' selected ' : ''
|
|
327
|
+
selects += `<option value="${item.id}" ${selected} >${item.zname}</option>`
|
|
328
|
+
})
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
var spanmulti = ''
|
|
332
|
+
if (value) {
|
|
333
|
+
let arr = []
|
|
334
|
+
arr = typeof value == 'string' ? JSON.parse(value) : value
|
|
335
|
+
if (Array.isArray(arr)) {
|
|
336
|
+
arr.forEach(function (item, index) {
|
|
337
|
+
spanmulti += `<span class='span${obj.id}'>${index + 1}. <input type='hidden' name='${obj.name}[]' value='${item}' />${obj.multi[item]}<img class='tabler-icons icons-filter-danger pull-right' src='/assets/icons/trash-filled.svg' onclick='$(this).closest("span").remove();' title='${LANGUAGE['delete']}' /><br></span>`
|
|
338
|
+
})
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
if (form_css == 'material_design') {
|
|
342
|
+
classview = Form.addProperty('class', ['selectpicker', obj.class])
|
|
343
|
+
}
|
|
336
344
|
|
|
337
|
-
|
|
345
|
+
let g = `<div class="input-group ">
|
|
338
346
|
<span class="input-group-text" id="dropdownadd${id}" class="dropdownadd" data-id="${id}" style="cursor: pointer" title="Add Data">+</span>
|
|
339
347
|
</div>
|
|
340
348
|
<div id="dropdownbox${id}" class="boxy">
|
|
341
349
|
<span class="span${id}">
|
|
342
350
|
</span>
|
|
343
351
|
</div>`
|
|
344
|
-
|
|
352
|
+
return `<div class="input-group">
|
|
345
353
|
<select ${tabindex} class="form-control" ${id} ${placeholder} ${htmlOptions} >${selects}</select>
|
|
346
|
-
<span id="dropdownadd${obj.id}" class="input-group-text dropdownadd" data-id="${obj.id}" style="cursor: pointer;" title=" ${LANGUAGE[
|
|
354
|
+
<span id="dropdownadd${obj.id}" class="input-group-text dropdownadd" data-id="${obj.id}" style="cursor: pointer;" title=" ${LANGUAGE['form_add_data']} ">+</span>
|
|
347
355
|
</div>
|
|
348
|
-
<div id="dropdownbox${obj.id}" class="boxy mb-3">${spanmulti}</div
|
|
349
|
-
|
|
356
|
+
<div id="dropdownbox${obj.id}" class="boxy mb-3">${spanmulti}</div>`
|
|
357
|
+
break
|
|
350
358
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
359
|
+
case 'typeahead':
|
|
360
|
+
let typeahead_value = Util.replaceAll(obj.typeaheadvalue, '"', `'`)
|
|
361
|
+
displayForm = `${prepend}<div class="input-group">
|
|
354
362
|
<input ${tabindex} type="text" class="form-control" id="${obj.id}Typeahead" autocomplete="off" data-provide="typeahead" id="${obj.id}Typeahead" placeholder="Please type a word" value="${typeahead_value}" >
|
|
355
363
|
<input type="hidden" ${id} ${name} ${placeholder} ${classview} ${required} value="${value}">
|
|
356
364
|
<span id="${obj.id}Clear" class="input-group-addon input-group-text dropdownadd" title="Clear" style="cursor: pointer;" title=" Add Data "><img src="/assets/icons/ban.svg" class="icons-bg-black" ></span>
|
|
357
|
-
</div>${information}${append}
|
|
358
|
-
|
|
365
|
+
</div>${information}${append}`
|
|
366
|
+
break
|
|
359
367
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
368
|
+
case 'table':
|
|
369
|
+
let html = ''
|
|
370
|
+
/*console.log(`table : ${obj.data}`)
|
|
363
371
|
console.log(JSON.stringify(obj.data))
|
|
364
372
|
console.log(JSON.stringify(obj.properties));*/
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
373
|
+
for (let key in obj.data) {
|
|
374
|
+
if (obj.properties[key].hidden) {
|
|
375
|
+
html += `<th></th>`
|
|
376
|
+
} else {
|
|
377
|
+
html += `<th>${obj.data[key]}</th>`
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
let btnAdd = ''
|
|
381
|
+
if (!obj.isAddButton && !obj.viewOnly) {
|
|
382
|
+
btnAdd = `<th><img id="add${obj.id}" src="/assets/icons/plus.svg" class="icons-bg-black boxy-small btn-plus" ></th>`
|
|
383
|
+
}
|
|
384
|
+
obj.btnAdd = btnAdd
|
|
385
|
+
obj.html = html
|
|
386
|
+
obj.title = title
|
|
387
|
+
obj.table = table
|
|
388
|
+
obj.value = value
|
|
389
|
+
let datavalue = ''
|
|
390
|
+
if (obj.value) {
|
|
391
|
+
datavalue = JSON.stringify(obj.value)
|
|
392
|
+
datavalue = Util.replaceAll(datavalue, "'", '`')
|
|
393
|
+
}
|
|
394
|
+
obj.prepend = prepend
|
|
395
|
+
obj.body = `<div class="table-responsive">
|
|
388
396
|
<table id="table${obj.id}" class="table table-hover table-sm">
|
|
389
397
|
<thead>
|
|
390
398
|
<tr>
|
|
@@ -393,218 +401,219 @@ Form.field = (obj) => {
|
|
|
393
401
|
</tr>
|
|
394
402
|
</thead>
|
|
395
403
|
<tbody id="body-${obj.id}" data-value='${datavalue}'>${obj.table}</tbody>
|
|
396
|
-
</table></div
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
}
|
|
404
|
+
</table></div>`
|
|
405
|
+
displayForm = Form.card(frameworkcss, obj)
|
|
406
|
+
break
|
|
407
|
+
|
|
408
|
+
case 'multi_line_editor':
|
|
409
|
+
value = obj.value ? obj.value : {}
|
|
410
|
+
let description = obj.description || ''
|
|
411
|
+
for (var key in obj.fields) {
|
|
412
|
+
let val = !value[key] ? obj.fields[key] : value[key]
|
|
413
|
+
description = Util.replaceAll(description, `[[[${key}]]]`, `<span class="text-danger text-toggle" id="a_${key}" data-id="${key}" style="text-decoration: underline; cursor: pointer">${val}</span> <input type="hidden" name="${obj.name}[${key}]" class="editor-value" id="${key}" data-id="${key}" value="${val}" >`)
|
|
414
|
+
}
|
|
415
|
+
displayForm = `${prepend}<div class="boxy">${description}</div>${information}${append}`
|
|
416
|
+
break
|
|
417
|
+
|
|
418
|
+
case 'ide_editor':
|
|
419
|
+
displayForm = `<div class="ide_editor" id="editor_${obj.id}"></div>`
|
|
420
|
+
displayForm += `<textarea hidden ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4"></textarea>${information}${append}`
|
|
421
|
+
break
|
|
422
|
+
|
|
423
|
+
case 'json':
|
|
424
|
+
displayForm += `<textarea ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(obj.value)}</textarea>${information}${append}`
|
|
425
|
+
break
|
|
426
|
+
|
|
427
|
+
case 'virtual':
|
|
428
|
+
displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} ${style} type="text" ${classview} readonly ${id} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`
|
|
429
|
+
break
|
|
430
|
+
|
|
431
|
+
//additionals for form view in view
|
|
432
|
+
case 'plaintext':
|
|
433
|
+
displayForm = `<span class="">${obj.value || ''}</span>`
|
|
434
|
+
break
|
|
435
|
+
|
|
436
|
+
case 'div':
|
|
437
|
+
displayForm = `<div id="${obj.id}" class="${obj.class}">${obj.value}</div>`
|
|
438
|
+
break
|
|
439
|
+
|
|
440
|
+
case 'data_table':
|
|
441
|
+
displayForm = obj.html
|
|
442
|
+
break
|
|
443
|
+
|
|
444
|
+
default:
|
|
445
|
+
displayForm = `${prepend}${inputGroupLeft}<input ${disabled} autocomplete="nope" autofocus="" ${readonly} ${tabindex} type="${type}" ${classview} ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
|
|
446
|
+
break
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
return displayForm
|
|
450
|
+
}
|
|
443
451
|
|
|
444
452
|
Form.group = (name, label, field) => {
|
|
445
|
-
|
|
446
|
-
}
|
|
453
|
+
return `<div class="form-group div${name} mb-3">${label}${field}</div>`
|
|
454
|
+
}
|
|
447
455
|
|
|
448
456
|
Form.button = (optionsExtends = {}) => {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
}
|
|
457
|
+
let options = Form.options.button
|
|
458
|
+
let htmlOptions = ''
|
|
459
|
+
for (let key in optionsExtends) {
|
|
460
|
+
let val = optionsExtends[key]
|
|
461
|
+
val = Util.replaceAll(val, '"', '')
|
|
462
|
+
if (options.hasOwnProperty(key)) {
|
|
463
|
+
options[key] = optionsExtends[key]
|
|
464
|
+
} else {
|
|
465
|
+
htmlOptions += ` ${key}=${val} `
|
|
459
466
|
}
|
|
460
|
-
|
|
461
|
-
}
|
|
467
|
+
}
|
|
468
|
+
return `<button id="${options.id}" type="${options.type}" class="${options.class}" ${htmlOptions}>${options.label}</button>`
|
|
469
|
+
}
|
|
462
470
|
|
|
463
471
|
Form.buttonGroup = (buttons = []) => {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
}
|
|
472
|
+
let html = `<div class="btn-group" role="group" aria-label="...">`
|
|
473
|
+
html += buttons.join(' ')
|
|
474
|
+
html += `</div>`
|
|
475
|
+
return html
|
|
476
|
+
}
|
|
469
477
|
|
|
470
478
|
Form.submit = (optionsExtends = {}) => {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
}
|
|
479
|
+
let options = {
|
|
480
|
+
id: 'form-submit',
|
|
481
|
+
type: 'submit',
|
|
482
|
+
class: 'btn btn btn-success boxy image-button ',
|
|
483
|
+
label: `<img src="/assets/icons/send.svg" class="icons-bg-white" > <span>${LANGUAGE['submit']}</span>`,
|
|
484
|
+
}
|
|
485
|
+
let settings = { ...options, ...optionsExtends }
|
|
486
|
+
return Form.button(settings)
|
|
487
|
+
}
|
|
480
488
|
|
|
481
489
|
Form.pullRight = (frameworkcss) => {
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
}
|
|
490
|
+
if (frameworkcss == 'bootstrap3') {
|
|
491
|
+
return 'pull-right'
|
|
492
|
+
} else if (frameworkcss == 'bootstrap4') {
|
|
493
|
+
return 'float-right'
|
|
494
|
+
} else {
|
|
495
|
+
return 'float-end'
|
|
496
|
+
}
|
|
497
|
+
}
|
|
490
498
|
|
|
491
499
|
Form.breadcrumb = (type, arr) => {
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
}
|
|
500
|
+
let html = `<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb"><ol class="breadcrumb float-end">`
|
|
501
|
+
arr.map((item) => {
|
|
502
|
+
if (item.active == true) {
|
|
503
|
+
html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`
|
|
504
|
+
} else {
|
|
505
|
+
html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`
|
|
506
|
+
}
|
|
507
|
+
})
|
|
508
|
+
html += `</ol></nav>`
|
|
509
|
+
return html
|
|
510
|
+
}
|
|
503
511
|
|
|
504
512
|
Form.breadcrumbs = (arr) => {
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
}
|
|
513
|
+
let html = `<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb"><ol class="breadcrumb float-end">`
|
|
514
|
+
arr.map((item) => {
|
|
515
|
+
if (item.active == true) {
|
|
516
|
+
html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`
|
|
517
|
+
} else {
|
|
518
|
+
html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`
|
|
519
|
+
}
|
|
520
|
+
})
|
|
521
|
+
html += `</ol></nav>`
|
|
522
|
+
return html
|
|
523
|
+
}
|
|
516
524
|
|
|
517
525
|
Form.breadcrumbIndex = () => {
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
526
|
+
return Form.breadcrumbs([
|
|
527
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
528
|
+
{ text: LANGUAGE['grid_list'], active: true },
|
|
529
|
+
])
|
|
521
530
|
}
|
|
522
531
|
|
|
523
532
|
Form.breadcrumbCreate = (routeName) => {
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
533
|
+
return Form.breadcrumbs([
|
|
534
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
535
|
+
{ text: LANGUAGE['grid_list'], href: '/' + routeName },
|
|
536
|
+
{ text: LANGUAGE['create'], active: true },
|
|
537
|
+
])
|
|
529
538
|
}
|
|
530
539
|
|
|
531
|
-
Form.breadcrumbUpdate = (routeName,id) => {
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
540
|
+
Form.breadcrumbUpdate = (routeName, id) => {
|
|
541
|
+
return Form.breadcrumbs([
|
|
542
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
543
|
+
{ text: LANGUAGE['grid_list'], href: '/' + routeName },
|
|
544
|
+
{ text: LANGUAGE['create'], href: '/' + routeName + '/create' },
|
|
545
|
+
{ text: LANGUAGE['view'], href: '/' + routeName + '/view/' + id },
|
|
546
|
+
{ text: LANGUAGE['update'], active: true },
|
|
547
|
+
])
|
|
539
548
|
}
|
|
540
549
|
|
|
541
550
|
Form.breadcrumbView = (routeName) => {
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
551
|
+
return Form.breadcrumbs([
|
|
552
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
553
|
+
{ text: LANGUAGE['grid_list'], href: '/' + routeName },
|
|
554
|
+
{ text: LANGUAGE['view'], active: true },
|
|
555
|
+
])
|
|
547
556
|
}
|
|
548
557
|
|
|
549
558
|
Form.breadcrumbImport = (routeName) => {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
559
|
+
return Form.breadcrumbs([
|
|
560
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
561
|
+
{ text: LANGUAGE['grid_list'], href: '/' + routeName },
|
|
562
|
+
{ text: LANGUAGE['create'], href: '/' + routeName + '/create' },
|
|
563
|
+
{ text: LANGUAGE['form_import'], active: true },
|
|
564
|
+
])
|
|
556
565
|
}
|
|
557
566
|
|
|
558
567
|
Form.breadcrumbApproval = (routeName, id) => {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
568
|
+
return Form.breadcrumbs([
|
|
569
|
+
{ text: LANGUAGE['home'], href: '/dashboard' },
|
|
570
|
+
{ text: LANGUAGE['grid_list'], href: '/' + routeName },
|
|
571
|
+
{ text: LANGUAGE['update'], href: '/' + routeName + '/update/' + id },
|
|
572
|
+
{ text: LANGUAGE['create'], href: '/' + routeName + '/create' },
|
|
573
|
+
{ text: 'Approval', active: true },
|
|
574
|
+
])
|
|
566
575
|
}
|
|
567
576
|
|
|
568
577
|
Form.grid = (type, obj) => {
|
|
569
|
-
|
|
570
|
-
}
|
|
578
|
+
return gridBootstrap5(obj)
|
|
579
|
+
}
|
|
571
580
|
|
|
572
581
|
/*
|
|
573
582
|
tab property
|
|
574
583
|
label,active,content,headerOptions
|
|
575
584
|
*/
|
|
576
585
|
Form.tab = (type, obj) => {
|
|
577
|
-
|
|
578
|
-
}
|
|
586
|
+
return tabBootstrap5(obj)
|
|
587
|
+
}
|
|
579
588
|
|
|
580
589
|
Form.card = (type, obj) => {
|
|
581
|
-
|
|
582
|
-
}
|
|
590
|
+
return card45(obj)
|
|
591
|
+
}
|
|
583
592
|
|
|
584
593
|
//card 4 & 5 bootstrap
|
|
585
594
|
const card45 = (obj) => {
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
595
|
+
let html = obj.prepend
|
|
596
|
+
let objHeader = obj.headerOptions || {}
|
|
597
|
+
let headerOptions = obj.headerOptions ? addProperties(obj.headerOptions, { class: 'card' }) : addProperties({ class: 'card' })
|
|
598
|
+
let img = obj.img ? `<img ${addProperties(obj.img)} >` : ''
|
|
599
|
+
let title = `<div class="card-header"><h5 class="card-title">${obj.title}</h5></div>`
|
|
600
|
+
let footer = (obj.footer = obj.footer ? `<div class="card-footer">${obj.footer}</div>` : ``)
|
|
601
|
+
let append = !obj.append ? '' : obj.append
|
|
602
|
+
html += `<div ${headerOptions}>
|
|
594
603
|
${img}
|
|
595
604
|
${title}
|
|
596
605
|
<div class="card-body">
|
|
597
606
|
${obj.body}
|
|
598
607
|
</div>
|
|
599
608
|
${footer}
|
|
600
|
-
</div
|
|
609
|
+
</div>`
|
|
601
610
|
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
}
|
|
611
|
+
html += append
|
|
612
|
+
return html
|
|
613
|
+
}
|
|
605
614
|
|
|
606
615
|
const cardBootstrap5 = (obj) => {
|
|
607
|
-
|
|
616
|
+
return `${obj.prepend}<div class="card div${obj.id}">
|
|
608
617
|
<div class="card-content">
|
|
609
618
|
<div class="card-body">
|
|
610
619
|
<div class="card-title">${obj.title}</div>
|
|
@@ -621,21 +630,26 @@ const cardBootstrap5 = (obj) => {
|
|
|
621
630
|
</div>
|
|
622
631
|
</div>
|
|
623
632
|
</div>
|
|
624
|
-
</div
|
|
633
|
+
</div>`
|
|
625
634
|
}
|
|
626
635
|
|
|
627
636
|
const gridBootstrap5 = (obj) => {
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
637
|
+
let levels = obj.levels
|
|
638
|
+
let routeName = obj.routeName
|
|
639
|
+
let advanceSearch = !obj.advanceSearch ? '' : obj.advanceSearch
|
|
640
|
+
let createBtn = '',
|
|
641
|
+
exportBtn = '',
|
|
642
|
+
importBtn = '',
|
|
643
|
+
superBtn = '',
|
|
644
|
+
exportBtnGroup = '',
|
|
645
|
+
selectPagesize = ''
|
|
646
|
+
if (levels.create) {
|
|
647
|
+
createBtn = `<button type="button" id="create_btn" class="btn btn-success btn-xs"><i class="fa fa-plus white-icon"></i></button>`
|
|
648
|
+
}
|
|
649
|
+
if (levels.export) {
|
|
650
|
+
exportBtn = `<button type="button" id="backupExcel" class="btn btn-info btn-xs" title="${obj.LANGUAGE['download_excel']}"><i class="fas fa-file-excel"></i></button>`
|
|
651
|
+
|
|
652
|
+
exportBtnGroup = `<div class="btn-group" role="group">
|
|
639
653
|
<button id="dropdownExport" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
640
654
|
${obj.LANGUAGE['grid_export_data']}
|
|
641
655
|
</button>
|
|
@@ -643,21 +657,21 @@ const gridBootstrap5 = (obj) => {
|
|
|
643
657
|
<a class="dropdown-item export-xls" href="#"><i class="text-success fa fa-file-excel-o"></i> Excel </a>
|
|
644
658
|
<a class="dropdown-item export-pdf" href="#"><i class="text-danger fa fa-file-pdf-o"></i> PDF </a>
|
|
645
659
|
</div>
|
|
646
|
-
</div
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
660
|
+
</div>`
|
|
661
|
+
}
|
|
662
|
+
if (levels.import) {
|
|
663
|
+
importBtn = `<button type="button" id="importExcel" class="btn btn-warning btn-xs" title="<%- LANGUAGE['data_import'] %>"><i class="fas fa-file-import"></i></button>`
|
|
664
|
+
}
|
|
665
|
+
selectPagesize = `<div class="dropdown-menu" aria-labelledby="dropdownPagination">`
|
|
666
|
+
let pageSize = obj.gridFilters.pageSize || 20
|
|
667
|
+
|
|
668
|
+
for (var i = 0; i < obj.paginationApp.length; i++) {
|
|
669
|
+
var actived = pageSize == obj.paginationApp[i] ? ' active ' : ''
|
|
670
|
+
selectPagesize += `<a data-value="${obj.paginationApp[i]}" class="dropdown-item pageSizeGrid ${actived}" id="pagination${obj.paginationApp[i]}" href="#" >${obj.paginationApp[i]}</a>`
|
|
671
|
+
}
|
|
672
|
+
selectPagesize += `</div>`
|
|
673
|
+
|
|
674
|
+
let toolbarDefault = `<div class="float">
|
|
661
675
|
<div class="btn-group float-end" role="group" aria-label="Button group with nested dropdown">
|
|
662
676
|
${createBtn}
|
|
663
677
|
${exportBtn}
|
|
@@ -682,10 +696,10 @@ const gridBootstrap5 = (obj) => {
|
|
|
682
696
|
</div>
|
|
683
697
|
</div>
|
|
684
698
|
|
|
685
|
-
</div></div
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
699
|
+
</div></div>`
|
|
700
|
+
let toolbar = obj.toolbar ? obj.toolbar : toolbarDefault
|
|
701
|
+
let html = ''
|
|
702
|
+
html += `<div class="card">
|
|
689
703
|
<div class="card-body">
|
|
690
704
|
<div class="float-end">
|
|
691
705
|
<div class="summary"></div>
|
|
@@ -702,112 +716,117 @@ const gridBootstrap5 = (obj) => {
|
|
|
702
716
|
<div id="jsGrid" class="table-responsive"></div>
|
|
703
717
|
</div>
|
|
704
718
|
</div>
|
|
705
|
-
</div
|
|
706
|
-
|
|
707
|
-
}
|
|
708
|
-
|
|
719
|
+
</div>`
|
|
720
|
+
return html
|
|
721
|
+
}
|
|
709
722
|
|
|
710
723
|
const tabBootstrap5 = (arr = []) => {
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
724
|
+
let html = ''
|
|
725
|
+
html += `<ul class="nav nav-tabs" id="myTab" role="tablist">${Util.newLine}`
|
|
726
|
+
arr.forEach(function (item, index) {
|
|
727
|
+
var active = '',
|
|
728
|
+
selected = 'false'
|
|
729
|
+
if (item.active) {
|
|
730
|
+
active = 'active'
|
|
731
|
+
selected = 'true'
|
|
732
|
+
}
|
|
733
|
+
html += `${Util.tab}
|
|
720
734
|
<li class="nav-item" role="presentation" >
|
|
721
735
|
<button class="nav-link ${active}" id="tab${index}" data-bs-toggle="tab" data-bs-target="#arr${index}" type="button" role="tab" aria-controls="arrtab${index}" aria-selected="true">${item.label}</button>
|
|
722
|
-
</li>${Util.newLine}
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
}
|
|
736
|
+
</li>${Util.newLine}`
|
|
737
|
+
})
|
|
738
|
+
html += `</ul>`
|
|
739
|
+
return {
|
|
740
|
+
html: html,
|
|
741
|
+
class: 'tab-pane fade',
|
|
742
|
+
active: 'show active',
|
|
743
|
+
}
|
|
744
|
+
}
|
|
731
745
|
|
|
732
746
|
Form.build = (obj) => {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
}
|
|
747
|
+
let html = ''
|
|
748
|
+
let required = !obj.required ? '' : `<span class="required-mark">*</span>`
|
|
749
|
+
let relation = ''
|
|
750
|
+
//form float
|
|
751
|
+
let float = false
|
|
752
|
+
let inline = false
|
|
753
|
+
let attributes = Object.prototype.hasOwnProperty.call(obj, 'attributes') ? obj.attributes : {}
|
|
754
|
+
let view_only = Object.prototype.hasOwnProperty.call(obj, 'view_only') ? obj.view_only : false
|
|
755
|
+
if (!view_only) {
|
|
756
|
+
if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'name')) {
|
|
757
|
+
if (obj.attributes.name == 'relation') {
|
|
758
|
+
relation = `<a target="_blank" href="/${obj.attributes.table}"> > </a>`
|
|
759
|
+
}
|
|
747
760
|
}
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
html += `<div class="form-floating mx-auto mb-3 mt-3 div${obj.id} mb-3">${Form.field(obj)}<label for="${obj.id}">${obj.title} ${required} ${relation}</label></div>`;
|
|
762
|
-
}
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'float')) {
|
|
764
|
+
float = obj.attributes.float || false
|
|
765
|
+
}
|
|
766
|
+
if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'inline')) {
|
|
767
|
+
inline = obj.attributes.inline || false
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
if (float) {
|
|
771
|
+
//obj.class = "nice-float"
|
|
772
|
+
if (obj.type == 'checkbox') {
|
|
773
|
+
html += `<div class="form-switch mx-auto div${obj.id} mb-3">${Form.field(obj)}<label class="form-check-label" for="">${obj.id} ${required}</label></div>`
|
|
763
774
|
} else {
|
|
764
|
-
|
|
765
|
-
if(obj.type == "checkbox") {
|
|
766
|
-
html += ` <div class="mb-3 row"><label for="${obj.id}" class="col form-check-label">${obj.title} ${obj.labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
|
|
767
|
-
} else {
|
|
768
|
-
html += ` <div class="mb-3 row"><label for="${obj.id}" class="col col-form-label">${obj.title} ${obj.labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
|
|
769
|
-
}
|
|
770
|
-
} else {
|
|
771
|
-
if(obj.type == "checkbox") {
|
|
772
|
-
html += `<div class="form-check div${obj.id} mb-3">${Form.field(obj)}<label class="form-check-label" for="${obj.id}">${obj.title} ${obj.labelOptions} ${required}</label></div>`;
|
|
773
|
-
} else {
|
|
774
|
-
html += `<div class="form-group div${obj.id} mb-3"><label for="${obj.id}">${obj.title} ${obj.labelOptions} ${required} ${relation}</label>${Form.field(obj)}</div>`;
|
|
775
|
-
}
|
|
776
|
-
}
|
|
775
|
+
html += `<div class="form-floating mx-auto mb-3 mt-3 div${obj.id} mb-3">${Form.field(obj)}<label for="${obj.id}">${obj.title} ${required} ${relation}</label></div>`
|
|
777
776
|
}
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
}
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
labelsHtml += `<tr><td>${no}</td><td>${key}</td><td>${attributeData.labels[key]}</td><td><input maxlength="25" type="text" class="form-control" required name="${obj.routeName}[${key}]" value="${attributeData.labels[key]}"></td></tr>`;
|
|
792
|
-
no++;
|
|
777
|
+
} else {
|
|
778
|
+
if (inline) {
|
|
779
|
+
if (obj.type == 'checkbox') {
|
|
780
|
+
html += ` <div class="mb-3 row"><label for="${obj.id}" class="col form-check-label">${obj.title} ${obj.labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
|
|
781
|
+
} else {
|
|
782
|
+
html += ` <div class="mb-3 row"><label for="${obj.id}" class="col col-form-label">${obj.title} ${obj.labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
|
|
783
|
+
}
|
|
784
|
+
} else {
|
|
785
|
+
if (obj.type == 'checkbox') {
|
|
786
|
+
html += `<div class="form-check div${obj.id} mb-3">${Form.field(obj)}<label class="form-check-label" for="${obj.id}">${obj.title} ${obj.labelOptions} ${required}</label></div>`
|
|
787
|
+
} else {
|
|
788
|
+
html += `<div class="form-group div${obj.id} mb-3"><label for="${obj.id}">${obj.title} ${obj.labelOptions} ${required} ${relation}</label>${Form.field(obj)}</div>`
|
|
789
|
+
}
|
|
793
790
|
}
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
791
|
+
}
|
|
792
|
+
return html
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
Form.modal = (obj, LANGUAGE = {}) => {
|
|
796
|
+
let attributeData = obj.attributeData,
|
|
797
|
+
visibles = obj.visibles || [],
|
|
798
|
+
invisibles = obj.invisibles || [],
|
|
799
|
+
visiblesHtml = '',
|
|
800
|
+
invisiblesHtml = '',
|
|
801
|
+
labelsHtml = ''
|
|
802
|
+
visibles.map((item) => {
|
|
803
|
+
visiblesHtml += `<li data-name="${item}" draggable="true" class="image-li" role="option" aria-grabbed="false"><img src="/assets/icons/eye.svg" class="icons-bg-black"> ${attributeData.labels[item]}</li>`
|
|
804
|
+
})
|
|
805
|
+
invisibles.map((item) => {
|
|
806
|
+
invisiblesHtml += `<li data-name="${item}" draggable="true" class="image-li" role="option" aria-grabbed="false"><img src="/assets/icons/eye-off.svg" class="icons-bg-black"> ${attributeData.labels[item]}</li>`
|
|
807
|
+
})
|
|
808
|
+
let no = 1
|
|
809
|
+
for (let key in attributeData.labels) {
|
|
810
|
+
labelsHtml += `<tr><td>${no}</td><td>${key}</td><td>${attributeData.labels[key]}</td><td><input maxlength="25" type="text" class="form-control" required name="${obj.routeName}[${key}]" value="${attributeData.labels[key]}"></td></tr>`
|
|
811
|
+
no++
|
|
812
|
+
}
|
|
813
|
+
const modalFields = Form.modalBuild({
|
|
814
|
+
id: 'grid-modal',
|
|
815
|
+
size: 'modal-xl',
|
|
816
|
+
header: `<h5 id="dynagrid-1-grid-modal-label" class="modal-title">
|
|
817
|
+
<i class="fa fa-cog"></i> ${LANGUAGE.grid_settings || 'Settings Grid'}
|
|
799
818
|
</h5>`,
|
|
800
|
-
|
|
819
|
+
body: `<div class="container">
|
|
801
820
|
<form id="form-grid" class="form-vertical kv-form-bs4" action="/${obj.routeName}/grid" method="post">
|
|
802
821
|
<input type="hidden" name="_csrf" value="">
|
|
803
822
|
<div class="dynagrid-column-label">
|
|
804
|
-
${LANGUAGE.grid_configure
|
|
823
|
+
${LANGUAGE.grid_configure || 'Configure Order and Display of Grid Columns'}
|
|
805
824
|
</div>
|
|
806
825
|
<div class="row">
|
|
807
826
|
<div class="col-sm-5">
|
|
808
827
|
<ul id="gridleft" class="sortable-visible sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
|
|
809
828
|
<li data-name="" class="alert alert-info dynagrid-sortable-header disabled">
|
|
810
|
-
${LANGUAGE.grid_visible
|
|
829
|
+
${LANGUAGE.grid_visible || 'Visible Columns'}
|
|
811
830
|
</li>
|
|
812
831
|
${visiblesHtml}
|
|
813
832
|
</ul>
|
|
@@ -818,7 +837,7 @@ Form.modal = (obj, LANGUAGE={}) => {
|
|
|
818
837
|
<div class="col-sm-5">
|
|
819
838
|
<ul id="gridright"
|
|
820
839
|
class="sortable-hidden sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
|
|
821
|
-
<li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${LANGUAGE.grid_invisible
|
|
840
|
+
<li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${LANGUAGE.grid_invisible || 'Hidden / Fixed Columns'}
|
|
822
841
|
</li>
|
|
823
842
|
${invisiblesHtml}
|
|
824
843
|
</ul>
|
|
@@ -828,33 +847,32 @@ Form.modal = (obj, LANGUAGE={}) => {
|
|
|
828
847
|
<input type="hidden" id="serialize_right" name="serialize_right" value=''/>
|
|
829
848
|
</form>
|
|
830
849
|
</div> <!-- .dynagrid-config-form -->`,
|
|
831
|
-
|
|
832
|
-
<img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${LANGUAGE.reset
|
|
850
|
+
footer: `<button type="reset" class="btn btn-default refresh gridreload image-button" title="Abort any changes and reset settings">
|
|
851
|
+
<img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${LANGUAGE.reset || 'Reset'}
|
|
833
852
|
</button>
|
|
834
853
|
<button type="button" class="btn btn-primary grid-submit boxy image-button" title="Save grid settings">
|
|
835
|
-
<img src="/assets/icons/send.svg" class="icons-bg-white"> ${LANGUAGE.apply
|
|
836
|
-
</button
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
}
|
|
844
|
-
|
|
854
|
+
<img src="/assets/icons/send.svg" class="icons-bg-white"> ${LANGUAGE.apply || 'Apply'}
|
|
855
|
+
</button>`,
|
|
856
|
+
})
|
|
857
|
+
try {
|
|
858
|
+
return modalFields
|
|
859
|
+
} catch (err) {
|
|
860
|
+
console.log(err)
|
|
861
|
+
}
|
|
862
|
+
}
|
|
845
863
|
|
|
846
864
|
Form.modalBuild = (obj) => {
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
865
|
+
let html = '<!-- Modal -->'
|
|
866
|
+
try {
|
|
867
|
+
const size = obj.size ? `${obj.size}` : ''
|
|
868
|
+
const id = obj.id ? `id="${obj.id}"` : ''
|
|
869
|
+
const headerOptions = Util.attributeOptions(obj.headerOptions || {}, { class: 'modal-header' })
|
|
870
|
+
const header = obj.header ? `<div ${headerOptions} >${obj.header}<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>` : ''
|
|
871
|
+
const body = obj.body ? obj.body : ''
|
|
872
|
+
const bodyOptions = Util.attributeOptions(obj.bodyOptions || {}, { class: 'modal-body' })
|
|
873
|
+
const footerOptions = Util.attributeOptions(obj.footerOptions || {}, { class: 'modal-footer' })
|
|
874
|
+
const footer = obj.footer ? `<div ${footerOptions} >${obj.footer}</div>` : ''
|
|
875
|
+
html += `${Util.newLine}<div class="modal fade " ${id} role="dialog" tabindex="-1">
|
|
858
876
|
<div class="modal-dialog ${size}">
|
|
859
877
|
<div class="modal-content">
|
|
860
878
|
${header}
|
|
@@ -862,12 +880,11 @@ Form.modalBuild = (obj) => {
|
|
|
862
880
|
${footer}
|
|
863
881
|
</div>
|
|
864
882
|
</div>
|
|
865
|
-
</div
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
};
|
|
883
|
+
</div>`
|
|
884
|
+
} catch (error) {
|
|
885
|
+
console.log(error)
|
|
886
|
+
}
|
|
887
|
+
return html
|
|
888
|
+
}
|
|
872
889
|
|
|
873
|
-
module.exports = Form
|
|
890
|
+
module.exports = Form
|