From 29fd2e0a153043c31d2cf09c8b58cf0df29c87e9 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Fri, 15 Mar 2024 20:05:01 +0100
Subject: [PATCH] added right actionbar icons and asset solution list

---
 components/server/AssetSolutionList.vue       | 127 +++++++++++++++++-
 components/server/AssetTableNoCustomer.vue    |   4 +-
 .../server/IssueSlipTableNoCustomer.vue       |   4 +-
 ...intenanceVisitsTemplateTableNoCustomer.vue |   4 +-
 ...roductionOrdersTemplateTableNoCustomer.vue |   4 +-
 components/server/SolutionTableNoCustomer.vue |   4 +-
 layouts/Actionbar.vue                         |  31 +++--
 pages/assets.vue                              |   8 +-
 pages/issueSlips.vue                          |   8 +-
 pages/maintenanceVisits.vue                   |   8 +-
 pages/productionOrders.vue                    |   8 +-
 pages/solutions.vue                           |   8 +-
 plugins/vuex.js                               |  23 ----
 server/api/getSelectedSolutionsByType/[id].ts |  23 ++++
 server/middleware/solutions.ts                |  35 ++++-
 15 files changed, 232 insertions(+), 67 deletions(-)
 create mode 100644 server/api/getSelectedSolutionsByType/[id].ts

diff --git a/components/server/AssetSolutionList.vue b/components/server/AssetSolutionList.vue
index f221264..6762a18 100644
--- a/components/server/AssetSolutionList.vue
+++ b/components/server/AssetSolutionList.vue
@@ -1,4 +1,14 @@
 <template>
