lavkach3

1
$(function () {
2
  function checkall(clickchk, relChkbox) {
3
    var checker = $("#" + clickchk);
4
    var multichk = $("." + relChkbox);
5

6
    checker.click(function () {
7
      multichk.prop("checked", $(this).prop("checked"));
8
      $(".show-btn").toggle();
9
    });
10
  }
11

12
  checkall("contact-check-all", "contact-chkbox");
13

14
  $("#input-search").on("keyup", function () {
15
    var rex = new RegExp($(this).val(), "i");
16
    $(".search-table .search-items:not(.header-item)").hide();
17
    $(".search-table .search-items:not(.header-item)")
18
      .filter(function () {
19
        return rex.test($(this).text());
20
      })
21
      .show();
22
  });
23

24
  $("#btn-add-contact").on("click", function (event) {
25
    $("#addContactModal #btn-add").show();
26
    $("#addContactModal #btn-edit").hide();
27
    $("#addContactModal").modal("show");
28
  });
29

30
  function deleteContact() {
31
    $(".delete").on("click", function (event) {
32
      event.preventDefault();
33
      /* Act on the event */
34
      $(this).parents(".search-items").remove();
35
    });
36
  }
37

38
  function addContact() {
39
    $("#btn-add").click(function () {
40
      var getParent = $(this).parents(".modal-content");
41

42
      var $_name = getParent.find("#c-name");
43
      var $_email = getParent.find("#c-email");
44
      var $_occupation = getParent.find("#c-occupation");
45
      var $_phone = getParent.find("#c-phone");
46
      var $_location = getParent.find("#c-location");
47

48
      var $_getValidationField =
49
        document.getElementsByClassName("validation-text");
50
      var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
51
      var phoneReg = /^\d*\.?\d*$/;
52

53
      var $_nameValue = $_name.val();
54
      var $_emailValue = $_email.val();
55
      var $_occupationValue = $_occupation.val();
56
      var $_phoneValue = $_phone.val();
57
      var $_locationValue = $_location.val();
58

59
      if ($_nameValue == "") {
60
        $_getValidationField[0].innerHTML = "Name must be filled out";
61
        $_getValidationField[0].style.display = "block";
62
      } else {
63
        $_getValidationField[0].style.display = "none";
64
      }
65

66
      if ($_emailValue == "") {
67
        $_getValidationField[1].innerHTML = "Email Id must be filled out";
68
        $_getValidationField[1].style.display = "block";
69
      } else if (reg.test($_emailValue) == false) {
70
        $_getValidationField[1].innerHTML = "Invalid Email";
71
        $_getValidationField[1].style.display = "block";
72
      } else {
73
        $_getValidationField[1].style.display = "none";
74
      }
75

76
      if ($_phoneValue == "") {
77
        $_getValidationField[2].innerHTML = "Invalid (Enter 10 Digits)";
78
        $_getValidationField[2].style.display = "block";
79
      } else if (phoneReg.test($_phoneValue) == false) {
80
        $_getValidationField[2].innerHTML = "Please Enter A numeric value";
81
        $_getValidationField[2].style.display = "block";
82
      } else {
83
        $_getValidationField[2].style.display = "none";
84
      }
85

86
      if (
87
        $_nameValue == "" ||
88
        $_emailValue == "" ||
89
        reg.test($_emailValue) == false ||
90
        $_phoneValue == "" ||
91
        phoneReg.test($_phoneValue) == false
92
      ) {
93
        return false;
94
      }
95

96
      var today = new Date();
97
      var dd = String(today.getDate()).padStart(2, "0");
98
      var mm = String(today.getMonth()); //January is 0!
99
      var time = String(today.getTime());
100
      var yyyy = today.getFullYear();
101
      var monthNames = [
102
        "Jan",
103
        "Feb",
104
        "Mar",
105
        "Apr",
106
        "May",
107
        "Jun",
108
        "Jul",
109
        "Aug",
110
        "Sep",
111
        "Oct",
112
        "Nov",
113
        "Dec",
114
      ];
115
      today = dd + " " + monthNames[mm] + " " + yyyy;
116
      var cdate = dd + mm + time;
117

118
      $html =
119
        '<tr class="search-items">' +
120
        "<td>" +
121
        '<div class="n-chk align-self-center text-center">' +
122
        '<div class="form-check">' +
123
        '<input type="checkbox" class="form-check-input contact-chkbox primary" id="' +
124
        cdate +
125
        '">' +
126
        '<label class="form-check-label" for="' +
127
        cdate +
128
        '"></label>' +
129
        "</div>" +
130
        "</div>" +
131
        "</td>" +
132
        "<td>" +
133
        '<div class="d-flex align-items-center">' +
134
        '<img src="../assets/images/profile/user-1.jpg" alt="avatar" class="rounded-circle" width="35">' +
135
        '<div class="ms-3">' +
136
        '<div class="user-meta-info">' +
137
        '<h6 class="user-name mb-0" data-name=' +
138
        $_nameValue +
139
        ">" +
140
        $_nameValue +
141
        "</h6>" +
142
        '<span class="user-work fs-3" data-occupation=' +
143
        $_occupationValue +
144
        ">" +
145
        $_occupationValue +
146
        "</span>" +
147
        "</div>" +
148
        "</div>" +
149
        "</div>" +
150
        "</td>" +
151
        "<td>" +
152
        '<span class="usr-email-addr" data-email=' +
153
        $_emailValue +
154
        ">" +
155
        $_emailValue +
156
        "</span>" +
157
        "</td>" +
158
        "<td>" +
159
        '<span class="usr-location" data-location=' +
160
        $_locationValue +
161
        ">" +
162
        $_locationValue +
163
        "</span>" +
164
        "</td>" +
165
        "<td>" +
166
        '<span class="usr-ph-no" data-phone=' +
167
        $_phoneValue +
168
        ">" +
169
        $_phoneValue +
170
        "</span>" +
171
        "</td>" +
172
        "<td>" +
173
        '<div class="action-btn">' +
174
        '<a href="javascript:void(0)" class="text-info edit"><i class="ti ti-eye fs-5"></i></a>' +
175
        '<a href="javascript:void(0)" class="text-dark delete ms-2"><i class="ti ti-trash fs-5"></i></a>' +
176
        "</div>" +
177
        "</td>" +
178
        "</tr>";
179

180
      $(".search-table > tbody >tr:first").before($html);
181
      $("#addContactModal").modal("hide");
182

183
      var $_setNameValueEmpty = $_name.val("");
184
      var $_setEmailValueEmpty = $_email.val("");
185
      var $_setOccupationValueEmpty = $_occupation.val("");
186
      var $_setPhoneValueEmpty = $_phone.val("");
187
      var $_setLocationValueEmpty = $_location.val("");
188

189
      deleteContact();
190
      editContact();
191
      checkall("contact-check-all", "contact-chkbox");
192
    });
193
  }
194

195
  $("#addContactModal").on("hidden.bs.modal", function (e) {
196
    var $_name = document.getElementById("c-name");
197
    var $_email = document.getElementById("c-email");
198
    var $_occupation = document.getElementById("c-occupation");
199
    var $_phone = document.getElementById("c-phone");
200
    var $_location = document.getElementById("c-location");
201
    var $_getValidationField =
202
      document.getElementsByClassName("validation-text");
203

204
    var $_setNameValueEmpty = ($_name.value = "");
205
    var $_setEmailValueEmpty = ($_email.value = "");
206
    var $_setOccupationValueEmpty = ($_occupation.value = "");
207
    var $_setPhoneValueEmpty = ($_phone.value = "");
208
    var $_setLocationValueEmpty = ($_location.value = "");
209

210
    for (var i = 0; i < $_getValidationField.length; i++) {
211
      e.preventDefault();
212
      $_getValidationField[i].style.display = "none";
213
    }
214
  });
215

216
  function editContact() {
217
    $(".edit").on("click", function (event) {
218
      $("#addContactModal #btn-add").hide();
219
      $("#addContactModal #btn-edit").show();
220

221
      // Get Parents
222
      var getParentItem = $(this).parents(".search-items");
223
      var getModal = $("#addContactModal");
224

225
      // Get List Item Fields
226
      var $_name = getParentItem.find(".user-name");
227
      var $_email = getParentItem.find(".usr-email-addr");
228
      var $_occupation = getParentItem.find(".user-work");
229
      var $_phone = getParentItem.find(".usr-ph-no");
230
      var $_location = getParentItem.find(".usr-location");
231

232
      // Get Attributes
233
      var $_nameAttrValue = $_name.attr("data-name");
234
      var $_emailAttrValue = $_email.attr("data-email");
235
      var $_occupationAttrValue = $_occupation.attr("data-occupation");
236
      var $_phoneAttrValue = $_phone.attr("data-phone");
237
      var $_locationAttrValue = $_location.attr("data-location");
238

239
      // Get Modal Attributes
240
      var $_getModalNameInput = getModal.find("#c-name");
241
      var $_getModalEmailInput = getModal.find("#c-email");
242
      var $_getModalOccupationInput = getModal.find("#c-occupation");
243
      var $_getModalPhoneInput = getModal.find("#c-phone");
244
      var $_getModalLocationInput = getModal.find("#c-location");
245

246
      // Set Modal Field's Value
247
      var $_setModalNameValue = $_getModalNameInput.val($_nameAttrValue);
248
      var $_setModalEmailValue = $_getModalEmailInput.val($_emailAttrValue);
249
      var $_setModalOccupationValue = $_getModalOccupationInput.val(
250
        $_occupationAttrValue
251
      );
252
      var $_setModalPhoneValue = $_getModalPhoneInput.val($_phoneAttrValue);
253
      var $_setModalLocationValue =
254
        $_getModalLocationInput.val($_locationAttrValue);
255

256
      $("#addContactModal").modal("show");
257

258
      $("#btn-edit").click(function () {
259
        var getParent = $(this).parents(".modal-content");
260

261
        var $_getInputName = getParent.find("#c-name");
262
        var $_getInputNmail = getParent.find("#c-email");
263
        var $_getInputNccupation = getParent.find("#c-occupation");
264
        var $_getInputNhone = getParent.find("#c-phone");
265
        var $_getInputNocation = getParent.find("#c-location");
266

267
        var $_nameValue = $_getInputName.val();
268
        var $_emailValue = $_getInputNmail.val();
269
        var $_occupationValue = $_getInputNccupation.val();
270
        var $_phoneValue = $_getInputNhone.val();
271
        var $_locationValue = $_getInputNocation.val();
272

273
        var setUpdatedNameValue = $_name.text($_nameValue);
274
        var setUpdatedEmailValue = $_email.text($_emailValue);
275
        var setUpdatedOccupationValue = $_occupation.text($_occupationValue);
276
        var setUpdatedPhoneValue = $_phone.text($_phoneValue);
277
        var setUpdatedLocationValue = $_location.text($_locationValue);
278

279
        var setUpdatedAttrNameValue = $_name.attr("data-name", $_nameValue);
280
        var setUpdatedAttrEmailValue = $_email.attr("data-email", $_emailValue);
281
        var setUpdatedAttrOccupationValue = $_occupation.attr(
282
          "data-occupation",
283
          $_occupationValue
284
        );
285
        var setUpdatedAttrPhoneValue = $_phone.attr("data-phone", $_phoneValue);
286
        var setUpdatedAttrLocationValue = $_location.attr(
287
          "data-location",
288
          $_locationValue
289
        );
290
        $("#addContactModal").modal("hide");
291
      });
292
    });
293
  }
294

295
  $(".delete-multiple").on("click", function () {
296
    var inboxCheckboxParents = $(".contact-chkbox:checked").parents(
297
      ".search-items"
298
    );
299
    inboxCheckboxParents.remove();
300
  });
301

302
  deleteContact();
303
  addContact();
304
  editContact();
305
});
306

