zet-lib 1.4.4 → 1.4.6

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 (4) hide show
  1. package/lib/Form.js +691 -539
  2. package/lib/zAppRouter.js +936 -778
  3. package/lib/zRoute.js +3 -3
  4. package/package.json +2 -1
package/lib/Form.js CHANGED
@@ -3,263 +3,305 @@
3
3
  * Created by sintret dev on 8/23/2021.
4
4
  */
5
5
 
6
- const Util = require('./Util')
6
+ const Util = require("./Util");
7
7
 
8
- const Form = {}
8
+ const Form = {};
9
9
  const addProperties = (obj, defaultObj = {}) => {
10
- let html = ''
10
+ let html = "";
11
11
  for (var key in obj) {
12
- var value = defaultObj.hasOwnProperty(key) ? defaultObj[key] + obj[key] : obj[key]
13
- html += ` ${key}="${obj[key]}" `
12
+ var value = defaultObj.hasOwnProperty(key)
13
+ ? defaultObj[key] + obj[key]
14
+ : obj[key];
15
+ html += ` ${key}="${obj[key]}" `;
14
16
  }
15
- return html
16
- }
17
+ return html;
18
+ };
17
19
 
18
20
  Form.options = {
19
21
  button: {
20
- id: 'form-submit',
21
- type: 'button',
22
- class: 'btn btn-success boxy',
22
+ id: "form-submit",
23
+ type: "button",
24
+ class: "btn btn-success boxy",
23
25
  label: `<img src="/assets/icons/send.svg" class="icons-bg-white" > Submit`,
24
26
  },
25
27
  field: {},
26
- }
28
+ };
27
29
 
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
- }
30
+ Form.label = (field, label, required, htmlOptions = "") => {
31
+ required = required || false;
32
+ const mark = required ? "*" : "";
33
+ return `<label for="${field}">${label} ${mark} ${htmlOptions}</label>`;
34
+ };
33
35
 
34
36
  Form.textarea = (obj) => {
35
- obj.type = 'textarea'
36
- return Form.field(obj)
37
- }
37
+ obj.type = "textarea";
38
+ return Form.field(obj);
39
+ };
38
40
 
39
41
  Form.input = (obj) => {
40
- obj.type = 'input'
41
- return Form.field(obj)
42
- }
42
+ obj.type = "input";
43
+ return Form.field(obj);
44
+ };
43
45
 
44
46
  Form.addProperty = (property, options = []) => {
45
47
  ///We expect options to be a non-empty Array
46
- if (!options.length) return
47
- var optionsString = options.join(' ')
48
- return ` ${property}="${optionsString}" `
49
- }
48
+ if (!options.length) return;
49
+ var optionsString = options.join(" ");
50
+ return ` ${property}="${optionsString}" `;
51
+ };
50
52
 
51
53
  Form.field = (obj) => {
52
54
  //options and default options
53
- let options = obj.options || {}
54
- let htmlOptions = ''
55
+ let options = obj.options || {};
56
+ let htmlOptions = "";
55
57
  for (let key in options) {
56
- let val = options[key]
57
- val = Util.replaceAll(val, '"', '')
58
+ let val = options[key];
59
+ val = Util.replaceAll(val, '"', "");
58
60
  if (obj.hasOwnProperty(key)) {
59
- obj[key] = options[key]
61
+ obj[key] = options[key];
60
62
  } else {
61
- htmlOptions += ` ${key}=${val} `
63
+ htmlOptions += ` ${key}=${val} `;
62
64
  }
63
65
  }
64
- let type = obj.type || 'text',
65
- id = obj.isTableModule ? '' : 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,
66
+ let type = obj.type || "text",
67
+ id = obj.isTableModule ? "" : Form.addProperty("id", [obj.id]),
68
+ name = obj.name ? ` name="${obj.name}" ` : "",
69
+ title = obj.title || "",
70
+ prepend = obj.prepend || "",
71
+ append = obj.append || "",
72
+ placeholder = Form.addProperty("placeholder", [obj.placeholder]),
73
+ tabindex = Form.addProperty("tabindex", [obj.tabindex]),
74
+ value = obj.value == undefined ? "" : obj.value,
73
75
  classview = obj.class ? ` class="${obj.class}" ` : ` class=" " `,
74
- disabled = obj.disabled ? ` disabled="disabled" ` : '',
76
+ disabled = obj.disabled ? ` disabled="disabled" ` : "",
75
77
  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,
78
+ required = obj.required == true ? ` required ` : "",
79
+ table = !obj.table ? "" : obj.table,
80
+ frameworkcss = !obj.frameworkcss ? "bootstrap5" : obj.frameworkcss,
81
+ form_css = !obj.form_css ? "bootstrap" : obj.form_css,
80
82
  attributes = !obj.attributes ? {} : obj.attributes,
81
- style = !obj.style ? '' : ` style=${obj.style} `,
82
- additional_attributes = !obj.additional_attributes ? '' : obj.additional_attributes,
83
- 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
+ style = !obj.style ? "" : ` style=${obj.style} `,
84
+ additional_attributes = !obj.additional_attributes
85
+ ? ""
86
+ : obj.additional_attributes,
87
+ information = !obj.information
88
+ ? ""
89
+ : `<div id="information-${obj.id}" class="form-text">${Util.replaceAll(
90
+ obj.information.substring(1, obj.information.length - 1),
91
+ "\r\n",
92
+ "<br>"
93
+ )}</div>`;
84
94
  //replaceAll("\r\n","<br>")
85
- let attributeDate = ''
95
+ let attributeDate = "";
86
96
  if (obj.hasOwnProperty.attributeData) {
87
97
  for (let key in obj.attributeData) {
88
- attributeDate += ` data-${key}="${obj.attributeData[key]}" `
98
+ attributeDate += ` data-${key}="${obj.attributeData[key]}" `;
89
99
  }
90
100
  }
91
- let hasInputGroup = false
92
- let inputGroupLeft = '',
93
- inputGroupRight = '',
94
- inputGroupDivLeft = ''
95
- if (attributes.hasOwnProperty('hasInputGroup') && attributes.hasInputGroup) {
96
- hasInputGroup = true
97
- prepend = `<div class="input-group mb-3">`
98
- append = `</div>`
99
- if (attributes.hasOwnProperty('inputGroupLeft') && attributes.inputGroupLeft) {
100
- inputGroupLeft = `<span class="input-group-text">${attributes.inputGroupLeft}</span>`
101
+ let hasInputGroup = false;
102
+ let inputGroupLeft = "",
103
+ inputGroupRight = "",
104
+ inputGroupDivLeft = "";
105
+ if (attributes.hasOwnProperty("hasInputGroup") && attributes.hasInputGroup) {
106
+ hasInputGroup = true;
107
+ prepend = `<div class="input-group mb-3">`;
108
+ append = `</div>`;
109
+ if (
110
+ attributes.hasOwnProperty("inputGroupLeft") &&
111
+ attributes.inputGroupLeft
112
+ ) {
113
+ inputGroupLeft = `<span class="input-group-text">${attributes.inputGroupLeft}</span>`;
101
114
  }
102
- if (attributes.hasOwnProperty('inputGroupRight') && attributes.inputGroupRight) {
103
- inputGroupRight = `<span class="input-group-text">${attributes.inputGroupRight}</span>`
115
+ if (
116
+ attributes.hasOwnProperty("inputGroupRight") &&
117
+ attributes.inputGroupRight
118
+ ) {
119
+ inputGroupRight = `<span class="input-group-text">${attributes.inputGroupRight}</span>`;
104
120
  }
105
121
  }
106
- let displayForm = ''
107
- let readonly = obj.readonly ? `readonly` : ``
108
- let boxyclass = '',
109
- checked = '',
110
- selects = ''
122
+ let displayForm = "";
123
+ let readonly = obj.readonly ? `readonly` : ``;
124
+ let boxyclass = "",
125
+ checked = "",
126
+ selects = "";
111
127
  switch (type) {
112
- case 'text':
113
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" ${disabled} ${readonly} autofocus="" ${tabindex} ${additional_attributes} type="${type}" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
114
- break
115
-
116
- case 'checkbox':
117
- checked = value == 1 ? 'checked' : ''
118
- displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} ${disabled} ${readonly} ${additional_attributes} ${style} type="checkbox" class="form-check-input ${obj.class}" ${id} ${name} ${checked} ${htmlOptions}>${information}${append}`
119
- break
120
-
121
- case 'tags':
122
- classview = ` class="form-control tags ${obj.class ? obj.class : ''} " `
123
- let datahtml = ''
128
+ case "text":
129
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" ${disabled} ${readonly} autofocus="" ${tabindex} ${additional_attributes} type="${type}" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
130
+ break;
131
+
132
+ case "checkbox":
133
+ checked = value == 1 ? "checked" : "";
134
+ displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} ${disabled} ${readonly} ${additional_attributes} ${style} type="checkbox" class="form-check-input ${obj.class}" ${id} ${name} ${checked} ${htmlOptions}>${information}${append}`;
135
+ break;
136
+
137
+ case "tags":
138
+ classview = ` class="form-control tags ${obj.class ? obj.class : ""} " `;
139
+ let datahtml = "";
124
140
  if (value) {
125
- let dataValue = []
126
- if (typeof value == 'string') {
127
- dataValue = JSON.parse(value) || []
141
+ let dataValue = [];
142
+ if (typeof value == "string") {
143
+ dataValue = JSON.parse(value) || [];
128
144
  } else {
129
- dataValue = value || []
145
+ dataValue = value || [];
130
146
  }
131
147
  dataValue.forEach(function (item) {
132
- datahtml += `<option value="${item}" selected="selected">${item}</option>`
133
- })
148
+ datahtml += `<option value="${item}" selected="selected">${item}</option>`;
149
+ });
134
150
  }
135
- displayForm = `${prepend}<select ${classview} ${id} ${name} ${additional_attributes} ${placeholder} multiple data-allow-new="true">${datahtml}</select>${information}${append}`
136
- break
137
-
138
- case 'range':
139
- let min = !obj.min ? 0 : obj.min
140
- let max = !obj.max ? 100 : obj.max
141
- displayForm = `${prepend}${inputGroupLeft}<input onmouseover="titlerange(this)" onchange="titlerange(this)" autocomplete="off" autofocus="" ${tabindex} type="${type}" class="form-range ${obj.class}" step="1" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" min="${min}" max="${max}" ${htmlOptions}>${inputGroupRight}${information}${append}`
142
- break
143
-
144
- case 'hidden':
145
- displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} type="${type}" ${additional_attributes} ${style} class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${append}`
146
- break
147
-
148
- case 'textarea':
149
- displayForm = `${prepend}${inputGroupLeft}<textarea ${tabindex} ${disabled} class="form-control ${obj.class}" ${id} ${name} ${additional_attributes} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${value}</textarea>${inputGroupRight}${information}${append}`
150
- break
151
-
152
- case 'image':
153
- boxyclass = value ? 'boxy' : ''
154
- let stringvalue = value ? value.substring(13) : ''
155
- let trashicon = stringvalue ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : ''
156
- 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}>
157
- <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" width="${obj.width}" id="file${obj.id}" /><br><a class="text-success" target="_blank" href="/uploads/${
151
+ displayForm = `${prepend}<select ${classview} ${id} ${name} ${additional_attributes} ${placeholder} multiple data-allow-new="true">${datahtml}</select>${information}${append}`;
152
+ break;
153
+
154
+ case "range":
155
+ let min = !obj.min ? 0 : obj.min;
156
+ let max = !obj.max ? 100 : obj.max;
157
+ displayForm = `${prepend}${inputGroupLeft}<input onmouseover="titlerange(this)" onchange="titlerange(this)" autocomplete="off" autofocus="" ${tabindex} type="${type}" class="form-range ${obj.class}" step="1" ${id} ${name} ${placeholder} ${style} ${required} value="${value}" data-t="${value}" min="${min}" max="${max}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
158
+ break;
159
+
160
+ case "hidden":
161
+ displayForm = `${prepend}<input autocomplete="off" autofocus="" ${tabindex} type="${type}" ${additional_attributes} ${style} class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${append}`;
162
+ break;
163
+
164
+ case "textarea":
165
+ displayForm = `${prepend}${inputGroupLeft}<textarea ${tabindex} ${disabled} class="form-control ${obj.class}" ${id} ${name} ${additional_attributes} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${value}</textarea>${inputGroupRight}${information}${append}`;
166
+ break;
167
+
168
+ case "image":
169
+ boxyclass = value ? "boxy" : "";
170
+ let stringvalue = value ? value.substring(13) : "";
171
+ let trashicon = stringvalue
172
+ ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">`
173
+ : "";
174
+ displayForm = `${prepend}<input ${tabindex} type="file" accept="image/*" onchange="loadFile(this,'${
175
+ obj.id
176
+ }' )" data-width="${obj.width}" class="form-control ${
177
+ obj.class || ""
178
+ }" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
179
+ <div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-table="${
158
180
  obj.routeName
159
- }/${value}"> ${stringvalue}</a> ${trashicon}</div>${append}`
160
- break
161
-
162
- case 'file':
163
- boxyclass = value ? 'boxy' : ''
164
- let stringvaluefile = value ? value.substring(13) : ''
165
- let trashiconfile = stringvaluefile ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">` : ''
166
- 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 ${
167
- obj.class || ''
181
+ }" data-width="${obj.width}" data-name="${
182
+ obj.title
183
+ }" data-filename="${value}" data-required="${
184
+ obj.required
185
+ }"> <img class="mb-3" width="${obj.width}" id="file${
186
+ obj.id
187
+ }" /><br><a class="text-success" target="_blank" href="/uploads/${
188
+ obj.routeName
189
+ }/${value}"> ${stringvalue}</a> ${trashicon}</div>${append}`;
190
+ break;
191
+
192
+ case "file":
193
+ boxyclass = value ? "boxy" : "";
194
+ let stringvaluefile = value ? value.substring(13) : "";
195
+ let trashiconfile = stringvaluefile
196
+ ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">`
197
+ : "";
198
+ 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,'${
199
+ obj.id
200
+ }' )" class="form-control ${
201
+ obj.class || ""
168
202
  }" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
