feat(Account & AccountRole): refs #8197 add VnCardMain

Reviewed-on: #1061
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

@@ -49,10 +49,16 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
         });
     }
 
+    function resetPagination(key) {

@@ -17,0 +26,4 @@
+            hasContent.value = teleportRef.value.innerHTML.trim() !== '';
+        };
+
+        observer = new MutationObserver(checkContent);

@@ -15,2 +15,4 @@
     () => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false)
 );
+
+const targetId = 'left-panel';

@@ -20,3 +38,3 @@
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
+            <div :id="targetId" ref="teleportRef"></div>

@@ -161,2 +141,2 @@
-        order="id DESC"
-        :disable-option="{ card: true }"
+    <VnCardMain
+        :section="dataKey"

@@ -66,2 +46,2 @@
-        }"
-        order="id DESC"
+    <VnCardMain
+        :section="dataKey"

@@ -122,2 +106,2 @@
-        :filter="filter"
-        order="id DESC"
+    <VnCardMain
+        :section="dataKey"

@@ -102,2 +88,2 @@
-        order="id ASC"
-        :disable-option="{ card: true }"
+    <VnCardMain
+        :section="dataKey"

@@ -44,3 +44,3 @@
         module="Role"
         @on-fetch="setData"
-        data-key="accountData"
+        data-key="Role"

@@ -31,3 +31,3 @@
         :filter="filter"
         @on-fetch="(data) => (role = data)"
-        data-key="RoleSummary"
+        data-key="Role"

@@ -1,4 +1,7 @@
 import { RouterView } from 'vue-router';
+import accountCard from './account/accountCard';

@@ -0,0 +58,4 @@
+    <Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
+        <component :is="descriptor" />
+        <QSeparator />
+        <LeftMenu source="card" />

@@ -28,3 +26,4 @@
 const roles = ref();
 const validationsStore = useValidator();
 const { models } = validationsStore;
+const dataKey = 'AccountAcls';

@@ -8,3 +7,3 @@
 const tableRef = ref();
 const { t } = useI18n();
-const stateStore = useStateStore();
+const dataKey = 'AccountAliasList';

@@ -13,3 +11,4 @@
 const filter = {
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
+const dataKey = 'AccountList';

@@ -16,2 +18,4 @@
 });
 const tableRef = ref();
+const url = 'VnRoles';
+const dataKey = 'AccountRoleList';

@@ -10,3 +12,4 @@
 const quasar = useQuasar();
 
 onMounted(async () => {
+    stateStore.rightDrawer = true;

@@ -54,1 +56,4 @@
+    }
+
     return {
+        state,