add config item

components/ClientSearch.vue

@@ -1,14 +1,35 @@
 <template>
   <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
-    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
+    <pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
+    <input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
+      :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const filtered = computed(() => store.state.assetFiltered);
+const filteredTerm = computed(() => store.state.filteredAssetbyClient);
+const clientFilter = ref(store.state.filteredAssetbyClient);
 
 const darkMode = ref(true)
+
+// update filtered term
+const updateFilterTerm = () => {
+  clientFilter.value = filteredTerm.value
+}
+
+// update the filtered term in the store
+const filterConfigItemList = () => {
+  store.commit('updateAssetFilterbyClient', clientFilter.value);
+}
+
+watch(filteredTerm, updateFilterTerm)
 </script>
 
 <script>
@@ -76,4 +97,18 @@ export default {
   background-color: #EBEBEB;
   color: #000;
 }
+
+.input {
+  border: none;
+}
+
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
 </style>