salix-front/src/pages/Account/Alias/Card/AliasUsers.vue

119 lines
3.6 KiB
Vue

<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) => {
await axios.delete(`${urlPath.value}/${row.id}`);
notify(t('User removed'), 'positive');
fetchAliases();
};
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"
:user-filter="filter"
:url="urlPath"
:limit="0"
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>