379 lines
15 KiB
Vue
Executable File
379 lines
15 KiB
Vue
Executable File
<template>
|
|
<Header />
|
|
<div v-if="user">
|
|
<div class="flex">
|
|
<div class="">
|
|
<SideBar />
|
|
</div>
|
|
<div class="w-full px-10">
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li>
|
|
<router-link :to="{ name: 'home' }">
|
|
Home
|
|
</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link :to="{ name: 'customer' }">
|
|
Customers
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="grid grid-cols-1 rounded-md p-6 ">
|
|
<div class="text-[24px]">Edit employee</div>
|
|
<form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
|
|
|
|
<div class="text-[18px] mt-10 mb-10">General Info</div>
|
|
|
|
<!-- first name -->
|
|
<div class="mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">First Name</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_first_name"
|
|
class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="First Name" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_first_name.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_first_name.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<!-- last name -->
|
|
<div class="mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">Last Name</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_last_name"
|
|
class="input input-bordered w-full max-w-xs" id="title" type="text" placeholder="Last Name" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_last_name.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_last_name.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<!-- employee type -->
|
|
<div class="flex gap-5">
|
|
<div class="flex-1 mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">Type of employee</label>
|
|
<select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
|
|
id="employee_type" v-model="CreateEmployeeForm.basicInfo.employee_type">
|
|
<option class="text-white" v-for="(employee, index) in employList" :key="index"
|
|
:value="employee['value']">
|
|
{{ employee['text'] }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="text-[18px] mt-10 mb-10">Employee Address</div>
|
|
|
|
<!-- street address -->
|
|
<div class="col-span-12 mb-5 md:mb-5">
|
|
<label class="block text-white text-sm font-bold mb-2">Street Address</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_address" class="input input-bordered w-full max-w-xs"
|
|
id="address" type="text" placeholder="Address" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_address.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_address.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- apt -->
|
|
<div class="col-span-12 mb-5 md:mb-5">
|
|
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_apt" class="input input-bordered w-full max-w-xs"
|
|
id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc" />
|
|
</div>
|
|
|
|
<!-- employee_town -->
|
|
<div class="col-span-12 md:col-span-4 mb-20 md:mb-5 ">
|
|
<label class="block text-white text-sm font-bold mb-2">Town</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_town" class="input input-bordered w-full max-w-xs"
|
|
id="city" type="text" placeholder="Town" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_town.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_town.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- phone number -->
|
|
<div class="col-span-12 md:col-span-4 mb-5 md:mb-5">
|
|
<label class="block text-white text-sm font-bold mb-2">Phone Number</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_phone_number" @input="acceptNumber()"
|
|
class="input input-bordered w-full max-w-xs" id="phone number" type="text" placeholder="Phone Number" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_phone_number.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_phone_number.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- state -->
|
|
<div class="flex-1 mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">State</label>
|
|
<select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
|
|
id="employee_state" v-model="CreateEmployeeForm.basicInfo.employee_state">
|
|
<option class="text-white" v-for="(state, index) in stateList" :key="index" defaultValue="state_default"
|
|
:value="state['value']">
|
|
{{ state['text'] }}
|
|
</option>
|
|
</select>
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_state.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_state.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- zip -->
|
|
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
|
|
<label class="block text-white text-sm font-bold mb-2">Zip Code</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_zip" class="input input-bordered w-full max-w-xs"
|
|
id="zip" type="text" placeholder="Zip" />
|
|
<span v-if="v$.CreateEmployeeForm.basicInfo.employee_zip.$error" class="text-red-600 text-center">
|
|
{{ v$.CreateEmployeeForm.basicInfo.employee_zip.$errors[0].$message }}
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">Employee BirthDay</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_birthday" class="input input-bordered w-full max-w-xs"
|
|
id="title" type="date" min="1945-01-01" max="2030-01-01" />
|
|
|
|
</div>
|
|
|
|
|
|
<div class="text-[18px] mt-10 mb-10">Employee Dates</div>
|
|
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">Employee Start Date</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_start_date"
|
|
class="input input-bordered w-full max-w-xs" id="title" type="date" min="2023-01-01" max="2030-01-01" />
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-white text-sm font-bold mb-2">Employee End Date</label>
|
|
<input v-model="CreateEmployeeForm.basicInfo.employee_end_date" class="input input-bordered w-full max-w-xs"
|
|
id="title" type="date" min="2023-01-01" max="2030-01-01" />
|
|
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
|
|
<button class="btn">
|
|
Edit Employee
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent} from 'vue'
|
|
import axios from 'axios'
|
|
import authHeader from '../../services/auth.header'
|
|
import Header from '../../layouts/headers/headerauth.vue'
|
|
import SideBar from '../../layouts/sidebar/sidebar.vue'
|
|
import Footer from '../../layouts/footers/footer.vue'
|
|
import useValidate from "@vuelidate/core";
|
|
import {minLength, required} from "@vuelidate/validators";
|
|
|
|
export default defineComponent({
|
|
name: 'EmployeeEdit',
|
|
|
|
components: {
|
|
Header,
|
|
SideBar,
|
|
Footer,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
v$: useValidate(),
|
|
user: null,
|
|
stateList: [],
|
|
employList: [],
|
|
employee_id: '',
|
|
state_default: '',
|
|
CreateEmployeeForm: {
|
|
basicInfo: {
|
|
employee_last_name: "",
|
|
employee_first_name: "",
|
|
employee_town: "",
|
|
employee_address: "",
|
|
employee_apt: "",
|
|
employee_zip: "",
|
|
employee_birthday: "",
|
|
employee_phone_number: "",
|
|
employee_start_date: "",
|
|
employee_end_date: "",
|
|
employee_type: "",
|
|
employee_state: "",
|
|
|
|
},
|
|
},
|
|
}
|
|
},
|
|
validations() {
|
|
return {
|
|
CreateEmployeeForm: {
|
|
basicInfo: {
|
|
employee_last_name: {required, minLength: minLength(1)},
|
|
employee_first_name: {required, minLength: minLength(1)},
|
|
employee_town: {required, minLength: minLength(1)},
|
|
employee_type: {required},
|
|
employee_zip: {required, minLength: minLength(5)},
|
|
employee_state: {required},
|
|
employee_apt: {required},
|
|
employee_address: {required},
|
|
employee_birthday: {required},
|
|
employee_phone_number: {required},
|
|
employee_start_date: {required},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.userStatus()
|
|
this.getEmployee(this.$route.params.id)
|
|
},
|
|
mounted() {
|
|
this.getEmployeeTypeList();
|
|
this.getStatesList();
|
|
this.getEmployee(this.$route.params.id)
|
|
},
|
|
watch: {
|
|
$route() {
|
|
this.getEmployee(this.$route.params.id);
|
|
},
|
|
},
|
|
methods: {
|
|
acceptNumber() {
|
|
let x = this.CreateEmployeeForm.basicInfo.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
|
|
if (x){
|
|
this.CreateEmployeeForm.basicInfo.employee_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
|
|
}
|
|
else {
|
|
this.CreateEmployeeForm.basicInfo.employee_phone_number = ''
|
|
}
|
|
},
|
|
userStatus() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
|
axios({
|
|
method: 'get',
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
if (response.data.ok) {
|
|
this.user = response.data.user;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.user = null
|
|
})
|
|
},
|
|
EditEmployee(payload: {
|
|
employee_last_name: string;
|
|
employee_first_name: string;
|
|
employee_town: string;
|
|
employee_address: string;
|
|
employee_zip: string;
|
|
employee_apt: string,
|
|
employee_birthday: string;
|
|
employee_phone_number: string;
|
|
employee_start_date: string,
|
|
employee_end_date: string;
|
|
employee_type: string;
|
|
employee_state: string;
|
|
}) {
|
|
let path = import.meta.env.VITE_BASE_URL + "/employee/edit/" + this.employee_id;
|
|
axios({
|
|
method: "post",
|
|
url: path,
|
|
data: payload,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
if (response.data.ok) {
|
|
this.$router.push({name: "employeeProfile", params: { id: this.employee_id }});
|
|
}
|
|
if (response.data.error) {
|
|
this.$router.push("/");
|
|
}
|
|
})
|
|
},
|
|
|
|
getEmployee (userid:any) {
|
|
let path = import.meta.env.VITE_BASE_URL + "/employee/" + userid;
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
this.employee_id = response.data.id
|
|
this.CreateEmployeeForm.basicInfo.employee_last_name= response.data.employee_last_name;
|
|
this.CreateEmployeeForm.basicInfo.employee_first_name= response.data.employee_first_name;
|
|
this.CreateEmployeeForm.basicInfo.employee_town= response.data.employee_town;
|
|
this.CreateEmployeeForm.basicInfo.employee_type= response.data.employee_type;
|
|
this.CreateEmployeeForm.basicInfo.employee_state= response.data.employee_state;
|
|
this.CreateEmployeeForm.basicInfo.employee_zip= response.data.employee_zip;
|
|
this.CreateEmployeeForm.basicInfo.employee_apt= response.data.employee_apt;
|
|
this.CreateEmployeeForm.basicInfo.employee_address= response.data.employee_address;
|
|
this.CreateEmployeeForm.basicInfo.employee_birthday= response.data.employee_birthday;
|
|
this.CreateEmployeeForm.basicInfo.employee_phone_number= response.data.employee_phone_number;
|
|
this.CreateEmployeeForm.basicInfo.employee_start_date= response.data.employee_start_date;
|
|
this.CreateEmployeeForm.basicInfo.employee_end_date= response.data.employee_end_date;
|
|
|
|
})
|
|
},
|
|
onSubmit() {
|
|
let payload = {
|
|
employee_last_name: this.CreateEmployeeForm.basicInfo.employee_last_name,
|
|
employee_first_name: this.CreateEmployeeForm.basicInfo.employee_first_name,
|
|
employee_town: this.CreateEmployeeForm.basicInfo.employee_town,
|
|
employee_address: this.CreateEmployeeForm.basicInfo.employee_address,
|
|
employee_zip: this.CreateEmployeeForm.basicInfo.employee_zip,
|
|
employee_apt: this.CreateEmployeeForm.basicInfo.employee_apt,
|
|
employee_birthday: this.CreateEmployeeForm.basicInfo.employee_birthday,
|
|
employee_phone_number: this.CreateEmployeeForm.basicInfo.employee_phone_number,
|
|
employee_start_date: this.CreateEmployeeForm.basicInfo.employee_start_date,
|
|
employee_end_date: this.CreateEmployeeForm.basicInfo.employee_end_date,
|
|
employee_type: this.CreateEmployeeForm.basicInfo.employee_type,
|
|
employee_state: this.CreateEmployeeForm.basicInfo.employee_state,
|
|
};
|
|
this.EditEmployee(payload);
|
|
},
|
|
getEmployeeTypeList() {
|
|
let path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
})
|
|
.then((response: any) => {
|
|
this.employList = response.data;
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
getStatesList() {
|
|
let path = import.meta.env.VITE_BASE_URL + "/query/states";
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
})
|
|
.then((response: any) => {
|
|
this.stateList = response.data;
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style> |