251 lines
8.0 KiB
Vue
251 lines
8.0 KiB
Vue
<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) {
|
|
|
|
this.employee = response.data;
|
|
this.loaded = true;
|
|
|
|
}
|
|
})
|
|
},
|
|
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style> |