169
- <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/${
203
+ <div id="body${obj.id}" class="isfile" data-id="${obj.id}" data-name="${
204
+ obj.title
205
+ }" data-table="${
206
+ obj.routeName
207
+ }" data-filename="${value}" data-required="${
208
+ obj.required
209
+ }"> <img class="mb-3" id="file${
210
+ obj.id
211
+ }" /><a class="text-success" target="_blank" href="/uploads/${
170
212
  obj.routeName
171
- }/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`
172
- break
173
-
174
- case 'email':
175
- displayForm = `${prepend}<input autocomplete="off" autofocus="" ${readonly} ${disabled} ${additional_attributes} ${tabindex} ${style} type="email" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`
176
- break
177
-
178
- case 'number':
179
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="text" class="form-control number ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
180
- break
181
-
182
- case 'integer':
183
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="number" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
184
- break
185
-
186
- case 'datepicker':
187
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="text" class="form-control datepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
188
- break
189
-
190
- case 'datetimepicker':
191
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} type="text" ${style} class="form-control datetimepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
192
- break
193
-
194
- case 'password':
195
- displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="password" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}><span toggle="#password" class="bx bi-eye field-icon toggle-password"></span>${inputGroupRight}${information}${append}`
196
- break
197
-
198
- case 'switch':
199
- checked = value == 1 ? ' checked ' : ''
200
- displayForm = `${prepend}<p><input ${tabindex} type="checkbox" class="form-control ${obj.class}" ${readonly} ${style} ${id} ${additional_attributes} ${name} ${checked} ></p>${information}${append}`
201
- break
202
-
203
- case 'lexical':
204
- displayForm = `${prepend}<div ${id}>${information}${append}`
205
- break
206
-
207
- case 'checkbox':
208
- checked = value == 1 ? ' checked ' : ''
209
- displayForm = `${prepend}<input ${tabindex} type="${type}" class="form-control ${obj.class}" ${readonly} ${style} ${id} ${additional_attributes} ${name} ${checked} >${information}${append}`
210
- break
211
-
212
- case 'dropdown_checkbox':
213
- let checkboxes = ''
214
- let val = []
215
- if (typeof value == 'object') {
216
- val = value
217
- } else if (typeof value == 'string') {
213
+ }/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`;
214
+ break;
215
+
216
+ case "email":
217
+ displayForm = `${prepend}<input autocomplete="off" autofocus="" ${readonly} ${disabled} ${additional_attributes} ${tabindex} ${style} type="email" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`;
218
+ break;
219
+
220
+ case "number":
221
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="text" class="form-control number ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
222
+ break;
223
+
224
+ case "integer":
225
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="number" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
226
+ break;
227
+
228
+ case "datepicker":
229
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="text" class="form-control datepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
230
+ break;
231
+
232
+ case "datetimepicker":
233
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} type="text" ${style} class="form-control datetimepicker ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
234
+ break;
235
+
236
+ case "password":
237
+ displayForm = `${prepend}${inputGroupLeft}<input autocomplete="off" autofocus="" ${disabled} ${readonly} ${additional_attributes} ${tabindex} ${style} type="password" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" ${htmlOptions}><span toggle="#password" class="bx bi-eye field-icon toggle-password"></span>${inputGroupRight}${information}${append}`;
238
+ break;
239
+
240
+ case "switch":
241
+ checked = value == 1 ? " checked " : "";
242
+ displayForm = `${prepend}<p><input ${tabindex} type="checkbox" class="form-control ${obj.class}" ${readonly} ${style} ${id} ${additional_attributes} ${name} ${checked} ></p>${information}${append}`;
243
+ break;
244
+
245
+ case "lexical":
246
+ displayForm = `${prepend}<div ${id}>${information}${append}`;
247
+ break;
248
+
249
+ case "checkbox":
250
+ checked = value == 1 ? " checked " : "";
251
+ displayForm = `${prepend}<input ${tabindex} type="${type}" class="form-control ${obj.class}" ${readonly} ${style} ${id} ${additional_attributes} ${name} ${checked} >${information}${append}`;
252
+ break;
253
+
254
+ case "dropdown_checkbox":
255
+ let checkboxes = "";
256
+ let val = [];
257
+ if (typeof value == "object") {
258
+ val = value;
259
+ } else if (typeof value == "string") {
218
260
  if (value) {
219
- val = JSON.parse(value)
261
+ val = JSON.parse(value);
220
262
  }
221
263
  }
