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>