feature: search bar works. Beautiful two return code.

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,