feat: roleCreate as dialog

src/components/LeftMenuItem.vue

@@ -20,7 +20,13 @@ const itemComputed = computed(() => {
 });
 </script>
 <template>
-    <QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
+    <QItem
+        active-class="bg-hover"
+        class="min-height"
+        :to="{ name: itemComputed.name }"
+        clickable
+        v-ripple
+    >
         <QItemSection avatar v-if="itemComputed.icon">
             <QIcon :name="itemComputed.icon" />
         </QItemSection>
@@ -33,3 +39,9 @@ const itemComputed = computed(() => {
         </QItemSection>
     </QItem>
 </template>
+
+<style lang="scss" scoped>
+.q-item {
+    min-height: 5vh;
+}
+</style>

src/pages/Account/Role/AccountRoles.vue

@@ -6,14 +6,17 @@ import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from '../Card/AccountSummary.vue';
+import { ref } from 'vue';
+import RoleForm from './Card/RoleForm.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const redirectToCreateView = () => {
-    router.push({ name: 'RoleCreate' });
+const roleCreateDialogRef = ref(null);
+
+const openCreateModal = () => {
+    roleCreateDialogRef.value.show();
 };
 function getApiUrl() {
     return new URL(window.location).origin;
@@ -43,12 +46,15 @@ function navigate(event, id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('role.card.name')" :value="row.name"> </VnLv>
-                            <VnLv
-                                :label="t('role.card.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
+                            <div style="flex-direction: column; width: 100%">
+                                <VnLv :label="t('role.card.name')" :value="row.name">
+                                </VnLv>
+                                <VnLv
+                                    :label="t('role.card.description')"
+                                    :value="row.description"
+                                >
+                                </VnLv>
+                            </div>
                         </template>
                         <template #actions>
                             <QBtn
@@ -69,13 +75,18 @@ function navigate(event, id) {
                 </template>
             </VnPaginate>
         </div>
+        <QDialog
+            ref="roleCreateDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <RoleForm />
+        </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{ name: 'RoleCreate' }">
-                <QBtn fab icon="add" color="primary" />
-                <QTooltip>
-                    {{ t('role.pageTitles.roleCreate') }}
-                </QTooltip></RouterLink
-            >
+            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
+            <QTooltip>
+                {{ t('account.pageTitles.newRole') }}
+            </QTooltip>
         </QPageSticky>
     </QPage>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -15,17 +15,15 @@ const defaultInitialData = {
 };
 </script>
 <template>
-    <VnSubToolbar />
-    <FormModel
-        :url="isNew ? null : `VnRoles/${route.params.id}`"
-        :url-create="isNew ? 'VnRoles' : null"
-        :observe-form-changes="!isNew"
+    <FormModelPopup
+        :title="t('Create role')"
+        ref="formModelPopupRef"
+        url-create="VnRoles"
         model="VnRole"
-        :auto-load="!isNew"
         :form-initial-data="defaultInitialData"
         @on-data-saved="onSave"
     >
-        <template #form="{ data }">
+        <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
@@ -40,5 +38,10 @@ const defaultInitialData = {
                 </div>
             </VnRow>
         </template>
-    </FormModel>
+    </FormModelPopup>
 </template>
+
+<i18n>
+    es:
+        Create role: Crear role
+</i18n>

src/pages/Account/locale/en.yml

@@ -11,7 +11,7 @@ account:
         connections: Connections
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
-        roleCreate: New role
+        newRole: New role
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding

src/pages/Account/locale/es.yml

@@ -10,7 +10,7 @@ account:
         acls: ACLs
         connections: Conexiones
         inheritedRoles: Roles heredados
-        roleCreate: Nuevo rol
+        newRole: Nuevo rol
         subRoles: Subroles
         privileges: Privilegios
         mailAlias: Alias de correo
@@ -46,7 +46,7 @@ role:
     pageTitles:
         inheritedRoles: Roles heredados
         subRoles: Subroles
-        roleCreate: Nuevo rol
+        newRole: Nuevo rol
     card:
         description: Descripción
         id: Idd

src/router/modules/account.js

@@ -54,17 +54,6 @@ export default {
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
                 },
-
-                {
-                    name: 'RoleCreate',
-                    path: 'create',
-                    meta: {
-                        title: 'roleCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Account/Role/Card/RoleForm.vue'),
-                },
-
                 {
                     path: 'alias',
                     name: 'AccountAlias',