fix(AccountAcls): fix and optimization

src/components/FormModelPopup.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FormModel from 'components/FormModel.vue';
 
-const emit = defineEmits(['onDataSaved']);
+const emit = defineEmits(['onDataSaved', 'onDataCanceled']);
 
 defineProps({
     title: {
@@ -15,26 +15,6 @@ defineProps({
         type: String,
         default: '',
     },
-    url: {
-        type: String,
-        default: '',
-    },
-    model: {
-        type: String,
-        default: '',
-    },
-    filter: {
-        type: Object,
-        default: null,
-    },
-    urlCreate: {
-        type: String,
-        default: null,
-    },
-    formInitialData: {
-        type: Object,
-        default: () => {},
-    },
 });
 
 const { t } = useI18n();
@@ -43,8 +23,8 @@ const formModelRef = ref(null);
 const closeButton = ref(null);
 
 const onDataSaved = (formData, requestResponse) => {
-    emit('onDataSaved', formData, requestResponse);
     closeForm();
+    emit('onDataSaved', formData, requestResponse);
 };
 
 const isLoading = computed(() => formModelRef.value?.isLoading);
@@ -61,12 +41,9 @@ defineExpose({
 <template>
     <FormModel
         ref="formModelRef"
-        :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :default-actions="false"
-        :url-create="urlCreate"
+        v-bind="$attrs"
-        :url="url"
-        :model="model"
         @on-data-saved="onDataSaved"
     >
         <template #form="{ data, validate }">
@@ -85,6 +62,7 @@ defineExpose({
                     flat
                     :disabled="isLoading"
                     :loading="isLoading"
+                    @click="emit('onDataCanceled')"
                     v-close-popup
                 />
                 <QBtn

src/pages/Account/AccountAcls.vue

@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
 
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -24,12 +25,12 @@ defineProps({
 
 const { notify } = useNotify();
 const { t } = useI18n();
-const router = useRouter();
 const stateStore = useStateStore();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
+const paginateRef = ref();
 const formDialog = ref(false);
+const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -50,19 +51,21 @@ const deleteAcl = async (id) => {
     }
 };
 
-function showFormDialog(id = null) {
+function showFormDialog(data) {
     formDialog.value = {
         show: true,
-        id,
+        formInitialData: data,
-        ur: `ACLs/${id}`,
     };
 }
-
-const redirectToAclsForm = (id = undefined) => showFormDialog(id);
-// router.push({ name: 'AccountAclForm', query: { id } });
 </script>
 
 <template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
@@ -86,7 +89,6 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
                 ref="paginateRef"
                 data-key="AccountAcls"
                 url="ACLs"
-                auto-load
                 :expr-builder="exprBuilder"
             >
                 <template #body="{ rows }">
@@ -95,7 +97,7 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
                         :id="row.id"
                         :key="row.id"
                         :title="`${row.model}.${row.property}`"
-                        @click="redirectToAclsForm(row.id)"
+                        @click="showFormDialog(row)"
                     >
                         <template #list-items>
                             <VnLv :label="t('acls.role')" :value="row.principalId" />
@@ -128,7 +130,11 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
             transition-show="scale"
             transition-hide="scale"
         >
-            <AclFormView :id="formDialog.id" />
+            <AclFormView
+                :form-initial-data="formDialog.formInitialData"
+                @on-data-change="paginateRef.fetch()"
+                :roles-options="rolesOptions"
+            />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn fab icon="add" color="primary" @click="showFormDialog()">

src/pages/Account/Acls/AclFormView.vue

@@ -1,103 +1,86 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount, onMounted, toRefs } from 'vue';
+import { ref, onBeforeMount, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
 
+const emit = defineEmits(['onDataChange']);
 const { t } = useI18n();
-const router = useRouter();
-const arrayData = useArrayData('aclCreate');
-const { store } = arrayData;
 const validationsStore = useValidator();
 const { models } = validationsStore;
+const arrayData = useArrayData('aclCreate');
+const { store } = arrayData;
 
-const defaultFormData = ref(null);
-
-const rolesOptions = ref([]);
 const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
 const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
 const validations = ref([]);
 
-const url = ref(null);
+const url = ref();
-const urlCreate = ref(null);
+const urlCreate = ref('ACLs');
-const urlUpdate = ref(null);
+const urlUpdate = ref();
 const action = ref('New');
+
 const $props = defineProps({
-    id: {
+    formInitialData: {
         type: Object,
-        default: null,
+        default: () => {
+            return {
+                property: '*',
+                principalType: 'ROLE',
+                accessType: 'READ',
+                permission: 'ALLOW',
+            };
+        },
+    },
+    rolesOptions: {
+        type: Array,
+        required: true,
     },
 });
-const { id } = toRefs($props);
-const redirectToAclList = () => router.push({ name: 'AccountAcls' });
-
-const onDataSaved = () => {
-    store.data = undefined;
-    redirectToAclList();
-};
 
 onBeforeMount(() => {
     for (let model in models) validations.value.push({ name: model });
 });
 
 onMounted(() => {
-    url.value = id.value ? `ACLs/${id.value}` : null;
+    store.data = $props.formInitialData;
-
+    if ($props.formInitialData.id) {
-    if (url.value) {
+        urlCreate.value = null;
         urlUpdate.value = 'ACLs';
         action.value = 'Edit';
-    } else {
-        url.value = null;
-        defaultFormData.value = {
-            property: '*',
-            principalType: 'ROLE',
-            accessType: 'READ',
-            permission: 'ALLOW',
-        };
-        urlCreate.value = 'ACLs';
     }
 });
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
     <FormModelPopup
         v-if="urlCreate || urlUpdate"
         :title="t(`${action} ACL`)"
         :url="url"
         :url-update="urlUpdate"
         :url-create="urlCreate"
-        :form-initial-data="defaultFormData"
+        :form-initial-data="formInitialData"
         auto-load
         model="aclCreate"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="emit('onDataChange')"
+        @on-data-canceled="emit('onDataChange')"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <div class="column q-gutter-y-md">
                 <VnSelect
                     :label="t('acls.aclFilter.principalId')"
                     v-model="data.principalId"
-                    :options="rolesOptions"
+                    :options="$props.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"
@@ -107,8 +90,7 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
+
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
                     :label="t('acls.aclFilter.property')"
                     v-model="data.property"
@@ -120,8 +102,6 @@ onMounted(() => {
                         </QIcon>
                     </template></VnInput
                 >
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.accessType')"
                     v-model="data.accessType"
@@ -131,8 +111,6 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.permission')"
                     v-model="data.permission"
@@ -142,7 +120,7 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
+            </div>
         </template>
     </FormModelPopup>
 </template>