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,38 +133,41 @@ 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)"
     />
-    <VnTable
+    <VnCardMain
-        ref="tableRef"
+        :section="dataKey"
-        data-key="AccountAcls"
+        :data-key="dataKey"
-        :url="`ACLs`"
-        :create="{
-            urlCreate: 'ACLs',
-            title: 'Create ACL',
-            onDataSaved: () => tableRef.reload(),
-            formInitialData: {},
-        }"
-        order="id DESC"
-        :disable-option="{ card: true }"
         :columns="columns"
-        default-mode="table"
+        prefix="acls"
-        :right-search="true"
+        :array-data-props="{
-        :is-editable="true"
+            url: 'ACLs',
-        :use-model="true"
+            order: 'id DESC',
-    />
+            exprBuilder,
+        }"
+    >
+        <template #body>
+            <VnTable
+                ref="tableRef"
+                data-key="AccountAcls"
+                :create="{
+                    urlCreate: 'ACLs',
+                    title: 'Create ACL',
+                    onDataSaved: () => tableRef.reload(),
+                    formInitialData: {},
+                }"
+                :disable-option="{ card: true }"
+                :columns="columns"
+                default-mode="table"
+                :right-search="false"
+                :is-editable="true"
+                :use-model="true"
+            />
+        </template>
+    </VnCardMain>
 </template>
 
 <i18n>