From 3613565b39590e0f59eea0a746876d10043881e3 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Tue, 12 Mar 2024 20:36:26 +0100
Subject: [PATCH] added bools for actionbar rendering

---
 app.vue                                       |   2 +-
 backend/models/solutionsModel.js              |   4 +-
 components/AssetSearch.vue                    |  29 +-
 components/server/AssetSolutionList.vue       |  73 +++-
 layouts/Actionbar.vue                         | 111 ++++--
 plugins/vuex.js                               | 315 +++++++++++++-----
 .../api/getSelectedSolutionsByAsset/[id].ts   |  23 ++
 server/middleware/solutions.ts                |  35 +-
 8 files changed, 475 insertions(+), 117 deletions(-)
 create mode 100644 server/api/getSelectedSolutionsByAsset/[id].ts

diff --git a/app.vue b/app.vue
index 2dfae6a..1051332 100644
--- a/app.vue
+++ b/app.vue
@@ -19,7 +19,7 @@
 
 useHead({
   //title: `Tüit ERP - ${route.meta.title}`,
-  title: `Tüit ERP`,
+  title: `tüit app`,
   link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
 })
 </script>
diff --git a/backend/models/solutionsModel.js b/backend/models/solutionsModel.js
index f014466..d92317d 100644
--- a/backend/models/solutionsModel.js
+++ b/backend/models/solutionsModel.js
@@ -103,8 +103,8 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
 //get all selected solutions by asset name
 export const getSelectedSolutionsByAssetName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
-        const results = await ownConn.execute(sql)
+        let sql = `SELECT * FROM solutions WHERE assetName = ? ORDER BY solutionName ASC`;
+        const results = await ownConn.execute(sql, [selected])
         result(null, results);
     }
     catch (err) {
diff --git a/components/AssetSearch.vue b/components/AssetSearch.vue
index f7a909d..61ee3b8 100644
--- a/components/AssetSearch.vue
+++ b/components/AssetSearch.vue
@@ -1,15 +1,40 @@
 <template>
     <section :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Asset:</div>
-        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset name</pre>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ asset.assetName }}</pre>
     </section>
 </template>
     
     
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } 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 chosenAssetId = computed(() => store.state.chosenAssetId);
+
+const asset = ref({});
 const darkMode = ref(true)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        asset.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
+
 </script>
   
 <script>
diff --git a/components/server/AssetSolutionList.vue b/components/server/AssetSolutionList.vue
index c17c152..f221264 100644
--- a/components/server/AssetSolutionList.vue
+++ b/components/server/AssetSolutionList.vue
@@ -9,32 +9,78 @@
                         Solution</th>
                     <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="sol in solutions" :key="sol.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
-                        ...</td>
-                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        <nuxt-link to="/solutions" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenSolution(sol.primaryID)">
+                            {{ sol.solutionName }}
+                        </nuxt-link>
+                    </td>
+                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ sol.type }}</td>
                 </tr>
             </tbody>
-
         </table>
     </div>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted } 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 chosenAssetId = computed(() => store.state.chosenAssetId);
+
+const asset = ref({});
+const solutions = ref({});
 const darkMode = ref(true)
