feature: search bar works. Beautiful two return code.

src/components/AccountMenu/SearchBar.vue

@@ -1,24 +1,30 @@
 <template>
     <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
         justify-between">
-        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"/>
+        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
-        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer"/>
+            v-model="inputQuery"
+        />
+        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer" @click="onSearchClick"/>
     </div>
 </template>
 
 <script>
+import { ref, } from 'vue';
 import i18next from '@/i18n/i18n.js';
 export default {
-    setup() {
+    setup(props, { emit, }) {
+        const inputQuery = ref("");
+
+        const onSearchClick = (event) => {
+            event.preventDefault();
+            emit('on-search-account-button-click', inputQuery.value);
+        };
 
-    },
-    data() {
         return {
-            i18next: i18next,
+            inputQuery,
-        }
+            onSearchClick,
-    },
+            i18next,
-    created() {
+        };
-
     },
 };
 </script>

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -6,10 +6,10 @@
                     items-center px-6 py-[10px]" @click="onCreateNewClick">
                     {{ i18next.t("AcctMgmt.CreateNew") }}
                 </button>
-                <SearchBar/>
+                <SearchBar @on-search-account-button-click="onSearchAccountButtonClick"/>
             </div>
             <div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
-                <DataTable :value="infiniteAcctData" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
+                <DataTable :value="accountSearchResults" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
                     :rowClass="getRowClass"
                 >
                     <Column field="username" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium"  sortable>
@@ -145,7 +145,7 @@ function repeatAccountList(accountList, N) {
 const repeatedAccountList = repeatAccountList(accountList, 20);
 
 export default {
-    setup() {
+    setup(props, { emit, }) {
         const acctMgmtStore = useAcctMgmtStore();
         const loadingStore = LoadingStore();
         const modalStore = useModalStore();
@@ -162,6 +162,8 @@ export default {
         const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
         const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
 
+        const inputQuery = ref('');
+
         const fetchLoginUserData = async () => {
             await loginStore.getUserData();
             loginUserData.value = loginStore.userData;
@@ -191,6 +193,13 @@ export default {
             }
         };
 
+        const accountSearchResults = computed(() => {
+            if(!inputQuery.value) {
+                return infiniteAcctData.value;
+            }
+            return acctMgmtStore.allUserAccoutList.filter (user => user.username.includes(inputQuery.value));
+        });
+
         const onCreateNewClick = () => {
             acctMgmtStore.clearCurrentViewingUser();
             modalStore.openModal(MODAL_CREATE_NEW);
@@ -256,6 +265,10 @@ export default {
             }
         });
 
+        const onSearchAccountButtonClick = (inputQueryString) => {
+            inputQuery.value = inputQueryString;
+        };
+
         onMounted(async () => { 
             await fetchLoginUserData();
             await acctMgmtStore.getAllUserAccounts();
@@ -298,6 +311,7 @@ export default {
         };
 
         return {
+            accountSearchResults,
             isLoading,
             modalStore,
             loginUserData,
@@ -306,6 +320,7 @@ export default {
             justCreateUsername,
             onCreateNewClick,
             onAcctDoubleClick,
+            onSearchAccountButtonClick,
             handleScroll,
             getRowClass,
             onDeleteBtnClick,