wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refs #4797 @2,30h

This commit is contained in:
Pau 2022-11-24 09:32:15 +01:00
parent 7d198a819b
commit cbeeea8f88
3 changed files with 152 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/i18n/en/index.js
View File

@ -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: {

2
src/i18n/es/index.js
View File

@ -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: {

175
src/pages/Worker/Card/WorkerNotificationsManager.vue
View File

@ -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>
<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="props.row.subscribed"
:value="props.row.subscribed"
@input="toggleNotif(props.row)"
v-model="notif.active"
@update:model-value="toggleNotif(notif)"
/>
</q-td>
<q-td>{{ props.row.role.name }}</q-td>
</q-tr>
</template>
</q-table>
</q-item-section>
</q-item>
</div>
</q-list>
</template>
</q-card>