wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: New and edit ACL from Popup

This commit is contained in:
Javier Segarra 2024-06-05 19:37:53 +02:00
parent 807460dfad
commit f453f42b06
3 changed files with 106 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/FormModelPopup.vue
View File

@ -65,6 +65,7 @@ defineExpose({
:observe-form-changes="false" :observe-form-changes="false"
:default-actions="false" :default-actions="false"
:url-create="urlCreate" :url-create="urlCreate"
:url="url"
:model="model" :model="model"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved"
> >

24
src/pages/Account/AccountAcls.vue
View File

@ -13,6 +13,7 @@ import { useVnConfirm } from 'composables/useVnConfirm';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import AclFormView from './Acls/AclFormView.vue';
defineProps({ defineProps({
id: { id: {
@ -28,6 +29,7 @@ const stateStore = useStateStore();
const { openConfirmationModal } = useVnConfirm(); const { openConfirmationModal } = useVnConfirm();
const paginateRef = ref(null); const paginateRef = ref(null);
const formDialog = ref(false);
const exprBuilder = (param, value) => { const exprBuilder = (param, value) => {
switch (param) { switch (param) {
@ -48,8 +50,16 @@ const deleteAcl = async (id) => {
} }
}; };
const redirectToAclsForm = (id = undefined) => function showFormDialog(id = null) {
router.push({ name: 'AccountAclForm', query: { id } }); formDialog.value = {
show: true,
id,
ur: `ACLs/${id}`,
};
}
const redirectToAclsForm = (id = undefined) => showFormDialog(id);
// router.push({ name: 'AccountAclForm', query: { id } });
</script> </script>
<template> <template>
@ -69,6 +79,7 @@ const redirectToAclsForm = (id = undefined) =>
<AclFilter data-key="AccountAcls" /> <AclFilter data-key="AccountAcls" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<QPage class="flex justify-center q-pa-md"> <QPage class="flex justify-center q-pa-md">
<div class="vn-card-list"> <div class="vn-card-list">
<VnPaginate <VnPaginate
@ -112,8 +123,15 @@ const redirectToAclsForm = (id = undefined) =>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>
<QDialog
v-model="formDialog.show"
transition-show="scale"
transition-hide="scale"
>
<AclFormView :id="formDialog.id" />
</QDialog>
<QPageSticky position="bottom-right" :offset="[18, 18]"> <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> <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
</QBtn> </QBtn>
</QPageSticky> </QPageSticky>

174
src/pages/Account/Acls/AclFormView.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; 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 { useRoute, useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue'; 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 FormModel from 'components/FormModel.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
@ -31,11 +32,17 @@ const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }]; const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
const validations = ref([]); const validations = ref([]);
const id = computed(() => route.query.id || null);
const url = ref(null); const url = ref(null);
const urlCreate = ref(null); const urlCreate = ref(null);
const urlUpdate = 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 redirectToAclList = () => router.push({ name: 'AccountAcls' });
const onDataSaved = () => { const onDataSaved = () => {
@ -50,8 +57,11 @@ onBeforeMount(() => {
onMounted(() => { onMounted(() => {
url.value = id.value ? `ACLs/${id.value}` : null; url.value = id.value ? `ACLs/${id.value}` : null;
if (url.value) urlUpdate.value = 'ACLs'; if (url.value) {
else { urlUpdate.value = 'ACLs';
action.value = 'Edit';
} else {
url.value = null;
defaultFormData.value = { defaultFormData.value = {
property: '*', property: '*',
principalType: 'ROLE', principalType: 'ROLE',
@ -70,89 +80,73 @@ onMounted(() => {
@on-fetch="(data) => (rolesOptions = data)" @on-fetch="(data) => (rolesOptions = data)"
auto-load auto-load
/> />
<template v-if="stateStore.isHeaderMounted()"> <FormModelPopup
<Teleport to="#searchbar"> :title="t(`${action} ACL`)"
<VnSearchbar :url="url"
data-key="AccountAcls" :url-update="urlUpdate"
url="ACLs" :url-create="urlCreate"
:expr-builder="exprBuilder" auto-load
:label="t('acls.search')" model="aclCreate"
:info="t('acls.searchInfo')" @on-data-saved="onDataSaved()"
custom-route-redirect-name="AccountAcls" >
/> <template #form-inputs="{ data }">
</Teleport> <VnRow class="row q-gutter-md q-mb-md">
</template> <VnSelect
<QPage class="column items-center full-width"> :label="t('acls.aclFilter.principalId')"
<VnSubToolbar /> v-model="data.principalId"
<FormModel :options="rolesOptions"
v-if="urlCreate || urlUpdate" option-value="name"
:url="url" option-label="name"
:url-update="urlUpdate" use-input
:url-create="urlCreate" rounded
:form-initial-data="defaultFormData" />
auto-load </VnRow>
model="aclCreate" <VnRow class="row q-gutter-md q-mb-md">
@on-data-saved="onDataSaved()" <VnSelect
> :label="t('acls.aclFilter.model')"
<template #form="{ data }"> v-model="data.model"
<VnRow class="row q-gutter-md q-mb-md"> :options="validations"
<VnSelect option-value="name"
:label="t('acls.aclFilter.principalId')" option-label="name"
v-model="data.principalId" use-input
:options="rolesOptions" rounded
option-value="name" />
option-label="name" </VnRow>
use-input <VnRow class="row q-gutter-md q-mb-md">
rounded <VnInput
/> :label="t('acls.aclFilter.property')"
</VnRow> v-model="data.property"
<VnRow class="row q-gutter-md q-mb-md"> lazy-rules
<VnSelect >
:label="t('acls.aclFilter.model')" <template #append>
v-model="data.model" <QIcon name="info" class="cursor-pointer">
:options="validations" <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
option-value="name" </QIcon>
option-label="name" </template></VnInput
use-input >
rounded </VnRow>
/> <VnRow class="row q-gutter-md q-mb-md">
</VnRow> <VnSelect
<VnRow class="row q-gutter-md q-mb-md"> :label="t('acls.aclFilter.accessType')"
<VnInput v-model="data.accessType"
:label="t('acls.aclFilter.property')" :options="accessTypes"
v-model="data.property" option-value="name"
lazy-rules option-label="name"
> use-input
<template #append> rounded
<QIcon name="info" class="cursor-pointer"> />
<QTooltip>{{ t('acls.tooltip') }}</QTooltip> </VnRow>
</QIcon> <VnRow class="row q-gutter-md q-mb-md">
</template></VnInput <VnSelect
> :label="t('acls.aclFilter.permission')"
</VnRow> v-model="data.permission"
<VnRow class="row q-gutter-md q-mb-md"> :options="permissions"
<VnSelect option-value="name"
:label="t('acls.aclFilter.accessType')" option-label="name"
v-model="data.accessType" use-input
:options="accessTypes" rounded
option-value="name" />
option-label="name" </VnRow>
use-input </template>
rounded </FormModelPopup>
/>
</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>
</template> </template>