Account ACLs

src/i18n/locale/en.yml

@@ -17,6 +17,7 @@ globals:
     date: Date
     dataSaved: Data saved
     dataDeleted: Data deleted
+    delete: Delete
     search: Search
     changes: Changes
     dataCreated: Data created

src/i18n/locale/es.yml

@@ -17,6 +17,7 @@ globals:
     date: Fecha
     dataSaved: Datos guardados
     dataDeleted: Datos eliminados
+    delete: Eliminar
     search: Buscar
     changes: Cambios
     dataCreated: Datos creados

src/pages/Account/AccountAcls.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import AclFilter from './Acls/AclFilter.vue';
+
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return { model: { like: `%${value}%` } };
+        default:
+            return { [param]: value };
+    }
+};
+
+const deleteAcl = async (id) => {
+    try {
+        await axios.delete(`ACLs/${id}`);
+        paginateRef.value.fetch();
+        notify('ACL removed', 'positive');
+    } catch (error) {
+        console.error('Error deleting Acl: ', error);
+    }
+};
+
+const redirectToAclsForm = (id = undefined) =>
+    router.push({ name: 'AccountAclForm', query: { id } });
+</script>
+
+<template>
+    <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')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AclFilter data-key="AccountAcls" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="flex justify-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="AccountAcls"
+                url="ACLs"
+                auto-load
+                :expr-builder="exprBuilder"
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :id="row.id"
+                        :key="row.id"
+                        :title="`${row.model}.${row.property}`"
+                        @click="redirectToAclsForm(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('acls.role')" :value="row.principalId" />
+                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
+                            <VnLv
+                                :label="t('acls.permissions')"
+                                :value="row.permission"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.delete')"
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('ACL will be removed'),
+                                        t('Are you sure you want to continue?'),
+                                        () => deleteAcl(row.id)
+                                    )
+                                "
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="add" color="primary" @click="redirectToAclsForm()">
+                <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    New ACL: Nuevo ACL
+    ACL removed: ACL eliminado
+    ACL will be removed: El ACL será eliminado
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+</i18n>

src/pages/Account/AccountAliasList.vue

@@ -1,106 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import AliasSummary from './Alias/Card/AliasSummary.vue';
-import AliasCreateForm from './Alias/AliasCreateForm.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useStateStore } from 'stores/useStateStore';
-
-defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-const router = useRouter();
-const stateStore = useStateStore();
-const aliasCreateDialogRef = ref(null);
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
-
-const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
-
-const openCreateModal = () => aliasCreateDialogRef.value.show();
-</script>
-
-<template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-                :label="t('mailAlias.search')"
-                :info="t('mailAlias.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAliasList"
-                url="MailAliases"
-                auto-load
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.alias"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
-                            </VnLv>
-                            <VnLv
-                                :label="t('mailAlias.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AliasSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="aliasCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AliasCreateForm />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
-</template>

