Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
amnesia
2024-02-28 16:03:19 -05:00
commit 54ee44ba66
84 changed files with 15919 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
src/pages/employee/edit.vue Normal file
View File

@@ -0,0 +1,379 @@
<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>