salix-front/src/pages/Account/Acls/AclFormView.vue

149 lines
4.5 KiB
Vue

<script setup>
import { useI18n } from 'vue-i18n';
import { ref, onBeforeMount, onMounted, toRefs } 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 { t } = useI18n();
const router = useRouter();
const arrayData = useArrayData('aclCreate');
const { store } = arrayData;
const validationsStore = useValidator();
const { models } = validationsStore;
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 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 = () => {
store.data = undefined;
redirectToAclList();
};
onBeforeMount(() => {
for (let model in models) validations.value.push({ name: model });
});
onMounted(() => {
url.value = id.value ? `ACLs/${id.value}` : null;
if (url.value) {
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"
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>