+
+//get all solutions from the chosen asset
+const getSolutions = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByAsset/${asset.value.assetName}`);
+        solutions.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const goToChosenSolution = (id) => {
+    store.commit('setChosenSolution', id);
+    store.commit('changeToSolution');
+};
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        asset.value = response.data;
+        await getSolutions();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
 </script>
 
 <script>
 export default {
     name: "AssetSolutionList",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
@@ -73,6 +119,11 @@ export default {
     gap: 0.625rem;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index be99abc..e979c7d 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,76 +1,118 @@
 <template>
-  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+  <aside
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+        src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
+      <button v-if="searchIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"
+        @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button :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" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
+      <button v-if="instancesIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
+      <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" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+        </Transition>
+      </button>
+      <button v-if="attachmentsIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
+      <button v-if="sellIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
+      <button v-if="archiveIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
+      <button v-if="addIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
+          <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']">New</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
+      <button v-if="addInstanceIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+        <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']">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>
+      <button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
+        @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
+      <button v-if="deleteIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete"
+        @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -81,8 +123,22 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const addIcon = computed(() => store.state.addIcon);
+const addInstanceIcon = computed(() => store.state.addInstanceIcon);
+const addSolutionIcon = computed(() => store.state.addSolutionIcon);
+const solutionIcon = computed(() => store.state.solutionIcon);
+const filterIcon = computed(() => store.state.filterIcon);
+const searchIcon = computed(() => store.state.searchIcon);
+const instancesIcon = computed(() => store.state.instancesIcon);
+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 deleteIcon = computed(() => store.state.deleteIcon);
 
 const darkMode = ref(true)
 const isExpanded = ref(true)
@@ -108,6 +164,14 @@ const toggleSearched = () => {
 const add = () => {
   store.commit('add');
 };
+
+const changeToSolutions = () => {
+  store.commit('changeToSolutionlistAsset');
+}
+
+onMounted(() => {
+  store.commit('changeToAssetlist')
+});
 </script>
 
 
@@ -345,4 +409,5 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/plugins/vuex.js b/plugins/vuex.js
index c1974df..6e42171 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -12,6 +12,19 @@ const store = createStore({
             changedCustomerId: -1,
             filteredByCustomer: '',
 
+            addIcon: false,
+            addSolutionIcon: false,
+            solutionIcon: false,
+            addInstanceIcon: false,
+            filterIcon: false,
+            searchIcon: false,
+            instancesIcon: false,
+            attachmentsIcon: false,
+            sellIcon: false,
+            archiveIcon: false,
+            editIcon: false,
+            deleteIcon: false,
+
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
@@ -150,92 +163,86 @@ const store = createStore({
             state.changedCustomerId = id
         },
 
+        refresh() {
+            //
+        },
+
         // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
             state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
             state.onCustomerAssetlist = true
             state.onAsset = false
             state.onSolutionlistAsset = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToAsset(state) {
             state.onAssetlist = false
             state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = true
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
             state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = true
-        },
-        setChosenAsset(state, id) {
-            state.chosenAssetId = id
-        },
-        resetAssetStore(state) {
-            state.editable = false
-            state.filtered = false
-            state.searchable = false
-            state.deleteAsset = false
-            state.chosenAssetId = -1
-            state.filteredByCustomer = ''
-            state.newAssetName = ''
-            state.newCustomerID = ''
-            state.newCustomer = ''
-            state.newLocation = ''
-            state.newRemoteLocation = ''
-            state.newType = ''
-            state.newDescription = ''
-            state.newNotes = ''
-            state.newState = ''
-            state.newLastView = ''
-            state.newUser = ''
-            state.hardwareBool = false
-            state.newModel = ''
-            state.newSerialnumber = ''
-            state.newCPU = ''
-            state.newRAM = ''
-            state.newStorageConfiguration = ''
-            state.newMiscellaneous = ''
-            state.softwareBool = false
-            state.newSoftware = ''
-            state.newVersion = ''
-            state.newLicense = ''
-        },
-        // 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
-        },
-        changeToCustomerTemplatelist(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = true
-            state.onTemplate = false
-            state.onInstancelist = false
-            state.onInstance = false
-        },
-        changeToTemplate(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
-            state.onTemplate = true
-            state.onInstancelist = false
-            state.onInstance = false
-        },
-        changeToInstancelist(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
-            state.onTemplate = false
-            state.onInstancelist = true
-            state.onInstance = false
+
+            state.addIcon = false
+            state.addSolutionIcon = true
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
 
         // functions to change the production order and maintenance visit pages
@@ -245,6 +252,19 @@ const store = createStore({
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
@@ -252,6 +272,19 @@ const store = createStore({
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
@@ -259,6 +292,19 @@ const store = createStore({
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = true
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = true
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
@@ -266,21 +312,19 @@ const store = createStore({
             state.onTemplate = false
             state.onInstancelist = true
             state.onInstance = false
-        },
-        doDeleteAsset(state) {
-            state.deleteAsset = true
-        },
-        undoDeleteAsset(state) {
-            state.deleteAsset = false
-        },
-        toggleAssetSearchable(state) {
-            if (state.searchable == false) {
-                state.searchable = true
-                state.filtered = false
-            } else {
-                state.searchable = false
-            }
-            state.filteredByCustomer = ''
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = true
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         addNewAsset(state) {
             state.newAsset = true
@@ -298,16 +342,55 @@ const store = createStore({
             state.onSolutionlist = true
             state.onCustomerSolutionlist = false
             state.onSolution = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
             state.onCustomerSolutionlist = true
             state.onSolution = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToSolution(state) {
             state.onSolutionlist = false
             state.onCustomerSolutionlist = false
             state.onSolution = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to change the issue slip pages
@@ -315,16 +398,55 @@ const store = createStore({
             state.onIssueSliplist = true
             state.onCustomerIssueSliplist = false
             state.onIssueSlip = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
             state.onCustomerIssueSliplist = true
             state.onIssueSlip = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
             state.onCustomerIssueSliplist = false
             state.onIssueSlip = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to change the issue pages
@@ -332,16 +454,55 @@ const store = createStore({
             state.onIssueItemList = true
             state.onIssueItem = false
             state.onIssueItemVariant = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToIssueItem(state) {
             state.onIssueItemList = false
             state.onIssueItem = true
             state.onIssueItemVariant = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = true
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToIssueItemVariant(state) {
             state.onIssueItemList = false
             state.onIssueItem = false
             state.onIssueItemVariant = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = true
+            state.archiveIcon = true
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to update the asset
diff --git a/server/api/getSelectedSolutionsByAsset/[id].ts b/server/api/getSelectedSolutionsByAsset/[id].ts
new file mode 100644
index 0000000..6643c7b
--- /dev/null
+++ b/server/api/getSelectedSolutionsByAsset/[id].ts
@@ -0,0 +1,23 @@
+import { selectedSolutionsByAsset, 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 selectedSolutionsByAsset
+})
diff --git a/server/middleware/solutions.ts b/server/middleware/solutions.ts
index 6bc9d3c..8bbe46c 100644
--- a/server/middleware/solutions.ts
+++ b/server/middleware/solutions.ts
@@ -6,6 +6,7 @@ let solutions = [];
 let solution = {};
 let selectedSolutionsByCustomer = [];
 let selectedSolutionsBySolution = [];
+let selectedSolutionsByAsset = [];
 let solTodosBySolutionId = [];
 let insertId = -1;
 let errorMsg = '';
@@ -84,6 +85,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getSelectedSolutionsByAsset")) {
+        // get selected solutions object by asset from backend
+        let filteredAsset = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredAsset = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByAssetName/${filteredAsset}`);
+            selectedSolutionsByAsset = 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;
@@ -391,4 +424,4 @@ export default defineEventHandler(async (event) => {
 
 })
 
-export { solutions, solution, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file
+export { solutions, solution, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file