From 06664cc2d051007f122032906faa594ded9ce83e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 23 May 2024 08:52:57 +0200
Subject: [PATCH] feat: newRole

---
 src/i18n/locale/en.yml                   |  6 ----
 src/pages/Account/Role/AccountRoles.vue  | 13 ++++---
 src/pages/Account/Role/Card/RoleForm.vue | 44 ++++++++++++++++++++++++
 src/pages/Account/locale/en.yml          |  2 ++
 src/pages/Account/locale/es.yml          |  2 ++
 src/router/modules/account.js            | 23 ++++++-------
 6 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/Account/Role/Card/RoleForm.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index f736bb0f7..657fbf9b1 100644
--- a/src/i18n/locale/en.yml
+++ b/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: {}
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index f90c833f6..7018f4a17 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/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" />
-            <QTooltip>
-                {{ t('New client') }}
-            </QTooltip>
+            <RouterLink :to="{ name: 'RoleCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('role.pageTitles.roleCreate') }}
+                </QTooltip></RouterLink
+            >
         </QPageSticky>
     </QPage>
 </template>
+<i18n>
+    New rol: Nuevo role
+</i18n>
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
new file mode 100644
index 000000000..6143239d9
--- /dev/null
+++ b/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>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 6ef3fdc17..993299e75 100644
--- a/src/pages/Account/locale/en.yml
+++ b/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
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index fbae7918a..c0bdaa151 100644
--- a/src/pages/Account/locale/es.yml
+++ b/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
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index ff4eaa69c..6dc2825b3 100644
--- a/src/router/modules/account.js
+++ b/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',
-                                icon: 'add',
-                            },
-                            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',