222
264
  data.forEach(function (item) {
223
- const checked = Util.in_array(item, val) ? ' checked ' : ''
265
+ const checked = Util.in_array(item, val) ? " checked " : "";
224
266
  checkboxes += `<div class="checkbox">
225
267
  <label class="">
226
268
  <input type="checkbox" name="${obj.name}[${item}]" ${checked} value="${item}">
227
269
  ${item}
228
270
  </label>
229
- </div>`
230
- })
231
- displayForm = `${prepend}<div class="form-check">${checkboxes}</div>${information}${append}`
232
- break
271
+ </div>`;
272
+ });
273
+ displayForm = `${prepend}<div class="form-check">${checkboxes}</div>${information}${append}`;
274
+ break;
233
275
 
234
- case 'select':
235
- var please_select = obj.please_select
276
+ case "select":
277
+ var please_select = obj.please_select;
236
278
  if (please_select != undefined) {
237
- if (please_select != '') {
238
- selects += `<option value="">${please_select}</option>`
279
+ if (please_select != "") {
280
+ selects += `<option value="">${please_select}</option>`;
239
281
  }
240
282
  }
241
- if (obj.hasOwnProperty('array')) {
242
- var items = obj.array || []
283
+ if (obj.hasOwnProperty("array")) {
284
+ var items = obj.array || [];
243
285
  if (items.length) {
244
286
  items.forEach(function (item) {
245
287
  if (item.label) {
246
- const selected = item.value == value ? ' selected ' : ''
247
- selects += `<option value="${item.value}" ${selected}>${item.label}</option>`
288
+ const selected = item.value == value ? " selected " : "";
289
+ selects += `<option value="${item.value}" ${selected}>${item.label}</option>`;
248
290
  }
249
- })
291
+ });
250
292
  } else {
251
293
  if (Array.isArray(data)) {
252
294
  data.map((item) => {
253
295
  if (item.zname) {
254
- var selected = item.id == value ? ' selected ' : ''
255
- selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
296
+ var selected = item.id == value ? " selected " : "";
297
+ selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`;
256
298
  }
257
- })
299
+ });
258
300
  } else {
259
301
  for (var keys in data) {
260
302
  if (data[keys]) {
261
- var selected = keys == value ? ' selected ' : ''
262
- selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`
303
+ var selected = keys == value ? " selected " : "";
304
+ selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`;
263
305
  }
264
306
  }
265
307
  }
@@ -268,88 +310,94 @@ Form.field = (obj) => {
268
310
  if (Array.isArray(data)) {
269
311
  data.map((item) => {
270
312
  if (item.zname) {
271
- const selected = item.id == value ? ' selected ' : ''
272
- selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
313
+ const selected = item.id == value ? " selected " : "";
314
+ selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`;
273
315
  }
274
- })
316
+ });
275
317
  } else {
276
318
  for (let keys in data) {
277
319
  if (data[keys]) {
278
- let selected = keys == value ? ' selected ' : ''
279
- selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`
320
+ let selected = keys == value ? " selected " : "";
321
+ selects += `<option value="${keys}" ${selected}>${data[keys]}</option>`;
280
322
  }
281
323
  }
282
324
  }
283
325
  }
284
- if (form_css == 'material_design') {
285
- classview = Form.addProperty('class', ['selectpicker', obj.class])
326
+ if (form_css == "material_design") {
327
+ classview = Form.addProperty("class", ["selectpicker", obj.class]);
286
328
  }
287
- displayForm = `${prepend}<select ${tabindex} ${style} ${additional_attributes} ${disabled} ${readonly} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
288
- break
329
+ displayForm = `${prepend}<select ${tabindex} ${style} ${additional_attributes} ${disabled} ${readonly} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`;
330
+ break;
289
331
 
290
- case 'radio':
291
- let radios = ''
292
- let arr = obj.array || []
332
+ case "radio":
333
+ let radios = "";
334
+ let arr = obj.array || [];
293
335
  arr.map((item, index) => {
294
336
  //var selected = item.value == value ? ' selected ' : '';
295
- const checked = item.value == value ? ' checked ' : ''
337
+ const checked = item.value == value ? " checked " : "";
296
338
  radios += `<div class="form-check">
297
339
  <input class="form-check-input ${obj.class}" type="radio" name="${obj.name}" ${additional_attributes} value="${item.value}" id="${obj.id}${index}" ${checked}>
298
340
  <label class="form-check-label" for="${obj.id}${index}">
299
341
  ${item.label}
300
342
  </label>
301
- </div>`
302
- })
303
- displayForm = `${prepend} ${radios} ${information}${append}`
304
- break
343
+ </div>`;
344
+ });
345
+ displayForm = `${prepend} ${radios} ${information}${append}`;
346
+ break;
305
347
 
306
- case 'select_user':
307
- selects = ''
348
+ case "select_user":
349
+ selects = "";
308
350
  data.map((item) => {
309
- const selected = item.value == value ? ' selected ' : ''
310
- selects += `<option value="${item.id}" ${selected}>${item.fullname}</option>`
311
- })
351
+ const selected = item.value == value ? " selected " : "";
352
+ selects += `<option value="${item.id}" ${selected}>${item.fullname}</option>`;
353
+ });
312
354
 
313
- if (form_css == 'material_design') {
314
- classview = Form.addProperty('class', ['selectpicker', obj.class])
355
+ if (form_css == "material_design") {
356
+ classview = Form.addProperty("class", ["selectpicker", obj.class]);
315
357
  }
316
- displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
317
- break
358
+ displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`;
359
+ break;
318
360
 
319
- case 'chain':
320
- selects = ''
361
+ case "chain":
362
+ selects = "";
321
363
  // for array item.value and item.text
322
364
  // proptery is value and text
323
365
  data.map((item) => {
324
- var selected = item.id == value ? ' selected ' : ''
325
- selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`
326
- })
327
- if (form_css == 'material_design') {
328
- classview = Form.addProperty('class', ['selectpicker', obj.class])
366
+ var selected = item.id == value ? " selected " : "";
367
+ selects += `<option value="${item.id}" ${selected}>${item.zname}</option>`;
368
+ });
369
+ if (form_css == "material_design") {
370
+ classview = Form.addProperty("class", ["selectpicker", obj.class]);
329
371
  }
330
- displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`
331
- break
372
+ displayForm = `${prepend}<select ${tabindex} class="form-control form-select ${obj.class}" ${id} ${name} ${placeholder} ${required} ${htmlOptions} >${selects}</select>${information}${append}`;
373
+ break;
332
374
 
333
- case 'multi':
334
- selects = ''
375
+ case "multi":
376
+ selects = "";
335
377
  if (data) {
336
378
  data.map((item) => {
337
- selects += `<option value="${item.id}">${item.zname}</option>`
338
- })
379
+ selects += `<option value="${item.id}">${item.zname}</option>`;
380
+ });
339
381
  }
340
382
 
341
- var spanmulti = ''
383
+ var spanmulti = "";
342
384
  if (value) {
343
- let arr = []
344
- arr = typeof value == 'string' ? JSON.parse(value) : value
385
+ let arr = [];
386
+ arr = typeof value == "string" ? JSON.parse(value) : value;
345
387
  if (Array.isArray(arr)) {
346
388
  arr.forEach(function (item, index) {
347
- 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>`
348
- })
389
+ spanmulti += `<span class='span${obj.id}'>${
390
+ index + 1
391
+ }. <input type='hidden' name='${obj.name}[]' value='${item}' />${
392
+ obj.multi[item]
393
+ }<img class='tabler-icons icons-filter-danger pull-right' src='/assets/icons/trash-filled.svg' onclick='$(this).closest("span").remove();' title='${
394
+ LANGUAGE["delete"]
395
+ }' /><br></span>`;
396
+ });
349
397
  }
350
398
  }
351
- if (form_css == 'material_design') {
352
- classview = Form.addProperty('class', ['selectpicker', obj.class])
399
+ if (form_css == "material_design") {
400
+ classview = Form.addProperty("class", ["selectpicker", obj.class]);
353
401
  }
354
402
 
355
403
  let g = `<div class="input-group ">
@@ -358,50 +406,50 @@ Form.field = (obj) => {
358
406
  <div id="dropdownbox${id}" class="boxy">
359
407
  <span class="span${id}">
360
408
  </span>
361
- </div>`
409
+ </div>`;
362
410
  return `<div class="input-group">
363
411
  <select ${tabindex} class="form-control ${obj.class} dropdown-multi" name='${obj.name}' ${id} ${placeholder} ${htmlOptions} >${selects}</select>
364
- <span id="dropdownadd${obj.id}" class="input-group-text dropdownadd" data-id="${obj.id}" style="cursor: pointer;" title=" ${LANGUAGE['form_add_data']} ">+</span>
412
+ <span id="dropdownadd${obj.id}" class="input-group-text dropdownadd" data-id="${obj.id}" style="cursor: pointer;" title=" ${LANGUAGE["form_add_data"]} ">+</span>
365
413
  </div>
366
- <div id="dropdownbox${obj.id}" class="boxy mb-3">${spanmulti}</div>`
367
- break
414
+ <div id="dropdownbox${obj.id}" class="boxy mb-3">${spanmulti}</div>`;
415
+ break;
368
416
 
369
- case 'typeahead':
370
- let typeahead_value = Util.replaceAll(obj.typeaheadvalue, '"', `'`)
417
+ case "typeahead":
418
+ let typeahead_value = Util.replaceAll(obj.typeaheadvalue, '"', `'`);
371
419
  displayForm = `${prepend}<div class="input-group">
372
420
  <input ${tabindex} type="text" class="form-control ${obj.class}" id="${obj.id}Typeahead" autocomplete="off" data-provide="typeahead" id="${obj.id}Typeahead" placeholder="Please type a word" value="${typeahead_value}" >
373
421
  <input type="hidden" ${id} ${name} ${placeholder} ${classview} ${required} value="${value}">
374
422
  <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>
375
- </div>${information}${append}`
376
- break
423
+ </div>${information}${append}`;
424
+ break;
377
425
 
378
- case 'table':
379
- let html = ''
426
+ case "table":
427
+ let html = "";
380
428
  /*console.log(`table : ${JSON.stringify(obj.data)}`)
381
429
  console.log(JSON.stringify(obj.data))
382
430
  console.log(JSON.stringify(obj.properties));*/
383
431
  for (let key in obj.data) {
384
432
  if (obj.properties[key].hidden) {
385
- html += `<th></th>`
433
+ html += `<th></th>`;
386
434
  } else {
387
- html += `<th>${obj.data[key]}</th>`
435
+ html += `<th>${obj.data[key]}</th>`;
388
436
  }
389
437
  }
390
- let btnAdd = ''
438
+ let btnAdd = "";
391
439
  if (!obj.isAddButton && !obj.viewOnly) {
392
- btnAdd = `<th class="float-end"><img id="add${obj.id}" src="/assets/icons/plus.svg" class="icons-bg-white boxy-small btn-plus" ></th>`
440
+ btnAdd = `<th class="float-end"><img id="add${obj.id}" src="/assets/icons/plus.svg" class="icons-bg-white boxy-small btn-plus" ></th>`;
393
441
  }
394
- obj.btnAdd = btnAdd
395
- obj.html = html
396
- obj.title = title
397
- obj.table = table
398
- obj.value = value
399
- let datavalue = ''
442
+ obj.btnAdd = btnAdd;
443
+ obj.html = html;
444
+ obj.title = title;
445
+ obj.table = table;
446
+ obj.value = value;
447
+ let datavalue = "";
400
448
  if (obj.value) {
401
- datavalue = JSON.stringify(obj.value)
402
- datavalue = Util.replaceAll(datavalue, "'", '`')
449
+ datavalue = JSON.stringify(obj.value);
450
+ datavalue = Util.replaceAll(datavalue, "'", "`");
403
451
  }
404
- obj.prepend = prepend
452
+ obj.prepend = prepend;
405
453
  obj.body = `<div class="table-responsive">
406
454
  <table id="table${obj.id}" class="table table-hover table-sm">
407
455
  <thead>
@@ -411,47 +459,59 @@ Form.field = (obj) => {
411
459
  </tr>
412
460
  </thead>
413
461
  <tbody id="body-${obj.id}" data-value='${datavalue}'>${obj.bodyTable}</tbody>
414
- </table></div>`
415
- displayForm = Form.card(frameworkcss, obj)
416
- break
462
+ </table></div>`;
463
+ displayForm = Form.card(frameworkcss, obj);
464
+ break;
417
465
 
418
- case 'multi_line_editor':
419
- value = obj.value ? obj.value : {}
420
- let description = obj.description || ''
466
+ case "multi_line_editor":
467
+ value = obj.value ? obj.value : {};
468
+ let description = obj.description || "";
421
469
  for (var key in obj.fields) {
422
- let val = !value[key] ? obj.fields[key] : value[key]
423
- 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}" >`)
470
+ let val = !value[key] ? obj.fields[key] : value[key];
471
+ description = Util.replaceAll(
472
+ description,
473
+ `[[[${key}]]]`,
474
+ `<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}" >`
475
+ );
424
476
  }
425
- displayForm = `${prepend}<div class="boxy">${description}</div>${information}${append}`
426
- break
427
-
428
- case 'ide_editor':
429
- displayForm = `<div class="ide_editor" id="editor_${obj.id}"></div>`
430
- displayForm += `<textarea hidden ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4"></textarea>${information}${append}`
431
- break
432
-
433
- case 'json':
434
- displayForm += `<textarea ${additional_attributes} class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(obj.value)}</textarea>${information}${append}`
435
- break
436
-
437
- case 'json_array':
438
- displayForm += `<textarea ${additional_attributes} class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(obj.value)}</textarea>${information}${append}`
439
- break
440
-
441
- case 'dragdrop':
477
+ displayForm = `${prepend}<div class="boxy">${description}</div>${information}${append}`;
478
+ break;
479
+
480
+ case "ide_editor":
481
+ displayForm = `<div class="ide_editor" id="editor_${obj.id}"></div>`;
482
+ displayForm += `<textarea hidden ${classview} ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4"></textarea>${information}${append}`;
483
+ break;
484
+
485
+ case "json":
486
+ displayForm += `<textarea ${additional_attributes} class="form-control ${
487
+ obj.class
488
+ }" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
489
+ obj.value
490
+ )}</textarea>${information}${append}`;
491
+ break;
492
+
493
+ case "json_array":
494
+ displayForm += `<textarea ${additional_attributes} class="form-control ${
495
+ obj.class
496
+ }" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
497
+ obj.value
498
+ )}</textarea>${information}${append}`;
499
+ break;
500
+
501
+ case "dragdrop":
442
502
  //dataObject
443
- let leftButtons = ``
444
- let rightButtons = ``
445
- let all = Object.keys(obj.dataObject)
503
+ let leftButtons = ``;
504
+ let rightButtons = ``;
505
+ let all = Object.keys(obj.dataObject);
446
506
  all.map((item, index) => {
447
507
  if (!value.includes(item)) {
448
- rightButtons += `<li><button class="btn btn-danger boxy" type="button">${obj.dataObject[item]}<input type="hidden" name='trashx' value="${item}"></button></li>`
508
+ rightButtons += `<li><button class="btn btn-danger boxy" type="button">${obj.dataObject[item]}<input type="hidden" name='trashx' value="${item}"></button></li>`;
449
509
  }
450
- })
451
- value = value || []
510
+ });
511
+ value = value || [];
452
512
  value.map((item, index) => {
453
- leftButtons += `<li><button class="btn btn-primary boxy" type="button">${obj.dataObject[item]}<input type="hidden" name='${obj.name}[]' value="${item}"></button></li>`
454
- })
513
+ leftButtons += `<li><button class="btn btn-primary boxy" type="button">${obj.dataObject[item]}<input type="hidden" name='${obj.name}[]' value="${item}"></button></li>`;
514
+ });
455
515
 
456
516
  displayForm += `<div id="dragdrop_${obj.id}" class="row contentfields">
457
517
  <div class="col-md-6">
@@ -464,225 +524,246 @@ Form.field = (obj) => {
464
524
  ${rightButtons}
465
525
  </ol>
466
526
  </div>
467
- </div>`
468
- break
527
+ </div>`;
528
+ break;
469
529
 
470
- case 'array':
471
- displayForm += `<textarea ${additional_attributes} class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(obj.value)}</textarea>${information}${append}`
472
- break
530
+ case "array":
531
+ displayForm += `<textarea ${additional_attributes} class="form-control ${
532
+ obj.class
533
+ }" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
534
+ obj.value
535
+ )}</textarea>${information}${append}`;
536
+ break;
473
537
 
474
- case 'virtual':
475
- displayForm = `${prepend}<input ${additional_attributes} autocomplete="off" autofocus="" ${tabindex} ${style} type="text" ${classview} readonly ${id} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`
476
- break
538
+ case "virtual":
539
+ displayForm = `${prepend}<input ${additional_attributes} autocomplete="off" autofocus="" ${tabindex} ${style} type="text" ${classview} readonly ${id} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`;
540
+ break;
477
541
 
478
542
  //additionals for form view in view
479
- case 'plaintext':
480
- displayForm = `<span class="">${obj.value || ''}</span>`
481
- break
482
-
483
- case 'div':
484
- displayForm = `<div id="${obj.id}" class="${obj.class}">${obj.value}</div>`
485
- break
486
-
487
- case 'data_table':
488
- displayForm = obj.html
489
- break
490
-
491
- case 'location':
492
- displayForm = `${prepend}<input type="text" class="form-control ${obj.class}" id="search_map_location" placeholder="type a place" ${required} value="" ${htmlOptions}>${information}${append}
493
- <textarea ${id} ${name} style="display: none" ${readonly} rows="2">${JSON.stringify(obj.value)}</textarea>
494
- <div id="map_${obj.id}" style="background-color:#C3C3C3;width: 100%;height: ${obj.height}px"></div>`
495
- break
496
-
497
- case 'dropzone':
543
+ case "plaintext":
544
+ displayForm = `<span class="">${obj.value || ""}</span>`;
545
+ break;
546
+
547
+ case "div":
548
+ displayForm = `<div id="${obj.id}" class="${obj.class}">${obj.value}</div>`;
549
+ break;
550
+
551
+ case "data_table":
552
+ displayForm = obj.html;
553
+ break;
554
+
555
+ case "location":
556
+ displayForm = `${prepend}<input type="text" class="form-control ${
557
+ obj.class
558
+ }" id="search_map_location" placeholder="type a place" ${required} value="" ${htmlOptions}>${information}${append}
559
+ <textarea ${id} ${name} style="display: none" ${readonly} rows="2">${JSON.stringify(
560
+ obj.value
561
+ )}</textarea>
562
+ <div id="map_${obj.id}" style="background-color:#C3C3C3;width: 100%;height: ${
563
+ obj.height
564
+ }px"></div>`;
565
+ break;
566
+
567
+ case "dropzone":
498
568
  displayForm = `${prepend}<div ${tabindex} ${style} type="text" ${classview} ${id} ${htmlOptions}><label for="files" class="dropzone-container">
499
569
  <div class="dz-message" data-dz-message><div class="file-icon"><span class="icon-small icons-primary"><img class="icons-bg-white icon-image-large" src="/assets/icons/file-plus.svg"></span></div>
500
570
  <div class="text-center pt-3 px-5">
501
571
  <p class="w-80 h5 text-dark fw-bold">Drag your documents, photos or videos here to start uploading.</p>
502
572
  </div></div>
503
- </label></div>${information}${append}`
504
- break
573
+ </label></div>${information}${append}`;
574
+ break;
505
575
 
506
- case 'dropzoneview':
507
- let countFiles = obj.value && obj.value.length ? obj.value.length + ' Files' : ''
576
+ case "dropzoneview":
577
+ let countFiles =
578
+ obj.value && obj.value.length ? obj.value.length + " Files" : "";
508
579
  let bodydropzoneview =
509
- countFiles == '' ? '' : `<div class="card-header">${countFiles} <div class="float-end"><span class="icon-small icons-light" title="Download"><img onclick="location.href= '/zdownloads-dropzone/${obj.routeName}/${obj.key}/${obj.dataId}'" class="icons-bg-black gridview icon-image" src="/assets/icons/download.svg"></span></div> </div>`
580
+ countFiles == ""
581
+ ? ""
582
+ : `<div class="card-header">${countFiles} <div class="float-end"><span class="icon-small icons-light" title="Download"><img onclick="location.href= '/zdownloads-dropzone/${obj.routeName}/${obj.key}/${obj.dataId}'" class="icons-bg-black gridview icon-image" src="/assets/icons/download.svg"></span> <span class="icon-small icons-light" title="Compress Images"><img onclick="if(window.confirm('Compress Images ?')) {ajaxPost('/zcompress-dropzone',{table:'${obj.routeName}',field:'${obj.key}',id:${obj.dataId}},(data) => toastrForm(data))}" class="icons-bg-black gridextract icon-image" src="/assets/icons/file-zip.svg"></span></div></div>`;
510
583
  displayForm = `<div class="card">
