This commit is contained in:
parent
7d198a819b
commit
cbeeea8f88
|
|
@ -292,11 +292,8 @@ export default {
|
|||
notificationsManager: {
|
||||
activeNotifications: 'Active notifications',
|
||||
availableNotifications: 'Available notifications',
|
||||
table: {
|
||||
name: 'Permission description',
|
||||
subscribed: 'Subscribed',
|
||||
role: 'Necessary role',
|
||||
}
|
||||
subscribed: 'Subscribed to the notification',
|
||||
unsubscribed: 'Unsubscribed from the notification',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -290,6 +290,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',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { onMounted, computed, ref } 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';
|
||||
|
||||
|
|
@ -18,8 +19,7 @@ onMounted(async () => await fetch());
|
|||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { getToken } = useSession();
|
||||
|
||||
t == t;
|
||||
const quasar = useQuasar();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
|
|
@ -47,6 +47,9 @@ const workerFilter = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
const notificationAcls = ref([]);
|
||||
|
||||
async function fetch() {
|
||||
const { data } = await axios.get(`Workers/${entityId.value}`, {
|
||||
params: {
|
||||
|
|
@ -81,14 +84,15 @@ async function fetch() {
|
|||
data.subscribedNotifs = subscribedNotifs.data;
|
||||
|
||||
const filterAcl = {
|
||||
where: {
|
||||
roleFk: data.user.roleFk,
|
||||
},
|
||||
include: [
|
||||
{
|
||||
relation: 'notification',
|
||||
scope: {
|
||||
relation: 'notificationSubscription',
|
||||
include: [
|
||||
{
|
||||
relation: 'subscription',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -106,13 +110,121 @@ async function fetch() {
|
|||
},
|
||||
});
|
||||
|
||||
data.notifsAcl = notifsAcl.data;
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Check if notification is already in the array
|
||||
let found = false;
|
||||
notifications.forEach((notif) => {
|
||||
if (notif.id == notification.id) {
|
||||
found = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
if (!notification.allowed) {
|
||||
notification.active = null;
|
||||
}
|
||||
notifications.push(notification);
|
||||
} else {
|
||||
// Check if current notification is allowed and the other one is not
|
||||
// If so, replace the existing one with the current one
|
||||
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;
|
||||
}
|
||||
|
||||
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/deleteSubscription`, {
|
||||
notificationId: notif.id + '',
|
||||
userId: entityId.value,
|
||||
headers: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
});
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('worker.notificationsManager.unsubscribed'),
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-card>
|
||||
|
|
@ -124,49 +236,46 @@ async function fetch() {
|
|||
{{ t('worker.notificationsManager.activeNotifications') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<div class="q-pa-sm">
|
||||
<div v-for="notif in notificationAcls" :key="notif.id">
|
||||
<q-chip
|
||||
v-for="notif in worker.subscribedNotifs"
|
||||
:key="notif.notificationFk"
|
||||
:label="notif.notification.name"
|
||||
v-if="notif.active"
|
||||
:key="notif.id"
|
||||
:label="notif.name"
|
||||
text-color="white"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
removable
|
||||
@remove="removeNotif(notif)"
|
||||
@remove="toggleNotif(notif, true)"
|
||||
/>
|
||||
</div>
|
||||
</q-item>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('worker.notificationsManager.availableNotifications') }}
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-table :rows="worker.notifsAcl">
|
||||
<template #header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width>{{ t('worker.notificationsManager.table.name') }}</q-th>
|
||||
<q-th auto-width>{{ t('worker.notificationsManager.table.subscribed') }}</q-th>
|
||||
<q-th auto-width>{{ t('worker.notificationsManager.table.role') }}</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td>{{ props.row.notification.description }}</q-td>
|
||||
<q-td>
|
||||
<q-toggle
|
||||
checked-icon="check"
|
||||
unchecked-icon="close"
|
||||
indeterminate-icon="block"
|
||||
v-model="props.row.subscribed"
|
||||
:value="props.row.subscribed"
|
||||
@input="toggleNotif(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td>{{ props.row.role.name }}</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-item>
|
||||
|
||||
<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"
|
||||
checked-icon="check"
|
||||
unchecked-icon="close"
|
||||
indeterminate-icon="block"
|
||||
v-model="notif.active"
|
||||
@update:model-value="toggleNotif(notif)"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</template>
|
||||
</q-card>
|
||||
|
|
|
|||
Loading…
Reference in New Issue