fixes #4797 Seccion Worker/Notification #51
|
|
@ -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',
|
||||
},
|
||||
|
alexandre marked this conversation as resolved
|
||||
],
|
||||
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);
|
||||
//
|
||||
}
|
||||
|
alexandre marked this conversation as resolved
Outdated
alexm
commented
v-show="notifications.length" valdria? v-show="notifications.length" valdria?
|
||||
|
||||
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
Aço es necesari? en la funcio de baix no ha fet falta?
Per algun motiu en vitest si les cridades que fa axios no estan manejades te llança un error Unhandled Rejection. En esta funció ho he posat en un try/catch perque no havia de fer res, en les altres funcions sí que està manejat gastant el .catch() de axios.