511
584
  ${bodydropzoneview}
512
- <div class="card-body">`
585
+ <div class="card-body">`;
513
586
  if (obj.value && obj.value.length > 0) {
514
587
  obj.value.map((item) => {
515
- let extFile = Util.fileExtension(item)
516
- let filename = `/uploads/${obj.table}/${obj.key}/${item}`
517
- if (extFile.type == 'image') {
518
- displayForm += `<img src="${filename}" class="boxy zoom mx-2 my-2" width="200px">`
588
+ let extFile = Util.fileExtension(item);
589
+ let filename = `/uploads/${obj.table}/${obj.key}/${item}`;
590
+ if (extFile.type == "image") {
591
+ displayForm += `<img src="${filename}" class="boxy zoom mx-2 my-2" width="200px">`;
519
592
  } else {
520
- displayForm += '<br>' + Util.fileView(`/uploads/${obj.table}/${obj.key}/`, item, { withIcon: true }) + '<br>'
593
+ displayForm +=
594
+ "<br>" +
595
+ Util.fileView(`/uploads/${obj.table}/${obj.key}/`, item, {
596
+ withIcon: true,
597
+ }) +
598
+ "<br>";
521
599
  }
522
- })
600
+ });
523
601
  }
524
- displayForm += `</div></div>`
525
-
526
- break
602
+ displayForm += `</div></div>`;
603
+ break;
527
604
  default:
528
- value = value ? value.replaceAll('"', '&quot;') : obj.value
529
- displayForm = `${prepend}${inputGroupLeft}<input ${disabled} autocomplete="nope" autofocus="" ${readonly} ${tabindex} type="${type}" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`
530
- break
605
+ value = value ? value.replaceAll('"', "&quot;") : obj.value;
606
+ displayForm = `${prepend}${inputGroupLeft}<input ${disabled} autocomplete="nope" autofocus="" ${readonly} ${tabindex} type="${type}" class="form-control ${obj.class}" ${id} ${name} ${placeholder} ${required} value="${value}" data-t="${value}" ${htmlOptions}>${inputGroupRight}${information}${append}`;
607
+ break;
531
608
  }
532
609
 
533
- return displayForm
534
- }
610
+ return displayForm;
611
+ };
535
612
 
536
613
  Form.group = (name, label, field) => {
537
- return `<div class="form-group div${name} mb-3">${label}${field}</div>`
538
- }
614
+ return `<div class="form-group div${name} mb-3">${label}${field}</div>`;
615
+ };
539
616
 
540
617
  Form.button = (optionsExtends = {}) => {
541
- let options = Form.options.button
542
- let htmlOptions = ''
618
+ let options = Form.options.button;
619
+ let htmlOptions = "";
543
620
  for (let key in optionsExtends) {
544
- let val = optionsExtends[key]
545
- val = Util.replaceAll(val, '"', '')
621
+ let val = optionsExtends[key];
622
+ val = Util.replaceAll(val, '"', "");
546
623
  if (options.hasOwnProperty(key)) {
547
- options[key] = optionsExtends[key]
624
+ options[key] = optionsExtends[key];
548
625
  } else {
549
- htmlOptions += ` ${key}=${val} `
626
+ htmlOptions += ` ${key}=${val} `;
550
627
  }
551
628
  }
552
- return `<button id="${options.id}" type="${options.type}" class="${options.class}" ${htmlOptions}>${options.label}</button>`
553
- }
629
+ return `<button id="${options.id}" type="${options.type}" class="${options.class}" ${htmlOptions}>${options.label}</button>`;
630
+ };
554
631
 
555
632
  Form.buttonGroup = (buttons = []) => {
556
- let html = `<div class="btn-group" role="group" aria-label="...">`
557
- html += buttons.join(' ')
558
- html += `</div>`
559
- return html
560
- }
633
+ let html = `<div class="btn-group" role="group" aria-label="...">`;
634
+ html += buttons.join(" ");
635
+ html += `</div>`;
636
+ return html;
637
+ };
561
638
 
562
639
  Form.submit = (optionsExtends = {}) => {
563
640
  let options = {
564
- id: 'form-submit',
565
- type: 'submit',
566
- class: 'btn btn btn-success boxy image-button ',
567
- label: `<img src="/assets/icons/send.svg" class="icons-bg-white" > <span>${LANGUAGE['submit']}</span>`,
568
- }
569
- let settings = { ...options, ...optionsExtends }
570
- return Form.button(settings)
571
- }
641
+ id: "form-submit",
642
+ type: "submit",
643
+ class: "btn btn btn-success boxy image-button ",
644
+ label: `<img src="/assets/icons/send.svg" class="icons-bg-white" > <span>${LANGUAGE["submit"]}</span>`,
645
+ };
646
+ let settings = { ...options, ...optionsExtends };
647
+ return Form.button(settings);
648
+ };
572
649
 
573
650
  Form.pullRight = (frameworkcss) => {
574
- if (frameworkcss == 'bootstrap3') {
575
- return 'pull-right'
576
- } else if (frameworkcss == 'bootstrap4') {
577
- return 'float-right'
651
+ if (frameworkcss == "bootstrap3") {
652
+ return "pull-right";
653
+ } else if (frameworkcss == "bootstrap4") {
654
+ return "float-right";
578
655
  } else {
579
- return 'float-end'
656
+ return "float-end";
580
657
  }
581
- }
658
+ };
582
659
 
583
660
  Form.breadcrumb = (type, arr) => {
584
- let html = `<nav style="--bs-breadcrumb-divider: url(&#34;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&#34;);" aria-label="breadcrumb"><ol class="breadcrumb float-end">`
661
+ let html = `<nav style="--bs-breadcrumb-divider: url(&#34;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&#34;);" aria-label="breadcrumb"><ol class="breadcrumb float-end">`;
585
662
  arr.map((item) => {
586
663
  if (item.active == true) {
587
- html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`
664
+ html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`;
588
665
  } else {
589
- html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`
666
+ html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`;
590
667
  }
591
- })
592
- html += `</ol></nav>`
593
- return html
594
- }
668
+ });
669
+ html += `</ol></nav>`;
670
+ return html;
671
+ };
595
672
 
596
673
  Form.breadcrumbs = (arr) => {
597
- let html = `<nav style="--bs-breadcrumb-divider: url(&#34;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&#34;);" aria-label="breadcrumb"><ol class="breadcrumb float-end">`
674
+ let html = `<nav style="--bs-breadcrumb-divider: url(&#34;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&#34;);" aria-label="breadcrumb"><ol class="breadcrumb float-end">`;
598
675
  arr.map((item) => {
599
676
  if (item.active == true) {
600
- html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`
677
+ html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`;
601
678
  } else {
602
- html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`
679
+ html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`;
603
680
  }
604
- })
605
- html += `</ol></nav>`
606
- return html
607
- }
681
+ });
682
+ html += `</ol></nav>`;
683
+ return html;
684
+ };
608
685
 
609
686
  Form.breadcrumbIndex = () => {
610
687
  return Form.breadcrumbs([
611
- { text: LANGUAGE['home'], href: '/dashboard' },
612
- { text: LANGUAGE['grid_list'], active: true },
613
- ])
614
- }
688
+ { text: LANGUAGE["home"], href: "/dashboard" },
689
+ { text: LANGUAGE["grid_list"], active: true },
690
+ ]);
691
+ };
615
692
 
