finished customer pages
This commit is contained in:
@ -153,7 +153,6 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const modeChanged = computed(() => store.state.updateDarkMode);
|
||||
|
||||
const editable = computed(() => store.state.editable);
|
||||
@ -395,7 +394,6 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.asset-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
|
||||
@ -59,7 +59,6 @@ import { computed } from 'vue';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
|
||||
const modeChanged = computed(() => store.state.updateDarkMode);
|
||||
|
||||
const goToChosenAsset = (id) => {
|
||||
|
||||
@ -1,65 +1,628 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Customer name</pre>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div>
|
||||
<h2 v-if="!editable" :class="['customer-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ cust.customername }}
|
||||
</h2>
|
||||
<input v-if="editable" v-model="cust.customername" @change="updateCustomer()"
|
||||
:class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
</div>
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.customerID }}</pre>
|
||||
</div>
|
||||
<div class="customer-data">
|
||||
<div class="contact">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contacts:</pre>
|
||||
<div class="data-field" id="contact-person">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.contactperson }}</pre>
|
||||
<input v-if="editable" v-model="cust.contactperson" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="first-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. E-Mail:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.EMail }}</pre>
|
||||
<input v-if="editable" v-model="cust.EMail" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="first-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Phone number:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.phonenumber }}</pre>
|
||||
<input v-if="editable" v-model="cust.phonenumber" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
|
||||
<div class="data-field" id="second-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. E-Mail:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondEMail }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondEMail" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="second-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Phone number:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondPhonenumber }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondPhonenumber" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
|
||||
<div class="data-field" id="third-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. E-Mail:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdEMail }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdEMail" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="third-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Phone number:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdPhonenumber }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdPhonenumber" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Addresses:</pre>
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Street:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.street }}</pre>
|
||||
<input v-if="editable" v-model="cust.street" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. No.:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.no }}</pre>
|
||||
<input v-if="editable" v-model="cust.no" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Postcode:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.postcode }}</pre>
|
||||
<input v-if="editable" v-model="cust.postcode" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. City:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.city }}</pre>
|
||||
<input v-if="editable" v-model="cust.city" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Street:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondStreet }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondStreet" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. No.:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondNo }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondNo" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Postcode:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondPostcode }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondPostcode" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. City:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondCity }}</pre>
|
||||
<input v-if="editable" v-model="cust.secondCity" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Street:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdStreet }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdStreet" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. No.:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdNo }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdNo" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Postcode:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdPostcode }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdPostcode" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. City:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdCity }}</pre>
|
||||
<input v-if="editable" v-model="cust.thirdCity" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
|
||||
<input v-model="cust.notes" :readonly="!editable" @change="updateCustomer()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div>
|
||||
<input v-model="newCustomername"
|
||||
:class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
</div>
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="customer-data">
|
||||
<div class="contact">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contacts:</pre>
|
||||
<div class="data-field" id="contact-person">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newContactperson" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<div class="data-field" id="first-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. E-Mail:</pre>
|
||||
<input v-model="newEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<div class="data-field" id="first-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Phone number:</pre>
|
||||
<input v-model="newPhonenumber" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
|
||||
<div class="data-field" id="second-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. E-Mail:</pre>
|
||||
<input v-model="newSecondEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="second-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Phone number:</pre>
|
||||
<input v-model="newSecondPhonenumber"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
|
||||
<div class="data-field" id="third-e-mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. E-Mail:</pre>
|
||||
<input v-model="newThirdEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="third-phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Phone number:</pre>
|
||||
<input v-model="newThirdPhonenumber"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Addresses:</pre>
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Street:</pre>
|
||||
<input v-model="newStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. No.:</pre>
|
||||
<input v-model="newNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Postcode:</pre>
|
||||
<input v-model="newPostcode" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. City:</pre>
|
||||
<input v-model="newCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Street:</pre>
|
||||
<input v-model="newSecondStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. No.:</pre>
|
||||
<input v-model="newSecondNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Postcode:</pre>
|
||||
<input v-model="newSecondPostcode"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. City:</pre>
|
||||
<input v-model="newSecondCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Street:</pre>
|
||||
<input v-model="newThirdStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. No.:</pre>
|
||||
<input v-model="newThirdNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcode-city">
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Postcode:</pre>
|
||||
<input v-model="newThirdPostcode" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. City:</pre>
|
||||
<input v-model="newThirdCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
<input v-model="newNotes" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addCustomer()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const modeChanged = computed(() => store.state.updateDarkMode);
|
||||
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref('')
|
||||
const cust = ref({});
|
||||
const customers = ref([]);
|
||||
|
||||
const newCustomername = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newContactperson = ref('');
|
||||
const newEMail = ref('');
|
||||
const newSecondEMail = ref('');
|
||||
const newThirdEMail = ref('');
|
||||
const newPhonenumber = ref('');
|
||||
const newSecondPhonenumber = ref('');
|
||||
const newThirdPhonenumber = ref('');
|
||||
const newStreet = ref('');
|
||||
const newNo = ref('');
|
||||
const newPostcode = ref('');
|
||||
const newCity = ref('');
|
||||
const newSecondStreet = ref('');
|
||||
const newSecondNo = ref('');
|
||||
const newSecondPostcode = ref('');
|
||||
const newSecondCity = ref('');
|
||||
const newThirdStreet = ref('');
|
||||
const newThirdNo = ref('');
|
||||
const newThirdPostcode = ref('');
|
||||
const newThirdCity = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
// get customer from id
|
||||
const getCustomerById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
|
||||
);
|
||||
cust.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateCustomer = async () => {
|
||||
if (cust.value.customername.trim() === "") {
|
||||
alert("Please add a customer name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if customer name already exists
|
||||
customers.value.forEach(c => {
|
||||
if (c.customername === cust.value.customername) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This customer name already exists. Please choose an unique customer name or modify respectively delete the old one!");
|
||||
cust.value.customername = '';
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(cust.value.EMail)) {
|
||||
alert("Please add a valid first email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(cust.value.phonenumber)) {
|
||||
alert("Please add a valid first phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(cust.value.secondEMail)) {
|
||||
alert("Please add a valid second email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(cust.value.secondPhonenumber)) {
|
||||
alert("Please add a valid second phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(cust.value.thirdEMail)) {
|
||||
alert("Please add a valid third email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(cust.value.thirdPhonenumber)) {
|
||||
alert("Please add a valid third phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(cust.value.postcode)) {
|
||||
alert("Please add a valid first postcode!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(cust.value.secondPostcode)) {
|
||||
alert("Please add a valid second postcode!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(cust.value.thirdPostcode)) {
|
||||
alert("Please add a valid third postcode!");
|
||||
return;
|
||||
}
|
||||
if (cust.value.contactperson.trim() === "") {
|
||||
alert("Please add a contactperson!");
|
||||
return;
|
||||
}
|
||||
if (cust.value.street.trim() === "") {
|
||||
alert("Please add a first street!");
|
||||
return;
|
||||
}
|
||||
if (cust.value.no.trim() === "") {
|
||||
alert("Please add a first number!");
|
||||
return;
|
||||
}
|
||||
if (cust.value.city.trim() === "") {
|
||||
alert("Please add a first city!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateCustomer`,
|
||||
{
|
||||
customerID: cust.value.customerID,
|
||||
customername: cust.value.customername,
|
||||
contactperson: cust.value.contactperson,
|
||||
EMail: cust.value.EMail,
|
||||
secondEMail: cust.value.secondEMail,
|
||||
thirdEMail: cust.value.thirdEMail,
|
||||
phonenumber: cust.value.phonenumber,
|
||||
secondPhonenumber: cust.value.secondPhonenumber,
|
||||
thirdPhonenumber: cust.value.thirdPhonenumber,
|
||||
street: cust.value.street,
|
||||
no: cust.value.no,
|
||||
postcode: cust.value.postcode,
|
||||
city: cust.value.city,
|
||||
secondStreet: cust.value.secondStreet,
|
||||
secondNo: cust.value.secondNo,
|
||||
secondPostcode: cust.value.secondPostcode,
|
||||
secondCity: cust.value.secondCity,
|
||||
thirdStreet: cust.value.thirdStreet,
|
||||
thirdNo: cust.value.thirdNo,
|
||||
thirdPostcode: cust.value.thirdPostcode,
|
||||
thirdCity: cust.value.thirdCity,
|
||||
notes: cust.value.notes,
|
||||
}
|
||||
)
|
||||
await getCustomerById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add new customer
|
||||
const addCustomer = async () => {
|
||||
// check if all input data is valid
|
||||
if (newCustomername.value.trim() === "") {
|
||||
alert("Please add a customer name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if customer name already exists
|
||||
customers.value.forEach(c => {
|
||||
if (c.customername === newCustomername.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This customer name already exists. Please choose an unique customer name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!validateEMail(newEMail.value)) {
|
||||
alert("Please add a valid first email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(newPhonenumber.value)) {
|
||||
alert("Please add a valid first phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(newSecondEMail.value)) {
|
||||
alert("Please add a valid second email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(newSecondPhonenumber.value)) {
|
||||
alert("Please add a valid second phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(newThirdEMail.value)) {
|
||||
alert("Please add a valid third email!");
|
||||
return;
|
||||
}
|
||||
if (!validatePhonenumber(newThirdPhonenumber.value)) {
|
||||
alert("Please add a valid third phonenumber!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(newPostcode.value)) {
|
||||
alert("Please add a valid first postcode!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(newSecondPostcode.value)) {
|
||||
alert("Please add a valid second postcode!");
|
||||
return;
|
||||
}
|
||||
if (!validatePostcode(newThirdPostcode.value)) {
|
||||
alert("Please add a valid third postcode!");
|
||||
return;
|
||||
}
|
||||
if (newContactperson.value.trim() === "") {
|
||||
alert("Please add a contactperson!");
|
||||
return;
|
||||
}
|
||||
if (newStreet.value.trim() === "") {
|
||||
alert("Please add a first street!");
|
||||
return;
|
||||
}
|
||||
if (newNo.value.trim() === "") {
|
||||
alert("Please add a first number!");
|
||||
return;
|
||||
}
|
||||
if (newCity.value.trim() === "") {
|
||||
alert("Please add a first city!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addCustomer`,
|
||||
{
|
||||
customername: newCustomername.value,
|
||||
contactperson: newContactperson.value,
|
||||
EMail: newEMail.value,
|
||||
secondEMail: newSecondEMail.value,
|
||||
thirdEMail: newThirdEMail.value,
|
||||
phonenumber: newPhonenumber.value,
|
||||
secondPhonenumber: newSecondPhonenumber.value,
|
||||
thirdPhonenumber: newThirdPhonenumber.value,
|
||||
street: newStreet.value,
|
||||
no: newNo.value,
|
||||
postcode: newPostcode.value,
|
||||
city: newCity.value,
|
||||
secondStreet: newSecondStreet.value,
|
||||
secondNo: newSecondNo.value,
|
||||
secondPostcode: newSecondPostcode.value,
|
||||
secondCity: newSecondCity.value,
|
||||
thirdStreet: newThirdStreet.value,
|
||||
thirdNo: newThirdNo.value,
|
||||
thirdPostcode: newThirdPostcode.value,
|
||||
thirdCity: newThirdCity.value,
|
||||
notes: newNotes.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToCustomerlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`);
|
||||
customers.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteCustomer = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this customer? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteCustomer/${chosenCustomerId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToCustomerlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// to validate the email address
|
||||
const validateEMail = (email) => {
|
||||
const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
|
||||
if (email === "") {
|
||||
return true
|
||||
}
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
// to validate the phonenumber
|
||||
const validatePhonenumber = (number) => {
|
||||
const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
|
||||
const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
|
||||
if (number === "") {
|
||||
return true
|
||||
}
|
||||
if (mobilephonenumberRegex.test(number)) {
|
||||
return true
|
||||
} else if (landlineRegex.test(number)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// to validate the postcode
|
||||
const validatePostcode = (postcode) => {
|
||||
const postcodeRegex = new RegExp(/^\d{5}$/);
|
||||
if (postcode === "") {
|
||||
return true
|
||||
}
|
||||
return postcodeRegex.test(postcode);
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -78,10 +641,13 @@ function getItem(item) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteCustomer);
|
||||
watch(modeChanged, getSession)
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getCustomerById();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -93,14 +659,14 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
@ -111,39 +677,51 @@ section {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.05rem;
|
||||
.customer-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.title-darkmode {
|
||||
color: #ffffff;
|
||||
.customer-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.title-lightmode {
|
||||
color: #000000;
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
padding: 0.8rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.data-field#customer-id {
|
||||
padding: 0.625rem 1.875rem;
|
||||
}
|
||||
|
||||
.data-field#street-name {
|
||||
flex: 3;
|
||||
.data-field#street-no {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -151,6 +729,14 @@ section {
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
@ -163,6 +749,42 @@ pre {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -186,7 +808,6 @@ pre {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
.customer-data {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
@ -221,7 +842,8 @@ pre {
|
||||
}
|
||||
|
||||
|
||||
.street-address {
|
||||
.street-address,
|
||||
.postcode-city {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -242,4 +864,8 @@ pre {
|
||||
#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,58 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['department-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ dep.name
|
||||
}}</h2>
|
||||
<input v-if="editable" v-model="dep.name" @change="updateDepartment()"
|
||||
:class="['data', 'department-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="data-group">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.primaryID }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.customername }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="head">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.head }}</pre>
|
||||
<input v-if="editable" v-model="dep.head" @change="updateDepartment()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<input v-model="dep.notes" :readonly="!editable" @change="updateDepartment()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName"
|
||||
:class="['data', 'department-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="data-group">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenCustomerId }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="head">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newHead"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
<input v-model="newNotes"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addDepartment()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -28,11 +61,156 @@
|
||||
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 editable = computed(() => store.state.editable);
|
||||
const chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const chosenDepartmentId = computed(() => store.state.chosenDepartmentId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const darkMode = ref('')
|
||||
const dep = ref({});
|
||||
const departments = ref({});
|
||||
const customer = ref({});
|
||||
|
||||
const newName = ref('');
|
||||
const newHead = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
// get department from id
|
||||
const getDepartmentById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDepartment/${chosenDepartmentId.value}`
|
||||
);
|
||||
dep.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateDepartment = async () => {
|
||||
if (dep.value.name.trim() === "") {
|
||||
alert("Please add a department name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if department name already exists
|
||||
departments.value.forEach(d => {
|
||||
if (d.name === dep.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This department name already exists. Please choose an unique department name or modify respectively delete the old one!");
|
||||
dep.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateDepartment`,
|
||||
{
|
||||
primaryID: dep.value.primaryID,
|
||||
name: dep.value.name,
|
||||
head: dep.value.head,
|
||||
notes: dep.value.notes,
|
||||
}
|
||||
)
|
||||
await getDepartmentById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add new department
|
||||
const addDepartment = async () => {
|
||||
// check if all input data is valid
|
||||
if (newName.value.trim() === "") {
|
||||
alert("Please add an department name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if department name already exists
|
||||
departments.value.forEach(c => {
|
||||
if (c.name === newName.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This department name already exists. Please choose an unique department name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addDepartment`,
|
||||
{
|
||||
customerID: chosenCustomerId.value,
|
||||
customername: customer.value.customername,
|
||||
name: newName.value,
|
||||
head: newHead.value,
|
||||
notes: newNotes.value,
|
||||
});
|
||||
store.commit('resetStoreNotCustomer');
|
||||
store.commit('changeToDepartmentlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//get all departments
|
||||
const getDepartments = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`
|
||||
);
|
||||
departments.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteDepartment = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this department? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteDepartment/${chosenDepartmentId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStoreNotCustomer');
|
||||
store.commit('changeToDepartmentlist');
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -51,10 +229,14 @@ function getItem(item) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(modeChanged, getSession)
|
||||
watch(modeChanged, getSession);
|
||||
watch(deleteBool, confirmDeleteDepartment);
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getDepartmentById();
|
||||
triggerBackendCallsWithDelay(getCustomerById);
|
||||
triggerBackendCallsWithDelay(getDepartments);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -72,15 +254,15 @@ export default {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
@ -91,23 +273,44 @@ section {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
.department-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.title-darkmode {
|
||||
color: #ffffff;
|
||||
.department-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.title-lightmode {
|
||||
color: #000000;
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.data-group {
|
||||
display: flex;
|
||||
@ -180,6 +383,7 @@ section {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
@ -190,4 +394,40 @@ section {
|
||||
#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewItem {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -16,19 +16,30 @@
|
||||
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
|
||||
Pronouns</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr v-for="empl in employees" :key="empl.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenEmployee(empl.primaryID)">
|
||||
{{ empl.primaryID }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenEmployee(empl.primaryID)">
|
||||
{{ empl.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
|
||||
...</td>
|
||||
{{ empl.jobTitle }}</td>
|
||||
<td
|
||||
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
|
||||
...</td>
|
||||
{{ empl.pronouns }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
@ -39,12 +50,35 @@
|
||||
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 chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const chosenDepartmentId = computed(() => store.state.chosenDepartmentId);
|
||||
const employeesByCustomer = ref([]);
|
||||
const employees = ref([]);
|
||||
|
||||
const darkMode = ref('')
|
||||
|
||||
const goToChosenEmployee = (id) => {
|
||||
store.commit('setChosenCustomerEmployee', id);
|
||||
store.commit('changeToCustomerEmployee');
|
||||
};
|
||||
|
||||
//get employees by the selected customer
|
||||
const getEmployees = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerId.value}`);
|
||||
employeesByCustomer.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
// filter those with the chosen department id
|
||||
employees.value = employeesByCustomer.value.filter(empl => empl.departmentID === chosenDepartmentId.value);
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
if (loggedInUserDarkModeBool == 1) {
|
||||
@ -65,7 +99,8 @@ function getItem(item) {
|
||||
watch(modeChanged, getSession)
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getEmployees();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -96,7 +131,17 @@ export default {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nuxt-link-darkmode {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nuxt-link-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 1.25rem 0;
|
||||
|
||||
@ -1,31 +1,87 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['department-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
|
||||
<input v-model="nameSearchFilter" @change="filterDepartmentsByName()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
|
||||
<table class="data-table" id="customer-employee-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
|
||||
<th
|
||||
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
ID</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
<th
|
||||
:class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">
|
||||
Head</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
|
||||
<tr v-for="dep in departments" :key="dep.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenDepartment(dep.primaryID)">
|
||||
{{ dep.primaryID }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenDepartment(dep.primaryID)">
|
||||
{{ dep.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">
|
||||
{{ dep.head }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
const nameSearchFilter = ref('');
|
||||
const departments = ref([]);
|
||||
|
||||
const darkMode = ref('')
|
||||
const darkMode = ref('');
|
||||
const departmentByName = ref([]);
|
||||
|
||||
const goToChosenDepartment = (id) => {
|
||||
store.commit('setChosenCustomerDepartment', id);
|
||||
store.commit('changeToDepartment');
|
||||
};
|
||||
|
||||
//get department by the selected customer
|
||||
const getDepartments = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`);
|
||||
departments.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
nameSearchFilter.value = '';
|
||||
await getDepartments();
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -36,6 +92,27 @@ const getSession = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
//get all departments based on the searched name
|
||||
const filterDepartmentsByName = async () => {
|
||||
if (nameSearchFilter.value === '') {
|
||||
await getDepartments();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByName/${nameSearchFilter.value}`);
|
||||
departmentByName.value = response.data;
|
||||
departments.value = filterObjectsWithMatchingIds(departments.value, departmentByName.value);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filterObjectsWithMatchingIds = (arr1, arr2) => {
|
||||
return arr1.filter(obj1 => {
|
||||
return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
|
||||
});
|
||||
};
|
||||
|
||||
function getItem(item) {
|
||||
if (process.client) {
|
||||
return localStorage.getItem(item)
|
||||
@ -44,20 +121,22 @@ function getItem(item) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(searchable, updateSearchTerm);
|
||||
watch(modeChanged, getSession)
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getDepartments();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CustomerDepartmentList",
|
||||
name: "CustomerDepartmentList",
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
@ -69,10 +148,75 @@ export default {
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.section-darkmode { background-color: #2c2c2c; }
|
||||
.section-lightmode { background-color: #ffffff; }
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.department-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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nuxt-link-darkmode {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nuxt-link-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.instanceLabel {
|
||||
width: 5.5625em;
|
||||
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 {
|
||||
padding: 1.25rem 0;
|
||||
@ -80,8 +224,14 @@ export default {
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
.label-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -106,14 +256,22 @@ export default {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
.tr-darkmode { border-top: 0.0625rem solid #000000; }
|
||||
.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
|
||||
|
||||
th, td {
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
width: 40%;
|
||||
padding: 0;
|
||||
@ -122,19 +280,28 @@ th, td {
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
|
||||
.th-darkmode, .td-darkmode {
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
.th-lightmode, .td-lightmode {
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000000;
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.ID { width: 20%; }
|
||||
|
||||
.DHead { border-right: none; }
|
||||
|
||||
.ID {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.DHead {
|
||||
border-right: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,113 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['customer-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ empl.name }}
|
||||
</h2>
|
||||
<input v-if="editable" v-model="empl.name" @change="updateEmployee()"
|
||||
:class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="data-group" id="personal-data">
|
||||
<div class="data-group" id="full-name">
|
||||
<div class="data-field" id="ntitle">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.title }}</pre>
|
||||
<input v-if="editable" v-model="empl.title" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="first-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.firstName }}</pre>
|
||||
<input v-if="editable" v-model="empl.firstName" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="last-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.lastName }}</pre>
|
||||
<input v-if="editable" v-model="empl.lastName" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="other">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.primaryID }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="pronouns">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.pronouns }}</pre>
|
||||
<input v-if="editable" v-model="empl.pronouns" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="preferred-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.preferredName }}</pre>
|
||||
<input v-if="editable" v-model="empl.preferredName" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="employment-data">
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.customerID }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="department">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.department }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="empl.department" @change="updateDepartmentID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="depart in departments" :key="depart.primaryID">
|
||||
{{ depart.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="job-title">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.jobTitle }}</pre>
|
||||
<input v-if="editable" v-model="empl.jobTitle" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="contact-data">
|
||||
<div class="data-field" id="phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.phonenumber }}</pre>
|
||||
<input v-if="editable" v-model="empl.phonenumber" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.eMail }}</pre>
|
||||
<input v-if="editable" v-model="empl.eMail" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<input v-model="empl.notes" :readonly="!editable" @change="updateEmployee()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName"
|
||||
:class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="data-group" id="personal-data">
|
||||
<div class="data-group" id="full-name">
|
||||
<div class="data-field" id="ntitle">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
|
||||
<input v-model="newTitle" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="first-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
|
||||
<input v-model="newFirstName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="last-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
|
||||
<input v-model="newLastName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="other">
|
||||
@ -23,56 +117,302 @@
|
||||
</div>
|
||||
<div class="data-field" id="pronouns">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newPronouns" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="preferred-name">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newPreferedName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="employment-data">
|
||||
<div class="data-field" id="customer-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenCustomerId }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="department">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newDepartment" @change="updateNewDepartmentID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="depart in departments" :key="depart.primaryID">
|
||||
{{ depart.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="job-title">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newJobTitle" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-group" id="contact-data">
|
||||
<div class="data-field" id="phone">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newPhonenumber" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="mail">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
<input v-model="newNotes" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addEmployee()">Save</button>
|
||||
</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 editable = computed(() => store.state.editable);
|
||||
const chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const chosenCustomerEmployeeId = computed(() => store.state.chosenCustomerEmployeeId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref('')
|
||||
const empl = ref({});
|
||||
const department = ref({});
|
||||
const customer = ref({});
|
||||
const employees = ref([]);
|
||||
const departments = ref([]);
|
||||
|
||||
const newName = ref('');
|
||||
const newPronouns = ref('');
|
||||
const newTitle = ref('');
|
||||
const newFirstName = ref('');
|
||||
const newLastName = ref('');
|
||||
const newPreferedName = ref('');
|
||||
const newDepartment = ref('');
|
||||
const newDepartmentID = ref('');
|
||||
const newJobTitle = ref('');
|
||||
const newPhonenumber = ref('');
|
||||
const newEMail = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
// get employee from id
|
||||
const getEmployeeById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustEmployee/${chosenCustomerEmployeeId.value}`
|
||||
);
|
||||
empl.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateEmployee = async () => {
|
||||
if (empl.value.name.trim() === "") {
|
||||
alert("Please add an employee name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if employee name already exists
|
||||
employees.value.forEach(e => {
|
||||
if (e.name === empl.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This employee name already exists. Please choose an unique employee name or modify respectively delete the old one!");
|
||||
empl.value.name = '';
|
||||
return;
|
||||
}
|
||||
if (empl.value.department.trim() === "") {
|
||||
alert("Please choose an department!");
|
||||
return;
|
||||
}
|
||||
if (!validateEMail(empl.value.eMail)) {
|
||||
alert("Please add a valid email!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateCustEmployee`,
|
||||
{
|
||||
primaryID: empl.value.primaryID,
|
||||
name: empl.value.name,
|
||||
pronouns: empl.value.pronouns,
|
||||
title: empl.value.title,
|
||||
firstName: empl.value.firstName,
|
||||
lastName: empl.value.lastName,
|
||||
preferredName: empl.value.preferredName,
|
||||
department: empl.value.department,
|
||||
departmentID: empl.value.departmentID,
|
||||
jobTitle: empl.value.jobTitle,
|
||||
phonenumber: empl.value.phonenumber,
|
||||
eMail: empl.value.eMail,
|
||||
notes: empl.value.notes,
|
||||
}
|
||||
)
|
||||
await getEmployeeById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add new employee
|
||||
const addEmployee = async () => {
|
||||
// check if all input data is valid
|
||||
if (newName.value.trim() === "") {
|
||||
alert("Please add an employee name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if employee name already exists
|
||||
employees.value.forEach(c => {
|
||||
if (c.name === newName.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This employee name already exists. Please choose an unique employee name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!validateEMail(newEMail.value)) {
|
||||
alert("Please add a valid email!");
|
||||
return;
|
||||
}
|
||||
if (newDepartment.value.trim() === "") {
|
||||
alert("Please choose a department!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addCustEmployee`,
|
||||
{
|
||||
customerID: chosenCustomerId.value,
|
||||
customername: customer.value.customername,
|
||||
name: newName.value,
|
||||
pronouns: newPronouns.value,
|
||||
title: newTitle.value,
|
||||
firstName: newFirstName.value,
|
||||
lastName: newLastName.value,
|
||||
preferredName: newPreferedName.value,
|
||||
department: newDepartment.value,
|
||||
departmentID: newDepartmentID.value,
|
||||
jobTitle: newJobTitle.value,
|
||||
phonenumber: newPhonenumber.value,
|
||||
eMail: newEMail.value,
|
||||
notes: newNotes.value,
|
||||
});
|
||||
store.commit('resetStoreNotCustomer');
|
||||
store.commit('changeToCustomerEmployeelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// to validate the email address
|
||||
const validateEMail = (email) => {
|
||||
const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
|
||||
if (email === "") {
|
||||
return true
|
||||
}
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
//get all employees
|
||||
const getEmployees = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerEmployeeId.value}`
|
||||
);
|
||||
employees.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteEmployee = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this employee? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteCustEmployee/${chosenCustomerEmployeeId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStoreNotCustomer');
|
||||
store.commit('changeToCustomerEmployeelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all departments
|
||||
const getDepartments = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`);
|
||||
departments.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// update departmentid if department was changed
|
||||
const updateDepartmentID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDprtmntByName/${empl.value.department}`);
|
||||
department.value = response.data;
|
||||
empl.value.departmentID = department.value.primaryID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updateEmployee();
|
||||
}
|
||||
|
||||
// update departmentid if department was changed
|
||||
const updateNewDepartmentID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDprtmntByName/${newDepartment.value}`);
|
||||
newDepartmentID.value = response.data.primaryID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithSmallDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -92,9 +432,14 @@ function getItem(item) {
|
||||
}
|
||||
|
||||
watch(modeChanged, getSession)
|
||||
watch(deleteBool, confirmDeleteEmployee);
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getEmployeeById();
|
||||
triggerBackendCallsWithSmallDelay(getDepartments);
|
||||
triggerBackendCallsWithDelay(getCustomerById);
|
||||
triggerBackendCallsWithDelay(getEmployees);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -112,15 +457,15 @@ export default {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
@ -131,23 +476,97 @@ section {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0;
|
||||
letter-spacing: 0.04rem;
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/1.875rem Overpass, sans-serif;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.title-darkmode {
|
||||
color: #ffffff;
|
||||
.saveNewItem-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.title-lightmode {
|
||||
color: #000000;
|
||||
.saveNewItem-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.customer-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.data-group {
|
||||
display: flex;
|
||||
@ -241,6 +660,7 @@ section {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
|
||||
<input v-model="nameSearchFilter" @change="filterEmployeesByName()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<section v-if="filtered" :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Department</div>
|
||||
<input v-model="departmentSearchFilter" @change="filterEmployeesByDepartment()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
|
||||
<table class="data-table" id="customer-employee-table">
|
||||
@ -16,19 +26,35 @@
|
||||
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
|
||||
Pronouns</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr v-for="empl in employees" :key="empl.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenEmployee(empl.primaryID)">
|
||||
{{ empl.primaryID }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenEmployee(empl.primaryID)">
|
||||
{{ empl.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenDepartment(empl.departmentID)">
|
||||
{{ empl.department }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
|
||||
...</td>
|
||||
{{ empl.pronouns }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
@ -39,11 +65,90 @@
|
||||
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 chosenCustomerId = computed(() => store.state.chosenCustomerId);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
const filtered = computed(() => store.state.filtered);
|
||||
const departmentSearchFilter = ref('');
|
||||
const nameSearchFilter = ref('');
|
||||
const employees = ref([]);
|
||||
|
||||
const darkMode = ref('')
|
||||
const employeeByDepartment = ref([]);
|
||||
const employeeByName = ref([]);
|
||||
|
||||
const goToChosenEmployee = (id) => {
|
||||
store.commit('setChosenCustomerEmployee', id);
|
||||
store.commit('changeToCustomerEmployee');
|
||||
};
|
||||
|
||||
const goToChosenDepartment = (id) => {
|
||||
store.commit('setChosenCustomerDepartment', id);
|
||||
store.commit('changeToDepartment');
|
||||
};
|
||||
|
||||
//get employees by the selected customer
|
||||
const getEmployees = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerId.value}`);
|
||||
employees.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
nameSearchFilter.value = '';
|
||||
await getEmployees();
|
||||
}
|
||||
|
||||
// update filter term
|
||||
const updateFilterTerm = async () => {
|
||||
departmentSearchFilter.value = '';
|
||||
await getEmployees();
|
||||
}
|
||||
|
||||
//get all employees based on the searched name
|
||||
const filterEmployeesByName = async () => {
|
||||
if (nameSearchFilter.value === '') {
|
||||
await getEmployees();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByName/${nameSearchFilter.value}`);
|
||||
employeeByName.value = response.data;
|
||||
employees.value = filterObjectsWithMatchingIds(employees.value, employeeByName.value);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all employees based on the searched department
|
||||
const filterEmployeesByDepartment = async () => {
|
||||
if (departmentSearchFilter.value === '') {
|
||||
await getEmployees();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByDprtmntName/${departmentSearchFilter.value}`);
|
||||
employeeByDepartment.value = response.data;
|
||||
employees.value = filterObjectsWithMatchingIds(employees.value, employeeByDepartment.value);
|
||||
} catch (err) {
|
||||
// console.log(err.response.statusText);
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filterObjectsWithMatchingIds = (arr1, arr2) => {
|
||||
return arr1.filter(obj1 => {
|
||||
return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
|
||||
});
|
||||
};
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -63,9 +168,12 @@ function getItem(item) {
|
||||
}
|
||||
|
||||
watch(modeChanged, getSession)
|
||||
watch(searchable, updateSearchTerm);
|
||||
watch(filtered, updateFilterTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getEmployees();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -113,7 +221,66 @@ export default {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.employee-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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nuxt-link-darkmode {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nuxt-link-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.instanceLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
<template>
|
||||
<section v-if="customerSearchable"
|
||||
:class="['customer-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['customerLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
|
||||
<input v-model="customerSearchFilter" @change="searchCustomer()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<table class="data-table" id="customer-table">
|
||||
<tbody>
|
||||
@ -11,13 +17,24 @@
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr v-for="cust in customerList" :key="cust.customerID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenCustomer(cust.customerID)">
|
||||
{{ cust.customerID }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
<nuxt-link to="/customers" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
|
||||
@click="goToChosenCustomer(cust.customerID)">
|
||||
{{ cust.customername }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -27,13 +44,53 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const modeChanged = computed(() => store.state.updateDarkMode);
|
||||
|
||||
const goToChosenCustomer = (id) => {
|
||||
store.commit('setChosenCustomer', id);
|
||||
store.commit('changeToCustomer');
|
||||
};
|
||||
|
||||
const darkMode = ref('')
|
||||
const customerSearchable = computed(() => store.state.searchable);
|
||||
const customerSearchFilter = ref('');
|
||||
const customerList = ref([]);
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
customerSearchFilter.value = '';
|
||||
await getCustomers();
|
||||
}
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`);
|
||||
customerList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all customers based on the searched customers name
|
||||
const searchCustomer = async () => {
|
||||
if (customerSearchFilter.value === '') {
|
||||
await getCustomers();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustomersByName/${customerSearchFilter.value}`);
|
||||
customerList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
@ -53,9 +110,11 @@ function getItem(item) {
|
||||
}
|
||||
|
||||
watch(modeChanged, getSession)
|
||||
watch(customerSearchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getSession();
|
||||
getSession();
|
||||
await getCustomers();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -88,6 +147,74 @@ export default {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.customerLabel {
|
||||
width: 5.5625em;
|
||||
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;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nuxt-link-darkmode {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nuxt-link-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
|
||||
@ -176,7 +176,7 @@ const goToChosenAsset = async (name) => {
|
||||
store.commit('changeToAsset');
|
||||
};
|
||||
|
||||
//get all instances based on the searched state
|
||||
//get all instances based on the searched name
|
||||
const filterPOIByName = async () => {
|
||||
if (nameSearchFilter.value === '') {
|
||||
await getProductionOrderInstances();
|
||||
|
||||
Reference in New Issue
Block a user