From f453f42b06759902cfd6a04b911d0752169265ed Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 19:37:53 +0200
Subject: [PATCH] feat: New and edit ACL from Popup

---
 src/components/FormModelPopup.vue      |   1 +
 src/pages/Account/AccountAcls.vue      |  24 +++-
 src/pages/Account/Acls/AclFormView.vue | 174 ++++++++++++-------------
 3 files changed, 106 insertions(+), 93 deletions(-)

diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 25213a8b7..06aa1d891 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -65,6 +65,7 @@ defineExpose({
         :observe-form-changes="false"
         :default-actions="false"
         :url-create="urlCreate"
+        :url="url"
         :model="model"
         @on-data-saved="onDataSaved"
     >
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index ac21861a7..5be6be1d4 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -13,6 +13,7 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import AclFormView from './Acls/AclFormView.vue';
 
 defineProps({
     id: {
@@ -28,6 +29,7 @@ const stateStore = useStateStore();
 const { openConfirmationModal } = useVnConfirm();
 
 const paginateRef = ref(null);
+const formDialog = ref(false);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -48,8 +50,16 @@ const deleteAcl = async (id) => {
     }
 };
 
-const redirectToAclsForm = (id = undefined) =>
-    router.push({ name: 'AccountAclForm', query: { id } });
+function showFormDialog(id = null) {
+    formDialog.value = {
+        show: true,
+        id,
+        ur: `ACLs/${id}`,
+    };
+}
+
+const redirectToAclsForm = (id = undefined) => showFormDialog(id);
+// router.push({ name: 'AccountAclForm', query: { id } });
 </script>
 
 <template>
@@ -69,6 +79,7 @@ const redirectToAclsForm = (id = undefined) =>
             <AclFilter data-key="AccountAcls" />
         </QScrollArea>
     </QDrawer>
+
     <QPage class="flex justify-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
@@ -112,8 +123,15 @@ const redirectToAclsForm = (id = undefined) =>
                 </template>
             </VnPaginate>
         </div>
+        <QDialog
+            v-model="formDialog.show"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <AclFormView :id="formDialog.id" />
+        </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="redirectToAclsForm()">
+            <QBtn fab icon="add" color="primary" @click="showFormDialog()">
                 <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
             </QBtn>
         </QPageSticky>
diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index 2e3c28b71..e14744564 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount, onMounted, computed } from 'vue';
+import { ref, onBeforeMount, onMounted, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -31,11 +32,17 @@ const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
 const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
 const validations = ref([]);
 
-const id = computed(() => route.query.id || null);
 const url = ref(null);
 const urlCreate = ref(null);
 const urlUpdate = ref(null);
-
+const action = ref('New');
+const $props = defineProps({
+    id: {
+        type: Object,
+        default: null,
+    },
+});
+const { id } = toRefs($props);
 const redirectToAclList = () => router.push({ name: 'AccountAcls' });
 
 const onDataSaved = () => {
@@ -50,8 +57,11 @@ onBeforeMount(() => {
 onMounted(() => {
     url.value = id.value ? `ACLs/${id.value}` : null;
 
-    if (url.value) urlUpdate.value = 'ACLs';
-    else {
+    if (url.value) {
+        urlUpdate.value = 'ACLs';
+        action.value = 'Edit';
+    } else {
+        url.value = null;
         defaultFormData.value = {
             property: '*',
             principalType: 'ROLE',
@@ -70,89 +80,73 @@ onMounted(() => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAcls"
-                url="ACLs"
-                :expr-builder="exprBuilder"
-                :label="t('acls.search')"
-                :info="t('acls.searchInfo')"
-                custom-route-redirect-name="AccountAcls"
-            />
-        </Teleport>
-    </template>
-    <QPage class="column items-center full-width">
-        <VnSubToolbar />
-        <FormModel
-            v-if="urlCreate || urlUpdate"
-            :url="url"
-            :url-update="urlUpdate"
-            :url-create="urlCreate"
-            :form-initial-data="defaultFormData"
-            auto-load
-            model="aclCreate"
-            @on-data-saved="onDataSaved()"
-        >
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.principalId')"
-                        v-model="data.principalId"
-                        :options="rolesOptions"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.model')"
-                        v-model="data.model"
-                        :options="validations"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnInput
-                        :label="t('acls.aclFilter.property')"
-                        v-model="data.property"
-                        lazy-rules
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template></VnInput
-                    >
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.accessType')"
-                        v-model="data.accessType"
-                        :options="accessTypes"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.permission')"
-                        v-model="data.permission"
-                        :options="permissions"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
+    <FormModelPopup
+        :title="t(`${action} ACL`)"
+        :url="url"
+        :url-update="urlUpdate"
+        :url-create="urlCreate"
+        auto-load
+        model="aclCreate"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.principalId')"
+                    v-model="data.principalId"
+                    :options="rolesOptions"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.model')"
+                    v-model="data.model"
+                    :options="validations"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    :label="t('acls.aclFilter.property')"
+                    v-model="data.property"
+                    lazy-rules
+                >
+                    <template #append>
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
+                        </QIcon>
+                    </template></VnInput
+                >
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.accessType')"
+                    v-model="data.accessType"
+                    :options="accessTypes"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.permission')"
+                    v-model="data.permission"
+                    :options="permissions"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
 </template>