finished customer pages

2024-04-07 14:14:02 +02:00
parent d0b867404e
commit a02cbbb187
49 changed files with 4392 additions and 279 deletions
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@ -0,0 +1,127 @@
+<template>
+    <section :class="['fixed-customer-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer:</div>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ customer.customername }}</pre>
+    </section>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const customer = ref({});
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+// get customer from id
+const getCustomerById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
+        );
+        customer.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getCustomerById();
+});
+</script>
+
+<script>
+export default {
+    name: "ClientSearch",
+};
+</script>
+
+
+<style scoped>
+.fixed-customer-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    width: 4.188em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.pre-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+</style>