first commit
This commit is contained in:
342
src/pages/employee/create.vue
Normal file
342
src/pages/employee/create.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<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]">Create a new 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- customer_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"
|
||||
class="input input-bordered w-full max-w-xs" id="phone number" type="text" placeholder="Phone Number"
|
||||
@input="acceptNumber()" />
|
||||
<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" :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">
|
||||
Create 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: 'EmployeeCreate',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
v$: useValidate(),
|
||||
user: null,
|
||||
stateList: [],
|
||||
employList: [],
|
||||
employee_id: '',
|
||||
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()
|
||||
},
|
||||
mounted() {
|
||||
this.getEmployeeTypeList();
|
||||
this.getStatesList();
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
CreateItem(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/create";
|
||||
axios({
|
||||
method: "post",
|
||||
url: path,
|
||||
data: payload,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
this.employee_id= response.data['user_id']
|
||||
this.$router.push({name: "employeeProfile", params: { id: this.employee_id }});
|
||||
}
|
||||
if (response.data.error) {
|
||||
this.$router.push("/");
|
||||
}
|
||||
})
|
||||
},
|
||||
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.CreateItem(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>
|
||||
379
src/pages/employee/edit.vue
Normal file
379
src/pages/employee/edit.vue
Normal 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>
|
||||
163
src/pages/employee/home.vue
Normal file
163
src/pages/employee/home.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<Header />
|
||||
<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: 'employee' }">
|
||||
employees
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<router-link :to="{ name: 'employeeCreate' }">
|
||||
<button class="btn">Create Employee</button>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Town</th>
|
||||
<th>Phone Number</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="person in employees" :key="person['id']">
|
||||
|
||||
<td>{{ person['employee_first_name'] }} {{ person['employee_last_name'] }}</td>
|
||||
|
||||
<td>
|
||||
<div v-if="person['employee_type'] == 0">Owner</div>
|
||||
<div v-else-if="person['employee_type'] == 1">Manager</div>
|
||||
<div v-else-if="person['employee_type'] == 2">Secretary</div>
|
||||
<div v-else-if="person['employee_type'] == 3">Office</div>
|
||||
<div v-else-if="person['employee_type'] == 4">Driver</div>
|
||||
<div v-else-if="person['employee_type'] == 5">Service Tech</div>
|
||||
<div v-else-if="person['employee_type'] == 6">Contract</div>
|
||||
<div v-else-if="person['employee_type'] == 7">Cash</div>
|
||||
<div v-else-if="person['employee_type'] == 8">Driver/Tech</div>
|
||||
<div v-else></div>
|
||||
|
||||
</td>
|
||||
|
||||
<td>{{ person['employee_town'] }}</td>
|
||||
|
||||
<td>{{ person['employee_phone_number'] }}</td>
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'employeeEdit', params: { id: person['id'] } }">
|
||||
<button class="btn">Edit</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'employeeProfile', params: { id: person['id'] } }">
|
||||
<button class="btn">View</button>
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex justify-center" v-if="recordsLength > 9">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</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 PaginationComp from '../../components/pagination.vue'
|
||||
import SideBar from '../../layouts/sidebar/sidebar.vue'
|
||||
import Footer from '../../layouts/footers/footer.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EmployeeHome',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
employees: [],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
options: {
|
||||
edgeNavigation: false,
|
||||
format: false,
|
||||
template: PaginationComp
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.userStatus()
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.page)
|
||||
|
||||
},
|
||||
methods: {
|
||||
getPage: function (page: any) {
|
||||
// we simulate an api call that fetch the records from a backend
|
||||
this.employees = [];
|
||||
this.get_employees(page)
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
get_employees(page: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/employee/all/' + page;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
headers: authHeader(),
|
||||
}).then((response: any) => {
|
||||
this.employees = response.data
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
251
src/pages/employee/profile/home.vue
Normal file
251
src/pages/employee/profile/home.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<Header/>
|
||||
|
||||
<div class="wrapper">
|
||||
<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 class=" w-full mt-10" v-if="loaded">
|
||||
<div class="grid grid-cols-12 gap-5 ">
|
||||
<div class="col-span-3 ">
|
||||
<img src="../../../assets/images/user_placeholder.png"
|
||||
alt="Drone Image"
|
||||
width="200"
|
||||
height="250"/>
|
||||
</div>
|
||||
<div class="col-span-9 bg-neutral">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-12 font-bold flex justify-end">
|
||||
<div class="btn">
|
||||
<router-link :to="{ name: 'employeeEdit', params: { id: employee.id } }" >
|
||||
Edit Employee
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ employee.employee_first_name }}
|
||||
{{ employee.employee_last_name }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ employee.employee_address }}
|
||||
<div v-if="employee.employee_apt != 'None'">
|
||||
{{ employee.employee_apt }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
<div class="pr-2">
|
||||
{{ employee.employee_town }},
|
||||
</div>
|
||||
|
||||
<div class="pr-2">
|
||||
<div v-if="employee.employee_state == '0'">Massachusetts</div>
|
||||
<div v-else-if="employee.employee_state == '1'">Rhode Island</div>
|
||||
<div v-else-if="employee.employee_state == '2'">New Hampshire</div>
|
||||
<div v-else-if="employee.employee_state == '3'">Maine</div>
|
||||
<div v-else-if="employee.employee_state == '4'">Vermont</div>
|
||||
<div v-else-if="employee.employee_state == '5'">Maine</div>
|
||||
<div v-else-if="employee.employee_state == '6'">New York</div>
|
||||
<div v-else>Unknown state</div>
|
||||
</div>
|
||||
<div class="pr-2">
|
||||
{{ employee.employee_zip }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex" v-if="employee.employee_apt !== 'None'">
|
||||
{{ employee.employee_apt }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
{{ employee.employee_phone_number }}
|
||||
</div>
|
||||
<div class="col-span-12 font-bold flex">
|
||||
<div v-if="employee.employee_type == '0'">owner</div>
|
||||
<div v-else-if="employee.employee_type == '1'">manager</div>
|
||||
<div v-else-if="employee.employee_type == '2'">secretary</div>
|
||||
<div v-else-if="employee.employee_type == '3'">office</div>
|
||||
<div v-else-if="employee.employee_type == '4'">driver</div>
|
||||
<div v-else-if="employee.employee_type == '5'">tech</div>
|
||||
<div v-else-if="employee.employee_type == '6'">contract</div>
|
||||
<div v-else-if="employee.employee_type == '7'">cash</div>
|
||||
<div v-else-if="employee.employee_type == '8'">driver/tech</div>
|
||||
<div v-else>Unknown employee type</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 bg-neutral p-5 mt-5">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-12 font-bold flex text-2xl">
|
||||
Delivery
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-12 py-2">
|
||||
Total Deliverys Done: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Total Gallons Delivered: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Total Prime: 0
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-12 py-2">
|
||||
Total Service Calls: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Last Service Call: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 bg-neutral p-5 mt-5">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-12 font-bold flex text-2xl">
|
||||
Service
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-12 py-2">
|
||||
Total Deliverys Done: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Total Gallons Delivered: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Total Prime: 0
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-12 py-2">
|
||||
Total Service Calls: 0
|
||||
</div>
|
||||
<div class="col-span-12 py-2">
|
||||
Last Service Call: 0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'employeeProfile',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
token: null,
|
||||
user_placeholder: '',
|
||||
user: null,
|
||||
loaded: false,
|
||||
employee: {
|
||||
id: '',
|
||||
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:'',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.userStatus()
|
||||
},
|
||||
mounted() {
|
||||
this.getEmployee(this.$route.params.id)
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
this.getEmployee(this.$route.params.id);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getPage: function (page: any) {
|
||||
// we simulate an api call that fetch the records from a backend
|
||||
this.getEmployee(page)
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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) => {
|
||||
if (response.data) {
|
||||
console.log(response.data)
|
||||
this.employee = response.data;
|
||||
this.loaded = true;
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
32
src/pages/employee/routes.ts
Normal file
32
src/pages/employee/routes.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
|
||||
|
||||
import EmployeeHome from '../employee/home.vue';
|
||||
import EmployeeCreate from "../employee/create.vue";
|
||||
import EmployeeEdit from "../employee/edit.vue";
|
||||
import EmployeeProfile from "../employee/profile/home.vue";
|
||||
|
||||
const employeeRoutes = [
|
||||
{
|
||||
path: '/employee',
|
||||
name: 'employee',
|
||||
component: EmployeeHome,
|
||||
},
|
||||
{
|
||||
path: '/employee/create',
|
||||
name: 'employeeCreate',
|
||||
component: EmployeeCreate,
|
||||
},
|
||||
{
|
||||
path: '/employee/edit/:id',
|
||||
name: 'employeeEdit',
|
||||
component: EmployeeEdit,
|
||||
},
|
||||
{
|
||||
path: '/employee/:id',
|
||||
name: 'employeeProfile',
|
||||
component: EmployeeProfile,
|
||||
},
|
||||
]
|
||||
|
||||
export default employeeRoutes
|
||||
//sourceMappingURL=index.ts.map
|
||||
Reference in New Issue
Block a user