616
693
  Form.breadcrumbCreate = (routeName) => {
617
694
  return Form.breadcrumbs([
618
- { text: LANGUAGE['home'], href: '/dashboard' },
619
- { text: LANGUAGE['grid_list'], href: '/' + routeName },
620
- { text: LANGUAGE['create'], active: true },
621
- ])
622
- }
695
+ { text: LANGUAGE["home"], href: "/dashboard" },
696
+ { text: LANGUAGE["grid_list"], href: "/" + routeName },
697
+ { text: LANGUAGE["create"], active: true },
698
+ ]);
699
+ };
623
700
 
624
701
  Form.breadcrumbUpdate = (routeName, id) => {
625
702
  return Form.breadcrumbs([
626
- { text: LANGUAGE['home'], href: '/dashboard' },
627
- { text: LANGUAGE['grid_list'], href: '/' + routeName },
628
- { text: LANGUAGE['create'], href: '/' + routeName + '/create' },
629
- { text: LANGUAGE['view'], href: '/' + routeName + '/view/' + id },
630
- { text: LANGUAGE['update'], active: true },
631
- ])
632
- }
703
+ { text: LANGUAGE["home"], href: "/dashboard" },
704
+ { text: LANGUAGE["grid_list"], href: "/" + routeName },
705
+ { text: LANGUAGE["create"], href: "/" + routeName + "/create" },
706
+ { text: LANGUAGE["view"], href: "/" + routeName + "/view/" + id },
707
+ { text: LANGUAGE["update"], active: true },
708
+ ]);
709
+ };
633
710
 
634
711
  Form.breadcrumbView = (routeName) => {
635
712
  return Form.breadcrumbs([
636
- { text: LANGUAGE['home'], href: '/dashboard' },
637
- { text: LANGUAGE['grid_list'], href: '/' + routeName },
638
- { text: LANGUAGE['view'], active: true },
639
- ])
640
- }
713
+ { text: LANGUAGE["home"], href: "/dashboard" },
714
+ { text: LANGUAGE["grid_list"], href: "/" + routeName },
715
+ { text: LANGUAGE["view"], active: true },
716
+ ]);
717
+ };
641
718
 
642
719
  Form.breadcrumbImport = (routeName) => {
643
720
  return Form.breadcrumbs([
644
- { text: LANGUAGE['home'], href: '/dashboard' },
645
- { text: LANGUAGE['grid_list'], href: '/' + routeName },
646
- { text: LANGUAGE['create'], href: '/' + routeName + '/create' },
647
- { text: LANGUAGE['form_import'], active: true },
648
- ])
649
- }
721
+ { text: LANGUAGE["home"], href: "/dashboard" },
722
+ { text: LANGUAGE["grid_list"], href: "/" + routeName },
723
+ { text: LANGUAGE["create"], href: "/" + routeName + "/create" },
724
+ { text: LANGUAGE["form_import"], active: true },
725
+ ]);
726
+ };
650
727
 
651
728
  Form.breadcrumbApproval = (routeName, id) => {
652
729
  return Form.breadcrumbs([
653
- { text: LANGUAGE['home'], href: '/dashboard' },
654
- { text: LANGUAGE['grid_list'], href: '/' + routeName },
655
- { text: LANGUAGE['update'], href: '/' + routeName + '/update/' + id },
656
- { text: LANGUAGE['create'], href: '/' + routeName + '/create' },
657
- { text: 'Approval', active: true },
658
- ])
659
- }
730
+ { text: LANGUAGE["home"], href: "/dashboard" },
731
+ { text: LANGUAGE["grid_list"], href: "/" + routeName },
732
+ { text: LANGUAGE["update"], href: "/" + routeName + "/update/" + id },
733
+ { text: LANGUAGE["create"], href: "/" + routeName + "/create" },
734
+ { text: "Approval", active: true },
735
+ ]);
736
+ };
660
737
 
661
738
  Form.grid = (type, obj) => {
662
- return gridBootstrap5(obj)
663
- }
739
+ return gridBootstrap5(obj);
740
+ };
664
741
 
665
742
  /*
666
743
  tab property
667
744
  label,active,content,headerOptions
668
745
  */
669
746
  Form.tab = (type, obj) => {
670
- return tabBootstrap5(obj)
671
- }
747
+ return tabBootstrap5(obj);
748
+ };
672
749
 
673
750
  Form.card = (type, obj) => {
674
- return card45(obj)
675
- }
751
+ return card45(obj);
752
+ };
676
753
 
677
754
  //card 4 & 5 bootstrap
678
755
  const card45 = (obj) => {
679
- let html = obj.prepend
680
- let objHeader = obj.headerOptions || {}
681
- let headerOptions = obj.headerOptions ? addProperties(obj.headerOptions, { class: 'card' }) : addProperties({ class: 'card' })
682
- let img = obj.img ? `<img ${addProperties(obj.img)} >` : ''
683
- let title = `<div class="card-header"><h5 class="card-title">${obj.title}</h5></div>`
684
- let footer = (obj.footer = obj.footer ? `<div class="card-footer">${obj.footer}</div>` : ``)
685
- let append = !obj.append ? '' : obj.append
756
+ let html = obj.prepend;
757
+ let objHeader = obj.headerOptions || {};
758
+ let headerOptions = obj.headerOptions
759
+ ? addProperties(obj.headerOptions, { class: "card" })
760
+ : addProperties({ class: "card" });
761
+ let img = obj.img ? `<img ${addProperties(obj.img)} >` : "";
762
+ let title = `<div class="card-header"><h5 class="card-title">${obj.title}</h5></div>`;
763
+ let footer = (obj.footer = obj.footer
764
+ ? `<div class="card-footer">${obj.footer}</div>`
765
+ : ``);
766
+ let append = !obj.append ? "" : obj.append;
686
767
  html += `<div ${headerOptions}>
687
768
  ${img}
688
769
  ${title}
@@ -690,11 +771,11 @@ const card45 = (obj) => {
690
771
  ${obj.body}
691
772
  </div>
692
773
  ${footer}
693
- </div>`
774
+ </div>`;
694
775
 
695
- html += append
696
- return html
697
- }
776
+ html += append;
777
+ return html;
778
+ };
698
779
 
699
780
  const cardBootstrap5 = (obj) => {
700
781
  return `${obj.prepend}<div class="card div${obj.id}">
@@ -714,55 +795,55 @@ const cardBootstrap5 = (obj) => {
714
795
  </div>
715
796
  </div>
716
797
  </div>
717
- </div>`
718
- }
798
+ </div>`;
799
+ };
719
800
 
720
801
  const gridBootstrap5 = (obj) => {
721
- let levels = obj.levels
722
- let routeName = obj.routeName
723
- let advanceSearch = !obj.advanceSearch ? '' : obj.advanceSearch
724
- let createBtn = '',
725
- exportBtn = '',
726
- importBtn = '',
727
- superBtn = '',
728
- exportBtnGroup = '',
729
- selectPagesize = ''
802
+ let levels = obj.levels;
803
+ let routeName = obj.routeName;
804
+ let advanceSearch = !obj.advanceSearch ? "" : obj.advanceSearch;
805
+ let createBtn = "",
806
+ exportBtn = "",
807
+ importBtn = "",
808
+ superBtn = "",
809
+ exportBtnGroup = "",
810
+ selectPagesize = "";
730
811
  if (levels.create) {
731
- createBtn = `<button type="button" id="create_btn" class="btn btn-success btn-xs"><i class="fa fa-plus white-icon"></i></button>`
812
+ createBtn = `<button type="button" id="create_btn" class="btn btn-success btn-xs"><i class="fa fa-plus white-icon"></i></button>`;
732
813
  }
733
814
  if (levels.export) {
734
- 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>`
815
+ 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>`;
735
816
 
736
817
  exportBtnGroup = `<div class="btn-group" role="group">
737
818
  <button id="dropdownExport" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
738
- ${obj.LANGUAGE['grid_export_data']}
819
+ ${obj.LANGUAGE["grid_export_data"]}
739
820
  </button>
740
821
  <div class="dropdown-menu" aria-labelledby="dropdownExport">
741
822
  <a class="dropdown-item export-xls" href="#"><i class="text-success fa fa-file-excel-o"></i> Excel </a>
742
823
  <a class="dropdown-item export-pdf" href="#"><i class="text-danger fa fa-file-pdf-o"></i> PDF </a>
743
824
  </div>
744
- </div>`
825
+ </div>`;
745
826
  }
746
827
  if (levels.import) {
747
- importBtn = `<button type="button" id="importExcel" class="btn btn-warning btn-xs" title="<%- LANGUAGE['data_import'] %>"><i class="fas fa-file-import"></i></button>`
828
+ importBtn = `<button type="button" id="importExcel" class="btn btn-warning btn-xs" title="<%- LANGUAGE['data_import'] %>"><i class="fas fa-file-import"></i></button>`;
748
829
  }
749
- selectPagesize = `<div class="dropdown-menu" aria-labelledby="dropdownPagination">`
750
- let pageSize = obj.gridFilters.pageSize || 20
830
+ selectPagesize = `<div class="dropdown-menu" aria-labelledby="dropdownPagination">`;
831
+ let pageSize = obj.gridFilters.pageSize || 20;
751
832
 
752
833
  for (var i = 0; i < obj.paginationApp.length; i++) {
753
- var actived = pageSize == obj.paginationApp[i] ? ' active ' : ''
754
- selectPagesize += `<a data-value="${obj.paginationApp[i]}" class="dropdown-item pageSizeGrid ${actived}" id="pagination${obj.paginationApp[i]}" href="#" >${obj.paginationApp[i]}</a>`
834
+ var actived = pageSize == obj.paginationApp[i] ? " active " : "";
835
+ selectPagesize += `<a data-value="${obj.paginationApp[i]}" class="dropdown-item pageSizeGrid ${actived}" id="pagination${obj.paginationApp[i]}" href="#" >${obj.paginationApp[i]}</a>`;
755
836
  }
756
- selectPagesize += `</div>`
837
+ selectPagesize += `</div>`;
757
838
 
758
839
  let toolbarDefault = `<div class="float">
759
840
  <div class="btn-group float-end" role="group" aria-label="Button group with nested dropdown">
760
841
  ${createBtn}
761
842
  ${exportBtn}
762
843
  ${importBtn}
763
- <button type="button" class="btn btn-secondary btn-xs" title="${LANGUAGE['grid_personalize_labeling']}" data-bs-toggle="modal" data-bs-target="#grid-labels" ><i class="fa fa-font"></i></button>
764
- <button type="button" class="btn btn-info btn-xs" title="${LANGUAGE['grid_personalize_setting']}" data-bs-toggle="modal" data-bs-target="#grid-modal"><i class="fa fa-cog"></i></button>
765
- <button type="button" id="reloadgrid" class="btn btn-default btn-xs" title="${LANGUAGE['grid_refresh']}"><i class="fas fa-redo"></i></button>
844
+ <button type="button" class="btn btn-secondary btn-xs" title="${LANGUAGE["grid_personalize_labeling"]}" data-bs-toggle="modal" data-bs-target="#grid-labels" ><i class="fa fa-font"></i></button>
845
+ <button type="button" class="btn btn-info btn-xs" title="${LANGUAGE["grid_personalize_setting"]}" data-bs-toggle="modal" data-bs-target="#grid-modal"><i class="fa fa-cog"></i></button>
846
+ <button type="button" id="reloadgrid" class="btn btn-default btn-xs" title="${LANGUAGE["grid_refresh"]}"><i class="fas fa-redo"></i></button>
766
847
  <div class="btn-group" role="group">
767
848
  <button id="dropdownPagination" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
768
849
  Pagination ${pageSize}
@@ -772,7 +853,7 @@ const gridBootstrap5 = (obj) => {
772
853
 
773
854
  <div class="btn-group" role="group">
774
855
  <button id="dropdownExport" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
775
- ${obj.LANGUAGE['grid_export_data']}
856
+ ${obj.LANGUAGE["grid_export_data"]}
776
857
  </button>
777
858
  <div class="dropdown-menu" aria-labelledby="dropdownExport">
778
859
  <a class="dropdown-item export-xls" href="#"><i class="text-success fa fa-file-excel-o"></i> Excel </a>
@@ -780,9 +861,9 @@ const gridBootstrap5 = (obj) => {
780
861
  </div>
781
862
  </div>
782
863
 
783
- </div></div>`
784
- let toolbar = obj.toolbar ? obj.toolbar : toolbarDefault
785
- let html = ''
864
+ </div></div>`;
865
+ let toolbar = obj.toolbar ? obj.toolbar : toolbarDefault;
866
+ let html = "";
786
867
  html += `<div class="card">
787
868
  <div class="card-body">
788
869
  <div class="float-end">
@@ -800,118 +881,172 @@ const gridBootstrap5 = (obj) => {
800
881
  <div id="jsGrid" class="table-responsive"></div>
801
882
  </div>
802
883
  </div>
803
- </div>`
804
- return html
805
- }
884
+ </div>`;
885
+ return html;
886
+ };
806
887
 
807
888
  const tabBootstrap5 = (arr = []) => {
808
- let html = ''
809
- html += `<ul class="nav nav-tabs" id="myTab" role="tablist">${Util.newLine}`
889
+ let html = "";
890
+ html += `<ul class="nav nav-tabs" id="myTab" role="tablist">${Util.newLine}`;
810
891
  arr.forEach(function (item, index) {
811
- var active = '',
812
- selected = 'false'
892
+ var active = "",
893
+ selected = "false";
813
894
  if (item.active) {
814
- active = 'active'
815
- selected = 'true'
895
+ active = "active";
896
+ selected = "true";
816
897
  }
817
898
  html += `${Util.tab}
818
899
  <li class="nav-item" role="presentation" >
819
900
  <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>
820
- </li>${Util.newLine}`
821
- })
822
- html += `</ul>`
901
+ </li>${Util.newLine}`;
902
+ });
903
+ html += `</ul>`;
823
904
  return {
824
905
  html: html,
825
- class: 'tab-pane fade',
826
- active: 'show active',
827
- }
828
- }
906
+ class: "tab-pane fade",
907
+ active: "show active",
908
+ };
909
+ };
829
910
 
830
911
  Form.build = (obj) => {
831
- let html = ''
832
- let required = !obj.required ? '' : `<span class="required-mark">*</span>`
833
- let labelOptions = !obj.labelOptions ? '' : obj.labelOptions
834
- let relation = ''
912
+ let html = "";
913
+ let required = !obj.required ? "" : `<span class="required-mark">*</span>`;
914
+ let labelOptions = !obj.labelOptions ? "" : obj.labelOptions;
915
+ let relation = "";
835
916
  //form float
836
- let float = false
837
- let inline = false
838
- let attributes = Object.prototype.hasOwnProperty.call(obj, 'attributes') ? obj.attributes : {}
839
- let view_only = Object.prototype.hasOwnProperty.call(obj, 'view_only') ? obj.view_only : false
917
+ let float = false;
918
+ let inline = false;
919
+ let attributes = Object.prototype.hasOwnProperty.call(obj, "attributes")
920
+ ? obj.attributes
921
+ : {};
922
+ let view_only = Object.prototype.hasOwnProperty.call(obj, "view_only")
923
+ ? obj.view_only
924
+ : false;
840
925
  if (!view_only) {
841
- if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'name')) {
842
- if (obj.attributes.name == 'relation' || obj.attributes.name == 'typeahead' || obj.attributes.name == 'dropdown_multi') {
843
- relation = `<a target="_blank" href="/${obj.attributes.table}"> > </a>`
926
+ if (
927
+ attributes &&
928
+ Object.prototype.hasOwnProperty.call(attributes, "name")
929
+ ) {
930
+ if (
931
+ obj.attributes.name == "relation" ||
932
+ obj.attributes.name == "typeahead" ||
933
+ obj.attributes.name == "dropdown_multi"
934
+ ) {
935
+ relation = `<a target="_blank" href="/${obj.attributes.table}"> > </a>`;
844
936
  }
845
937
  }
846
938
  }
847
939
 
848
- if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'float')) {
849
- float = obj.attributes.float || false
940
+ if (attributes && Object.prototype.hasOwnProperty.call(attributes, "float")) {
941
+ float = obj.attributes.float || false;
850
942
  }
851
- if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'inline')) {
852
- inline = obj.attributes.inline || false
943
+ if (
944
+ attributes &&
945
+ Object.prototype.hasOwnProperty.call(attributes, "inline")
946
+ ) {
947
+ inline = obj.attributes.inline || false;
853
948
  }
854
949
 
855
950
  if (float) {
856
951
  //obj.class = "nice-float"
857
- if (obj.type == 'checkbox') {
858
- 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>`
952
+ if (obj.type == "checkbox") {
953
+ html += `<div class="form-switch mx-auto div${obj.id} mb-3">${Form.field(
954
+ obj
955
+ )}<label class="form-check-label" for="">${
956
+ obj.id
957
+ } ${required}</label></div>`;
859
958
  } else {
860
- 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>`
959
+ html += `<div class="form-floating mx-auto mb-3 mt-3 div${
960
+ obj.id
961
+ } mb-3">${Form.field(obj)}<label for="${obj.id}">${
962
+ obj.title
963
+ } ${required} ${relation}</label></div>`;
861
964
  }
862
965
  } else {
863
966
  if (inline) {
864
- if (obj.type == 'checkbox') {
865
- html += ` <div class="mb-3 row"><label for="${obj.id}" class="col form-check-label">${obj.title} ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
967
+ if (obj.type == "checkbox") {
968
+ html += ` <div class="mb-3 row"><label for="${
969
+ obj.id
970
+ }" class="col form-check-label">${
971
+ obj.title
972
+ } ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(
973
+ obj
974
+ )}</div></div>`;
866
975
  } else {
867
- html += ` <div class="mb-3 row"><label for="${obj.id}" class="col col-form-label">${obj.title} ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(obj)}</div></div>`
976
+ html += ` <div class="mb-3 row"><label for="${
977
+ obj.id
978
+ }" class="col col-form-label">${
979
+ obj.title
980
+ } ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(
981
+ obj
982
+ )}</div></div>`;
868
983
  }
869
984
  } else {
870
- if (obj.type == 'checkbox') {
871
- html += `<div class="form-check div${obj.id} mb-3">${Form.field(obj)}<label class="form-check-label" for="${obj.id}">${obj.title} ${labelOptions} ${required}</label></div>`
985
+ if (obj.type == "checkbox") {
986
+ html += `<div class="form-check div${obj.id} mb-3">${Form.field(
987
+ obj
988
+ )}<label class="form-check-label" for="${obj.id}">${
989
+ obj.title
990
+ } ${labelOptions} ${required}</label></div>`;
872
991
  } else {
873
- html += `<div class="form-group div${obj.id} mb-3"><label for="${obj.id}">${obj.title} ${labelOptions} ${required} ${relation}</label>${Form.field(obj)}</div>`
992
+ html += `<div class="form-group div${obj.id} mb-3"><label for="${
993
+ obj.id
994
+ }">${
995
+ obj.title
996
+ } ${labelOptions} ${required} ${relation}</label>${Form.field(
997
+ obj
998
+ )}</div>`;
874
999
  }
875
1000
  }
876
1001
  }
877
- return html
878
- }
1002
+ return html;
1003
+ };
879
1004
 
880
1005
  Form.modal = (obj, LANGUAGE = {}) => {
881
1006
  let attributeData = obj.attributeData,
882
1007
  visibles = obj.visibles || [],
883
1008
  invisibles = obj.invisibles || [],
884
- visiblesHtml = '',
885
- invisiblesHtml = '',
886
- labelsHtml = ''
1009
+ visiblesHtml = "",
1010
+ invisiblesHtml = "",
1011
+ labelsHtml = "";
887
1012
  visibles.map((item) => {
888
- 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>`
889
- })
1013
+ 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>`;
1014
+ });
890
1015
  invisibles.map((item) => {
891
- 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>`
892
- })
893
- let no = 1
1016
+ 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>`;
1017
+ });
1018
+ let no = 1;
894
1019
  for (let key in attributeData.labels) {
895
- 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>`
896
- no++
1020
+ 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>`;
1021
+ no++;
897
1022
  }
898
1023
  const modalFields = Form.modalBuild({
899
- id: 'grid-modal',
900
- size: 'modal-xl',
1024
+ id: "grid-modal",
1025
+ size: "modal-xl",
901
1026
  header: `<h5 id="dynagrid-1-grid-modal-label" class="modal-title">
