finished customer pages

layouts/Actionbar.vue

@@ -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');

layouts/Navigationbar.vue

@@ -77,7 +77,8 @@
           </Transition>
         </router-link>
         <router-link to="/customers" class="button"
-          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultCustomerPage()"
+          id="customers-button">
           <div class="icon" id="customers-icon">
             <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="/icons/navbar-icons/Customers-Icon.svg" />
@@ -143,6 +144,11 @@ const defaultEmployeesPage = () => {
   store.commit('changeToEmployeelist')
 }
 
+const defaultCustomerPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToCustomerlist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };