first commit
This commit is contained in:
46
src/layouts/footers/footer.vue
Normal file
46
src/layouts/footers/footer.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
|
||||
<template>
|
||||
<footer class="footer p-10 bg-neutral text-neutral-content mt-20">
|
||||
<nav>
|
||||
<h6 class="footer-title">Services</h6>
|
||||
<a class="link link-hover">Branding</a>
|
||||
<a class="link link-hover">Design</a>
|
||||
<a class="link link-hover">Marketing</a>
|
||||
<a class="link link-hover">Advertisement</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Company</h6>
|
||||
<a class="link link-hover">About us</a>
|
||||
<a class="link link-hover">Contact</a>
|
||||
<a class="link link-hover">Jobs</a>
|
||||
<a class="link link-hover">Press kit</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Legal</h6>
|
||||
<a class="link link-hover">Terms of use</a>
|
||||
<a class="link link-hover">Privacy policy</a>
|
||||
<a class="link link-hover">Cookie policy</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Footer',
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {},
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
33
src/layouts/headers/SearchResults.vue
Normal file
33
src/layouts/headers/SearchResults.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<section>
|
||||
|
||||
<div v-for="user in customers" :key="user.id">
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: user['id'] } }">
|
||||
<div class="grid grid-cols-12 bg-neutral pb-5 hover:bg-accent">
|
||||
<div class="col-span-12"> {{ user['customer_first_name'] }} {{ user['customer_last_name'] }}</div>
|
||||
<div class="col-span-12">
|
||||
{{ user['customer_address'] }} {{ user['customer_town'] }} {{user.state}}
|
||||
</div>
|
||||
<div class="col-span-12"> {{user['customer_phone_number']}}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "SearchResults",
|
||||
props: ["customers"],
|
||||
|
||||
});
|
||||
</script>
|
||||
191
src/layouts/headers/headerauth.vue
Normal file
191
src/layouts/headers/headerauth.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="basis-1/4 md:basis-1/4">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Auburn Oil
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="basis-1/4 md:basis-1/2 justify-center text-center">
|
||||
<input type="text" placeholder="Search " class="input input-bordered w-24 md:w-auto grow" v-model="searchTerm"/>
|
||||
</div>
|
||||
|
||||
<div class="basis-1/2 md:basis-1/4 justify-end gap-5">
|
||||
<router-link :to="{ name: 'customerCreate' }">
|
||||
<button class="btn">Create Customer</button>
|
||||
</router-link>
|
||||
|
||||
<div v-if="employee.id">
|
||||
<router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
|
||||
<button class="btn">{{ user.user_name }}</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-12 ">
|
||||
<div class="grow col-start-4 col-span-6 ">
|
||||
<SearchResults v-if="customers.length" :customers="customers"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import {debounce} from "vue-debounce";
|
||||
import {defineComponent} from "vue";
|
||||
import axios from "axios";
|
||||
import authHeader from "../../services/auth.header";
|
||||
import SearchResults from "./SearchResults.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "HeaderAuth",
|
||||
components: {
|
||||
SearchResults,
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
this.userStatus();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
user_id: 0,
|
||||
user_name: '',
|
||||
},
|
||||
employee: {
|
||||
id: '',
|
||||
user_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: '',
|
||||
},
|
||||
loaded: false,
|
||||
searchTerm: '',
|
||||
customers: [],
|
||||
type_of_search: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
searchTerm() {
|
||||
this.performSearch();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
performSearch: debounce(async function () {
|
||||
console.log(this.searchTerm)
|
||||
if (this.searchTerm === "") {
|
||||
this.customers = [];
|
||||
return;
|
||||
}
|
||||
if (this.searchTerm.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.searchTerm.startsWith("@")) {
|
||||
this.type_of_search = 0
|
||||
} else if (this.searchTerm.startsWith("!")) {
|
||||
this.type_of_search = 1
|
||||
} else if (this.searchTerm.startsWith("#")) {
|
||||
this.type_of_search = 2
|
||||
} else {
|
||||
this.type_of_search = 2
|
||||
}
|
||||
|
||||
const searchUrl = this.getSearchUrl();
|
||||
const response = await (await fetch(searchUrl)).json();
|
||||
|
||||
this.customers = response;
|
||||
}, 600),
|
||||
getSearchUrl() {
|
||||
if (this.type_of_search == 0) {
|
||||
const url = "http://127.0.0.1:4056/search/customer";
|
||||
const params = {
|
||||
q: this.searchTerm,
|
||||
};
|
||||
const searchParams = new URLSearchParams(params);
|
||||
return `${url}?${searchParams}`;
|
||||
}
|
||||
else if (this.type_of_search == 1) {
|
||||
const url = "http://127.0.0.1:4056/search/customer";
|
||||
const params = {
|
||||
q: this.searchTerm,
|
||||
};
|
||||
const searchParams = new URLSearchParams(params);
|
||||
return `${url}?${searchParams}`;
|
||||
}
|
||||
else if (this.type_of_search == 2) {
|
||||
const url = "http://127.0.0.1:4056/search/customer";
|
||||
const params = {
|
||||
q: this.searchTerm,
|
||||
};
|
||||
const searchParams = new URLSearchParams(params);
|
||||
return `${url}?${searchParams}`;
|
||||
}
|
||||
else {
|
||||
const url = "http://127.0.0.1:4056/search/customer";
|
||||
const params = {
|
||||
q: this.searchTerm,
|
||||
};
|
||||
const searchParams = new URLSearchParams(params);
|
||||
return `${url}?${searchParams}`;
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
this.employeeStatus()
|
||||
this.loaded = true;
|
||||
} else {
|
||||
localStorage.removeItem('user');
|
||||
this.$router.push('/login');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loaded = true;
|
||||
this.$router.push('/login');
|
||||
});
|
||||
},
|
||||
employeeStatus() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
|
||||
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.employee = response.data;
|
||||
this.loaded = true;
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
56
src/layouts/headers/headernoauth.vue
Normal file
56
src/layouts/headers/headernoauth.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="basis-1/4 md:basis-1/4">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Auburn Oil
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="basis-1/4 md:basis-1/2 justify-center text-center">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="basis-1/2 md:basis-1/4 justify-end gap-5">
|
||||
<router-link :to="{ name: 'login' }">
|
||||
<button class="btn">Login</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'register' }">
|
||||
<button class="btn">Register</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: "HeaderNoAuth",
|
||||
mounted () {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
user: null,
|
||||
loaded: false,
|
||||
clicked: false,
|
||||
hovered: false,
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
67
src/layouts/headers/search.vue
Normal file
67
src/layouts/headers/search.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="basis-1/4 md:basis-1/4">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Auburn Oil
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="basis-1/4 md:basis-1/2 justify-center text-center">
|
||||
<input type="search" placeholder="Search " class="input input-bordered w-24 md:w-auto" v-model="searchTerm"/>
|
||||
</div>
|
||||
<SearchResults v-if="customers.length" :customers="customers" />
|
||||
<div class="basis-1/2 md:basis-1/4 justify-end gap-5">
|
||||
<router-link :to="{ name: 'customerCreate' }">
|
||||
<button class="btn">Create Customer</button>
|
||||
</router-link>
|
||||
|
||||
<!-- <div v-if="employee.id">-->
|
||||
<!-- <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">-->
|
||||
<!-- <button class="btn">{{ user.user_name }}</button>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { debounce } from "vue-debounce";
|
||||
import SearchResults from "./SearchResults.vue";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const searchTerm = ref("");
|
||||
const customers = ref([]);
|
||||
|
||||
const getSearchUrl = () => {
|
||||
const url = "https://dummyjson.com/products/search";
|
||||
const params = {
|
||||
q: searchTerm.value,
|
||||
limit: "5",
|
||||
};
|
||||
const searchParams = new URLSearchParams(params);
|
||||
return `${url}?${searchParams}`;
|
||||
};
|
||||
|
||||
const performSearch = debounce(async () => {
|
||||
console.log("searching")
|
||||
if (searchTerm.value === "") {
|
||||
customers.value = [];
|
||||
return;
|
||||
}
|
||||
if (searchTerm.value.length < 2) {
|
||||
return;
|
||||
}
|
||||
const searchUrl = getSearchUrl();
|
||||
const response = await (await fetch(searchUrl)).json();
|
||||
|
||||
customers.value = response.products;
|
||||
}, 600);
|
||||
|
||||
watch(searchTerm, () => {
|
||||
performSearch();
|
||||
});
|
||||
</script>
|
||||
107
src/layouts/sidebar/sidebar.vue
Normal file
107
src/layouts/sidebar/sidebar.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
|
||||
<div class="drawer sm:drawer-open">
|
||||
<input id="my-drawer-2" type="checkbox" class="drawer-toggle"/>
|
||||
<div class="drawer-content flex flex-col items-center justify-center ">
|
||||
</div>
|
||||
|
||||
<div class="drawer-side">
|
||||
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
|
||||
<ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
|
||||
|
||||
<!-- Sidebar content here -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<div class=" hover:underline py-1 px-5 font-bold">Home</div>
|
||||
</router-link>
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Customer</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'customer' }">
|
||||
<div class=" hover:underline py-1">All Customers</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerCreate' }">
|
||||
<div class=" hover:underline py-1">Create Customer</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Delivery</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'delivery' }">
|
||||
<div class=" hover:underline py-1">Waiting Deliveries</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'delivery' }">
|
||||
<div class=" hover:underline py-1">Out for Delivery</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryTicketsMissing' }">
|
||||
<div class=" hover:underline py-1">Delivered Tickets</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryTicketsMissing' }">
|
||||
<div class=" hover:underline py-1">Finalized Tickets</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Service</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'service' }">
|
||||
<div class=" hover:underline py-1">Service</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'auto' }">
|
||||
<div class=" hover:underline py-1">Automatics</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Employees</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'employee' }">
|
||||
<div class=" hover:underline py-1">Employees</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="font-bold text-lg text-gray-500 pt-5">Admin</div>
|
||||
<li>
|
||||
<router-link :to="{ name: 'oilprice' }">
|
||||
<div class=" hover:underline py-1">Oil Pricing</div>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'serviceprice' }">
|
||||
<div class=" hover:underline py-1">Service Pricing</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "SideBar",
|
||||
mounted() {
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user