307
// Validation Process
308

309
var $_getValidationField = document.getElementsByClassName("validation-text");
310
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
311
var phoneReg = /^\d{10}$/;
312

313
getNameInput = document.getElementById("c-name");
314

315
getNameInput.addEventListener("input", function () {
316
  getNameInputValue = this.value;
317

318
  if (getNameInputValue == "") {
319
    $_getValidationField[0].innerHTML = "Name Required";
320
    $_getValidationField[0].style.display = "block";
321
  } else {
322
    $_getValidationField[0].style.display = "none";
323
  }
324
});
325

326
getEmailInput = document.getElementById("c-email");
327

328
getEmailInput.addEventListener("input", function () {
329
  getEmailInputValue = this.value;
330

331
  if (getEmailInputValue == "") {
332
    $_getValidationField[1].innerHTML = "Email Required";
333
    $_getValidationField[1].style.display = "block";
334
  } else if (reg.test(getEmailInputValue) == false) {
335
    $_getValidationField[1].innerHTML = "Invalid Email";
336
    $_getValidationField[1].style.display = "block";
337
  } else {
338
    $_getValidationField[1].style.display = "none";
339
  }
340
});
341

342
getPhoneInput = document.getElementById("c-phone");
343

344
getPhoneInput.addEventListener("input", function () {
345
  getPhoneInputValue = this.value;
346

347
  if (getPhoneInputValue == "") {
348
    $_getValidationField[2].innerHTML = "Phone Number Required";
349
    $_getValidationField[2].style.display = "block";
350
  } else if (phoneReg.test(getPhoneInputValue) == false) {
351
    $_getValidationField[2].innerHTML = "Invalid (Enter 10 Digits)";
352
    $_getValidationField[2].style.display = "block";
353
  } else {
354
    $_getValidationField[2].style.display = "none";
355
  }
356
});
357