src/pages/Account/Acls/AclFilter.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useValidator } from 'src/composables/useValidator';
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+const validationsStore = useValidator();
+const { models } = validationsStore;
+
+const validations = ref([]);
+const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
+const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
+const rolesOptions = ref([]);
+
+onBeforeMount(() => {
+    for (let model in models) validations.value.push({ name: model });
+});
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`acls.aclFilter.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.principalId')"
+                        v-model="params.principalId"
+                        @update:model-value="searchFn()"
+                        :options="rolesOptions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.model')"
+                        v-model="params.model"
+                        @update:model-value="searchFn()"
+                        :options="validations"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('acls.aclFilter.property')"
+                        v-model="params.property"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.accessType')"
+                        v-model="params.accessType"
+                        @update:model-value="searchFn()"
+                        :options="accessTypes"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.permission')"
+                        v-model="params.permission"
+                        @update:model-value="searchFn()"
+                        :options="permissions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>

src/pages/Account/Acls/AclFormView.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, onBeforeMount, onMounted, computed } 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 FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useValidator } from 'src/composables/useValidator';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const { t } = useI18n();
+const route = useRoute();
+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 id = computed(() => route.query.id || null);
+const url = ref(null);
+const urlCreate = ref(null);
+const urlUpdate = ref(null);
+
+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';
+    else {
+        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
+    />
+    <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
+                    />
+                </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>
+</template>

src/pages/Account/Alias/AliasCreateForm.vue

@@ -1,57 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-
-const router = useRouter();
-const { t } = useI18n();
-const arrayData = useArrayData('AliasCreate');
-const { store } = arrayData;
-
-const defaultInitialData = {
-    alias: null,
-    description: null,
-};
-
-const onDataSaved = ({ id }) => {
-    router.push({ name: 'AliasBasicData', params: { id } });
-    store.data = null;
-};
-</script>
-
-<template>
-    <FormModelPopup
-        :title="t('Create alias')"
-        ref="formModelPopupRef"
-        url-create="MailAliases"
-        model="AliasCreate"
-        :form-initial-data="defaultInitialData"
-        @on-data-saved="onDataSaved"
-    >
-        <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('mailAlias.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModelPopup>
-</template>
-
-<i18n>
-    es:
-        Create alias: Crear alias
-</i18n>

src/pages/Account/Alias/Card/AliasBasicData.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-const route = useRoute();
-const { t } = useI18n();
-</script>
-
-<template>
-    <FormModel :url="`MailAliases/${route.params.id}`" model="Alias" auto-load>
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('mailAlias.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
-</template>

src/pages/Account/Alias/Card/AliasCard.vue

@@ -1,32 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-
-import VnCard from 'components/common/VnCard.vue';
-import AliasDescriptor from './AliasDescriptor.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    return routeName.value;
-});
-const searchBarDataKeys = {
-    AliasBasicData: 'AliasBasicData',
-    AliasUsers: 'AliasUsers',
-};
-</script>
-
-<template>
-    <VnCard
-        data-key="Alias"
-        :descriptor="AliasDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
-        :search-custom-route-redirect="customRouteRedirectName"
-        :search-redirect="!!customRouteRedirectName"
-        :searchbar-label="t('mailAlias.search')"
-        :searchbar-info="t('mailAlias.searchInfo')"
-    />
-</template>

src/pages/Account/Alias/Card/AliasDescriptor.vue

@@ -1,93 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-
-import useCardDescription from 'src/composables/useCardDescription';
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-
-const { t } = useI18n();
-const route = useRoute();
-const quasar = useQuasar();
-const router = useRouter();
-const { notify } = useNotify();
-
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.alias, entity.id));
-
-const filter = {
-    where: { id: entityId },
-};
-
-const removeAlias = () => {
-    quasar
-        .dialog({
-            title: t('Alias will be removed'),
-            message: t('Are you sure you want to continue?'),
-            ok: {
-                push: true,
-                color: 'primary',
-            },
-            cancel: true,
-        })
-        .onOk(async () => {
-            try {
-                await axios.delete(`MailAliases/${entityId.value}`);
-                notify(t('Alias removed'), 'positive');
-                router.push({ name: 'AccountAlias' });
-            } catch (err) {
-                console.error('Error removing alias');
-            }
-        });
-};
-</script>
-
-<template>
-    <CardDescriptor
-        ref="descriptor"
-        url="MailAliases"
-        :filter="filter"
-        module="Account"
-        @on-fetch="setData"
-        data-key="aliasData"
-        :title="data.title"
-        :subtitle="data.subtitle"
-    >
-        <template #menu>
-            <QItem v-ripple clickable @click="removeAlias()">
-                <QItemSection>{{ t('Delete') }}</QItemSection>
-            </QItem>
-        </template>
-        <template #body="{ entity }">
-            <VnLv :label="t('mailAlias.description')" :value="entity.description" />
-        </template>
-    </CardDescriptor>
-</template>
-
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
-        Delete: Eliminar
-        Alias will be removed: El alias será eliminado
-        Are you sure you want to continue?: ¿Seguro que quieres continuar?
-        Alias removed: Alias eliminado
-</i18n>

src/pages/Account/Alias/Card/AliasSummary.vue

@@ -1,49 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-
-const route = useRoute();
-const { t } = useI18n();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const { store } = useArrayData('Alias');
-const alias = ref(store.data);
-const entityId = computed(() => $props.id || route.params.id);
-</script>
-
-<template>
-    <CardSummary
-        ref="summary"
-        :url="`MailAliases/${entityId}`"
-        @on-fetch="(data) => (alias = data)"
-    >
-        <template #header> {{ alias.id }} - {{ alias.alias }} </template>
-        <template #body>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <router-link
-                        :to="{ name: 'AliasBasicData', params: { id: entityId } }"
-                        class="header header-link"
-                    >
-                        {{ t('globals.summary.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </router-link>
-                </QCardSection>
-                <VnLv :label="t('mailAlias.id')" :value="alias.id" />
-                <VnLv :label="t('mailAlias.description')" :value="alias.description" />
-            </QCard>
-        </template>
-    </CardSummary>
-</template>

src/pages/Account/Alias/Card/AliasUsers.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-
-import { useVnConfirm } from 'composables/useVnConfirm';
-import { useArrayData } from 'composables/useArrayData';
-import useNotify from 'src/composables/useNotify.js';
-import axios from 'axios';
-
-const { t } = useI18n();
-const { notify } = useNotify();
-const route = useRoute();
-const { openConfirmationModal } = useVnConfirm();
-
-const paginateRef = ref(null);
-
-const arrayData = useArrayData('AliasUsers');
-const { store } = arrayData;
-
-const data = computed(() => {
-    const dataCopy = JSON.parse(JSON.stringify(store.data));
-    return dataCopy.sort((a, b) => a.user?.name.localeCompare(b.user?.name));
-});
-
-const filter = {
-    include: {
-        relation: 'user',
-        scope: {
-            fields: ['id', 'name'],
-        },
-    },
-};
-
-const urlPath = computed(() => `MailAliases/${route.params.id}/accounts`);
-
-const columns = computed(() => [
-    {
-        name: 'alias',
-    },
-    {
-        name: 'action',
-    },
-]);
-
-const deleteAlias = async (row) => {
-    try {
-        await axios.delete(`${urlPath.value}/${row.id}`);
-        notify(t('User removed'), 'positive');
-        fetchAliases();
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-watch(
-    () => route.params.id,
-    () => {
-        store.url = urlPath.value;
-        store.filter = filter;
-        fetchAliases();
-    }
-);
-
-const fetchAliases = () => paginateRef.value.fetch();
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md">
-        <div class="full-width" style="max-width: 400px">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AliasUsers"
-                :filter="filter"
-                :url="urlPath"
-                auto-load
-            >
-                <template #body>
-                    <QTable :rows="data" :columns="columns" hide-header>
-                        <template #body="{ row }">
-                            <QTr>
-                                <QTd>
-                                    <span>{{ row.user?.name }}</span>
-                                </QTd>
-                                <QTd style="width: 50px !important">
-                                    <QIcon
-                                        name="delete"
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                        @click="
-                                            openConfirmationModal(
-                                                t('User will be removed from alias'),
-                                                t('Are you sure you want to continue?'),
-                                                () => deleteAlias(row)
-                                            )
-                                        "
-                                    >
-                                        <QTooltip>
-                                            {{ t('Delete') }}
-                                        </QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<i18n>
-es:
-    User will be removed from alias: El usuario será borrado del alias
-    Are you sure you want to continue?: ¿Seguro que quieres continuar?
-    User removed: Usuario borrado
-    Delete: Eliminar
-</i18n>

src/pages/Account/locale/en.yml

@@ -72,3 +72,15 @@ samba:
     verifyCertificate: Verify certificate
     testConnection: Test connection
     success: Samba connection established!
+acls:
+    role: Role
+    accessType: Access type
+    permissions: Permission
+    search: Search acls
+    searchInfo: Search acls by model name
+    aclFilter:
+        principalId: Role
+        model: Model
+        property: Property
+        accessType: Access type
+        permission: Permission

src/pages/Account/locale/es.yml

@@ -82,3 +82,15 @@ samba:
     Verify certificate: Verificar certificado
     testConnection: Probar conexión
     success: ¡Conexión con Samba establecida!
+acls:
+    role: Rol
+    accessType: Tipo de acceso
+    permissions: Permiso
+    search: Buscar acls
+    searchInfo: Buscar acls por nombre
+    aclFilter:
+        principalId: Rol
+        model: Modelo
+        property: Propiedad
+        accessType: Tipo de acceso
+        permission: Permiso

src/router/modules/account.js

@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'AccountMain' },
     menus: {
-        main: ['AccountList', 'AccountAliasList'],
+        main: ['AccountList', 'AccountAcls'],
         card: [],
     },
     children: [
@@ -31,13 +31,18 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'alias-list',
-                    name: 'AccountAliasList',
+                    path: 'acls',
+                    name: 'AccountAcls',
                     meta: {
-                        title: 'alias',
-                        icon: 'email',
+                        title: 'acls',
+                        icon: 'check',
                     },
-                    component: () => import('src/pages/Account/AccountAliasList.vue'),
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                },
+                {
+                    path: 'acl-form',
+                    name: 'AccountAclForm',
+                    component: () => import('src/pages/Account/Acls/AclFormView.vue'),
                 },
             ],
         },

src/router/modules/mailAlias.js

@@ -1,57 +0,0 @@
-import { RouterView } from 'vue-router';
-
-export default {
-    path: 'account/alias',
-    name: 'Alias',
-    meta: {
-        title: 'alias',
-        icon: 'email',
-        moduleName: 'Alias',
-    },
-    component: RouterView,
-    redirect: { name: 'AccountAliasList' },
-    menus: {
-        main: [],
-        card: ['AliasBasicData', 'AliasUsers'],
-    },
-    children: [
-        {
-            name: 'AliasCard',
-            path: ':id',
-            component: () => import('src/pages/Account/Alias/Card/AliasCard.vue'),
-            redirect: { name: 'AliasSummary' },
-            children: [
-                {
-                    name: 'AliasSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasSummary.vue'),
-                },
-                {
-                    name: 'AliasBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasBasicData.vue'),
-                },
-                {
-                    name: 'AliasUsers',
-                    path: 'users',
-                    meta: {
-                        title: 'aliasUsers',
-                        icon: 'group',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasUsers.vue'),
-                },
-            ],
-        },
-    ],
-};