added right actionbar icons and asset solution list

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;

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> -->

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> -->

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> -->

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> -->

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> -->

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">
+      <router-link v-if="addSolutionIcon" to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
-        <div class="icon" id="new-icon">
+        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          @click="addSolution">
-            src="/icons/actionbar-icons/Add-New-Icon.svg" />
+          <div class="icon" id="new-icon">
-        </div>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-        <Transition name="fade">
+              src="/icons/actionbar-icons/Add-New-Icon.svg" />
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
+          </div>
-        </Transition>
+          <Transition name="fade">
-      </button>
+            <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');
 }

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

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({

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

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

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({

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

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
+})

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 };
+export { solutions, solution, selectedSolutionsByType, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };