finished customer pages

This commit is contained in:
2024-04-07 14:14:02 +02:00
parent d0b867404e
commit a02cbbb187
49 changed files with 4392 additions and 279 deletions

View File

@ -51,8 +51,8 @@
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
</Transition>
</button>
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="attachments">
<button v-if="attachmentsIcon && false"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<div class="icon" id="attachments-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Attachments-Icon.svg" />
@ -62,7 +62,8 @@
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
</Transition>
</button>
<button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
<button v-if="sellIcon && false" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="sell">
<div class="icon" id="sell-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Sell-Icon.svg" />
@ -72,8 +73,8 @@
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
</Transition>
</button>
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="archive">
<button v-if="archiveIcon && false"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
<div class="icon" id="archive-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Archive-Icon.svg" />
@ -106,6 +107,30 @@
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
</Transition>
</button>
<button v-if="addEmployeeIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-employee"
@click="addEmployee">
<div class="icon" id="new-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
</Transition>
</button>
<button v-if="addDepartmentIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-department"
@click="addDepartment">
<div class="icon" id="new-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
</Transition>
</button>
<router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
@ -120,8 +145,9 @@
</Transition>
</button>
</router-link>
<button v-if="notAllInstancesIcon && !addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="allInstances" @click="changeToAllInstances">
<button v-if="notAllInstancesIcon && !addIcon"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="allInstances"
@click="changeToAllInstances">
<div class="icon" id="instances-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Instances-Icon.svg" />
@ -131,6 +157,30 @@
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">See all</pre>
</Transition>
</button>
<button v-if="departmentsIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="departments"
@click="changeToDepartments">
<div class="icon" id="departments-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Departments-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Departments</pre>
</Transition>
</button>
<button v-if="employeesIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="employees"
@click="changeToEmployees">
<div class="icon" id="employees-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Employees-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
</Transition>
</button>
<button v-if="editIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
@click="toggleEditable">
@ -177,6 +227,8 @@ import { computed } from 'vue';
const changeToSet = computed(() => store.state.changeToSet);
const addIcon = computed(() => store.state.addIcon);
const addInstanceIcon = computed(() => store.state.addInstanceIcon);
const addEmployeeIcon = computed(() => store.state.addEmployeeIcon);
const addDepartmentIcon = computed(() => store.state.addDepartmentIcon);
const addSolutionIcon = computed(() => store.state.addSolutionIcon);
const solutionIcon = computed(() => store.state.solutionIcon);
const filterIcon = computed(() => store.state.filterIcon);
@ -186,6 +238,8 @@ const attachmentsIcon = computed(() => store.state.attachmentsIcon);
const sellIcon = computed(() => store.state.sellIcon);
const archiveIcon = computed(() => store.state.archiveIcon);
const editIcon = computed(() => store.state.editIcon);
const departmentsIcon = computed(() => store.state.departmentsIcon);
const employeesIcon = computed(() => store.state.employeesIcon);
const editUserIcon = computed(() => store.state.editUserIcon);
const deleteIcon = computed(() => store.state.deleteIcon);
const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
@ -230,9 +284,25 @@ const addInstance = () => {
store.commit('addInstance');
};
const addDepartment = () => {
store.commit('addDepartment');
};
const addEmployee = () => {
store.commit('addEmployee');
};
const changeToSolutions = () => {
store.commit('changeToSolutionlistAsset');
}
};
const changeToDepartments = () => {
store.commit('changeToDepartmentlist');
};
const changeToEmployees = () => {
store.commit('changeToCustomerEmployeelist');
};
const changeToInstancelist = () => {
store.commit('deactivateSearch');