From 67b3888f8c8c16b446434321f34dd50f9f0ab015 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 31 May 2024 10:10:15 +0200
Subject: [PATCH] feat: AccountForm as dialog

---
 src/pages/Account/AccountCreate.vue | 165 +++++++++++++---------------
 src/pages/Account/AccountList.vue   |  22 ++--
 2 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 204c8ffeb..486a9b06b 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -3,19 +3,14 @@ import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import FormModel from 'components/FormModel.vue';
+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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-
 const { t } = useI18n();
 const router = useRouter();
-const stateStore = useStateStore();
 
 const newAccountForm = reactive({
     active: true,
@@ -34,89 +29,77 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountList"
-                url="VnUsers/preview"
-                :label="t('account.search')"
-                :info="t('account.searchInfo')"
-                custom-route-redirect-name="AccountList"
-            />
-        </Teleport>
-    </template>
-    <QPage>
-        <VnSubToolbar />
-        <FormModel
-            url-create="VnUsers"
-            model="users"
-            :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
-        >
-            <template #form="{ 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>
-            </template>
-        </FormModel>
-    </QPage>
+
+    <FormModelPopup
+        :title="t('account.card.newUser')"
+        url-create="VnUsers"
+        model="users"
+        :form-initial-data="newAccountForm"
+        @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>
+        </template>
+    </FormModelPopup>
 </template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index de9a13300..dee019fed 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -9,18 +9,19 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import AccountFilter from './AccountFilter.vue';
+import AccountCreate from './AccountCreate.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
 import { useRole } from 'src/composables/useRole';
+import { QDialog } from 'quasar';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const roleState = useRole();
-
-const isItManagement = computed(() => roleState.hasAny(['itManagement']));
+const accountCreateDialogRef = ref(null);
+const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
 
 const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
@@ -54,7 +55,7 @@ const navigate = (event, id) => {
     router.push({ path: `/account/${id}` });
 };
 
-const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
+const openCreateModal = () => accountCreateDialogRef.value.show();
 </script>
 
 <template>
@@ -126,8 +127,15 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
                 </template>
             </VnPaginate>
         </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+        <QDialog
+            ref="accountCreateDialogRef"
+            transition-hide="scale"
+            transition-show="scale"
+        >
+            <AccountCreate />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
+            <QBtn @click="openCreateModal" color="primary" fab icon="add" />
             <QTooltip class="text-no-wrap">
                 {{ t('account.card.newUser') }}
             </QTooltip>