add config item

components/server/AssetTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
+        <input v-model="assetSearchFilter" @change="searchConfigItem()"
+            :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']">Last viewed:</div>
         <table class="data-table" id="asset-table">
@@ -49,10 +54,11 @@
 </template>
   
 <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';
+import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
@@ -60,20 +66,60 @@ const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
 };
+const clientFilter = computed(() => store.state.filteredAssetbyClient);
+const assetSearchable = computed(() => store.state.assetSearchable);
 
+const assetSearchFilter = ref('');
 const darkMode = ref(true)
 const configItemList = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    assetSearchFilter.value = '';
+    await getConfigItems();
+}
+
 //get all config items
 const getConfigItems = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredConfigItemsByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items based on the searched client
+const getFilteredConfigItemsByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByClient/${clientFilter.value}`);
         configItemList.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
+//get all config items based on the searched asset name
+const searchConfigItem = async () => {
+    if (assetSearchFilter.value === '') {
+        await getConfigItems();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${assetSearchFilter.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getConfigItems);
+watch(assetSearchable, updateSearchTerm);
+
 onMounted(async () => {
     await getConfigItems();
 });
@@ -93,13 +139,58 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
+    /* width: 100%; */
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.asset-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;
+}
+
+.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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -228,6 +319,17 @@ th {
     letter-spacing: 0.05em;
 }
 
+.clientLabel {
+    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;
+}
+
 .label-darkmode {
     color: #FFFFFF;
 }