I’m trying to implement a filter for my employees vue component.
I’m displaying data in a datatable.
I have multiple filters and one of the filter is called, employee types.
<!--Employee Type filter-->
<div class="w-6/12 pl-4 h-auto">
<cs-multiple-select
v-model="selectedEmployeeTypes"
:options="employeeType"
key-id="id"
label="name"
name="employee-type"
placeholder="Employee Type"
>
</cs-multiple-select>
</div>
following is my code inside the <script></script>
<script>
// Helper
import Helper from '@/Support/Helper.js';
import AddEmployeeModal
from "@/components/dashboard/corporate/employee/project-employees/add-employee-modal";
import Datatable from "@/components/reusable/datatable/Datatable";
import CsConfirmationModal from "@/components/dashboard/reusable-modals/cs-confirmation-modal";
import HasToastrMessage from '@/Mixins/HasToastrMessage.js';
import Pagination from "@/Mixins/Pagination";
import AssignDepartment
from "@/components/dashboard/corporate/project/employers-projects-detail-departments/assign-department";
import OpenOverlay from "@/components/overlay/open-overlay";
import InviteEmployees from "@/components/dashboard/corporate/employee/project-employees/invite-employees";
import CsButton from "@/components/reusable/cs-button";
import CsMultipleSelect from "@/components/reusable/dropdowns/cs-multiple-select";
import DatatableActionbarItem from "@/components/reusable/datatable/DatatableActionbarItem";
export default {
components: {
DatatableActionbarItem,
CsMultipleSelect,
CsButton,
InviteEmployees,
OpenOverlay,
AssignDepartment,
CsConfirmationModal,
Datatable,
AddEmployeeModal
},
props: ['companyUuid', 'projectId'],
mixins: [HasToastrMessage, Pagination],
data() {
return {
projectEmployees: [],
originalEmployees: [],
page: 1,
perPage: 15,
selectedDepartments: [],
selectedEmployeeTypes:[],
selectedCountries: [],
selectedJobTitles: [],
status: [],
matrixStatus: [],
searchText: null,
jobTitles: [],
departments: [],
countries: [],
isLoading: false,
selectedUserId: null,
showMatrixModal: false,
selectedJobTitleId: null,
selectedDepartmentId: null,
selectedUserToShowMatrix: null,
}
},
watch: {
status() {
this.$refs.datatable.refreshPagination()
},
matrixStatus() {
this.$refs.datatable.refreshPagination()
},
selectedJobTitles() {
this.$refs.datatable.refreshPagination()
},
selectedDepartments() {
this.$refs.datatable.refreshPagination()
},
selectedCountries() {
this.$refs.datatable.refreshPagination()
},
selectedEmployeeTypes(){
this.$refs.datatable.refreshPagination()
},
},
async mounted() {
await this.loadProjectEmployees()
this.originalEmployees = this.projectEmployees
eventsHub.$on('filtering:done', () => {
eventsHub.$emit('pagination:reset');
});
this.loadProjectSpecificJobTitles()
this.loadDepartments();
this.loadCountries();
await this.loadProject();
eventsHub.$on('overlay:isMounted:statusSummaryComponent', () => {
eventsHub.$emit('overlay:open:statusSummaryComponent');
});
eventsHub.$on('overlay:close:statusSummaryComponent', () => {
this.showMatrixModal = false
});
},
computed: {
HeaderArray() {
return [
{text: 'Employee', value: 'employee_detail'},
{text: 'Job title', value: 'job_title'},
{text: 'Department', value: 'department_name'},
{text: 'Start date', value: 'start_date', filters: ['formatDate']},
{text: 'End date', value: 'end_date', filters: ['formatDate']},
{text: 'Nationality', value: 'country_flag', classList: 'text-center'},
{text: 'Qualification status', value: 'status'},
{text: 'Matrix status', value: 'matrix_status'},
];
},
noData() {
return !(Helper.isset(this.originalEmployees) && this.originalEmployees.length > 0)
},
certificateStatusList() {
return [
{status: 'expire_soon', name: 'Expire Soon'},
{status: 'expired', name: 'Expired'},
{status: 'missing', name: 'Missing'},
]
},
matrixStatusList() {
return [
{status: 'complaint', name: 'compliant'},
{status: 'non_complaint', name: 'non-compliant'},
]
},
employeeType() {
return [
{name: 'Employee', id: '0'},
{name: 'Subcontractor', id: '1'},
]
},
isSelectedCountIsOne() {
return this.$refs.datatable.selected.length === 1
},
userSuggestionApiURL() {
return `json/companies/${this.companyUuid}/projects/${this.projectId}/suggested-users`;
},
project() {
return this.$store.getters.getProject.project;
},
inviteModalTitle() {
const title = this.project ? this.project.title : '';
return `Invite employee(s) to ${title}`;
},
employeeCount() {
return Helper.isset(this.projectEmployees.total) ? this.projectEmployees.total : 0;
}
},
methods: {
async loadProjectEmployees() {
this.isLoading = true
let payload = {};
payload.companyUuid = this.companyUuid;
payload.projectId = this.projectId;
payload.certificate_status = this.status;
payload.matrix_status = this.matrixStatus;
payload.search_text = this.searchText;
payload.page = this.page;
payload.per_page = this.perPage;
payload.job_titles = this.selectedJobTitles;
payload.departments = this.selectedDepartments;
payload.employee_type= this.selectedEmployeeTypes;
payload.countries = this.selectedCountries;
await this.$store.dispatch('loadProjectEmployees', payload)
.then((data) => {
this.projectEmployees = data
this.isLoading = false
}).catch(() => this.isLoading = false)
},
HandleChange(currentPage, perPage, searchTerm) {
this.page = currentPage
this.perPage = perPage
this.searchText = searchTerm
this.loadProjectEmployees()
},
handleRowClick(event, item) {
let element = event.target;
// Handle all exceptions here
if (element.classList.contains('selectable--checkbox')) {
return false;
} // do nothing, the selectable handles the functionality
if (element.classList.contains('status--summary--component')) {
return false;
} // do nothing, the selectable handles the functionality
// The default action should be handled below.
window.location.href = `/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/users/${item.unique_id}/certificates`;
},
isAllActive(item) {
return !(
item.expire_soon || item.expired
)
},
loadProjectSpecificJobTitles() {
let payload = {}
payload.companyUuid = this.companyUuid
payload.project_id = this.projectId
this.$store.dispatch('loadProjectSpecificJobTitles', payload)
.then((data) => {
this.jobTitles = data.projectSpecificJobTitles
});
},
loadDepartments() {
let payload = {}
payload.companyUuid = this.companyUuid
payload.projectId = this.projectId
this.$store.dispatch('loadProjectDepartments', payload)
.then((data) => {
this.departments = data
}).catch(() => {
});
},
loadCountries() {
let payload = {}
payload.companyUuid = this.companyUuid
payload.projectId = this.projectId
this.$store.dispatch('loadProjectUserCountries', payload)
.then((data) => {
this.countries = data
}).catch(() => {
});
},
removeProjectEmployees() {
axios
.post(`/${Helper.getLocale()}/dashboard/json/companies/${this.companyUuid}/projects/${this.projectId}/users`, {
_method: 'delete', users: this.$refs.datatable.selected
})
.then(({data}) => {
if (data.success) {
this.showToastrSuccessMessage(data.success)
}
this.loadProjectEmployees()
}).catch(() => {
this.showToastrErrorMessage("User remove failed.")
})
},
handleEmployeeAssignToDepartment(data) {
this.loadProjectEmployees()
this.showToastrSuccessMessage(data.success)
},
addEmployeeToProject(userIds) {
return axios
.post(`/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/projects/${this.projectId}/users`, {
user_ids: userIds,
}).then(({data}) => {
if (Helper.isset(data.success)) {
this.showToastrSuccessMessage(data.success.message);
this.loadProjectEmployees()
this.$refs.addEmployeeModal.suggestedUsers = []
this.$refs.addEmployeeModal.selectedEmployees = []
this.$refs.addEmployeeModal.loadSuggestedUsers()
}
}
).catch(() => {
this.showToastrErrorMessage("Project employee is failed to add")
})
},
loadProject() {
let payload = {};
payload.companyUuid = this.companyUuid;
payload.projectId = this.projectId;
this.$store.dispatch('loadProject', payload);
},
/**
*
* @param inviteEmails
* @param loader
* @param cb
*/
handleInvitedEmployees(inviteEmails, loader, cb) {
//Processing
loader.toggle();
const data = {
company_uuid: this.companyUuid,
project_id: this.projectId,
employees_emails: inviteEmails,
}
this.$store.dispatch('inviteEmployeesToProject', data).then((data) => {
cb(data);
}).catch((error) => {
this.errorMessages = collect([]);
this.$nextTick(() => {
let responseErrors = collect(error.response.data.errors);
this.errorMessages = responseErrors.flatten();
});
}).finally(() => loader.toggle());
},
showAddEmployeeModal() {
eventsHub.$emit('overlay:open:addEmployeeModal');
},
employeeDetailRoute(employee) {
return `/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/employees/${employee.id}/certificates`;
},
showAssignEmployeeToDepartmentModal(item) {
this.selectedUserId = [item.id]
eventsHub.$emit('overlay:open:assignEmployeeToDepartment');
},
showMatrixStatusModal(item) {
this.showMatrixModal = true
this.selectedUserToShowMatrix = item.id
this.selectedJobTitleId = item.job_title_id
this.selectedDepartmentId = item.department_id
eventsHub.$emit('overlay:open:statusSummaryComponent');
}
}
}
</script>
Now the issue is when I try to filter by employee type, it’s selected value (0 or 1) cannot be loaded into the payload.
This is my sample payload out put if I filtered by employee type,
page: 1
per_page: 15
search_text:
This is my payload if I filtered by filter like qualification status,
page: 1
per_page: 15
status[]: expired
search_text:
This is my payload output if I filter by both qualification status and employee type,
page: 1
per_page: 15
status[]: expired
search_text:
Expected result has to be,
page: 1
per_page: 15
status[]: expired
employee_type[]:1
search_text:
employee_type is not getting passed to the payload…
Where should I fix to send employee_type value to payload?