902
- <i class="fa fa-cog"></i> ${LANGUAGE.grid_settings || 'Settings Grid'}
1027
+ <i class="fa fa-cog"></i> ${
1028
+ LANGUAGE.grid_settings || "Settings Grid"
1029
+ }
903
1030
  </h5>`,
904
1031
  body: `<div class="container">
905
- <form id="form-grid" class="form-vertical kv-form-bs4" action="/${obj.routeName}/grid" method="post">
1032
+ <form id="form-grid" class="form-vertical kv-form-bs4" action="/${
1033
+ obj.routeName
1034
+ }/grid" method="post">
906
1035
  <input type="hidden" name="_csrf" value="">
907
1036
  <div class="dynagrid-column-label">
908
- ${LANGUAGE.grid_configure || 'Configure Order and Display of Grid Columns'}
1037
+ ${
1038
+ LANGUAGE.grid_configure ||
1039
+ "Configure Order and Display of Grid Columns"
1040
+ }
909
1041
  </div>
910
1042
  <div class="row">
911
1043
  <div class="col-sm-5">
912
1044
  <ul id="gridleft" class="sortable-visible sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
913
1045
  <li data-name="" class="alert alert-info dynagrid-sortable-header disabled">
914
- ${LANGUAGE.grid_visible || 'Visible Columns'}
1046
+ ${
1047
+ LANGUAGE.grid_visible ||
1048
+ "Visible Columns"
1049
+ }
915
1050
  </li>
916
1051
  ${visiblesHtml}
917
1052
  </ul>
@@ -922,7 +1057,10 @@ Form.modal = (obj, LANGUAGE = {}) => {
922
1057
  <div class="col-sm-5">
923
1058
  <ul id="gridright"
924
1059
  class="sortable-hidden sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
925
- <li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${LANGUAGE.grid_invisible || 'Hidden / Fixed Columns'}
1060
+ <li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${
1061
+ LANGUAGE.grid_invisible ||
1062
+ "Hidden / Fixed Columns"
1063
+ }
926
1064
  </li>
927
1065
  ${invisiblesHtml}
928
1066
  </ul>
@@ -934,12 +1072,16 @@ Form.modal = (obj, LANGUAGE = {}) => {
934
1072
  </div> <!-- .dynagrid-config-form -->`,
935
1073
  footer: `<select id="zgrid_default_type" class="form-control select-sm" style="width:100px"><option value="1">Standart</option><option value="2">Fixed Header</option><option value="3">Footer Total</option><option value="4">No Wrap</option><option value="5">Fixed Header & No Wrap</option><option value="6">Footer Total & No Wrap</option><option value="7">Fixed Header & Footer & No Wrap</option></select>
936
1074
  <button type="reset" class="btn btn-default refresh gridreload image-button" title="Abort any changes and reset settings">
937
- <img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${LANGUAGE.reset || 'Reset'}
1075
+ <img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${
1076
+ LANGUAGE.reset || "Reset"
1077
+ }
938
1078
  </button>
939
1079
  <button type="button" class="btn btn-primary grid-submit boxy image-button" title="Save grid settings">
940
- <img src="/assets/icons/send.svg" class="icons-bg-white"> ${LANGUAGE.apply || 'Apply'}
1080
+ <img src="/assets/icons/send.svg" class="icons-bg-white"> ${
1081
+ LANGUAGE.apply || "Apply"
1082
+ }
941
1083
  </button>`,
942
- })
1084
+ });
943
1085
 
944
1086
  let modalFields2 = `
945
1087
  <div class="modal fade" id="grid-lock" tabindex="-1" aria-labelledby="grid-lock-label" aria-hidden="true">
@@ -955,7 +1097,7 @@ Form.modal = (obj, LANGUAGE = {}) => {
955
1097
  </div>
956
1098
  </div>
957
1099
  </div>
958
- </div>`
1100
+ </div>`;
959
1101
  let modalFields3 = `
960
1102
  <div class="modal fade" id="grid-approval" tabindex="-1" aria-labelledby="grid-approval-label" aria-hidden="true">
961
1103
  <div class="modal-dialog">
@@ -969,7 +1111,7 @@ Form.modal = (obj, LANGUAGE = {}) => {
969
1111
  </div>
970
1112
  </div>
971
1113
  </div>
972
- </div>`
1114
+ </div>`;
973
1115
  let modalFields4 = `
974
1116
  <div class="modal fade" id="grid-delete-all" tabindex="-1" aria-labelledby="grid-delete-all-label" aria-hidden="true">
975
1117
  <div class="modal-dialog">
@@ -983,25 +1125,35 @@ Form.modal = (obj, LANGUAGE = {}) => {
983
1125
  </div>
984
1126
  </div>
985
1127
  </div>
986
- </div>`
1128
+ </div>`;
987
1129
  try {
988
- return modalFields + modalFields2 + modalFields3 + modalFields4
1130
+ return modalFields + modalFields2 + modalFields3 + modalFields4;
989
1131
  } catch (err) {
990
- console.log(err)
1132
+ console.log(err);
991
1133
  }
992
- }
1134
+ };
993
1135
 
994
1136
  Form.modalBuild = (obj) => {
995
- let html = '<!-- Modal -->'
1137
+ let html = "<!-- Modal -->";
996
1138
  try {
997
- const size = obj.size ? `${obj.size}` : ''
998
- const id = obj.id ? `id="${obj.id}"` : ''
999
- const headerOptions = Util.attributeOptions(obj.headerOptions || {}, { class: 'modal-header' })
1000
- const header = obj.header ? `<div ${headerOptions} >${obj.header}<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>` : ''
1001
- const body = obj.body ? obj.body : ''
1002
- const bodyOptions = Util.attributeOptions(obj.bodyOptions || {}, { class: 'modal-body' })
1003
- const footerOptions = Util.attributeOptions(obj.footerOptions || {}, { class: 'modal-footer' })
1004
- const footer = obj.footer ? `<div ${footerOptions} >${obj.footer}</div>` : ''
1139
+ const size = obj.size ? `${obj.size}` : "";
1140
+ const id = obj.id ? `id="${obj.id}"` : "";
1141
+ const headerOptions = Util.attributeOptions(obj.headerOptions || {}, {
1142
+ class: "modal-header",
1143
+ });
1144
+ const header = obj.header
1145
+ ? `<div ${headerOptions} >${obj.header}<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>`
1146
+ : "";
1147
+ const body = obj.body ? obj.body : "";
1148
+ const bodyOptions = Util.attributeOptions(obj.bodyOptions || {}, {
1149
+ class: "modal-body",
1150
+ });
1151
+ const footerOptions = Util.attributeOptions(obj.footerOptions || {}, {
1152
+ class: "modal-footer",
1153
+ });
1154
+ const footer = obj.footer
1155
+ ? `<div ${footerOptions} >${obj.footer}</div>`
1156
+ : "";
1005
1157
  html += `${Util.newLine}<div class="modal fade " ${id} role="dialog" tabindex="-1">
1006
1158
  <div class="modal-dialog ${size}">
1007
1159
  <div class="modal-content">
@@ -1010,11 +1162,11 @@ Form.modalBuild = (obj) => {
1010
1162
  ${footer}
1011
1163
  </div>
1012
1164
  </div>
1013
- </div>`
1165
+ </div>`;
1014
1166
  } catch (error) {
1015
- console.log(error)
1167
+ console.log(error);
1016
1168
  }
1017
- return html
1018
- }
1169
+ return html;
1170
+ };
1019
1171
 
1020
- module.exports = Form
1172
+ module.exports = Form;