zet-lib 1.5.18 → 1.5.19
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 +159 -166
- package/package.json +1 -1
package/lib/Form.js
CHANGED
|
@@ -6,12 +6,19 @@
|
|
|
6
6
|
const Util = require("./Util");
|
|
7
7
|
|
|
8
8
|
const Form = {};
|
|
9
|
+
// Menghitung jumlah tanda "[" dalam str
|
|
10
|
+
const countOpenBrackets = (str) => {
|
|
11
|
+
return (str.match(/\[/g) || []).length;
|
|
12
|
+
};
|
|
13
|
+
const regex = /^(\w+)\[(\w+)\]/;
|
|
14
|
+
|
|
15
|
+
|
|
9
16
|
const addProperties = (obj, defaultObj = {}) => {
|
|
10
17
|
let html = "";
|
|
11
18
|
for (var key in obj) {
|
|
12
19
|
var value = defaultObj.hasOwnProperty(key)
|
|
13
|
-
|
|
14
|
-
|
|
20
|
+
? defaultObj[key] + obj[key]
|
|
21
|
+
: obj[key];
|
|
15
22
|
html += ` ${key}="${obj[key]}" `;
|
|
16
23
|
}
|
|
17
24
|
return html;
|
|
@@ -64,33 +71,33 @@ Form.field = (obj) => {
|
|
|
64
71
|
}
|
|
65
72
|
}
|
|
66
73
|
let type = obj.type || "text",
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
74
|
+
id = obj.isTableModule ? "" : Form.addProperty("id", [obj.id]),
|
|
75
|
+
name = obj.name ? ` name="${obj.name}" ` : "",
|
|
76
|
+
title = obj.title || "",
|
|
77
|
+
prepend = obj.prepend || "",
|
|
78
|
+
append = obj.append || "",
|
|
79
|
+
placeholder = Form.addProperty("placeholder", [obj.placeholder]),
|
|
80
|
+
tabindex = Form.addProperty("tabindex", [obj.tabindex]),
|
|
81
|
+
value = obj.value == undefined ? "" : obj.value,
|
|
82
|
+
classview = obj.class ? ` class="${obj.class}" ` : ` class=" " `,
|
|
83
|
+
disabled = obj.disabled ? ` disabled="disabled" ` : "",
|
|
84
|
+
data = obj.data,
|
|
85
|
+
required = obj.required == true ? ` required ` : "",
|
|
86
|
+
table = !obj.table ? "" : obj.table,
|
|
87
|
+
frameworkcss = !obj.frameworkcss ? "bootstrap5" : obj.frameworkcss,
|
|
88
|
+
form_css = !obj.form_css ? "bootstrap" : obj.form_css,
|
|
89
|
+
attributes = !obj.attributes ? {} : obj.attributes,
|
|
90
|
+
style = !obj.style ? "" : ` style=${obj.style} `,
|
|
91
|
+
additional_attributes = !obj.additional_attributes
|
|
92
|
+
? ""
|
|
93
|
+
: obj.additional_attributes,
|
|
94
|
+
information = !obj.information
|
|
95
|
+
? ""
|
|
96
|
+
: `<div id="information-${obj.id}" class="form-text">${Util.replaceAll(
|
|
97
|
+
obj.information.substring(1, obj.information.length - 1),
|
|
98
|
+
"\r\n",
|
|
99
|
+
"<br>"
|
|
100
|
+
)}</div>`;
|
|
94
101
|
//replaceAll("\r\n","<br>")
|
|
95
102
|
let attributeDate = "";
|
|
96
103
|
if (obj.hasOwnProperty.attributeData) {
|
|
@@ -100,21 +107,21 @@ Form.field = (obj) => {
|
|
|
100
107
|
}
|
|
101
108
|
let hasInputGroup = false;
|
|
102
109
|
let inputGroupLeft = "",
|
|
103
|
-
|
|
104
|
-
|
|
110
|
+
inputGroupRight = "",
|
|
111
|
+
inputGroupDivLeft = "";
|
|
105
112
|
if (attributes.hasOwnProperty("hasInputGroup") && attributes.hasInputGroup) {
|
|
106
113
|
hasInputGroup = true;
|
|
107
114
|
prepend = `<div class="input-group mb-3">`;
|
|
108
115
|
append = `</div>`;
|
|
109
116
|
if (
|
|
110
|
-
|
|
111
|
-
|
|
117
|
+
attributes.hasOwnProperty("inputGroupLeft") &&
|
|
118
|
+
attributes.inputGroupLeft
|
|
112
119
|
) {
|
|
113
120
|
inputGroupLeft = `<span class="input-group-text">${attributes.inputGroupLeft}</span>`;
|
|
114
121
|
}
|
|
115
122
|
if (
|
|
116
|
-
|
|
117
|
-
|
|
123
|
+
attributes.hasOwnProperty("inputGroupRight") &&
|
|
124
|
+
attributes.inputGroupRight
|
|
118
125
|
) {
|
|
119
126
|
inputGroupRight = `<span class="input-group-text">${attributes.inputGroupRight}</span>`;
|
|
120
127
|
}
|
|
@@ -122,8 +129,8 @@ Form.field = (obj) => {
|
|
|
122
129
|
let displayForm = "";
|
|
123
130
|
let readonly = obj.readonly ? `readonly` : ``;
|
|
124
131
|
let boxyclass = "",
|
|
125
|
-
|
|
126
|
-
|
|
132
|
+
checked = "",
|
|
133
|
+
selects = "";
|
|
127
134
|
switch (type) {
|
|
128
135
|
case "text":
|
|
129
136
|
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}`;
|
|
@@ -167,50 +174,36 @@ Form.field = (obj) => {
|
|
|
167
174
|
|
|
168
175
|
case "image":
|
|
169
176
|
boxyclass = value ? "boxy" : "";
|
|
177
|
+
let imageLinkName = obj.name || ""
|
|
178
|
+
let bracketsImage = countOpenBrackets(imageLinkName);
|
|
179
|
+
let imageLinkParent = obj.routeName
|
|
180
|
+
if(bracketsImage>1){
|
|
181
|
+
const matchImage = imageLinkName.match(regex);
|
|
182
|
+
imageLinkParent = `${matchFile[1]}/${matchFile[2]}`;
|
|
183
|
+
}
|
|
170
184
|
let stringvalue = value ? value.substring(13) : "";
|
|
171
|
-
let trashicon = stringvalue
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
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="${
|
|
180
|
-
obj.routeName
|
|
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}`;
|
|
185
|
+
let trashicon = stringvalue ? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">`: "";
|
|
186
|
+
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}>
|
|
187
|
+
<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${
|
|
188
|
+
obj.id
|
|
189
|
+
}" /><br><a class="text-success" target="_blank" href="/uploads/${imageLinkParent}/${value}"> ${stringvalue}</a> ${trashicon}</div>${append}`;
|
|
190
190
|
break;
|
|
191
191
|
|
|
192
192
|
case "file":
|
|
193
193
|
boxyclass = value ? "boxy" : "";
|
|
194
|
+
let fileLinkName = obj.name || ""
|
|
195
|
+
let bracketsFile = countOpenBrackets(fileLinkName);
|
|
196
|
+
let fileLinkParent = obj.routeName
|
|
197
|
+
if(bracketsFile>1){
|
|
198
|
+
const matchFile = fileLinkName.match(regex);
|
|
199
|
+
fileLinkParent = `${matchFile[1]}/${matchFile[2]}`;
|
|
200
|
+
}
|
|
194
201
|
let stringvaluefile = value ? value.substring(13) : "";
|
|
195
|
-
let trashiconfile = stringvaluefile
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}' )" class="form-control ${
|
|
201
|
-
obj.class || ""
|
|
202
|
-
}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
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/${
|
|
212
|
-
obj.routeName
|
|
213
|
-
}/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`;
|
|
202
|
+
let trashiconfile = stringvaluefile? `<img class="tabler-icons icons-filter-danger" src="/assets/icons/trash-filled.svg" onclick="removeimage(this)">`: "";
|
|
203
|
+
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 ${
|
|
204
|
+
obj.class || ""}" ${id} ${name} ${placeholder} value="${value}" ${htmlOptions}>
|
|
205
|
+
<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}" />
|
|
206
|
+
<a class="text-success" target="_blank" href="/uploads/${fileLinkParent}/${value}"> ${stringvaluefile}</a>${trashiconfile}</div>${information}${append}`;
|
|
214
207
|
break;
|
|
215
208
|
|
|
216
209
|
case "email":
|
|
@@ -387,11 +380,11 @@ Form.field = (obj) => {
|
|
|
387
380
|
if (Array.isArray(arr)) {
|
|
388
381
|
arr.forEach(function (item, index) {
|
|
389
382
|
spanmulti += `<span class='span${obj.id}'>${
|
|
390
|
-
|
|
383
|
+
index + 1
|
|
391
384
|
}. <input type='hidden' name='${obj.name}[]' value='${item}' />${
|
|
392
|
-
|
|
385
|
+
obj.multi[item]
|
|
393
386
|
}<img class='tabler-icons icons-filter-danger pull-right' src='/assets/icons/trash-filled.svg' onclick='$(this).closest("span").remove();' title='${
|
|
394
|
-
|
|
387
|
+
LANGUAGE["delete"]
|
|
395
388
|
}' /><br></span>`;
|
|
396
389
|
});
|
|
397
390
|
}
|
|
@@ -469,9 +462,9 @@ Form.field = (obj) => {
|
|
|
469
462
|
for (var key in obj.fields) {
|
|
470
463
|
let val = !value[key] ? obj.fields[key] : value[key];
|
|
471
464
|
description = Util.replaceAll(
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
465
|
+
description,
|
|
466
|
+
`[[[${key}]]]`,
|
|
467
|
+
`<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
468
|
);
|
|
476
469
|
}
|
|
477
470
|
displayForm = `${prepend}<div class="boxy">${description}</div>${information}${append}`;
|
|
@@ -484,17 +477,17 @@ Form.field = (obj) => {
|
|
|
484
477
|
|
|
485
478
|
case "json":
|
|
486
479
|
displayForm += `<textarea ${additional_attributes} class="form-control ${
|
|
487
|
-
|
|
480
|
+
obj.class
|
|
488
481
|
}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
|
|
489
|
-
|
|
482
|
+
obj.value
|
|
490
483
|
)}</textarea>${information}${append}`;
|
|
491
484
|
break;
|
|
492
485
|
|
|
493
486
|
case "json_array":
|
|
494
487
|
displayForm += `<textarea ${additional_attributes} class="form-control ${
|
|
495
|
-
|
|
488
|
+
obj.class
|
|
496
489
|
}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
|
|
497
|
-
|
|
490
|
+
obj.value
|
|
498
491
|
)}</textarea>${information}${append}`;
|
|
499
492
|
break;
|
|
500
493
|
|
|
@@ -529,9 +522,9 @@ Form.field = (obj) => {
|
|
|
529
522
|
|
|
530
523
|
case "array":
|
|
531
524
|
displayForm += `<textarea ${additional_attributes} class="form-control ${
|
|
532
|
-
|
|
525
|
+
obj.class
|
|
533
526
|
}" ${id} ${name} ${placeholder} ${readonly} ${style} ${htmlOptions} rows="4">${JSON.stringify(
|
|
534
|
-
|
|
527
|
+
obj.value
|
|
535
528
|
)}</textarea>${information}${append}`;
|
|
536
529
|
break;
|
|
537
530
|
|
|
@@ -539,7 +532,7 @@ Form.field = (obj) => {
|
|
|
539
532
|
displayForm = `${prepend}<input ${additional_attributes} autocomplete="off" autofocus="" ${tabindex} ${style} type="text" ${classview} readonly ${id} ${placeholder} ${required} value="${value}" ${htmlOptions}>${information}${append}`;
|
|
540
533
|
break;
|
|
541
534
|
|
|
542
|
-
|
|
535
|
+
//additionals for form view in view
|
|
543
536
|
case "plaintext":
|
|
544
537
|
displayForm = `<span class="">${obj.value || ""}</span>`;
|
|
545
538
|
break;
|
|
@@ -554,13 +547,13 @@ Form.field = (obj) => {
|
|
|
554
547
|
|
|
555
548
|
case "location":
|
|
556
549
|
displayForm = `${prepend}<input type="text" class="form-control ${
|
|
557
|
-
|
|
550
|
+
obj.class
|
|
558
551
|
}" id="search_map_location" placeholder="type a place" ${required} value="" ${htmlOptions}>${information}${append}
|
|
559
552
|
<textarea ${id} ${name} style="display: none" ${readonly} rows="2">${JSON.stringify(
|
|
560
|
-
|
|
553
|
+
obj.value
|
|
561
554
|
)}</textarea>
|
|
562
555
|
<div id="map_${obj.id}" style="background-color:#C3C3C3;width: 100%;height: ${
|
|
563
|
-
|
|
556
|
+
obj.height
|
|
564
557
|
}px"></div>`;
|
|
565
558
|
break;
|
|
566
559
|
|
|
@@ -575,11 +568,11 @@ Form.field = (obj) => {
|
|
|
575
568
|
|
|
576
569
|
case "dropzoneview":
|
|
577
570
|
let countFiles =
|
|
578
|
-
|
|
571
|
+
obj.value && obj.value.length ? obj.value.length + " Files" : "";
|
|
579
572
|
let bodydropzoneview =
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
573
|
+
countFiles == ""
|
|
574
|
+
? ""
|
|
575
|
+
: `<div class="card-header">${countFiles} <div class="float-end">
|
|
583
576
|
<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>
|
|
584
577
|
<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>
|
|
585
578
|
</div></div>`;
|
|
@@ -594,11 +587,11 @@ Form.field = (obj) => {
|
|
|
594
587
|
displayForm += `<img src="${filename}" class="boxy zoom mx-2 my-2" width="200px">`;
|
|
595
588
|
} else {
|
|
596
589
|
displayForm +=
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
590
|
+
"<br>" +
|
|
591
|
+
Util.fileView(`/uploads/${obj.table}/${obj.key}/`, item, {
|
|
592
|
+
withIcon: true,
|
|
593
|
+
}) +
|
|
594
|
+
"<br>";
|
|
602
595
|
}
|
|
603
596
|
});
|
|
604
597
|
}
|
|
@@ -616,11 +609,11 @@ Form.field = (obj) => {
|
|
|
616
609
|
|
|
617
610
|
case "dropboxview":
|
|
618
611
|
let countdropboxFiles =
|
|
619
|
-
|
|
612
|
+
obj.value && obj.value.length ? obj.value.length + " Files" : "";
|
|
620
613
|
let bodydropboxview =
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
614
|
+
countdropboxFiles == ""
|
|
615
|
+
? ""
|
|
616
|
+
: `<div class="card-header">${countdropboxFiles} <div class="float-end">
|
|
624
617
|
<span class="icon-small icons-light" title="Download"><img onclick="location.href= '/zdownloads-dropbox/${obj.routeName}/${obj.key}/${obj.dataId}'" class="icons-bg-black gridview icon-image" src="/assets/icons/download.svg"></span>
|
|
625
618
|
<span class="icon-small icons-light" title="Compress Images"><img onclick="if(window.confirm('Compress Images ?')) {ajaxPost('/zcompress-dropbox',{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>
|
|
626
619
|
</div></div>`;
|
|
@@ -792,13 +785,13 @@ const card45 = (obj) => {
|
|
|
792
785
|
let html = obj.prepend;
|
|
793
786
|
let objHeader = obj.headerOptions || {};
|
|
794
787
|
let headerOptions = obj.headerOptions
|
|
795
|
-
|
|
796
|
-
|
|
788
|
+
? addProperties(obj.headerOptions, { class: "card" })
|
|
789
|
+
: addProperties({ class: "card" });
|
|
797
790
|
let img = obj.img ? `<img ${addProperties(obj.img)} >` : "";
|
|
798
791
|
let title = `<div class="card-header"><h5 class="card-title">${obj.title}</h5></div>`;
|
|
799
792
|
let footer = (obj.footer = obj.footer
|
|
800
|
-
|
|
801
|
-
|
|
793
|
+
? `<div class="card-footer">${obj.footer}</div>`
|
|
794
|
+
: ``);
|
|
802
795
|
let append = !obj.append ? "" : obj.append;
|
|
803
796
|
html += `<div ${headerOptions}>
|
|
804
797
|
${img}
|
|
@@ -839,11 +832,11 @@ const gridBootstrap5 = (obj) => {
|
|
|
839
832
|
let routeName = obj.routeName;
|
|
840
833
|
let advanceSearch = !obj.advanceSearch ? "" : obj.advanceSearch;
|
|
841
834
|
let createBtn = "",
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
835
|
+
exportBtn = "",
|
|
836
|
+
importBtn = "",
|
|
837
|
+
superBtn = "",
|
|
838
|
+
exportBtnGroup = "",
|
|
839
|
+
selectPagesize = "";
|
|
847
840
|
if (levels.create) {
|
|
848
841
|
createBtn = `<button type="button" id="create_btn" class="btn btn-success btn-xs"><i class="fa fa-plus white-icon"></i></button>`;
|
|
849
842
|
}
|
|
@@ -926,7 +919,7 @@ const tabBootstrap5 = (arr = []) => {
|
|
|
926
919
|
html += `<ul class="nav nav-tabs" id="myTab" role="tablist">${Util.newLine}`;
|
|
927
920
|
arr.forEach(function (item, index) {
|
|
928
921
|
var active = "",
|
|
929
|
-
|
|
922
|
+
selected = "false";
|
|
930
923
|
if (item.active) {
|
|
931
924
|
active = "active";
|
|
932
925
|
selected = "true";
|
|
@@ -953,20 +946,20 @@ Form.build = (obj) => {
|
|
|
953
946
|
let float = false;
|
|
954
947
|
let inline = false;
|
|
955
948
|
let attributes = Object.prototype.hasOwnProperty.call(obj, "attributes")
|
|
956
|
-
|
|
957
|
-
|
|
949
|
+
? obj.attributes
|
|
950
|
+
: {};
|
|
958
951
|
let view_only = Object.prototype.hasOwnProperty.call(obj, "view_only")
|
|
959
|
-
|
|
960
|
-
|
|
952
|
+
? obj.view_only
|
|
953
|
+
: false;
|
|
961
954
|
if (!view_only) {
|
|
962
955
|
if (
|
|
963
|
-
|
|
964
|
-
|
|
956
|
+
attributes &&
|
|
957
|
+
Object.prototype.hasOwnProperty.call(attributes, "name")
|
|
965
958
|
) {
|
|
966
959
|
if (
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
960
|
+
obj.attributes.name == "relation" ||
|
|
961
|
+
obj.attributes.name == "typeahead" ||
|
|
962
|
+
obj.attributes.name == "dropdown_multi"
|
|
970
963
|
) {
|
|
971
964
|
relation = `<a target="_blank" href="/${obj.attributes.table}"> > </a>`;
|
|
972
965
|
}
|
|
@@ -977,8 +970,8 @@ Form.build = (obj) => {
|
|
|
977
970
|
float = obj.attributes.float || false;
|
|
978
971
|
}
|
|
979
972
|
if (
|
|
980
|
-
|
|
981
|
-
|
|
973
|
+
attributes &&
|
|
974
|
+
Object.prototype.hasOwnProperty.call(attributes, "inline")
|
|
982
975
|
) {
|
|
983
976
|
inline = obj.attributes.inline || false;
|
|
984
977
|
}
|
|
@@ -987,50 +980,50 @@ Form.build = (obj) => {
|
|
|
987
980
|
//obj.class = "nice-float"
|
|
988
981
|
if (obj.type == "checkbox") {
|
|
989
982
|
html += `<div class="form-switch mx-auto div${obj.id} mb-3">${Form.field(
|
|
990
|
-
|
|
983
|
+
obj
|
|
991
984
|
)}<label class="form-check-label" for="">${
|
|
992
|
-
|
|
985
|
+
obj.id
|
|
993
986
|
} ${required}</label></div>`;
|
|
994
987
|
} else {
|
|
995
988
|
html += `<div class="form-floating mx-auto mb-3 mt-3 div${
|
|
996
|
-
|
|
989
|
+
obj.id
|
|
997
990
|
} mb-3">${Form.field(obj)}<label for="${obj.id}">${
|
|
998
|
-
|
|
991
|
+
obj.title
|
|
999
992
|
} ${required} ${relation}</label></div>`;
|
|
1000
993
|
}
|
|
1001
994
|
} else {
|
|
1002
995
|
if (inline) {
|
|
1003
996
|
if (obj.type == "checkbox") {
|
|
1004
997
|
html += ` <div class="mb-3 row"><label for="${
|
|
1005
|
-
|
|
998
|
+
obj.id
|
|
1006
999
|
}" class="col form-check-label">${
|
|
1007
|
-
|
|
1000
|
+
obj.title
|
|
1008
1001
|
} ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(
|
|
1009
|
-
|
|
1002
|
+
obj
|
|
1010
1003
|
)}</div></div>`;
|
|
1011
1004
|
} else {
|
|
1012
1005
|
html += ` <div class="mb-3 row"><label for="${
|
|
1013
|
-
|
|
1006
|
+
obj.id
|
|
1014
1007
|
}" class="col col-form-label">${
|
|
1015
|
-
|
|
1008
|
+
obj.title
|
|
1016
1009
|
} ${labelOptions} ${required} ${relation}</label><div class="col-8">${Form.field(
|
|
1017
|
-
|
|
1010
|
+
obj
|
|
1018
1011
|
)}</div></div>`;
|
|
1019
1012
|
}
|
|
1020
1013
|
} else {
|
|
1021
1014
|
if (obj.type == "checkbox") {
|
|
1022
1015
|
html += `<div class="form-check div${obj.id} mb-3">${Form.field(
|
|
1023
|
-
|
|
1016
|
+
obj
|
|
1024
1017
|
)}<label class="form-check-label" for="${obj.id}">${
|
|
1025
|
-
|
|
1018
|
+
obj.title
|
|
1026
1019
|
} ${labelOptions} ${required}</label></div>`;
|
|
1027
1020
|
} else {
|
|
1028
1021
|
html += `<div class="form-group div${obj.id} mb-3"><label for="${
|
|
1029
|
-
|
|
1022
|
+
obj.id
|
|
1030
1023
|
}">${
|
|
1031
|
-
|
|
1024
|
+
obj.title
|
|
1032
1025
|
} ${labelOptions} ${required} ${relation}</label>${Form.field(
|
|
1033
|
-
|
|
1026
|
+
obj
|
|
1034
1027
|
)}</div>`;
|
|
1035
1028
|
}
|
|
1036
1029
|
}
|
|
@@ -1040,11 +1033,11 @@ Form.build = (obj) => {
|
|
|
1040
1033
|
|
|
1041
1034
|
Form.modal = (obj, LANGUAGE = {}) => {
|
|
1042
1035
|
let attributeData = obj.attributeData,
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1036
|
+
visibles = obj.visibles || [],
|
|
1037
|
+
invisibles = obj.invisibles || [],
|
|
1038
|
+
visiblesHtml = "",
|
|
1039
|
+
invisiblesHtml = "",
|
|
1040
|
+
labelsHtml = "";
|
|
1048
1041
|
visibles.map((item) => {
|
|
1049
1042
|
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>`;
|
|
1050
1043
|
});
|
|
@@ -1061,28 +1054,28 @@ Form.modal = (obj, LANGUAGE = {}) => {
|
|
|
1061
1054
|
size: "modal-xl",
|
|
1062
1055
|
header: `<h5 id="dynagrid-1-grid-modal-label" class="modal-title">
|
|
1063
1056
|
<i class="fa fa-cog"></i> ${
|
|
1064
|
-
|
|
1065
|
-
|
|
1057
|
+
LANGUAGE.grid_settings || "Settings Grid"
|
|
1058
|
+
}
|
|
1066
1059
|
</h5>`,
|
|
1067
1060
|
body: `<div class="container">
|
|
1068
1061
|
<form id="form-grid" class="form-vertical kv-form-bs4" action="/${
|
|
1069
|
-
|
|
1070
|
-
|
|
1062
|
+
obj.routeName
|
|
1063
|
+
}/grid" method="post">
|
|
1071
1064
|
<input type="hidden" name="_csrf" value="">
|
|
1072
1065
|
<div class="dynagrid-column-label">
|
|
1073
1066
|
${
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1067
|
+
LANGUAGE.grid_configure ||
|
|
1068
|
+
"Configure Order and Display of Grid Columns"
|
|
1069
|
+
}
|
|
1077
1070
|
</div>
|
|
1078
1071
|
<div class="row">
|
|
1079
1072
|
<div class="col-sm-5">
|
|
1080
1073
|
<ul id="gridleft" class="sortable-visible sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
|
|
1081
1074
|
<li data-name="" class="alert alert-info dynagrid-sortable-header disabled">
|
|
1082
1075
|
${
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1076
|
+
LANGUAGE.grid_visible ||
|
|
1077
|
+
"Visible Columns"
|
|
1078
|
+
}
|
|
1086
1079
|
</li>
|
|
1087
1080
|
${visiblesHtml}
|
|
1088
1081
|
</ul>
|
|
@@ -1094,9 +1087,9 @@ Form.modal = (obj, LANGUAGE = {}) => {
|
|
|
1094
1087
|
<ul id="gridright"
|
|
1095
1088
|
class="sortable-hidden sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
|
|
1096
1089
|
<li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1090
|
+
LANGUAGE.grid_invisible ||
|
|
1091
|
+
"Hidden / Fixed Columns"
|
|
1092
|
+
}
|
|
1100
1093
|
</li>
|
|
1101
1094
|
${invisiblesHtml}
|
|
1102
1095
|
</ul>
|
|
@@ -1109,13 +1102,13 @@ Form.modal = (obj, LANGUAGE = {}) => {
|
|
|
1109
1102
|
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>
|
|
1110
1103
|
<button type="reset" class="btn btn-default refresh gridreload image-button" title="Abort any changes and reset settings">
|
|
1111
1104
|
<img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${
|
|
1112
|
-
|
|
1113
|
-
|
|
1105
|
+
LANGUAGE.reset || "Reset"
|
|
1106
|
+
}
|
|
1114
1107
|
</button>
|
|
1115
1108
|
<button type="button" class="btn btn-primary grid-submit boxy image-button" title="Save grid settings">
|
|
1116
1109
|
<img src="/assets/icons/send.svg" class="icons-bg-white"> ${
|
|
1117
|
-
|
|
1118
|
-
|
|
1110
|
+
LANGUAGE.apply || "Apply"
|
|
1111
|
+
}
|
|
1119
1112
|
</button>`,
|
|
1120
1113
|
});
|
|
1121
1114
|
|
|
@@ -1178,8 +1171,8 @@ Form.modalBuild = (obj) => {
|
|
|
1178
1171
|
class: "modal-header",
|
|
1179
1172
|
});
|
|
1180
1173
|
const header = obj.header
|
|
1181
|
-
|
|
1182
|
-
|
|
1174
|
+
? `<div ${headerOptions} >${obj.header}<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>`
|
|
1175
|
+
: "";
|
|
1183
1176
|
const body = obj.body ? obj.body : "";
|
|
1184
1177
|
const bodyOptions = Util.attributeOptions(obj.bodyOptions || {}, {
|
|
1185
1178
|
class: "modal-body",
|
|
@@ -1188,8 +1181,8 @@ Form.modalBuild = (obj) => {
|
|
|
1188
1181
|
class: "modal-footer",
|
|
1189
1182
|
});
|
|
1190
1183
|
const footer = obj.footer
|
|
1191
|
-
|
|
1192
|
-
|
|
1184
|
+
? `<div ${footerOptions} >${obj.footer}</div>`
|
|
1185
|
+
: "";
|
|
1193
1186
|
html += `${Util.newLine}<div class="modal fade " ${id} role="dialog" tabindex="-1">
|
|
1194
1187
|
<div class="modal-dialog ${size}">
|
|
1195
1188
|
<div class="modal-content">
|