feat: newRole

src/i18n/locale/en.yml

@@ -1249,12 +1249,6 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
-role:
-    pageTitles:
-        role: Zones
-        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
 
 components:
     topbar: {}

src/pages/Account/Role/AccountRoles.vue

@@ -70,10 +70,15 @@ function navigate(event, id) {
             </VnPaginate>
         </div>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
+            <RouterLink :to="{ name: 'RoleCreate' }">
+                <QBtn fab icon="add" color="primary" />
                 <QTooltip>
-                {{ t('New client') }}
-            </QTooltip>
+                    {{ t('role.pageTitles.roleCreate') }}
+                </QTooltip></RouterLink
+            >
         </QPageSticky>
     </QPage>
 </template>
+<i18n>
+    New rol: Nuevo role
+</i18n>

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

@@ -0,0 +1,44 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const route = useRoute();
+const { t } = useI18n();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    name: null,
+    description: null,
+};
+</script>
+<template>
+    <VnSubToolbar />
+    <FormModel
+        :url="isNew ? null : `VnRoles/${route.params.id}`"
+        :url-create="isNew ? 'VnRoles' : null"
+        :observe-form-changes="!isNew"
+        model="VnRole"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+        @on-data-saved="onSave"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput v-model="data.name" :label="t('role.card.name')" />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.description"
+                        :label="t('role.card.description')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Account/locale/en.yml

@@ -11,6 +11,7 @@ account:
         connections: Connections
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
+        roleCreate: New role
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
@@ -35,6 +36,7 @@ role:
     pageTitles:
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
+
     card:
         description: Description
         id: Id

src/pages/Account/locale/es.yml

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

src/router/modules/account.js

@@ -53,19 +53,18 @@ export default {
                         icon: 'group',
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
-                    children: [
+                },
+
                 {
                     name: 'RoleCreate',
                     path: 'create',
                     meta: {
-                                title: 'RoleCreate',
+                        title: 'roleCreate',
                         icon: 'add',
                     },
-                            component: () =>
-                                import('src/pages/Account/Role/AccountRoles.vue'),
-                        },
-                    ],
+                    component: () => import('src/pages/Account/Role/Card/RoleForm.vue'),
                 },
+
                 {
                     path: 'alias',
                     name: 'AccountAlias',