added bools for actionbar rendering

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>

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;