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

Major Refactor

Browse Source
This commit is contained in:
Edwin Eames
2025-09-01 16:42:44 -04:00
parent 76cbca94e3
commit 992a1a217d
69 changed files with 12683 additions and 8082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
src/pages/employee/create.vue
View File

@@ -1,233 +1,214 @@
<template>
<Header />
<div v-if="user">
<div class="flex">
<div class="">
<SideBar />
<div class="flex">
<div class="w-full px-4 md:px-10 py-4">
<!-- Breadcrumbs & Title -->
<div class="text-sm breadcrumbs">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li>Employees</li>
<li>Create New Employee</li>
</ul>
</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">
<h1 class="text-3xl font-bold mt-4">
Create New Employee
</h1>
<!-- Main Form Card -->
<div class="bg-neutral rounded-lg p-6 mt-6">
<form @submit.prevent="onSubmit" class="space-y-6">
<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'] }}
<!-- SECTION 1: General Info -->
<div>
<h2 class="text-lg font-bold">General Info</h2>
<div class="divider mt-2 mb-4"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- First Name -->
<div class="form-control">
<label class="label"><span class="label-text">First Name</span></label>
<input v-model="CreateEmployeeForm.employee_first_name" type="text" placeholder="First Name" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_first_name.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_first_name.$errors[0].$message }}
</span>
</div>
<!-- Last Name -->
<div class="form-control">
<label class="label"><span class="label-text">Last Name</span></label>
<input v-model="CreateEmployeeForm.employee_last_name" type="text" placeholder="Last Name" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_last_name.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_last_name.$errors[0].$message }}
</span>
</div>
<!-- Phone Number -->
<div class="form-control">
<label class="label"><span class="label-text">Phone Number</span></label>
<input v-model="CreateEmployeeForm.employee_phone_number" @input="acceptNumber()" type="text" placeholder="Phone Number" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_phone_number.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_phone_number.$errors[0].$message }}
</span>
</div>
<!-- Employee Type -->
<div class="form-control">
<label class="label"><span class="label-text">Employee Role</span></label>
<select v-model="CreateEmployeeForm.employee_type" class="select select-bordered select-sm w-full">
<option disabled :value="0">Select a role</option>
<option v-for="employee in employList" :key="employee.value" :value="employee.value">
{{ employee.text }}
</option>
</select>
<span v-if="v$.CreateEmployeeForm.employee_type.$error" class="text-red-500 text-xs mt-1">
Role is required.
</span>
</div>
</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>
<!-- SECTION 2: Address -->
<div>
<h2 class="text-lg font-bold">Address</h2>
<div class="divider mt-2 mb-4"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Street Address -->
<div class="form-control">
<label class="label"><span class="label-text">Street Address</span></label>
<input v-model="CreateEmployeeForm.employee_address" type="text" placeholder="Street Address" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_address.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_address.$errors[0].$message }}
</span>
</div>
<!-- Apt, Suite, etc. -->
<div class="form-control">
<label class="label"><span class="label-text">Apt, Suite, etc. (Optional)</span></label>
<input v-model="CreateEmployeeForm.employee_apt" type="text" placeholder="Apt, suite, unit..." class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_apt.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<!-- Town -->
<div class="form-control">
<label class="label"><span class="label-text">Town</span></label>
<input v-model="CreateEmployeeForm.employee_town" type="text" placeholder="Town" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_town.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_town.$errors[0].$message }}
</span>
</div>
<!-- State -->
<div class="form-control">
<label class="label"><span class="label-text">State</span></label>
<select v-model="CreateEmployeeForm.employee_state" class="select select-bordered select-sm w-full">
<option disabled :value="0">Select a state</option>
<option v-for="state in stateList" :key="state.value" :value="state.value">
{{ state.text }}
</option>
</select>
<span v-if="v$.CreateEmployeeForm.employee_state.$error" class="text-red-500 text-xs mt-1">
State is required.
</span>
</div>
<!-- Zip Code -->
<div class="form-control">
<label class="label"><span class="label-text">Zip Code</span></label>
<input v-model="CreateEmployeeForm.employee_zip" type="text" placeholder="Zip Code" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_zip.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateEmployeeForm.employee_zip.$errors[0].$message }}
</span>
</div>
</div>
</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" />
<!-- SECTION 3: Employment Dates -->
<div>
<h2 class="text-lg font-bold">Employment Dates & Details</h2>
<div class="divider mt-2 mb-4"></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="form-control">
<label class="label"><span class="label-text">Birthday</span></label>
<input v-model="CreateEmployeeForm.employee_birthday" type="date" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_birthday.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Start Date</span></label>
<input v-model="CreateEmployeeForm.employee_start_date" type="date" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateEmployeeForm.employee_start_date.$error" class="text-red-500 text-xs mt-1">Required.</span>
</div>
<div class="form-control">
<label class="label"><span class="label-text">End Date (Optional)</span></label>
<input v-model="CreateEmployeeForm.employee_end_date" type="date" class="input input-bordered input-sm w-full" />
</div>
</div>
</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>
<!-- SUBMIT BUTTON -->
<div class="pt-4">
<button type="submit" class="btn btn-primary btn-sm">Create Employee</button>
</div>
</form>
</div>
</div>
</div>
<Footer />
</template>
<script lang="ts">
import {defineComponent} from 'vue'
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";
import { minLength, required } from "@vuelidate/validators";
interface SelectOption {
text: string;
value: number;
}
export default defineComponent({
name: 'EmployeeCreate',
components: {
Header,
SideBar,
Footer,
},
data() {
return {
v$: useValidate(),
user: null,
stateList: [],
employList: [],
employee_id: '',
stateList: [] as SelectOption[],
employList: [] as SelectOption[],
// --- REFACTORED: Simplified, flat form object ---
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: "",
},
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: "",
// --- FIX: Initialized as a number for proper v-model binding ---
employee_type: 0,
employee_state: 0,
},
}
},
validations() {
return {
// --- REFACTORED: Validation rules point to the flat form object ---
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},
},
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.userStatus();
},
mounted() {
this.getEmployeeTypeList();
@@ -235,108 +216,50 @@ export default defineComponent({
},
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 = ''
}
const x = this.CreateEmployeeForm.employee_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
if (x) {
this.CreateEmployeeForm.employee_phone_number = !x[2] ? x[1] : `(${x[1]}) ${x[2]}${x[3] ? `-${x[3]}` : ''}`;
}
},
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
})
const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios.get(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("/");
}
})
CreateItem(payload: any) {
const path = import.meta.env.VITE_BASE_URL + "/employee/create";
axios.post(path, payload, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
if (response.data.ok) {
const employee_id = response.data['user_id'];
this.$router.push({ name: "employeeProfile", params: { id: employee_id } });
} else {
console.error("Failed to create employee:", response.data.error);
// Optionally, show a notification to the user
}
});
},
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);
this.v$.$validate(); // Trigger validation
if (!this.v$.$error) {
this.CreateItem(this.CreateEmployeeForm);
} else {
console.log("Form validation failed.");
}
},
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(() => {
});
const path = import.meta.env.VITE_BASE_URL + "/query/employeetype";
axios.get(path, { withCredentials: true })
.then((response: any) => { this.employList = response.data; });
},
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(() => {
});
const path = import.meta.env.VITE_BASE_URL + "/query/states";
axios.get(path, { withCredentials: true })
.then((response: any) => { this.stateList = response.data; });
},
},
})
</script>
<style scoped></style>
</script>