+    <section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['solutionLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
+        <input v-model="solutionSearchFilter" @change="searchSolution()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['solutionLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Type</div>
+        <input v-model="typeSearchFilter" @change="filterSolutionByType()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-checkklist">
@@ -28,7 +38,7 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
@@ -36,9 +46,15 @@ import { computed } from 'vue';
 
 const store = useStore();
 const chosenAssetId = computed(() => store.state.chosenAssetId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const solutionSearchFilter = ref('');
+const typeSearchFilter = ref('');
 
 const asset = ref({});
-const solutions = ref({});
+const solutions = ref([]);
+const solutionsBySol = ref([]);
+const solutionsByType = ref([]);
 const darkMode = ref(true)
 
 //get all solutions from the chosen asset
@@ -51,6 +67,18 @@ const getSolutions = async () => {
     }
 }
 
+// update search term
+const updateSearchTerm = async () => {
+    solutionSearchFilter.value = '';
+    await getSolutions();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    typeSearchFilter.value = '';
+    await getSolutions();
+}
+
 const goToChosenSolution = (id) => {
     store.commit('setChosenSolution', id);
     store.commit('changeToSolution');
@@ -69,6 +97,45 @@ const getItemById = async () => {
     }
 }
 
+//get all solutions based on the searched solution name
+const searchSolution = async () => {
+    if (solutionSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
+            solutionsBySol.value = response.data;
+            solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsBySol.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all solutions based on the searched solution name
+const filterSolutionByType = async () => {
+        if (typeSearchFilter.value === '') {
+            await getSolutions();
+        } else {
+            try {
+                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
+                solutionsByType.value = response.data;
+                solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        }
+    }
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
+
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+
 onMounted(() => {
     getItemById();
 });
@@ -103,6 +170,62 @@ export default {
     background-color: #fff;
 }
 
+.solutionLabel {
+    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-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;
+}
+
+.input {
+    border: none;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.solution-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;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
diff --git a/components/server/AssetTableNoCustomer.vue b/components/server/AssetTableNoCustomer.vue
index 0124550..3d04857 100644
--- a/components/server/AssetTableNoCustomer.vue
+++ b/components/server/AssetTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-customer">
@@ -183,4 +183,4 @@ th {
 .label-lightmode {
     color: #000;
 }
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/components/server/IssueSlipTableNoCustomer.vue b/components/server/IssueSlipTableNoCustomer.vue
index 87a0501..b5f5c37 100644
--- a/components/server/IssueSlipTableNoCustomer.vue
+++ b/components/server/IssueSlipTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
         <table class="data-table" id="asset-table">
@@ -184,4 +184,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue b/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
index 1b9e07e..e88951c 100644
--- a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
+++ b/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="maintenance-visits-templat-table-no-customer">
@@ -184,4 +184,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplateTableNoCustomer.vue b/components/server/ProductionOrdersTemplateTableNoCustomer.vue
index dcbca8e..6b30e87 100644
--- a/components/server/ProductionOrdersTemplateTableNoCustomer.vue
+++ b/components/server/ProductionOrdersTemplateTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="production-orders-template-table-no-customer">
@@ -165,4 +165,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/SolutionTableNoCustomer.vue b/components/server/SolutionTableNoCustomer.vue
index d657eda..a1f83d9 100644
--- a/components/server/SolutionTableNoCustomer.vue
+++ b/components/server/SolutionTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
@@ -183,4 +183,4 @@ th {
 .label-lightmode {
     color: #000;
 }
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index e979c7d..9258f6d 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -17,7 +17,8 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
+      <button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"
+        @click="toggleFiltered">
         <div class="icon" id="filter-icon">
           <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Filter-Icon.svg" />
@@ -35,7 +36,8 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions" @click="changeToSolutions">
+      <button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions"
+        @click="changeToSolutions">
         <div class="icon" id="instances-icon">
           <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
@@ -89,15 +91,18 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
         </Transition>
       </button>
-      <button v-if="addSolutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution">
-        <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-            src="/icons/actionbar-icons/Add-New-Icon.svg" />
-        </div>
-        <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
-        </Transition>
-      </button>
+      <router-link v-if="addSolutionIcon" to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
+          @click="addSolution">
+          <div class="icon" id="new-icon">
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/actionbar-icons/Add-New-Icon.svg" />
+          </div>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
+          </Transition>
+        </button>
+      </router-link>
       <button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
         <div class="icon" id="edit-icon">
@@ -165,6 +170,10 @@ const add = () => {
   store.commit('add');
 };
 
+const addSolution = () => {
+  store.commit('add');
+};
+
 const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
 }
diff --git a/pages/assets.vue b/pages/assets.vue
index 546bcb5..531b563 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -6,9 +6,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onAssetlist || onCustomerAssetlist" />
+      <CustomerSearch v-if="onAssetlist" />
       <AssetTable v-if="onAssetlist" />
-      <AssetTableNoCustomer v-if="onCustomerAssetlist" />
+      <!-- <AssetTableNoCustomer v-if="onCustomerAssetlist" /> -->
       <Asset v-if="onAsset" />
       <HardwareSpecifications v-if="onAsset" />
       <SoftwareSpecifications v-if="onAsset" />
@@ -25,7 +25,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
-import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
+// import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
 import Asset from "../components/server/Asset.vue";
 import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
@@ -37,7 +37,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onAssetlist = computed(() => store.state.onAssetlist);
-const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
+// const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
 const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
 
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index 0bad698..b6feba9 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -25,9 +25,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onIssueSliplist || onCustomerIssueSliplist" />
+      <CustomerSearch v-if="onIssueSliplist" />
       <IssueSlipTable v-if="onIssueSliplist" />
-      <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" />
+      <!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
       <IssueSlip v-if="onIssueSlip" />
       <OrderingInformation v-if="onIssueSlip" />
       <Accounting v-if="onIssueSlip" />
@@ -41,7 +41,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
-import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
+// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
@@ -50,7 +50,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onIssueSliplist = computed(() => store.state.onIssueSliplist);
-const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
+// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
 const onIssueSlip = computed(() => store.state.onIssueSlip);
 
 definePageMeta({
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index c3dcb72..32a20fb 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -27,9 +27,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist" />
+      <CustomerSearch v-if="onTemplatelist" />
       <MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
-      <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" />
+      <!-- <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" /> -->
       <MaintenanceVisitsTemplate v-if="onTemplate" />
       <TemplateChecklistMVT v-if="onTemplate" />
       <TemplateSearch v-if="onInstancelist" />
@@ -46,7 +46,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
-import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
+// import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
 import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -58,7 +58,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index ea041d3..57beea3 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -27,9 +27,9 @@
             </router-link>
         </div>
         <div id="content-body">
-            <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+            <CustomerSearch v-if="onTemplatelist"/>
             <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
-            <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/>
+            <!-- <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/> -->
             <ProductionOrdersTemplate v-if="onTemplate"/>
             <TemplateChecklist v-if="onTemplate"/>
             <TemplateSearch v-if="onInstancelist"/>
@@ -46,7 +46,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
-import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
+// import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
 import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
 import TemplateChecklist from "../components/server/TemplateChecklist.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -58,7 +58,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 8c5d696..83b5810 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -6,9 +6,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onSolutionlist || onCustomerSolutionlist" />
+      <CustomerSearch v-if="onSolutionlist" />
       <SolutionTable v-if="onSolutionlist" />
-      <SolutionTableNoCustomer v-if="onCustomerSolutionlist" />
+      <!-- <SolutionTableNoCustomer v-if="onCustomerSolutionlist" /> -->
       <Solution v-if="onSolution" />
       <SolutionChecklist v-if="onSolution" />
     </div>
@@ -20,7 +20,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
-import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
+// import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 import { useStore } from 'vuex';
@@ -28,7 +28,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onSolutionlist = computed(() => store.state.onSolutionlist);
-const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
+// const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
 const onSolution = computed(() => store.state.onSolution);
 
 definePageMeta({
diff --git a/plugins/vuex.js b/plugins/vuex.js
index 6e42171..8efaf70 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -26,7 +26,6 @@ const store = createStore({
             deleteIcon: false,
 
             onAssetlist: true,
-            onCustomerAssetlist: false,
             onAsset: false,
             onSolutionlistAsset: false,
             chosenAssetId: -1,
@@ -55,7 +54,6 @@ const store = createStore({
             newLicense: '',
 
             onTemplatelist: true,
-            onCustomerTemplatelist: false,
             onTemplate: false,
             onInstancelist: false,
             onInstance: false,
@@ -79,7 +77,6 @@ const store = createStore({
             chosenMVTId: -1,
 
             onSolutionlist: true,
-            onCustomerSolutionlist: false,
             onSolution: false,
             chosenSolutionId: -1,
             newSolutionNameSol: '',
@@ -93,7 +90,6 @@ const store = createStore({
             newNotesSol: '',
 
             onIssueSliplist: true,
-            onCustomerIssueSliplist: false,
             onIssueSlip: false,
             chosenIssueSlipId: -1,
             newTicketNoIS: '',
@@ -170,7 +166,6 @@ const store = createStore({
         // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
-            state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = false
 
@@ -189,7 +184,6 @@ const store = createStore({
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = true
             state.onAsset = false
             state.onSolutionlistAsset = false
 
@@ -208,7 +202,6 @@ const store = createStore({
         },
         changeToAsset(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
 
@@ -227,7 +220,6 @@ const store = createStore({
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = true
 
@@ -248,7 +240,6 @@ const store = createStore({
         // functions to change the production order and maintenance visit pages
         changeToTemplatelist(state) {
             state.onTemplatelist = true
-            state.onCustomerTemplatelist = false
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
@@ -268,7 +259,6 @@ const store = createStore({
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = true
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
@@ -288,7 +278,6 @@ const store = createStore({
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
@@ -308,7 +297,6 @@ const store = createStore({
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = false
             state.onInstancelist = true
             state.onInstance = false
@@ -332,7 +320,6 @@ const store = createStore({
             state.filtered = false
             state.searchable = false
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
         },
@@ -340,7 +327,6 @@ const store = createStore({
         // functions to change the solution pages
         changeToSolutionlist(state) {
             state.onSolutionlist = true
-            state.onCustomerSolutionlist = false
             state.onSolution = false
 
             state.addIcon = true
@@ -358,7 +344,6 @@ const store = createStore({
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = true
             state.onSolution = false
 
             state.addIcon = true
@@ -376,7 +361,6 @@ const store = createStore({
         },
         changeToSolution(state) {
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = false
             state.onSolution = true
 
             state.addIcon = false
@@ -396,7 +380,6 @@ const store = createStore({
         // functions to change the issue slip pages
         changeToIssueSliplist(state) {
             state.onIssueSliplist = true
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = false
 
             state.addIcon = true
@@ -414,7 +397,6 @@ const store = createStore({
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = true
             state.onIssueSlip = false
 
             state.addIcon = true
@@ -432,7 +414,6 @@ const store = createStore({
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = true
 
             state.addIcon = false
@@ -775,25 +756,21 @@ const store = createStore({
 
             // set the asset variables
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
 
             // set the production order and maintenance visit variables
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
 
             // set the solution variables
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = false
             state.onSolution = true
 
             // set the issue slips variables
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = true
 
             // set the issue variables
diff --git a/server/api/getSelectedSolutionsByType/[id].ts b/server/api/getSelectedSolutionsByType/[id].ts
new file mode 100644
index 0000000..8735b17
--- /dev/null
+++ b/server/api/getSelectedSolutionsByType/[id].ts
@@ -0,0 +1,23 @@
+import { selectedSolutionsByType, errorMsg } from "../../middleware/solutions";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedSolutionsByType
+})
diff --git a/server/middleware/solutions.ts b/server/middleware/solutions.ts
index 8bbe46c..e979b1c 100644
--- a/server/middleware/solutions.ts
+++ b/server/middleware/solutions.ts
@@ -8,6 +8,7 @@ let selectedSolutionsByCustomer = [];
 let selectedSolutionsBySolution = [];
 let selectedSolutionsByAsset = [];
 let solTodosBySolutionId = [];
+let selectedSolutionsByType =  [];
 let insertId = -1;
 let errorMsg = '';
 
@@ -117,6 +118,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getSelectedSolutionsByType")) {
+        // get selected solutions object by type from backend
+        let filteredType = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredType = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByType/${filteredType}`);
+            selectedSolutionsByType = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
     if (event.path.startsWith("/api/getSelectedSolutionsBySolution")) {
         // get selected solutions object by asset from backend
         let filteredSolution = null;
@@ -424,4 +457,4 @@ export default defineEventHandler(async (event) => {
 
 })
 
-export { solutions, solution, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file
+export { solutions, solution, selectedSolutionsByType, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file