"use strict";
let fv, offCanvasEl;
document.addEventListener("DOMContentLoaded", function (e) {
var t;
t = document.getElementById("form-add-new-record"), setTimeout(() => {
const e = document.querySelector(".create-new"), t = document.querySelector("#add-new-record");
e && e.addEventListener("click", function () {
offCanvasEl = new bootstrap.Offcanvas(t), t.querySelector(".dt-full-name").value = "", t.querySelector(".dt-post").value = "", t.querySelector(".dt-email").value = "", t.querySelector(".dt-date").value = "", t.querySelector(".dt-salary").value = "", offCanvasEl.show()
})
}, 200), fv = FormValidation.formValidation(t, {
fields: {
basicFullname: {validators: {notEmpty: {message: "The name is required"}}},
basicPost: {validators: {notEmpty: {message: "Post field is required"}}},
basicEmail: {
validators: {
notEmpty: {message: "The Email is required"},
emailAddress: {message: "The value is not a valid email address"}
}
},
basicDate: {
validators: {
notEmpty: {message: "Joining Date is required"},
date: {format: "MM/DD/YYYY", message: "The value is not a valid date"}
}
},
basicSalary: {validators: {notEmpty: {message: "Basic Salary is required"}}}
},
plugins: {
trigger: new FormValidation.plugins.Trigger,
bootstrap5: new FormValidation.plugins.Bootstrap5({eleValidClass: "", rowSelector: ".col-sm-12"}),
submitButton: new FormValidation.plugins.SubmitButton,
autoFocus: new FormValidation.plugins.AutoFocus
},
init: e => {
e.on("plugins.message.placed", function (e) {
e.element.parentElement.classList.contains("input-group") && e.element.parentElement.insertAdjacentElement("afterend", e.messageElement)
})
}
}), (t = document.querySelector('[name="basicDate"]')) && t.flatpickr({
enableTime: !1, dateFormat: "m/d/Y", onChange: function () {
fv.revalidateField("basicDate")
}
})
}), $(function () {
var l, t, e = $(".datatables-basic"), a = $(".dt-complex-header"), s = $(".dt-row-grouping"), n = $(".dt-multilingual"),
r = (e.length && (l = e.DataTable({
ajax: assetsPath + "json/table-datatable.json",
columns: [{data: ""}, {data: "id"}, {data: "id"}, {data: "full_name"}, {data: "email"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
columnDefs: [{
className: "control",
orderable: !1,
searchable: !1,
responsivePriority: 2,
targets: 0,
render: function (e, t, a, s) {
return ""
}
}, {
targets: 1,
orderable: !1,
searchable: !1,
responsivePriority: 3,
checkboxes: !0,
checkboxes: {selectAllRender: ''},
render: function () {
return ''
}
}, {targets: 2, searchable: !1, visible: !1}, {
targets: 3, responsivePriority: 4, render: function (e, t, a, s) {
var n = a.avatar, l = a.full_name, r = a.post;
return '
' + (n ? '

' : '
' + (n = (((n = (l = a.full_name).match(/\b\w/g) || []).shift() || "") + (n.pop() || "")).toUpperCase()) + "") + '
' + l + '' + r + "
"
}
}, {responsivePriority: 1, targets: 4}, {
targets: -2, render: function (e, t, a, s) {
var a = a.status, n = {
1: {title: "Current", class: "bg-label-primary"},
2: {title: "Professional", class: " bg-label-success"},
3: {title: "Rejected", class: " bg-label-danger"},
4: {title: "Resigned", class: " bg-label-warning"},
5: {title: "Applied", class: " bg-label-info"}
};
return void 0 === n[a] ? e : '' + n[a].title + ""
}
}, {
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
return ''
}
}],
order: [[2, "desc"]],
dom: '<"card-header flex-column flex-md-row"<"head-label text-center"><"dt-action-buttons text-end pt-3 pt-md-0"B>><"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
displayLength: 7,
lengthMenu: [7, 10, 25, 50, 75, 100],
buttons: [{
extend: "collection",
className: "btn btn-label-primary dropdown-toggle me-2",
text: ' Export',
buttons: [{
extend: "print",
text: 'Print',
className: "dropdown-item",
exportOptions: {
columns: [3, 4, 5, 6, 7], format: {
body: function (e, t, a) {
var s;
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
}), s)
}
}
},
customize: function (e) {
$(e.document.body).css("color", config.colors.headingColor).css("border-color", config.colors.borderColor).css("background-color", config.colors.bodyBg), $(e.document.body).find("table").addClass("compact").css("color", "inherit").css("border-color", "inherit").css("background-color", "inherit")
}
}, {
extend: "csv",
text: 'Csv',
className: "dropdown-item",
exportOptions: {
columns: [3, 4, 5, 6, 7], format: {
body: function (e, t, a) {
var s;
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
}), s)
}
}
}
}, {
extend: "excel",
text: 'Excel',
className: "dropdown-item",
exportOptions: {
columns: [3, 4, 5, 6, 7], format: {
body: function (e, t, a) {
var s;
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
}), s)
}
}
}
}, {
extend: "pdf",
text: 'Pdf',
className: "dropdown-item",
exportOptions: {
columns: [3, 4, 5, 6, 7], format: {
body: function (e, t, a) {
var s;
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
}), s)
}
}
}
}, {
extend: "copy",
text: 'Copy',
className: "dropdown-item",
exportOptions: {
columns: [3, 4, 5, 6, 7], format: {
body: function (e, t, a) {
var s;
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
}), s)
}
}
}
}]
}, {
text: ' Add New Record',
className: "create-new btn btn-primary"
}],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (e) {
return "Details of " + e.data().full_name
}
}), type: "column", renderer: function (e, t, a) {
a = $.map(a, function (e, t) {
return "" !== e.title ? '' + e.title + ": | " + e.data + " |
" : ""
}).join("");
return !!a && $('').append(a)
}
}
}
}), $("div.head-label").html('DataTable with Buttons
'), $(".dt-buttons > .btn-group > button").removeClass("btn-secondary")), 101);
fv.on("core.form.valid", function () {
var e = $(".add-new-record .dt-full-name").val(), t = $(".add-new-record .dt-post").val(), a = $(".add-new-record .dt-email").val(),
s = $(".add-new-record .dt-date").val(), n = $(".add-new-record .dt-salary").val();
"" != e && (l.row.add({
id: r,
full_name: e,
post: t,
email: a,
start_date: s,
salary: "$" + n,
status: 5
}).draw(), r++, offCanvasEl.hide())
}), $(".datatables-basic tbody").on("click", ".delete-record", function () {
l.row($(this).parents("tr")).remove().draw()
}), a.length && a.DataTable({
ajax: assetsPath + "json/table-datatable.json",
columns: [{data: "full_name"}, {data: "email"}, {data: "city"}, {data: "post"}, {data: "salary"}, {data: "status"}, {data: ""}],
columnDefs: [{
targets: -2, render: function (e, t, a, s) {
var a = a.status, n = {
1: {title: "Current", class: "bg-label-primary"},
2: {title: "Professional", class: " bg-label-success"},
3: {title: "Rejected", class: " bg-label-danger"},
4: {title: "Resigned", class: " bg-label-warning"},
5: {title: "Applied", class: " bg-label-info"}
};
return void 0 === n[a] ? e : '' + n[a].title + ""
}
}, {
targets: -1, title: "Actions", orderable: !1, render: function (e, t, a, s) {
return ''
}
}],
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
displayLength: 7,
lengthMenu: [7, 10, 25, 50, 75, 100]
}), s.length && (t = s.DataTable({
ajax: assetsPath + "json/table-datatable.json",
columns: [{data: ""}, {data: "full_name"}, {data: "post"}, {data: "email"}, {data: "city"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
columnDefs: [{
className: "control", orderable: !1, targets: 0, searchable: !1, render: function (e, t, a, s) {
return ""
}
}, {visible: !1, targets: 2}, {
targets: -2, render: function (e, t, a, s) {
var a = a.status, n = {
1: {title: "Current", class: "bg-label-primary"},
2: {title: "Professional", class: " bg-label-success"},
3: {title: "Rejected", class: " bg-label-danger"},
4: {title: "Resigned", class: " bg-label-warning"},
5: {title: "Applied", class: " bg-label-info"}
};
return void 0 === n[a] ? e : '' + n[a].title + ""
}
}, {
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
return ''
}
}],
order: [[2, "asc"]],
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
displayLength: 7,
lengthMenu: [7, 10, 25, 50, 75, 100],
drawCallback: function (e) {
var t = this.api(), a = t.rows({page: "current"}).nodes(), s = null;
t.column(2, {page: "current"}).data().each(function (e, t) {
s !== e && ($(a).eq(t).before('' + e + " |
"), s = e)
})
},
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (e) {
return "Details of " + e.data().full_name
}
}), type: "column", renderer: function (e, t, a) {
a = $.map(a, function (e, t) {
return "" !== e.title ? '' + e.title + ": | " + e.data + " |
" : ""
}).join("");
return !!a && $('').append(a)
}
}
}
}), $(".dt-row-grouping tbody").on("click", "tr.group", function () {
var e = t.order()[0];
(2 === e[0] && "asc" === e[1] ? t.order([2, "desc"]) : t.order([2, "asc"])).draw()
}));
n.length && n.DataTable({
ajax: assetsPath + "json/table-datatable.json",
columns: [{data: ""}, {data: "full_name"}, {data: "post"}, {data: "email"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
columnDefs: [{
className: "control", orderable: !1, targets: 0, searchable: !1, render: function (e, t, a, s) {
return ""
}
}, {
targets: -2, render: function (e, t, a, s) {
var a = a.status, n = {
1: {title: "Current", class: "bg-label-primary"},
2: {title: "Professional", class: " bg-label-success"},
3: {title: "Rejected", class: " bg-label-danger"},
4: {title: "Resigned", class: " bg-label-warning"},
5: {title: "Applied", class: " bg-label-info"}
};
return void 0 === n[a] ? e : '' + n[a].title + ""
}
}, {
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
return ''
}
}],
language: {url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"},
displayLength: 7,
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
lengthMenu: [7, 10, 25, 50, 75, 100],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (e) {
return "Details of " + e.data().full_name
}
}), type: "column", renderer: function (e, t, a) {
a = $.map(a, function (e, t) {
return "" !== e.title ? '' + e.title + ": | " + e.data + " |
" : ""
}).join("");
return !!a && $('').append(a)
}
}
}
}), setTimeout(() => {
$(".dataTables_filter .form-control").removeClass("form-control-sm"), $(".dataTables_length .form-select").removeClass("form-select-sm")
}, 300)
});