src/pages/Account/AccountAcls.vue

@@ -123,13 +123,6 @@ const deleteAcl = async ({ id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
-
     <VnSearchbar
         data-key="AccountAcls"
         url="ACLs"

src/pages/Account/Role/AccountRoles.vue

@@ -76,16 +76,12 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="Roles"
-                :expr-builder="exprBuilder"
-                :label="t('role.searchRoles')"
-                :info="t('role.searchInfo')"
-            />
-        </Teleport>
-    </template>
+    <VnSearchbar
+        data-key="Roles"
+        :expr-builder="exprBuilder"
+        :label="t('role.searchRoles')"
+        :info="t('role.searchInfo')"
+    />
     <VnTable
         ref="tableRef"
         data-key="Roles"

src/pages/Account/Role/Card/RoleCard.vue

@@ -22,9 +22,8 @@ const searchBarDataKeys = {
     <VnCard
         data-key="Role"
         :descriptor="RoleDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
-        :search-custom-route-redirect="customRouteRedirectName"
-        :search-redirect="!!customRouteRedirectName"
+        search-data-key="AccountRoles"
+        search-url="VnRoles"
         :searchbar-label="t('role.searchRoles')"
         :searchbar-info="t('role.searchInfo')"
     />