· 4 years ago · Sep 07, 2021, 06:50 AM
1<template>
2 <div>
3 <b-overlay :show="loading">
4 <b-card no-body>
5 <b-tabs active-nav-item-class="font-weight-bold text-uppercase">
6 <!-- Active People -->
7 <b-tab title="Active">
8 <!-- DataTales -->
9 <div class="card shadow mb-4">
10 <div class="card-header py-3">
11 <div class="d-flex row justify-content-between">
12 <h6 class="m-0 font-weight-bold text-primary"></h6>
13 <!-- Button trigger Create Person modal -->
14 <b-button
15 size="sm"
16 variant="primary"
17 v-b-modal.newPersonModal
18 >
19 Add New Person
20 </b-button>
21 </div>
22 </div>
23 <div class="card-body">
24 <div class="table-search">
25 <b-input-group size="sm">
26 <b-form-input
27 id="tableFilter"
28 type="search"
29 v-model="tableFilter"
30 placeholder="Search"
31 ></b-form-input>
32 </b-input-group>
33 </div>
34 <div class="table-responsive">
35 <b-table
36 class="table-list"
37 responsive
38 bordered
39 striped
40 hover
41 :small="true"
42 :items="activePeople"
43 :fields="peopleFields"
44 :filter="tableFilter"
45 :head-variant="tableHeadVariant"
46 :sticky-header="true"
47 @row-clicked="personInfo"
48 >
49 <template #cell(Name)="data">
50 {{ data.item.firstName }} {{ data.item.middleName }}
51 {{ data.item.lastName }}
52 </template>
53 </b-table>
54 </div>
55 </div>
56 </div>
57 </b-tab>
58 <!-- Inactive People -->
59 <b-tab title="In-active">
60 <!-- DataTales -->
61 <div class="card shadow mb-4">
62 <div class="card-header py-3">
63 <div class="d-flex row justify-content-between">
64 <h6 class="m-0 font-weight-bold text-primary"></h6>
65 <!-- Button trigger Create Person modal -->
66 </div>
67 </div>
68 <div class="card-body">
69 <div class="table-search">
70 <b-input-group size="sm">
71 <b-form-input
72 id="tableFilter"
73 type="search"
74 v-model="tableFilter"
75 placeholder="Search"
76 ></b-form-input>
77 </b-input-group>
78 </div>
79 <div class="table-responsive">
80 <b-table
81 class="table-list"
82 responsive
83 bordered
84 striped
85 hover
86 :small="true"
87 :items="inactivePeople"
88 :fields="peopleFields"
89 :filter="tableFilter"
90 :head-variant="tableHeadVariant"
91 :sticky-header="true"
92 @row-clicked="inactivePersonInfo"
93 >
94 <template #cell(Name)="data">
95 {{ data.item.firstName }} {{ data.item.middleName }}
96 {{ data.item.lastName }}
97 </template>
98 </b-table>
99 </div>
100 </div>
101 </div>
102 </b-tab>
103 </b-tabs>
104 </b-card>
105
106 <!-- Create Person Modal -->
107 <b-modal
108 scrollable
109 class="modal fade"
110 id="newPersonModal"
111 tabindex="-1"
112 role="dialog"
113 aria-hidden="true"
114 ok-title="Save"
115 @ok="handleCreatePerson"
116 title="New Person"
117 button-size="sm"
118 >
119 <form
120 id="newPersonForm"
121 ref="form"
122 @submit.stop.prevent="createPerson"
123 enctype="multipart/form-data"
124 >
125 <div class="form-group">
126 <label for="employeeNumber">Employee Number</label>
127 <input
128 type="number"
129 class="form-control"
130 name="employeeNumber"
131 v-model="newPerson.employeeNumber"
132 placeholder="Enter Employee Number"
133 required
134 />
135 </div>
136 <div class="form-group">
137 <label for="firstName">First Name</label>
138 <input
139 type="text"
140 class="form-control"
141 name="firstName"
142 v-model="newPerson.firstName"
143 placeholder="Enter your first name"
144 required
145 />
146 </div>
147 <div class="form-group">
148 <label for="middleName">Middle Name</label>
149 <input
150 type="text"
151 class="form-control"
152 name="middleName"
153 v-model="newPerson.middleName"
154 placeholder="Enter your middle name"
155 required
156 />
157 </div>
158 <div class="form-group">
159 <label for="lastName">Last Name</label>
160 <input
161 type="text"
162 class="form-control"
163 name="lastName"
164 v-model="newPerson.lastName"
165 placeholder="Enter your last name"
166 required
167 />
168 </div>
169 <div class="form-group">
170 <label for="dob">Date of Birth</label>
171 <input
172 type="date"
173 class="form-control"
174 name="dob"
175 v-model="newPerson.dob"
176 placeholder="Enter date of birth"
177 required
178 />
179 </div>
180 <div class="form-group">
181 <label for="mobile">Mobile Number</label>
182 <input
183 type="tel"
184 class="form-control"
185 name="mobile"
186 v-model="newPerson.mobile"
187 placeholder="Enter Mobile Number"
188 required
189 />
190 </div>
191 <div class="form-group">
192 <label for="startDate">Start Date</label>
193 <input
194 type="date"
195 class="form-control"
196 name="startDate"
197 v-model="newPerson.startDate"
198 placeholder="Enter employment date"
199 required
200 />
201 </div>
202
203 <div class="form-group">
204 <label for="company">Company</label>
205 <v-select
206 v-model="newPerson.companyId"
207 label="name"
208 :options="company"
209 :reduce="(company) => company.id"
210 placeholder="Choose Company"
211 ></v-select>
212 </div>
213 <div class="form-group">
214 <label for="role">Department</label>
215 <v-select
216 v-model="newPerson.departmentId"
217 label="name"
218 :options="departments"
219 :reduce="(departments) => departments.id"
220 placeholder="Choose Department"
221 ></v-select>
222 </div>
223 <div class="form-group">
224 <label for="role">Role</label>
225 <v-select
226 v-model="newPerson.departmentRoleId"
227 label="name"
228 :options="departmentRolesCascade"
229 :reduce="(departmentRoles) => departmentRoles.id"
230 placeholder="Choose Role"
231 ></v-select>
232 </div>
233 <div class="form-group">
234 <label for="nidaNumber">NIDA Number</label>
235 <input
236 type="number"
237 class="form-control"
238 name="nidaNumber"
239 v-model="newPerson.nidaNumber"
240 placeholder="Enter NIDA Number"
241 required
242 />
243 </div>
244 <div class="form-group">
245 <label for="ssNumber">Social Security Number</label>
246 <input
247 type="number"
248 class="form-control"
249 name="ssNumber"
250 v-model="newPerson.ssNumber"
251 placeholder="Enter Social Security Number"
252 required
253 />
254 </div>
255 <div class="form-group">
256 <label for="tinNumber">TIN</label>
257 <input
258 type="number"
259 class="form-control"
260 name="tinNumber"
261 v-model="newPerson.tinNumber"
262 placeholder="Enter TIN"
263 required
264 />
265 </div>
266 <div class="form-group">
267 <label for="licenseNumber">License Number</label>
268 <input
269 type="number"
270 class="form-control"
271 name="licenseNumber"
272 v-model="newPerson.licenseNumber"
273 placeholder="Enter License Number"
274 required
275 />
276 </div>
277 <div class="form-group">
278 <label for="licenseIssueDate">License Issue Date</label>
279 <input
280 type="date"
281 class="form-control"
282 name="licenseIssueDate"
283 v-model="newPerson.licenseIssueDate"
284 placeholder="Enter License Issue Date"
285 required
286 />
287 </div>
288 <div class="form-group">
289 <label for="licenseExpiryDate">License Expiry Date</label>
290 <input
291 type="date"
292 class="form-control"
293 name="licenseExpiryDate"
294 v-model="newPerson.licenseExpiryDate"
295 placeholder="Enter License Expiry Date"
296 required
297 />
298 </div>
299 <div class="form-group">
300 <label for="licenseClass">License Class</label><br />
301 <b-form-checkbox v-model="newPerson.licenseClasses.classA"
302 >A</b-form-checkbox
303 >
304 <b-form-checkbox v-model="newPerson.licenseClasses.classB"
305 >B</b-form-checkbox
306 >
307 <b-form-checkbox v-model="newPerson.licenseClasses.classC"
308 >C</b-form-checkbox
309 >
310 <b-form-checkbox v-model="newPerson.licenseClasses.classD"
311 >D</b-form-checkbox
312 >
313 <b-form-checkbox v-model="newPerson.licenseClasses.classE"
314 >E</b-form-checkbox
315 >
316 <b-form-checkbox v-model="newPerson.licenseClasses.classF"
317 >F</b-form-checkbox
318 >
319 <b-form-checkbox v-model="newPerson.licenseClasses.classG"
320 >G</b-form-checkbox
321 >
322 </div>
323 <div class="form-group">
324 <label for="passportNumber">Passport Number</label>
325 <input
326 type="number"
327 class="form-control"
328 name="passportNumber"
329 v-model="newPerson.passportNumber"
330 placeholder="Enter Passport Number"
331 required
332 />
333 </div>
334 <div class="form-group">
335 <label for="passportIssueDate">Passport Issue Date</label>
336 <input
337 type="date"
338 class="form-control"
339 name="passportIssueDate"
340 v-model="newPerson.passportIssueDate"
341 placeholder="Enter Passport Issue Date"
342 required
343 />
344 </div>
345 <div class="form-group">
346 <label for="passportExpiryDate">Passport Expiry Date</label>
347 <input
348 type="date"
349 class="form-control"
350 name="passportExpiryDate"
351 v-model="newPerson.passportExpiryDate"
352 placeholder="Enter Passport Expiry Date"
353 required
354 />
355 </div>
356 <div class="form-group">
357 <label for="nextKinName">Next of Kin</label>
358 <input
359 type="text"
360 class="form-control"
361 name="nextKinName"
362 v-model="newPerson.nextKinName"
363 placeholder="Enter name of next of kin"
364 required
365 />
366 </div>
367 <div class="form-group">
368 <label for="nextKinMobile">Next of Kin Mobile Contact</label>
369 <input
370 type="tel"
371 class="form-control"
372 name="nextKinMobile"
373 v-model="newPerson.nextKinMobile"
374 placeholder="Enter mobile contact of next of kin"
375 required
376 />
377 </div>
378 <div class="form-group">
379 <label for="Profile Picture">Profile Picture</label>
380 <b-form-file
381 size="sm"
382 name="profilePicture"
383 placeholder="Choose image..."
384 drop-placeholder="Drop image here..."
385 ></b-form-file>
386 </div>
387 </form>
388 </b-modal>
389 <!-- Update/Deactivate Person Modal -->
390 <b-modal
391 scrollable
392 class="modal fade"
393 id="updatePersonModal"
394 tabindex="-1"
395 role="dialog"
396 aria-hidden="true"
397 @ok="handleUpdatePerson"
398 title="Update Person"
399 >
400 <template #modal-footer="{ ok, cancel, hide }">
401 <b-button
402 v-if="editPerson.activityStatus.id == 1"
403 size="sm"
404 variant="danger"
405 @click="hide(deactivatePerson())"
406 >Deactivate</b-button
407 >
408 <b-button size="sm" variant="" @click="cancel">Cancel</b-button>
409 <b-button size="sm" variant="primary" @click="ok">Update</b-button>
410 </template>
411 <form
412 id="updatePersonForm"
413 ref="form"
414 @submit.stop.prevent="updatePerson"
415 enctype="multipart/form-data"
416 >
417 <img
418 id="profile-picture"
419 v-bind:src="editPerson.profilePicture"
420 alt=""
421 style="
422 border-radius: 50%;
423 width: 100px;
424 display: block;
425 margin-left: auto;
426 margin-right: auto;
427 width: 50%;
428 "
429 />
430 <div class="form-group">
431 <label for="employeeNumber">Employee Number</label>
432 <input
433 type="number"
434 class="form-control"
435 name="employeeNumber"
436 v-model="editPerson.employeeNumber"
437 placeholder="Enter Employee Number"
438 required
439 />
440 </div>
441 <div class="form-group">
442 <label for="firstName">First Name</label>
443 <input
444 type="text"
445 class="form-control"
446 name="firstName"
447 v-model="editPerson.firstName"
448 placeholder="Enter your first name"
449 required
450 />
451 </div>
452 <div class="form-group">
453 <label for="middleName">Middle Name</label>
454 <input
455 type="text"
456 class="form-control"
457 name="middleName"
458 v-model="editPerson.middleName"
459 placeholder="Enter your middle name"
460 required
461 />
462 </div>
463 <div class="form-group">
464 <label for="lastName">Last Name</label>
465 <input
466 type="text"
467 class="form-control"
468 name="lastName"
469 v-model="editPerson.lastName"
470 placeholder="Enter your last name"
471 required
472 />
473 </div>
474 <div class="form-group">
475 <label for="dob">Date of Birth</label>
476 <input
477 type="date"
478 class="form-control"
479 name="dob"
480 v-model="editPerson.dob"
481 placeholder="Enter date of birth"
482 required
483 />
484 </div>
485 <div class="form-group">
486 <label for="mobile">Mobile Number</label>
487 <input
488 type="tel"
489 class="form-control"
490 name="mobile"
491 v-model="editPerson.mobile"
492 placeholder="Enter Mobile Number"
493 required
494 />
495 </div>
496 <div class="form-group">
497 <label for="startDate">Start Date</label>
498 <input
499 type="date"
500 class="form-control"
501 name="startDate"
502 v-model="editPerson.startDate"
503 placeholder="Enter employment date"
504 required
505 />
506 </div>
507
508 <div class="form-group">
509 <label for="company">Company</label>
510 <v-select
511 v-model="editPerson.companyId"
512 label="name"
513 :options="company"
514 :reduce="(company) => company.id"
515 placeholder="Choose Company"
516 ></v-select>
517 </div>
518 <div class="form-group">
519 <label for="role">Department</label>
520 <v-select
521 v-model="editPerson.departmentId"
522 label="name"
523 :options="departments"
524 :reduce="(departments) => departments.id"
525 placeholder="Choose Department"
526 ></v-select>
527 </div>
528 <div class="form-group">
529 <label for="role">Role</label>
530 <v-select
531 v-model="editPerson.departmentRoleId"
532 label="name"
533 :options="departmentRolesCascade"
534 :reduce="(departmentRoles) => departmentRoles.id"
535 placeholder="Choose Role"
536 ></v-select>
537 </div>
538 <div class="form-group">
539 <label for="nidaNumber">NIDA Number</label>
540 <input
541 type="number"
542 class="form-control"
543 name="nidaNumber"
544 v-model="editPerson.nidaNumber"
545 placeholder="Enter NIDA Number"
546 required
547 />
548 </div>
549 <div class="form-group">
550 <label for="ssNumber">Social Security Number</label>
551 <input
552 type="number"
553 class="form-control"
554 name="ssNumber"
555 v-model="editPerson.ssNumber"
556 placeholder="Enter Social Security Number"
557 required
558 />
559 </div>
560 <div class="form-group">
561 <label for="tinNumber">TIN</label>
562 <input
563 type="number"
564 class="form-control"
565 name="tinNumber"
566 v-model="editPerson.tinNumber"
567 placeholder="Enter TIN"
568 required
569 />
570 </div>
571 <div class="form-group">
572 <label for="licenseNumber">License Number</label>
573 <input
574 type="number"
575 class="form-control"
576 name="licenseNumber"
577 v-model="editPerson.licenseNumber"
578 placeholder="Enter License Number"
579 required
580 />
581 </div>
582 <div class="form-group">
583 <label for="licenseIssueDate">License Issue Date</label>
584 <input
585 type="date"
586 class="form-control"
587 name="licenseIssueDate"
588 v-model="editPerson.licenseIssueDate"
589 placeholder="Enter License Issue Date"
590 required
591 />
592 </div>
593 <div class="form-group">
594 <label for="licenseExpiryDate">License Expiry Date</label>
595 <input
596 type="date"
597 class="form-control"
598 name="licenseExpiryDate"
599 v-model="editPerson.licenseExpiryDate"
600 placeholder="Enter License Expiry Date"
601 required
602 />
603 </div>
604 <div class="form-group">
605 <label for="licenseClass">License Class</label><br />
606 <b-form-checkbox v-model="editPerson.licenseClasses.classA"
607 >A</b-form-checkbox
608 >
609 <b-form-checkbox v-model="editPerson.licenseClasses.classB"
610 >B</b-form-checkbox
611 >
612 <b-form-checkbox v-model="editPerson.licenseClasses.classC"
613 >C</b-form-checkbox
614 >
615 <b-form-checkbox v-model="editPerson.licenseClasses.classD"
616 >D</b-form-checkbox
617 >
618 <b-form-checkbox v-model="editPerson.licenseClasses.classE"
619 >E</b-form-checkbox
620 >
621 <b-form-checkbox v-model="editPerson.licenseClasses.classF"
622 >F</b-form-checkbox
623 >
624 <b-form-checkbox v-model="editPerson.licenseClasses.classG"
625 >G</b-form-checkbox
626 >
627 </div>
628 <div class="form-group">
629 <label for="passportNumber">Passport Number</label>
630 <input
631 type="number"
632 class="form-control"
633 name="passportNumber"
634 v-model="editPerson.passportNumber"
635 placeholder="Enter Passport Number"
636 required
637 />
638 </div>
639 <div class="form-group">
640 <label for="passportIssueDate">Passport Issue Date</label>
641 <input
642 type="date"
643 class="form-control"
644 name="passportIssueDate"
645 v-model="editPerson.passportIssueDate"
646 placeholder="Enter Passport Issue Date"
647 required
648 />
649 </div>
650 <div class="form-group">
651 <label for="passportExpiryDate">Passport Expiry Date</label>
652 <input
653 type="date"
654 class="form-control"
655 name="passportExpiryDate"
656 v-model="editPerson.passportExpiryDate"
657 placeholder="Enter Passport Expiry Date"
658 required
659 />
660 </div>
661 <div class="form-group">
662 <label for="nextKinName">Next of Kin</label>
663 <input
664 type="text"
665 class="form-control"
666 name="nextKinName"
667 v-model="editPerson.nextKinName"
668 placeholder="Enter name of next of kin"
669 required
670 />
671 </div>
672 <div class="form-group">
673 <label for="nextKinMobile">Next of Kin Mobile Contact</label>
674 <input
675 type="tel"
676 class="form-control"
677 name="nextKinMobile"
678 v-model="editPerson.nextKinMobile"
679 placeholder="Enter mobile contact of next of kin"
680 required
681 />
682 </div>
683 <div class="form-group">
684 <label for="Profile Picture">Profile Picture</label>
685 <b-form-file
686 size="sm"
687 name="profilePicture"
688 placeholder="Choose image..."
689 drop-placeholder="Drop image here..."
690 ></b-form-file>
691 </div>
692 </form>
693 </b-modal>
694
695 <!-- Inactive Person Modal -->
696 <b-modal
697 scrollable
698 button-size="sm"
699 class="modal fade"
700 id="inactivePersonModal"
701 tabindex="-1"
702 role="dialog"
703 aria-hidden="true"
704 ok-title="Activate"
705 @ok="handleActivatePerson"
706 title="Person Info"
707 >
708 <div class="modal-body">
709 <img
710 id="profile-picture"
711 v-bind:src="editPerson.profilePicture"
712 alt=""
713 style="
714 border-radius: 50%;
715 width: 100px;
716 display: block;
717 margin-left: auto;
718 margin-right: auto;
719 width: 50%;
720 "
721 />
722 <h6>Employee Number</h6>
723 <p>{{ editPerson.employeeNumber }}</p>
724 <h6>First Name</h6>
725 <p>{{ editPerson.firstName }}</p>
726 <h6>Middle Name</h6>
727 <p>{{ editPerson.middleName }}</p>
728 <h6>Last Name</h6>
729 <p>{{ editPerson.lastName }}</p>
730 <h6>Date of Birth</h6>
731 <p>{{ editPerson.dob }}</p>
732 <h6>Mobile Number</h6>
733 <p>{{ editPerson.mobile }}</p>
734 <h6>Start Date</h6>
735 <p>{{ editPerson.startDate }}</p>
736 <h6>Company</h6>
737 <p>{{ editPerson.company.name }}</p>
738 <h6>Role</h6>
739 <p>{{ editPerson.departmentRole.name }}</p>
740 <h6>NIDA Number</h6>
741 <p>{{ editPerson.nidaNumber }}</p>
742 <h6>License Number</h6>
743 <p>{{ editPerson.licenseNumber }}</p>
744 <h6>License Issue Date</h6>
745 <p>{{ editPerson.licenseIssueDate }}</p>
746 <h6>Next of Kin</h6>
747 <p>{{ editPerson.nextKinName }}</p>
748 <h6>Next of Kin Mobile Contact</h6>
749 <p>{{ editPerson.nextKinMobile }}</p>
750 </div>
751 </b-modal>
752 </b-overlay>
753 </div>
754</template>
755<script>
756import api from "../apis/api";
757export default {
758 data() {
759 return {
760 loading: false,
761 people: [],
762 peopleFields: [
763 { key: "Name", label: "Name", sortable: true },
764 { key: "dob" },
765 { key: "age", sortable: true },
766 { key: "company.name", label: "Company", sortable: true },
767 {
768 key: "departmentRole.department.name",
769 label: "Department",
770 sortable: true,
771 },
772 { key: "departmentRole.name", label: "Role" },
773 { key: "startDate", sortable: true },
774 { key: "serviceTime", sortable: true },
775 { key: "licenseExpiryDate", label: "License Expiry", sortable: true },
776 { key: "activityStatus.name", label: "Assignment Status" },
777 ],
778 tableFilter: null,
779 tableHeadVariant: "dark",
780 company: [],
781 departmentRoles: [],
782 departmentRolesCascade: [],
783 departments: [],
784 newPerson: {
785 employeeNumber: "",
786 firstName: "",
787 middleName: "",
788 lastName: "",
789 dob: "",
790 mobile: "",
791 startDate: "",
792 companyId: "",
793 departmentId: "",
794 departmentRoleId: "",
795 nidaNumber: "",
796 ssNumber: "",
797 tinNumber: "",
798 licenseNumber: "",
799 licenseIssueDate: "",
800 licenseExpiryDate: "",
801 licenseClasses: {
802 classA: false,
803 classB: false,
804 classC: false,
805 classD: false,
806 classE: false,
807 classF: false,
808 classG: false,
809 },
810 passportNumber: "",
811 passportIssueDate: "",
812 passportExpiryDate: "",
813 nextKinName: "",
814 nextKinMobile: "",
815 activityStatus: "",
816 },
817 editPerson: {
818 id: "",
819 employeeNumber: "",
820 firstName: "",
821 middleName: "",
822 lastName: "",
823 dob: "",
824 profilePicture: "",
825 mobile: "",
826 startDate: "",
827 company: "",
828 companyId: "",
829 departmentId: "",
830 departmentRole: "",
831 departmentRoleId: "",
832 nidaNumber: "",
833 ssNumber: "",
834 tinNumber: "",
835 licenseNumber: "",
836 licenseIssueDate: "",
837 licenseExpiryDate: "",
838 licenseClasses: "",
839 passportNumber: "",
840 passportIssueDate: "",
841 passportExpiryDate: "",
842 nextKinName: "",
843 nextKinMobile: "",
844 activityStatus: "",
845 },
846 };
847 },
848 computed: {
849 activePeople() {
850 return this.people.filter(
851 (people) =>
852 people.activityStatus.id === 1 || people.activityStatus.id === 2
853 );
854 },
855 inactivePeople() {
856 return this.people.filter((people) => people.activityStatus.id === 3);
857 },
858 sortOptions() {
859 // Create an options list from our fields
860 return this.peopleFields
861 .filter((f) => f.sortable)
862 .map((f) => {
863 return { text: f.label, value: f.key };
864 });
865 },
866 },
867 watch: {
868 "newPerson.departmentId": function (value) {
869 this.departmentRolesCascade = this.departmentRoles.filter(
870 (departmentRole) => departmentRole.department.id == value
871 );
872 },
873 "editPerson.departmentId": function (value) {
874 this.departmentRolesCascade = this.departmentRoles.filter(
875 (departmentRole) => departmentRole.department.id == value
876 );
877 },
878 },
879 mounted() {
880 this.getPeople();
881 },
882 methods: {
883 async getPeople() {
884 try {
885 this.loading = true;
886 const response = await api.get("people");
887 this.people = response.data.people;
888 this.company = response.data.company;
889 this.departmentRoles = response.data.departmentRoles;
890 this.departments = response.data.departments;
891 this.loading = false;
892 } catch (error) {
893 console.log(error);
894 }
895 },
896 handleCreatePerson(bvModalEvt) {
897 bvModalEvt.preventDefault();
898 this.createPerson();
899 },
900 async createPerson() {
901 try {
902 let newPersonForm = document.getElementById("newPersonForm");
903 let newPersonFormData = new FormData(newPersonForm);
904 if (this.newPerson.companyId) {
905 newPersonFormData.append("companyId", this.newPerson.companyId);
906 }
907 if (this.newPerson.departmentRoleId) {
908 newPersonFormData.append(
909 "departmentRoleId",
910 this.newPerson.departmentRoleId
911 );
912 }
913 if (this.newPerson.licenseClasses) {
914 newPersonFormData.append(
915 "licenseClasses",
916 JSON.stringify(this.newPerson.licenseClasses)
917 );
918 }
919 const config = {
920 headers: {
921 "content-type": "multipart/form-data",
922 //enctype: "multipart/form-data",
923 },
924 };
925 for (var person of newPersonFormData.entries()) {
926 console.log(person);
927 }
928 await api
929 .post("people", newPersonFormData, config)
930 .then((response) => console.log(response))
931 .catch((error) => console.log(error));
932 this.$nextTick(() => {
933 this.$bvModal.hide("newPersonModal");
934 this.getPeople();
935 });
936 } catch (error) {
937 console.log(error);
938 }
939 },
940 personInfo(item, button) {
941 this.editPerson.id = item.id;
942 this.editPerson.employeeNumber = item.employeeNumber;
943 this.editPerson.firstName = item.firstName;
944 this.editPerson.middleName = item.middleName;
945 this.editPerson.lastName = item.lastName;
946 this.editPerson.dob = item.dob;
947 this.editPerson.profilePicture = item.profilePicture;
948 this.editPerson.mobile = item.mobile;
949 this.editPerson.startDate = item.startDate;
950 this.editPerson.companyId = item.company.id;
951 this.editPerson.departmentId = item.departmentRole.department.id;
952 this.editPerson.departmentRoleId = item.departmentRole.id;
953 this.editPerson.nidaNumber = item.nidaNumber;
954 this.editPerson.ssNumber = item.ssNumber;
955 this.editPerson.tinNumber = item.tinNumber;
956 this.editPerson.licenseNumber = item.licenseNumber;
957 this.editPerson.licenseClasses = item.licenseClasses;
958 this.editPerson.licenseIssueDate = item.licenseIssueDate;
959 this.editPerson.licenceExpiryDate = item.licenceExpiryDate;
960 this.editPerson.passportNumber = item.passportNumber;
961 this.editPerson.passportIssueDate = item.passportIssueDate;
962 this.editPerson.passportExpiryDate = item.passportExpiryDate;
963 this.editPerson.nextKinName = item.nextKinName;
964 this.editPerson.nextKinMobile = item.nextKinMobile;
965 this.editPerson.activityStatus = item.activityStatus;
966 this.$root.$emit("bv::show::modal", "updatePersonModal", button);
967 },
968 handleUpdatePerson(bvModalEvt) {
969 // Prevent modal from closing
970 bvModalEvt.preventDefault();
971 // Trigger submit handler
972 this.updatePerson();
973 },
974 async updatePerson() {
975 try {
976 let updatePersonForm = document.getElementById("updatePersonForm");
977 let updatePersonFormData = new FormData(updatePersonForm);
978 updatePersonFormData.append("_method", "PATCH");
979 updatePersonFormData.append("companyId", this.editPerson.company.id);
980 updatePersonFormData.append(
981 "activityStatusId",
982 this.editPerson.activityStatus.id
983 );
984 if (this.editPerson.companyId) {
985 updatePersonFormData.append("companyId", this.editPerson.companyId);
986 }
987 if (this.editPerson.departmentRoleId) {
988 updatePersonFormData.append(
989 "departmentRoleId",
990 this.editPerson.departmentRoleId
991 );
992 }
993 if (this.editPerson.licenseClasses) {
994 updatePersonFormData.append(
995 "licenseClasses",
996 JSON.stringify(this.editPerson.licenseClasses)
997 );
998 }
999 for (var person of updatePersonFormData.entries()) {
1000 console.log(person);
1001 }
1002 await api
1003 .post("people/" + this.editPerson.id, updatePersonFormData)
1004 .then((response) => console.log(response))
1005 .catch((error) => console.log(error));
1006 this.$nextTick(() => {
1007 this.$bvModal.hide("updatePersonModal");
1008 this.getPeople();
1009 });
1010 console.log("Person updated");
1011 } catch (error) {
1012 console.log(error);
1013 }
1014 },
1015 async deactivatePerson() {
1016 try {
1017 await api.patch("switch_person_activity/" + this.editPerson.id, {
1018 activityStatusId: 3,
1019 });
1020 console.log("Person Deactivated");
1021 this.$nextTick(() => {
1022 this.$bvModal.hide("updatePersonModal");
1023 this.getPeople();
1024 });
1025 } catch (error) {
1026 console.log(error);
1027 }
1028 },
1029 inactivePersonInfo(item, button) {
1030 this.editPerson = item;
1031 this.$root.$emit("bv::show::modal", "inactivePersonModal", button);
1032 },
1033 handleActivatePerson() {
1034 this.activatePerson();
1035 },
1036 async activatePerson() {
1037 try {
1038 await api.patch("switch_person_activity/" + this.editPerson.id, {
1039 activityStatusId: 1,
1040 });
1041 console.log("Person Activated");
1042 this.$nextTick(() => {
1043 this.$bvModal.hide("inactivePersonModal");
1044 this.getPeople();
1045 });
1046 } catch (error) {
1047 console.log(error);
1048 }
1049 },
1050 },
1051};
1052</script>