This commit is contained in:
parent
9dfcaaf056
commit
ba9d8b3c21
|
|
@ -398,8 +398,8 @@ export default {
|
|||
notificationsManager: {
|
||||
activeNotifications: 'Notificaciones activas',
|
||||
availableNotifications: 'Notificaciones disponibles',
|
||||
subscribed: 'Te has suscrito a la notificación',
|
||||
unsubscribed: 'Te has dado de baja de la notificación',
|
||||
subscribed: 'Se ha suscrito a la notificación',
|
||||
unsubscribed: 'Se ha dado de baja de la notificación',
|
||||
},
|
||||
imageNotFound: 'No se ha encontrado la imagen',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script setup>
|
||||
import { onMounted, computed, ref, onUpdated } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { computed, onMounted, onUpdated, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -13,276 +12,200 @@ const $props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
});
|
||||
const entityId = computed(() => $props.id || route.params.id);
|
||||
|
||||
onMounted(async () => await fetch());
|
||||
onUpdated(async () => await fetch());
|
||||
onMounted(() => fetch());
|
||||
onUpdated(() => fetch());
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { getToken } = useSession();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
});
|
||||
|
||||
const worker = ref();
|
||||
|
||||
const workerFilter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['email', 'name', 'nickname', 'roleFk'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'department',
|
||||
scope: {
|
||||
include: [
|
||||
{
|
||||
relation: 'department',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const notificationAcls = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const notifications = ref([]);
|
||||
|
||||
async function fetch() {
|
||||
isLoading.value = true;
|
||||
const { data } = await axios.get(`Workers/${entityId.value}`, {
|
||||
params: {
|
||||
filter: JSON.stringify(workerFilter),
|
||||
},
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const filter = {
|
||||
where: {
|
||||
userFk: entityId.value,
|
||||
},
|
||||
include: [
|
||||
{
|
||||
relation: 'notification',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const subscribedNotifs = await axios.get(`NotificationSubscriptions`, {
|
||||
params: {
|
||||
filter: JSON.stringify(filter),
|
||||
},
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
});
|
||||
|
||||
data.subscribedNotifs = subscribedNotifs.data;
|
||||
|
||||
const filterAcl = {
|
||||
include: [
|
||||
{
|
||||
relation: 'notification',
|
||||
scope: {
|
||||
await axios
|
||||
.get(`NotificationSubscriptions`, {
|
||||
params: {
|
||||
filter: {
|
||||
include: [
|
||||
{
|
||||
relation: 'subscription',
|
||||
relation: 'notification',
|
||||
},
|
||||
],
|
||||
where: {
|
||||
userFk: entityId.value,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'role',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const notifsAcl = await axios.get(`NotificationAcls`, {
|
||||
params: {
|
||||
filter: JSON.stringify(filterAcl),
|
||||
},
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
});
|
||||
|
||||
let notifications = [];
|
||||
|
||||
notifsAcl.data.forEach((acl) => {
|
||||
let notification = {
|
||||
id: acl.notification.id,
|
||||
name: acl.notification.name,
|
||||
description: acl.notification.description,
|
||||
active: false,
|
||||
allowed: false,
|
||||
};
|
||||
|
||||
if (acl.roleFk == data.user.roleFk) {
|
||||
notification.allowed = true;
|
||||
} else {
|
||||
notification.allowed = false;
|
||||
}
|
||||
|
||||
if (data.subscribedNotifs.length > 0) {
|
||||
data.subscribedNotifs.forEach((sub) => {
|
||||
if (sub.notificationFk == acl.notification.id) {
|
||||
if (notification.allowed) {
|
||||
notification.active = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let found = false;
|
||||
notifications.forEach((notif) => {
|
||||
if (notif.id == notification.id) {
|
||||
found = true;
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.data) {
|
||||
res.data.forEach((subscription) => {
|
||||
notifications.value.push({
|
||||
id: subscription.id,
|
||||
notificationFk: subscription.notificationFk,
|
||||
name: subscription.notification.name,
|
||||
description: subscription.notification.description,
|
||||
active: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
if (!notification.allowed) {
|
||||
notification.active = null;
|
||||
await axios
|
||||
.get(`RoleMappings`, {
|
||||
params: {
|
||||
filter: {
|
||||
fields: ['roleId'],
|
||||
where: {
|
||||
principalId: entityId.value,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.data) {
|
||||
await axios
|
||||
.get(`NotificationAcls`, {
|
||||
params: {
|
||||
filter: {
|
||||
include: [
|
||||
{
|
||||
relation: 'notification',
|
||||
},
|
||||
],
|
||||
where: {
|
||||
roleFk: {
|
||||
inq: res.data.map((role) => {
|
||||
return role.roleId;
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.data) {
|
||||
res.data.forEach((acl) => {
|
||||
const activeNotif = notifications.value.find(
|
||||
(notif) =>
|
||||
notif.notificationFk === acl.notificationFk
|
||||
);
|
||||
if (!activeNotif) {
|
||||
notifications.value.push({
|
||||
id: null,
|
||||
notificationFk: acl.notificationFk,
|
||||
name: acl.notification.name,
|
||||
description: acl.notification.description,
|
||||
active: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
notifications.push(notification);
|
||||
} else {
|
||||
notifications.forEach((notif) => {
|
||||
if (notif.id == notification.id) {
|
||||
if (notification.allowed && !notif.allowed) {
|
||||
notif.allowed = true;
|
||||
notif.active = notification.active;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
notificationAcls.value = notifications;
|
||||
sortNotifs();
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
//
|
||||
}
|
||||
|
||||
worker.value = data;
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
function sortNotifs() {
|
||||
notificationAcls.value.sort((a, b) => {
|
||||
if (a.allowed && !b.allowed) {
|
||||
return -1;
|
||||
} else if (!a.allowed && b.allowed) {
|
||||
return 1;
|
||||
} else {
|
||||
if (a.active && !b.active) {
|
||||
return 1;
|
||||
} else if (!a.active && b.active) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function toggleNotif(notif, chip) {
|
||||
if (chip) {
|
||||
notif.active = !notif.active;
|
||||
}
|
||||
if (notif.active) {
|
||||
await axios.post(
|
||||
`NotificationSubscriptions`,
|
||||
{
|
||||
notificationFk: notif.id,
|
||||
userFk: entityId.value,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
}
|
||||
);
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('worker.notificationsManager.subscribed'),
|
||||
});
|
||||
} else {
|
||||
await axios.post(
|
||||
`NotificationSubscriptions/deleteNotification`,
|
||||
{
|
||||
notificationId: this.worker.subscribedNotifs.find((sub) => sub.notificationFk == notif.id).id,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
}
|
||||
);
|
||||
async function disableNotification(notification) {
|
||||
await axios.delete(`NotificationSubscriptions/${notification.id}`).then(() => {
|
||||
notification.id = null;
|
||||
notification.active = false;
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('worker.notificationsManager.unsubscribed'),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function toggleNotification(notification) {
|
||||
if (!notification.active) {
|
||||
await disableNotification(notification);
|
||||
} else {
|
||||
await axios
|
||||
.post(`NotificationSubscriptions`, {
|
||||
notificationFk: notification.notificationFk,
|
||||
userFk: entityId.value,
|
||||
})
|
||||
.catch(() => (notification.active = false))
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
notification.id = res.data.id;
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('worker.notificationsManager.subscribed'),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
await fetch();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-card>
|
||||
<skeleton-summary v-if="!worker" />
|
||||
<template v-if="worker">
|
||||
<div class="header bg-primary q-pa-sm">{{ worker.id }} - {{ worker.firstName }}</div>
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('worker.notificationsManager.activeNotifications') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<div v-for="notif in notificationAcls" :key="notif.id">
|
||||
<q-chip
|
||||
v-if="notif.active"
|
||||
:key="notif.id"
|
||||
:label="notif.name"
|
||||
text-color="white"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
removable
|
||||
@remove="toggleNotif(notif, true)"
|
||||
/>
|
||||
</div>
|
||||
</q-item>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('worker.notificationsManager.availableNotifications') }}
|
||||
</q-item-label>
|
||||
|
||||
<div class="row">
|
||||
<q-item
|
||||
class="col"
|
||||
:key="notif.id"
|
||||
v-for="notif in notificationAcls"
|
||||
style="min-width: 350px; max-width: 350px"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ notif.name }}</q-item-label>
|
||||
<q-item-label caption>{{ notif.description }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side top>
|
||||
<q-toggle
|
||||
:disable="!notif.allowed || isLoading"
|
||||
checked-icon="check"
|
||||
unchecked-icon="close"
|
||||
indeterminate-icon="block"
|
||||
v-model="notif.active"
|
||||
@update:model-value="toggleNotif(notif)"
|
||||
<QPage>
|
||||
<QCard class="q-pa-md">
|
||||
<QList>
|
||||
<div
|
||||
v-show="
|
||||
notifications.filter(
|
||||
(notification) => notification.active == true
|
||||
).length > 0
|
||||
"
|
||||
>
|
||||
<QItemLabel header class="text-h6">
|
||||
{{ t('worker.notificationsManager.activeNotifications') }}
|
||||
</QItemLabel>
|
||||
<QItem>
|
||||
<div
|
||||
v-for="notification in notifications.filter(
|
||||
(notification) => notification.active == true
|
||||
)"
|
||||
:key="notification.id"
|
||||
>
|
||||
<QChip
|
||||
:key="notification.id"
|
||||
:label="notification.name"
|
||||
text-color="white"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
removable
|
||||
@remove="disableNotification(notification)"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</QItem>
|
||||
</div>
|
||||
</q-list>
|
||||
</template>
|
||||
</q-card>
|
||||
<div v-show="notifications.length > 0">
|
||||
<QItemLabel header class="text-h6">
|
||||
{{ t('worker.notificationsManager.availableNotifications') }}
|
||||
</QItemLabel>
|
||||
<div class="row">
|
||||
<QItem
|
||||
class="col-3"
|
||||
:key="notification.notificationFk"
|
||||
v-for="notification in notifications"
|
||||
>
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ notification.name }}</QItemLabel>
|
||||
<QItemLabel caption>{{
|
||||
notification.description
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection side top>
|
||||
<QToggle
|
||||
checked-icon="check"
|
||||
unchecked-icon="close"
|
||||
indeterminate-icon="block"
|
||||
v-model="notification.active"
|
||||
@update:model-value="toggleNotification(notification)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</div>
|
||||
</div>
|
||||
</QList>
|
||||
</QCard>
|
||||
</QPage>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
redirect: { name: 'WorkerMain' },
|
||||
menus: {
|
||||
main: ['WorkerList'],
|
||||
card: [],
|
||||
card: ['WorkerNotificationsManager'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -42,6 +42,7 @@ export default {
|
|||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
|
||||
},
|
||||
|
|
@ -50,6 +51,7 @@ export default {
|
|||
path: 'notifications',
|
||||
meta: {
|
||||
title: 'notifications',
|
||||
icon: 'notifications',
|
||||
},
|
||||
component: () => import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue