refactor: refs #8197 adapt AccountAcls to VnCardMain

src/pages/Account/AccountAcls.vue

@@ -1,16 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useValidator } from 'src/composables/useValidator';
+import VnCardMain from 'src/components/common/VnCardMain.vue';
 
 defineProps({
     id: {
@@ -21,13 +20,13 @@ defineProps({
 
 const { notify } = useNotify();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const quasar = useQuasar();
 
 const tableRef = ref();
 const roles = ref();
 const validationsStore = useValidator();
 const { models } = validationsStore;
+const dataKey = 'AccountAcls';
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -134,39 +133,42 @@ const deleteAcl = async ({ id }) => {
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="AccountAcls"
-        url="ACLs"
-        :expr-builder="exprBuilder"
-        :label="t('acls.search')"
-        :info="t('acls.searchInfo')"
-    />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-    </QDrawer>
     <FetchData
         url="VnRoles?fields=['name']"
         auto-load
         @on-fetch="(data) => (roles = data)"
     />
+    <VnCardMain
+        :section="dataKey"
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="acls"
+        :array-data-props="{
+            url: 'ACLs',
+            order: 'id DESC',
+            exprBuilder,
+        }"
+    >
+        <template #body>
             <VnTable
                 ref="tableRef"
                 data-key="AccountAcls"
-        :url="`ACLs`"
                 :create="{
                     urlCreate: 'ACLs',
                     title: 'Create ACL',
                     onDataSaved: () => tableRef.reload(),
                     formInitialData: {},
                 }"
-        order="id DESC"
                 :disable-option="{ card: true }"
                 :columns="columns"
                 default-mode="table"
-        :right-search="true"
+                :right-search="false"
                 :is-editable="true"
                 :use-model="true"
             />
         </template>
+    </VnCardMain>
+</template>
 
 <i18n>
 es: