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

Updated looks

Browse Source
This commit is contained in:
Anekdotin
2024-04-04 16:38:35 -04:00
parent 2d9fce2e89
commit 7164e41aa1
36 changed files with 2863 additions and 1567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/pages/customer/create.vue
View File

@@ -1,9 +1,9 @@
<template>
<Header/>
<div v-if="user">
<Header />
<div v-if="user">
<div class="flex">
<div class="">
<SideBar/>
<SideBar />
</div>
<div class="w-full px-10">
<div class="text-sm breadcrumbs">
@@ -20,126 +20,115 @@
</li>
</ul>
</div>
<div class="grid grid-cols-1 rounded-md p-6 ">
<div class="text-[24px]">Create a customer</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-5 mb-5">General Info</div>
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2"> First Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_first_name"
class="input input-bordered w-full max-w-xs"
id="title" type="text" placeholder="First Name"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
</span>
</div>
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2"> Last Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_last_name"
class="input input-bordered w-full max-w-xs"
id="title" type="text" placeholder="Last Name"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
</span>
</div>
<div class="flex gap-5">
<div class="flex-1 mb-4">
<label class="block text-white text-sm font-bold mb-2">Customer Type</label>
<select
class="select select-bordered w-full max-w-xs"
aria-label="Default select example" id="customer_type"
v-model="CreateCustomerForm.basicInfo.customer_home_type">
<option class="text-white" v-for="(customer, index) in custList"
:key="index"
:value="customer['value']">
{{ customer['text'] }}
</option>
</select>
<div class="grid grid-cols-12 rounded-md p-6 ">
<div class="col-span-12 text-[24px] ">Create a customer</div>
<form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
@submit.prevent="onSubmit">
<div class="grid grid-cols-12">
<div class="col-span-12 text-[18px] mt-5 mb-5">General Info</div>
<div class="col-span-6 mb-4">
<label class="block text-white text-sm font-bold mb-2"> First Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_first_name"
class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
placeholder="First Name" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
</span>
</div>
<div class="col-span-6 mb-4">
<label class="block text-white text-sm font-bold mb-2"> Last Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_last_name"
class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
placeholder="Last Name" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 gap-5">
<div class="flex-1 mb-4">
<label class="block text-white text-sm font-bold mb-2">Customer Type</label>
<select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
id="customer_type" v-model="CreateCustomerForm.basicInfo.customer_home_type">
<option class="text-white" v-for="(customer, index) in custList" :key="index"
:value="customer['value']">
{{ customer['text'] }}
</option>
</select>
</div>
</div>
</div>
<div class="text-[18px] mt-5 mb-5">Customer Address</div>
<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="CreateCustomerForm.basicInfo.customer_phone_number"
class="input input-bordered w-full max-w-xs"
id="phone number" type="tel" placeholder="Phone Number" @input="acceptNumber()" />
class="input input-bordered input-sm w-full max-w-xs" id="phone number" type="tel"
placeholder="Phone Number" @input="acceptNumber()" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_phone_number.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
</span>
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
</span>
</div>
<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="CreateCustomerForm.basicInfo.customer_address"
class="input input-bordered w-full max-w-xs"
id="address" type="text" placeholder="Address"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
</span>
class="input input-bordered input-sm w-full max-w-xs" id="address" type="text" placeholder="Address" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 mb-5 md:mb-5">
<input v-model="CreateCustomerForm.basicInfo.customer_apt"
class="input input-bordered w-full max-w-xs"
id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc"/>
class="input input-bordered input-sm w-full max-w-xs" id="apt" type="text"
placeholder="Apt, suite, unit, building, floor, etc" />
</div>
<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="CreateCustomerForm.basicInfo.customer_town"
class="input input-bordered w-full max-w-xs"
id="town" type="text" placeholder="Town"/>
class="input input-bordered input-sm w-full max-w-xs" id="town" type="text" placeholder="Town" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
</span>
{{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
</span>
</div>
<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="customer_state"
v-model="CreateCustomerForm.basicInfo.customer_state">
<option class="text-white" v-for="(state, index) in stateList"
:key="index"
:value="state['value']">
<select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
id="customer_state" v-model="CreateCustomerForm.basicInfo.customer_state">
<option class="text-white" v-for="(state, index) in stateList" :key="index" :value="state['value']">
{{ state['text'] }}
</option>
</select>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
</span>
{{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
</span>
</div>
<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">Zip Code</label>
<input v-model="CreateCustomerForm.basicInfo.customer_zip"
class="input input-bordered w-full max-w-xs"
id="zip" type="text" placeholder="Zip"/>
class="input input-bordered input-sm w-full max-w-xs" id="zip" type="text" placeholder="Zip" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
</span>
{{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
<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">Email</label>
<input v-model="CreateCustomerForm.basicInfo.customer_email"
class="input input-bordered w-full max-w-xs"
id="email" type="text" placeholder="Email"/>
class="input input-bordered input-sm w-full max-w-xs" id="email" type="text" placeholder="Email" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_email.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
</span>
{{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
</span>
</div>
<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">Automatic</label>
<input v-model="CreateCustomerForm.basicInfo.customer_automatic"
class="checkbox"
id="automatic"
type="checkbox"/>
<input v-model="CreateCustomerForm.basicInfo.customer_automatic" class="checkbox checkbox-xs" id="automatic"
type="checkbox" />
</div>
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
<button
class="btn">
<button class="btn btn-accent">
Create Customer
</button>
</div>
@@ -148,18 +137,18 @@
</div>
</div>
</div>
<Footer/>
<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 {email, minLength, required} from "@vuelidate/validators";
import { email, minLength, required } from "@vuelidate/validators";
export default defineComponent({
name: 'CustomerCreate',
@@ -199,15 +188,15 @@ export default defineComponent({
return {
CreateCustomerForm: {
basicInfo: {
customer_last_name: {required, minLength: minLength(1)},
customer_first_name: {required, minLength: minLength(1)},
customer_town: {required, minLength: minLength(1)},
customer_home_type: {required},
customer_zip: {required, minLength: minLength(5)},
customer_email: {email, required},
customer_phone_number: {required},
customer_state: {required},
customer_address: {required},
customer_last_name: { required, minLength: minLength(1) },
customer_first_name: { required, minLength: minLength(1) },
customer_town: { required, minLength: minLength(1) },
customer_home_type: { required },
customer_zip: { required, minLength: minLength(5) },
customer_email: { email, required },
customer_phone_number: { required },
customer_state: { required },
customer_address: { required },
},
},
};
@@ -220,14 +209,14 @@ export default defineComponent({
this.getStatesList();
},
methods: {
acceptNumber() {
let x = this.CreateCustomerForm.basicInfo.customer_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
if (x){
this.CreateCustomerForm.basicInfo.customer_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
}
else {
this.CreateCustomerForm.basicInfo.customer_phone_number = ''
}
acceptNumber() {
let x = this.CreateCustomerForm.basicInfo.customer_phone_number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
if (x) {
this.CreateCustomerForm.basicInfo.customer_phone_number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
}
else {
this.CreateCustomerForm.basicInfo.customer_phone_number = ''
}
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -237,14 +226,14 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
},
CreateCustomer(payload: {
customer_last_name: string;
@@ -267,15 +256,15 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.new_user_id = response.data.user.user_id
this.$router.push({ name: 'customerProfile', params: { id: this.new_user_id } });
}
if (response.data.error) {
this.$router.push("/");
}
})
.then((response: any) => {
if (response.data.ok) {
this.new_user_id = response.data.user.user_id
this.$router.push({ name: 'customerProfile', params: { id: this.new_user_id } });
}
if (response.data.error) {
this.$router.push("/");
}
})
},
onSubmit() {
let payload = {
@@ -300,11 +289,11 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.custList = response.data;
})
.catch(() => {
});
.then((response: any) => {
this.custList = response.data;
})
.catch(() => {
});
},
getStatesList() {
let path = import.meta.env.VITE_BASE_URL + "/query/states";
@@ -313,16 +302,14 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.stateList = response.data;
})
.catch(() => {
});
.then((response: any) => {
this.stateList = response.data;
})
.catch(() => {
});
},
},
})
</script>
<style scoped>
</style>
<style scoped></style>

311
src/pages/customer/edit.vue
View File

@@ -1,9 +1,9 @@
<template>
<Header/>
<Header />
<div v-if="user">
<div class="flex">
<div class="">
<SideBar/>
<SideBar />
</div>
<div class="w-full px-10">
<div class="text-sm breadcrumbs">
@@ -21,122 +21,121 @@
</ul>
</div>
<div class="grid grid-cols-1 rounded-md p-6 ">
<div class="text-[24px]">Edit customer: {{ customer.account_number }}</div>
<form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
<div class="grid grid-cols-12 rounded-md p-6 ">
<div class="col-span-12 text-2xl">Edit customer: {{ customer.account_number }}</div>
<form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 " enctype="multipart/form-data"
@submit.prevent="onSubmit">
<div class="text-[18px] mt-5 mb-5">General Info</div>
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2"> First Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_first_name"
class="input input-bordered w-full max-w-xs"
id="title" type="text" placeholder="First Name"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
</span>
</div>
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2"> Last Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_last_name"
class="input input-bordered w-full max-w-xs"
id="title" type="text" placeholder="Last Name"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
</span>
</div>
<div class="flex gap-5">
<div class="flex-1 mb-4">
<label class="block text-white text-sm font-bold mb-2">Customer Type</label>
<select
class="select select-bordered w-full max-w-xs"
aria-label="Default select example" id="customer_type"
v-model="CreateCustomerForm.basicInfo.customer_home_type">
<option class="text-white" v-for="(customer, index) in custList"
:key="index"
:value="customer['value']">
{{ customer['text'] }}
</option>
</select>
<div class="grid grid-cols-12">
<div class="col-span-12 mb-4">
<label class="block text-white text-sm font-bold mb-2"> First Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_first_name"
class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
placeholder="First Name" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_first_name.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_first_name.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 mb-4">
<label class="block text-white text-sm font-bold mb-2"> Last Name</label>
<input v-model="CreateCustomerForm.basicInfo.customer_last_name"
class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
placeholder="Last Name" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_last_name.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_last_name.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 flex gap-5">
<div class="flex-1 mb-4">
<label class="block text-white text-sm font-bold mb-2">Customer Type</label>
<select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
id="customer_type" v-model="CreateCustomerForm.basicInfo.customer_home_type">
<option class="text-white" v-for="(customer, index) in custList" :key="index"
:value="customer['value']">
{{ customer['text'] }}
</option>
</select>
</div>
</div>
</div>
<div class="text-[18px] mt-5 mb-5">Customer Address</div>
<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="CreateCustomerForm.basicInfo.customer_phone_number"
class="input input-bordered w-full max-w-xs"
id="phone number" type="text" placeholder="Phone Number" @input="acceptNumber()"/>
class="input input-bordered input-sm w-full max-w-xs" id="phone number" type="text"
placeholder="Phone Number" @input="acceptNumber()" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_phone_number.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
</span>
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_phone_number.$errors[0].$message }}
</span>
</div>
<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="CreateCustomerForm.basicInfo.customer_address"
class="input input-bordered w-full max-w-xs"
id="address" type="text" placeholder="Address"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error"
class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 mb-5 md:mb-5">
<input v-model="CreateCustomerForm.basicInfo.customer_apt"
class="input input-bordered w-full max-w-xs"
id="apt" type="text" placeholder="Apt, suite, unit, building, floor, etc"/>
</div>
<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="CreateCustomerForm.basicInfo.customer_town"
class="input input-bordered w-full max-w-xs"
id="town" type="text" placeholder="town"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
</span>
<div class="grid grid-cols-12">
<div class="col-span-12 mb-5 ">
<label class="block text-white text-sm font-bold mb-2">Street Address</label>
<input v-model="CreateCustomerForm.basicInfo.customer_address"
class="input input-bordered input-sm w-full max-w-xs" id="address" type="text"
placeholder="Address" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_address.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_address.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 mb-5 ">
<label class="block text-white text-sm font-bold mb-2">Apt</label>
<input v-model="CreateCustomerForm.basicInfo.customer_apt"
class="input input-bordered input-sm w-full max-w-xs" id="apt" type="text"
placeholder="Apt, suite, unit, building, floor, etc" />
</div>
<div class="col-span-12 ">
<label class="block text-white text-sm font-bold mb-2">Town</label>
<input v-model="CreateCustomerForm.basicInfo.customer_town"
class="input input-bordered input-sm w-full max-w-xs" id="town" type="text" placeholder="town" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_town.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_town.$errors[0].$message }}
</span>
</div>
<div class="col-span-12 flex-1 mb-4 ">
<label class="block text-white text-sm font-bold mb-2">State</label>
<select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
id="customer_state" v-model="CreateCustomerForm.basicInfo.customer_state">
<option class="text-white" v-for="(state, index) in stateList" :key="index" :value="state['value']">
{{ state['text'] }}
</option>
</select>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
</span>
</div>
<div class="col-span-2 mb-5 md:mb-5">
<label class="block text-white text-sm font-bold mb-2">Zip Code</label>
<input v-model="CreateCustomerForm.basicInfo.customer_zip"
class="input input-bordered input-sm w-full max-w-xs" id="zip" type="text" placeholder="Zip" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
</span>
</div>
</div>
<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="customer_state"
v-model="CreateCustomerForm.basicInfo.customer_state">
<option class="text-white" v-for="(state, index) in stateList"
:key="index"
:value="state['value']">
{{ state['text'] }}
</option>
</select>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_state.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_state.$errors[0].$message }}
</span>
</div>
<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">Zip Code</label>
<input v-model="CreateCustomerForm.basicInfo.customer_zip"
class="input input-bordered w-full max-w-xs"
id="zip" type="text" placeholder="Zip"/>
<span v-if="v$.CreateCustomerForm.basicInfo.customer_zip.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_zip.$errors[0].$message }}
</span>
</div>
<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">Email</label>
<input v-model="CreateCustomerForm.basicInfo.customer_email"
class="input input-bordered w-full max-w-xs"
id="email" type="text" placeholder="Email"/>
class="input input-bordered input-sm w-full max-w-xs" id="email" type="text" placeholder="Email" />
<span v-if="v$.CreateCustomerForm.basicInfo.customer_email.$error" class="text-red-600 text-center">
{{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
</span>
{{ v$.CreateCustomerForm.basicInfo.customer_email.$errors[0].$message }}
</span>
</div>
<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">Automatic</label>
<input v-model="CreateCustomerForm.basicInfo.customer_automatic"
class="checkbox"
id="automatic"
type="checkbox"/>
<input v-model="CreateCustomerForm.basicInfo.customer_automatic" class="checkbox checkbox-xs" id="automatic"
type="checkbox" />
</div>
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
<button class="btn">
@@ -148,18 +147,18 @@
</div>
</div>
</div>
<Footer/>
<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 {email, minLength, required} from "@vuelidate/validators";
import { email, minLength, required } from "@vuelidate/validators";
export default defineComponent({
name: 'CustomerEdit',
@@ -211,15 +210,15 @@ export default defineComponent({
return {
CreateCustomerForm: {
basicInfo: {
customer_last_name: {required, minLength: minLength(1)},
customer_first_name: {required, minLength: minLength(1)},
customer_town: {required, minLength: minLength(1)},
customer_home_type: {required},
customer_zip: {required, minLength: minLength(5)},
customer_email: {email, required},
customer_phone_number: {required},
customer_state: {required},
customer_address: {required},
customer_last_name: { required, minLength: minLength(1) },
customer_first_name: { required, minLength: minLength(1) },
customer_town: { required, minLength: minLength(1) },
customer_home_type: { required },
customer_zip: { required, minLength: minLength(5) },
customer_email: { email, required },
customer_phone_number: { required },
customer_state: { required },
customer_address: { required },
},
},
};
@@ -250,14 +249,14 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
},
// gets the item from parameter router
@@ -269,22 +268,22 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data) {
this.customer = response.data;
this.CreateCustomerForm.basicInfo.customer_last_name = response.data.customer_last_name;
this.CreateCustomerForm.basicInfo.customer_first_name = response.data.customer_first_name;
this.CreateCustomerForm.basicInfo.customer_town = response.data.customer_town;
this.CreateCustomerForm.basicInfo.customer_state = response.data.customer_state;
this.CreateCustomerForm.basicInfo.customer_zip = response.data.customer_zip;
this.CreateCustomerForm.basicInfo.customer_automatic = response.data.customer_automatic;
this.CreateCustomerForm.basicInfo.customer_phone_number = response.data.customer_phone_number;
this.CreateCustomerForm.basicInfo.customer_home_type = response.data.customer_home_type;
this.CreateCustomerForm.basicInfo.customer_apt = response.data.customer_apt;
this.CreateCustomerForm.basicInfo.customer_email = response.data.customer_email;
this.CreateCustomerForm.basicInfo.customer_address = response.data.customer_address;
}
})
.then((response: any) => {
if (response.data) {
this.customer = response.data;
this.CreateCustomerForm.basicInfo.customer_last_name = response.data.customer_last_name;
this.CreateCustomerForm.basicInfo.customer_first_name = response.data.customer_first_name;
this.CreateCustomerForm.basicInfo.customer_town = response.data.customer_town;
this.CreateCustomerForm.basicInfo.customer_state = response.data.customer_state;
this.CreateCustomerForm.basicInfo.customer_zip = response.data.customer_zip;
this.CreateCustomerForm.basicInfo.customer_automatic = response.data.customer_automatic;
this.CreateCustomerForm.basicInfo.customer_phone_number = response.data.customer_phone_number;
this.CreateCustomerForm.basicInfo.customer_home_type = response.data.customer_home_type;
this.CreateCustomerForm.basicInfo.customer_apt = response.data.customer_apt;
this.CreateCustomerForm.basicInfo.customer_email = response.data.customer_email;
this.CreateCustomerForm.basicInfo.customer_address = response.data.customer_address;
}
})
},
editItem(payload: {
customer_last_name: string;
@@ -306,16 +305,16 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.$router.push({name: "customerProfile", params: {id: this.customer.id}});
}
;
if (response.data.error) {
this.$router.push("/");
}
;
})
.then((response: any) => {
if (response.data.ok) {
this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
}
;
if (response.data.error) {
this.$router.push("/");
}
;
})
},
onSubmit() {
let payload = {
@@ -339,11 +338,11 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.custList = response.data;
})
.catch(() => {
});
.then((response: any) => {
this.custList = response.data;
})
.catch(() => {
});
},
getStatesList() {
let path = import.meta.env.VITE_BASE_URL + "/query/states";
@@ -352,18 +351,16 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.stateList = response.data;
})
.catch(() => {
});
.then((response: any) => {
this.stateList = response.data;
})
.catch(() => {
});
},
},
})
</script>
<style scoped>
</style>
<style scoped></style>
<script setup lang="ts">
</script>

