Merge pull request 'modularActionbar' (#23) from modularActionbar into main

Reviewed-on: jo.kuehner/TueIT_App#23
2024-03-15 19:05:31 +00:00
parent 7af5c0ce0d 29fd2e0a15
commit 8b237e8080
19 changed files with 693 additions and 170 deletions
--- 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>
--- 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) {
--- 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>
--- 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">
@ -9,32 +19,135 @@
                        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, 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 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 solutionsBySol = ref([]);
+const solutionsByType = 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);
+    }
+}
+
+// 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');
+};
+
+// 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);
+    }
+}
+
+//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();
+});
 </script>

 <script>
 export default {
    name: "AssetSolutionList",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .data {
    display: flex;
@ -57,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;
@ -73,6 +242,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;
--- 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>
+</style> -->
--- 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>
+}</style> -->
--- 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>
+}</style> -->
--- 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>
+}</style> -->
--- 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>
+</style> -->
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@ -1,76 +1,123 @@
 <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>
+      <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">
-          <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 +128,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 +169,18 @@ const toggleSearched = () => {
 const add = () => {
  store.commit('add');
 };
+
+const addSolution = () => {
+  store.commit('add');
+};
+
+const changeToSolutions = () => {
+  store.commit('changeToSolutionlistAsset');
+}
+
+onMounted(() => {
+  store.commit('changeToAssetlist')
+});
 </script>


@ -345,4 +418,5 @@ img {
    max-width: 0;
    max-inline-size: 0;
  }
-}</style>
+}
+</style>
--- 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);

--- 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({
--- 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);
--- 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);
--- 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({
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@ -12,8 +12,20 @@ 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,
            onSolutionlistAsset: false,
            chosenAssetId: -1,
@ -42,7 +54,6 @@ const store = createStore({
            newLicense: '',

            onTemplatelist: true,
-            onCustomerTemplatelist: false,
            onTemplate: false,
            onInstancelist: false,
            onInstance: false,
@ -66,7 +77,6 @@ const store = createStore({
            chosenMVTId: -1,

            onSolutionlist: true,
-            onCustomerSolutionlist: false,
            onSolution: false,
            chosenSolutionId: -1,
            newSolutionNameSol: '',
@ -80,7 +90,6 @@ const store = createStore({
            newNotesSol: '',

            onIssueSliplist: true,
-            onCustomerIssueSliplist: false,
            onIssueSlip: false,
            chosenIssueSlipId: -1,
            newTicketNoIS: '',
@ -150,137 +159,160 @@ 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
        changeToTemplatelist(state) {
            state.onTemplatelist = true
-            state.onCustomerTemplatelist = false
            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
-            state.onCustomerTemplatelist = true
            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
-            state.onCustomerTemplatelist = false
            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
-            state.onCustomerTemplatelist = false
            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
@ -288,7 +320,6 @@ const store = createStore({
            state.filtered = false
            state.searchable = false
            state.onAssetlist = false
-            state.onCustomerAssetlist = false
            state.onAsset = true
            state.onSolutionlistAsset = false
        },
@ -296,35 +327,107 @@ const store = createStore({
        // functions to change the solution pages
        changeToSolutionlist(state) {
            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
        changeToIssueSliplist(state) {
            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 +435,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
@ -614,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
--- a/server/api/getSelectedSolutionsByAsset/[id].ts
+++ 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
+})
--- a/server/api/getSelectedSolutionsByType/[id].ts
+++ 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
+})
--- a/server/middleware/solutions.ts
+++ b/server/middleware/solutions.ts
@ -6,7 +6,9 @@ let solutions = [];
 let solution = {};
 let selectedSolutionsByCustomer = [];
 let selectedSolutionsBySolution = [];
+let selectedSolutionsByAsset = [];
 let solTodosBySolutionId = [];
+let selectedSolutionsByType =  [];
 let insertId = -1;
 let errorMsg = '';

@ -84,6 +86,70 @@ 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/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;
@ -391,4 +457,4 @@ export default defineEventHandler(async (event) => {

 })

-export { solutions, solution, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
+export { solutions, solution, selectedSolutionsByType, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };