feat: New and edit ACL from Popup

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"
     >

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>

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,31 +80,16 @@ 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"
+    <FormModelPopup
+        :title="t(`${action} ACL`)"
         :url="url"
         :url-update="urlUpdate"
         :url-create="urlCreate"
-            :form-initial-data="defaultFormData"
         auto-load
         model="aclCreate"
         @on-data-saved="onDataSaved()"
     >
-            <template #form="{ data }">
+        <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.principalId')"
@@ -153,6 +148,5 @@ onMounted(() => {
                 />
             </VnRow>
         </template>
-        </FormModel>
-    </QPage>
+    </FormModelPopup>
 </template>