From ae75908e46e13f8dfbd242fc856836bb30c9c9df Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 18 Jun 2024 10:53:21 +0200
Subject: [PATCH] refactor: simplify code

---
 src/pages/Account/AccountCreate.vue          | 104 +++++++------------
 src/pages/Account/Card/AccountBasicData.vue  |  34 ++----
 src/pages/Account/Card/AccountPrivileges.vue |  73 +++++--------
 3 files changed, 78 insertions(+), 133 deletions(-)

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 486a9b06b..1c0f9fee6 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -29,7 +28,6 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-
     <FormModelPopup
         :title="t('account.card.newUser')"
         url-create="VnUsers"
@@ -38,68 +36,46 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-data-saved="redirectToAccountBasicData"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.name"
-                        :label="t('account.create.name')"
-                        :rules="validate('VnUser.name')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.nickname"
-                        :label="t('account.create.nickname')"
-                        :rules="validate('VnUser.nickname')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.email"
-                        :label="t('account.create.email')"
-                        type="email"
-                        :rules="validate('VnUser.email')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelect
-                        :label="t('account.create.role')"
-                        v-model="data.roleFk"
-                        :options="rolesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                        :rules="validate('VnUser.roleFk')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.password"
-                        :label="t('account.create.password')"
-                        type="password"
-                        :rules="validate('VnUser.password')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('account.create.active')"
-                        v-model="data.active"
-                        :toggle-indeterminate="false"
-                        :rules="validate('VnUser.active')"
-                    />
-                </div>
-            </VnRow>
+            <div class="column q-gutter-sm">
+                <VnInput
+                    v-model="data.name"
+                    :label="t('account.create.name')"
+                    :rules="validate('VnUser.name')"
+                />
+                <VnInput
+                    v-model="data.nickname"
+                    :label="t('account.create.nickname')"
+                    :rules="validate('VnUser.nickname')"
+                />
+                <VnInput
+                    v-model="data.email"
+                    :label="t('account.create.email')"
+                    type="email"
+                    :rules="validate('VnUser.email')"
+                />
+                <VnSelect
+                    :label="t('account.create.role')"
+                    v-model="data.roleFk"
+                    :options="rolesOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                    :rules="validate('VnUser.roleFk')"
+                />
+                <VnInput
+                    v-model="data.password"
+                    :label="t('account.create.password')"
+                    type="password"
+                    :rules="validate('VnUser.password')"
+                />
+                <QCheckbox
+                    :label="t('account.create.active')"
+                    v-model="data.active"
+                    :toggle-indeterminate="false"
+                    :rules="validate('VnUser.active')"
+                />
+            </div>
         </template>
     </FormModelPopup>
 </template>
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 067c9c287..3a9d5c9bf 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -33,30 +33,16 @@ watch(
         @on-data-saved="formModelRef.fetch()"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.name" :label="t('account.card.nickname')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.email" :label="t('account.card.email')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelect
-                        v-model="data.lang"
-                        :options="['es', 'en']"
-                        :label="t('account.card.lang')"
-                    />
-                </div>
-            </VnRow>
+            <div class="q-gutter-y-sm">
+                <VnInput v-model="data.name" :label="t('account.card.nickname')" />
+                <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
+                <VnInput v-model="data.email" :label="t('account.card.email')" />
+                <VnSelect
+                    v-model="data.lang"
+                    :options="['es', 'en']"
+                    :label="t('account.card.lang')"
+                />
+            </div>
         </template>
     </FormModel>
 </template>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
index 64efb3cda..f1f24f19b 100644
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -1,24 +1,17 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
-const loading = ref(false);
 const rolesOptions = ref([]);
-const formModelRef = ref(null);
-
-watch(
-    () => route.params.id,
-    () => formModelRef.value.reset()
-);
+const formModelRef = ref();
 </script>
 <template>
     <FetchData
@@ -27,40 +20,30 @@ watch(
         auto-load
         @on-fetch="(data) => (rolesOptions = data)"
     />
-    <div class="flex justify-center">
-        <QSpinner v-if="loading" color="primary" size="md" />
-        <FormModel
-            v-else
-            ref="formModelRef"
-            model="AccountPrivileges"
-            :url="`VnUsers/${route.params.id}`"
-            :url-create="`VnUsers/${route.params.id}/privileges`"
-            auto-load
-            @on-data-saved="formModelRef.fetch()"
-        >
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            v-model="data.hasGrant"
-                            :label="t('account.card.privileges.delegate')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('account.card.role')"
-                            v-model="data.roleFk"
-                            :options="rolesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            :required="true"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </div>
+    <FormModel
+        ref="formModelRef"
+        model="AccountPrivileges"
+        :url="`VnUsers/${route.params.id}`"
+        :url-create="`VnUsers/${route.params.id}/privileges`"
+        auto-load
+        @on-data-saved="formModelRef.fetch()"
+    >
+        <template #form="{ data }">
+            <div class="q-gutter-y-sm">
+                <QCheckbox
+                    v-model="data.hasGrant"
+                    :label="t('account.card.privileges.delegate')"
+                />
+                <VnSelect
+                    :label="t('account.card.role')"
+                    v-model="data.roleFk"
+                    :options="rolesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    :required="true"
+                />
+            </div>
+        </template>
+    </FormModel>
 </template>