11
src/pages/customer/home.vue
View File

@@ -23,7 +23,7 @@
</div>
<div class="overflow-x-auto">
<div class="overflow-x-auto bg-neutral font-bold">
<table class="table">
<!-- head -->
<thead>
@@ -54,19 +54,18 @@
<td class="flex gap-5">
<router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }"
class="cursor-pointer underline hover:text-blue-300">
class="btn btn-accent btn-sm">
Oil
</router-link>
<router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }"
class="cursor-pointer underline hover:text-blue-300">
<router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }" class="btn btn-accent btn-sm">
Edit
</router-link>
<router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }"
class="cursor-pointer underline hover:text-blue-300">
class=" btn btn-accent btn-sm">
View
</router-link>
<a @click.prevent="deleteCustomer(person['id'])" class="cursor-pointer underline hover:text-blue-300">
<a @click.prevent="deleteCustomer(person['id'])" class="btn btn-error btn-sm">
Delete
</a>
</td>

218
src/pages/customer/profile/home.vue
View File

@@ -1,9 +1,9 @@
<template>
<Header/>
<Header />
<div class="flex">
<div class="">
<SideBar/>
<SideBar />
</div>
<div class=" w-full px-10 ">
<div class="text-sm breadcrumbs">
@@ -22,27 +22,24 @@
<div class="w-full mt-10" v-if="customer !== null">
<div class="grid grid-cols-12 gap-5">
<div class="col-span-4 bg-neutral p-5 ">
<img src="../../../assets/images/user_placeholder.png"
alt="Drone Image"
width="200"
height="250"/>
<div class="col-span-4 p-5 ">
<img src="../../../assets/images/user_placeholder.png" alt="Drone Image" width="200" height="250" />
</div>
<div class="col-span-8 bg-neutral p-5">
<div class="col-span-8 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex justify-evenly pb-5">
<div class="btn">
<router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }"
class="cursor-pointer underline hover:text-blue-300">
Create Delivery
</router-link>
</div>
<div class="btn">
<router-link :to="{ name: 'customerEdit', params: { id: customer.id } }" class="">
Edit Customer
</router-link>
</div>
<router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }"
class="btn-sm btn btn-accent">
Create Delivery
</router-link>
<router-link :to="{ name: 'customerEdit', params: { id: customer.id } }"
class="btn-sm btn btn-accent">
Edit Customer
</router-link>
</div>
<div class="col-span-12 font-bold flex pb-5 text-lg">{{ customer.account_number }}</div>
<div class="col-span-12 font-bold flex">
@@ -95,7 +92,7 @@
</div>
</div>
<div class="col-span-12 bg-neutral p-5">
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl">
Stats
@@ -114,7 +111,7 @@
</div>
</div>
</div>
<div class="col-span-12 bg-neutral p-5">
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-6 font-bold flex text-2xl">
Credit Cards
@@ -122,7 +119,7 @@
<div class="col-span-6 font-bold flex ">
<router-link :to="{ name: 'cardadd', params: { id: customer.user_id } }">
<button class="btn">Add Credit Card</button>
<button class="btn btn-sm btn-accent">Add Credit Card</button>
</router-link>
</div>
<div class="col-span-12 font-bold flex">
@@ -152,19 +149,17 @@
</div>
<div class="flex justify-between">
<a @click.prevent="editCard(card.id)"
class="cursor-pointer underline hover:text-blue-300">
Edit Card
</a>
<a @click.prevent="removeCard(card.id)"
class="cursor-pointer underline hover:text-blue-300">
RemoveCard
<a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">
Edit Card
</a>
<a @click.prevent="removeCard(card.id)" class="cursor-pointer underline hover:text-blue-300">
RemoveCard
</a>
</div>
</div>
</div>
<div v-else class="basis-1/3 p-2">
<div class="bg-neutral rounded-md border-2 ">
<div class="rounded-md border-2 ">
<div class="flex p-3">
{{ card.type_of_card }}
</div>
@@ -178,9 +173,11 @@
{{ card.expiration_month }}/ {{ card.expiration_year }}
</div>
<div class="flex justify-between">
<a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">Edit
<a @click.prevent="editCard(card.id)"
class="cursor-pointer underline hover:text-blue-300">Edit
Card</a>
<a @click.prevent="removeCard(card.id)" class="cursor-pointer underline hover:text-blue-300">Remove
<a @click.prevent="removeCard(card.id)"
class="cursor-pointer underline hover:text-blue-300">Remove
Card</a>
</div>
</div>
@@ -190,7 +187,7 @@
</div>
</div>
<div class="col-span-12 bg-neutral p-5">
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-6 font-bold flex text-2xl">
Financial
@@ -198,93 +195,92 @@
</div>
</div>
<div class="col-span-12 bg-neutral p-5">
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl">Orders</div>
</div>
<div class="grid grid-cols-12 ">
<div role="tablist" class="tabs tabs-bordered">
<input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Deliveries" checked/>
<div role="tabpanel" class="tab-content pt-10">
<table class="table">
<!-- head -->
<thead>
<tr>
<th>id</th>
<th>Status</th>
<th>Town</th>
<th>Name</th>
<th>Address</th>
<th>Gallons</th>
<th>Date</th>
<th>Automatic</th>
<th>Prime</th>
<th>Same Day</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr v-for="oil in deliveries" :key="oil['id']">
<td>{{ oil['id'] }}</td>
<td>
<div v-if="oil['delivery_status'] == 0">Waiting</div>
<div v-else-if="oil['delivery_status'] == 1">delivered</div>
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
<div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
<div v-else-if="oil['delivery_status'] == 10">Finalized</div>
<div v-else></div>
</td>
<td>{{ oil['customer_town'] }}</td>
<td>{{ oil['customer_name'] }}</td>
<td>{{ oil['customer_address'] }}</td>
<td>
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
<div v-else> {{ oil['gallons_ordered'] }}</div>
</td>
<td>{{ oil['expected_delivery_date'] }}</td>
<td>
<div v-if="oil['automatic'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td>
<div v-if="oil['prime'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td>
<div v-if="oil['same_day'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td class="flex gap-5">
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
<button class="btn">Edit</button>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-12 bg-neutral">
<table class="table col-span-12">
<!-- head -->
<thead>
<tr>
<th>id</th>
<th>Status</th>
<th>Town</th>
<th>Name</th>
<th>Address</th>
<th>Gallons</th>
<th>Date</th>
<th>Automatic</th>
<th>Prime</th>
<th>Same Day</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr v-for="oil in deliveries" :key="oil['id']">
<td>{{ oil['id'] }}</td>
<td>
<div v-if="oil['delivery_status'] == 0">Waiting</div>
<div v-else-if="oil['delivery_status'] == 1">delivered</div>
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
<div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
<div v-else-if="oil['delivery_status'] == 10">Finalized</div>
<div v-else></div>
</td>
<td>{{ oil['customer_town'] }}</td>
<td>{{ oil['customer_name'] }}</td>
<td>{{ oil['customer_address'] }}</td>
<td>
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
<div v-else> {{ oil['gallons_ordered'] }}</div>
</td>
<td>{{ oil['expected_delivery_date'] }}</td>
<td>
<div v-if="oil['automatic'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td>
<div v-if="oil['prime'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td>
<div v-if="oil['same_day'] == 0">No</div>
<div v-else>Yes</div>
</td>
<td class="flex gap-5">
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
<button class="btn btn-sm btn-accent">Edit</button>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer/>
<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 PaginationComp from "../../../components/pagination.vue";
import {notify} from "@kyvg/vue3-notification";
import { notify } from "@kyvg/vue3-notification";
export default defineComponent({
name: 'CustomerProfile',
@@ -367,14 +363,14 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
})
},
getCustomer(userid: any) {
@@ -425,7 +421,7 @@ export default defineComponent({
},
editCard(card_id: any) {
this.$router.push({name: "cardedit", params: {id: card_id}});
this.$router.push({ name: "cardedit", params: { id: card_id } });
},
removeCard(card_id: any) {