implemented instance lists and pot, todos still missing

components/TemplateSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
-    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ template.name }}</pre>
   </section>
 </template>
 
@@ -10,10 +10,18 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
+const route = useRoute()
+const id = computed(() => route)
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const template = ref({});
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+
 const darkMode = ref('');
 
 const getSession = async () => {
@@ -25,6 +33,29 @@ const getSession = async () => {
   }
 }
 
+// get maintenance visit template from id
+const getMVTById = async () => {
+  if (id.value.fullPath == '/maintenanceVisits') {
+    try {
+      const response = await Axios.get(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+      );
+      template.value = response.data;
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  } else if (id.value.fullPath == '/productionOrders') {
+    try {
+      const response = await Axios.get(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+      );
+      template.value = response.data;
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -36,7 +67,8 @@ function getItem(item) {
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getMVTById();
 });
 </script>