refactor: refs #8197 adapt AccountAlias

src/pages/Account/AccountAliasList.vue

@@ -2,21 +2,12 @@
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
+import VnCardMain from 'src/components/common/VnCardMain.vue';
 
 const tableRef = ref();
 const { t } = useI18n();
-const stateStore = useStateStore();
+const dataKey = 'AccountAliasList';
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
 const columns = computed(() => [
     {
         align: 'left',
@@ -40,40 +31,46 @@ const columns = computed(() => [
         create: true,
     },
 ]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : { alias: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-                :label="t('mailAlias.search')"
-                :info="t('mailAlias.searchInfo')"
-            />
-        </Teleport>
-    </template>
+    <VnCardMain
+        :section="dataKey"
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="mailAlias"
+        :array-data-props="{ url: 'MailAliases', order: 'id DESC', exprBuilder }"
+    >
+        <template #body>
             <VnTable
+                :data-key="dataKey"
                 ref="tableRef"
-        data-key="AccountAliasList"
-        url="MailAliases"
                 :create="{
                     urlCreate: 'MailAliases',
                     title: 'Create MailAlias',
                     onDataSaved: ({ id }) => tableRef.redirect(id),
                     formInitialData: {},
                 }"
-        order="id DESC"
                 :columns="columns"
                 :disable-option="{ card: true }"
                 default-mode="table"
                 redirect="account/alias"
                 :is-editable="true"
                 :use-model="true"
+                :right-search="false"
             />
+        </template>
+    </VnCardMain>
 </template>
-
 <i18n>
     es:
         Id: Id

src/router/modules/account.js

@@ -1,6 +1,7 @@
 import { RouterView } from 'vue-router';
 import accountCard from './account/accountCard';
 import roleCard from './account/roleCard';
+import aliasCard from './account/aliasCard';
 
 export default {
     path: '/account',
@@ -12,8 +13,8 @@ export default {
         keyBinding: 'u',
         menu: [
             'AccountList',
-            'AccountAliasList',
             'AccountRoles',
+            'AccountAlias',
             'AccountAccounts',
             'AccountLdap',
             'AccountSamba',
@@ -65,13 +66,21 @@ export default {
                     ],
                 },
                 {
-                    path: 'alias-list',
-                    name: 'AccountAliasList',
+                    path: 'alias',
+                    name: 'AccountAlias',
+                    redirect: { name: 'AccountAliasList' },
                     meta: {
                         title: 'alias',
                         icon: 'email',
                     },
                     component: () => import('src/pages/Account/AccountAliasList.vue'),
+                    children: [
+                        {
+                            name: 'AccountAliasList',
+                            path: 'list',
+                        },
+                        aliasCard,
+                    ],
                 },
                 {
                     path: 'acls',

src/router/modules/account/aliasCard.js

@@ -0,0 +1,36 @@
+export default {
+    name: 'AliasCard',
+    path: ':id',
+    component: () => import('src/pages/Account/Alias/Card/AliasCard.vue'),
+    redirect: { name: 'AliasSummary' },
+    meta: { menu: ['AliasBasicData', 'AliasUsers'] },
+    children: [
+        {
+            name: 'AliasSummary',
+            path: 'summary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/Account/Alias/Card/AliasSummary.vue'),
+        },
+        {
+            name: 'AliasBasicData',
+            path: 'basic-data',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () => import('src/pages/Account/Alias/Card/AliasBasicData.vue'),
+        },
+        {
+            name: 'AliasUsers',
+            path: 'users',
+            meta: {
+                title: 'aliasUsers',
+                icon: 'group',
+            },
+            component: () => import('src/pages/Account/Alias/Card/AliasUsers.vue'),
+        },
+    ],
+};

src/router/modules/index.js

@@ -20,7 +20,6 @@ import ItemType from './itemType';
 import Zone from './zone';
 import Account from './account';
 import Monitor from './monitor';
-import MailAlias from './mailAlias';
 
 export default [
     Item,
@@ -44,6 +43,5 @@ export default [
     ItemType,
     Zone,
     Account,
-    MailAlias,
     Monitor,
 ];

src/router/modules/mailAlias.js

@@ -1,57 +0,0 @@
-import { RouterView } from 'vue-router';
-
-export default {
-    path: 'account/alias',
-    name: 'Alias',
-    meta: {
-        title: 'alias',
-        icon: 'email',
-        moduleName: 'Alias',
-    },
-    component: RouterView,
-    redirect: { name: 'AccountAliasList' },
-    menus: {
-        main: [],
-        card: ['AliasBasicData', 'AliasUsers'],
-    },
-    children: [
-        {
-            name: 'AliasCard',
-            path: ':id',
-            component: () => import('src/pages/Account/Alias/Card/AliasCard.vue'),
-            redirect: { name: 'AliasSummary' },
-            children: [
-                {
-                    name: 'AliasSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasSummary.vue'),
-                },
-                {
-                    name: 'AliasBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasBasicData.vue'),
-                },
-                {
-                    name: 'AliasUsers',
-                    path: 'users',
-                    meta: {
-                        title: 'aliasUsers',
-                        icon: 'group',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasUsers.vue'),
-                },
-            ],
-        },
-    ],
-};

src/router/routes.js

@@ -20,7 +20,6 @@ import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
 import account from './modules/account';
 import monitor from 'src/router/modules/monitor';
-import mailAlias from './modules/mailAlias';
 
 const routes = [
     {
@@ -94,7 +93,6 @@ const routes = [
             ItemType,
             zone,
             account,
-            mailAlias,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',