Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/ts.corals.io/frontend/pages/users/ |
<template>
<div>
<CRUDIndex :columns="columns" :resourceURL="resourceUrl" :options="options"
@edit-form-closed="editFormClosed"
:form="form" :labels="labels"
:form-size="'lg'">
<template v-slot:name="{object}">
<nuxt-link :to="`/users/${object.row.id}`">
{{ object.row.name }}
</nuxt-link>
</template>
<template v-slot:last_name="{object}">
<nuxt-link :to="`/users/${object.row.id}`">
{{ object.row.last_name }}
</nuxt-link>
</template>
<template v-slot:employee_type="{object}">
{{ object.row.employee_type_as_label }}
</template>
<template v-slot:status="{object}">
<span v-html="object.row.status"></span>
</template>
<template v-slot:roles_as_labels="{object}">
<span v-html="object.row.roles_as_labels"></span>
</template>
<template v-slot:default="{form}">
<div class="row">
<div class="col-md-6">
<div class=" row sm-gutters">
<div class="col-md-6">
<corals-input :form="form" label="First Name" field="name" required/>
</div>
<div class="col-md-6">
<corals-input :form="form" field="last_name" required/>
</div>
</div>
<div class="row sm-gutters">
<div class="col-md-6">
<corals-input :form="form" type="password" field="password" autocomplete="new-password"/>
</div>
<div class="col-md-6">
<corals-input :form="form" type="password" field="password_confirmation"
autocomplete="new-password"/>
</div>
</div>
<corals-input :form="form" type="email" field="email" required/>
<corals-radio :form="form" field="status" label="Status" :list="form.getFormData('status_options')"
required/>
<corals-checkboxes :list="form.getFormData('roles')" :form="form" required field="roles"/>
<hr/>
<corals-checkbox label="Send login details" v-if="!form.id" field="send_login_details" :form="form"/>
<b-form-group :invalid-feedback="form.error('properties.force_reset')"
:state="form.state('properties.force_reset')">
<b-form-checkbox
id="force_reset"
v-model="form.properties.force_reset"
:value="1"
:unchecked-value="0">
Reset password on login
</b-form-checkbox>
</b-form-group>
</div>
<div class="col-md-6">
<corals-datepicker :form="form" :required="isEmployeeRoleSelected" field="start_date" label="Start Date"/>
<corals-datepicker :form="form" field="birth_date" label="Birth Date"/>
<div v-if="isEmployeeRoleSelected">
<div class="row sm-gutters">
<div class="col-md-6">
<corals-input :form="form" type="number" field="hourly_rate" step="0.01"/>
</div>
<div class="col-md-6">
<corals-input :form="form" type="number" field="working_hours"
step="0.01"/>
</div>
</div>
<div class="row sm-gutters">
<div class="col-md-6">
<corals-input :form="form" type="number" field="salary" step="0.01"/>
</div>
<div class="col-md-6">
<corals-select :form="form" field="salary_period"
:options="salaryPeriodOptions"/>
</div>
</div>
<corals-select :options="form.getFormData('employee_type_options')" :form="form"
field="employee_type" required/>
<corals-select :options="form.getFormData('positions')" :form="form"
field="position" required/>
<corals-select :options="form.getFormData('activities')" required label="Default Activity" :form="form"
field="default_activity_id"/>
</div>
</div>
</div>
</template>
<template #extraButtons>
<payment-modal/>
</template>
</CRUDIndex>
</div>
</template>
<script>
import CRUDIndex from "@/components/layout/CRUDIndex";
import commonMixin from "@/mixins/commonMixin";
import PaymentModal from "@/components/Users/PaymentModal";
export default {
name: "index",
components: {PaymentModal, CRUDIndex},
middleware: 'Authorization',
mixins: [commonMixin],
data() {
return {
resourceUrl: 'users',
salaryPeriodOptions: {
daily: 'Daily',
weekly: 'Weekly',
biweekly: 'Biweekly',
monthly: 'Monthly'
},
columns: ['name', 'last_name', 'email', 'status', 'roles_as_labels', 'hourly_rate', 'salary', 'employee_type', 'working_hours', 'position', 'actions'],
labels: {
title: 'Users',
singularTitle: 'User',
},
options: {
listColumns: {
status: [],
position: [],
employee_type: [],
},
initFilters: {'status': 'active'},
sortable: ['email', 'name', 'last_name'],
filterable: ['email', 'name', 'last_name', 'status', 'position', 'employee_type'],
customColumns: ['name', 'last_name', 'status', 'roles_as_labels', 'employee_type'],
hideCreate: this.$cant('create', 'user'),
headings: {
'roles_as_labels': 'Roles',
'hourly_rate': 'Rate',
'working_hours': 'Hours',
'employee_type': 'Type'
},
},
form: this.$form({
name: '',
last_name: '',
email: '',
roles: [],
status: 'active',
projects: [],
password: '',
password_confirmation: '',
hourly_rate: '',
birth_date: '',
birth_date_visible: 0,
salary: '',
salary_period: '',
working_hours: '',
start_date: new Date(),
position: '',
send_login_details: 1,
employee_type: '',
properties: {
force_reset: 0,
},
default_activity_id: ''
}, {
fetchFormDataURL: '/timesheet/users/get-form-data',
model: 'user',
loadFormDataCallBack: () => {
this.options.listColumns.status = this.getOptions(this.form.formData.status_options);
this.options.listColumns.position.push({id: '', text: 'All'});
for (let position in this.form.formData.positions) {
this.options.listColumns.position.push({
id: position,
text: this.form.formData.positions[position]
});
}
this.options.listColumns.employee_type.push({id: '', text: 'All'});
for (let type in this.form.formData.employee_type_options) {
this.options.listColumns.employee_type.push({
id: type,
text: this.form.formData.employee_type_options[type]
});
}
}
})
}
},
computed: {
isEmployeeRoleSelected() {
let employeeRole = this.$store.getters.settings('employee_role_name');
let rolesName = [];
let employeeRoleId;
this.form.getFormData('roles').map(role => {
if (role.name === employeeRole) {
employeeRoleId = role.id;
}
});
return this.form.roles.includes(employeeRoleId);
},
},
methods: {
getOptions(list) {
let allOption = {id: '', text: 'All'};
let options = [];
options.push(allOption);
list.map(row => {
options.push({id: row.id ?? row.value, text: row.label});
});
return options;
},
editFormClosed() {
this.form.id = null;
}
},
}
</script>
<style scoped>
</style>