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

refs #4797 section code refactored

This commit is contained in:
Alexandre Riera 2023-05-02 07:22:09 +02:00
parent 9dfcaaf056
commit ba9d8b3c21
3 changed files with 173 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -398,8 +398,8 @@ export default {
notificationsManager: { notificationsManager: {
activeNotifications: 'Notificaciones activas', activeNotifications: 'Notificaciones activas',
availableNotifications: 'Notificaciones disponibles', availableNotifications: 'Notificaciones disponibles',
subscribed: 'Te has suscrito a la notificación', subscribed: 'Se ha suscrito a la notificación',
unsubscribed: 'Te has dado de baja de la notificación', unsubscribed: 'Se ha dado de baja de la notificación',
}, },
imageNotFound: 'No se ha encontrado la imagen', imageNotFound: 'No se ha encontrado la imagen',
}, },

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

@ -1,10 +1,9 @@
<script setup> <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 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({ const $props = defineProps({
id: { id: {
@ -13,276 +12,200 @@ const $props = defineProps({
default: null, default: null,
}, },
}); });
const entityId = computed(() => $props.id || route.params.id);
onMounted(async () => await fetch()); onMounted(() => fetch());
onUpdated(async () => await fetch()); onUpdated(() => fetch());
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const { getToken } = useSession();
const quasar = useQuasar(); const quasar = useQuasar();
const entityId = computed(() => { const notifications = ref([]);
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);
async function fetch() { async function fetch() {
isLoading.value = true;
const { data } = await axios.get(`Workers/${entityId.value}`, {
params: {
filter: JSON.stringify(workerFilter),
},
headers: {
Authorization: getToken(),
},
});
try { try {
const filter = { await axios
.get(`NotificationSubscriptions`, {
params: {
filter: {
include: [
{
relation: 'notification',
},
],
where: { where: {
userFk: entityId.value, userFk: entityId.value,
}, },
},
},
})
.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,
});
});
}
});
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: [ include: [
{ {
relation: 'notification', relation: 'notification',
}, },
], ],
}; where: {
roleFk: {
const subscribedNotifs = await axios.get(`NotificationSubscriptions`, { inq: res.data.map((role) => {
params: { return role.roleId;
filter: JSON.stringify(filter), }),
},
headers: {
Authorization: getToken(),
},
});
data.subscribedNotifs = subscribedNotifs.data;
const filterAcl = {
include: [
{
relation: 'notification',
scope: {
include: [
{
relation: 'subscription',
},
],
}, },
}, },
{
relation: 'role',
}, },
],
};
const notifsAcl = await axios.get(`NotificationAcls`, {
params: {
filter: JSON.stringify(filterAcl),
}, },
headers: { })
Authorization: getToken(), .then(async (res) => {
}, if (res.data) {
}); res.data.forEach((acl) => {
const activeNotif = notifications.value.find(
let notifications = []; (notif) =>
notif.notificationFk === acl.notificationFk
notifsAcl.data.forEach((acl) => { );
let notification = { if (!activeNotif) {
id: acl.notification.id, notifications.value.push({
id: null,
notificationFk: acl.notificationFk,
name: acl.notification.name, name: acl.notification.name,
description: acl.notification.description, description: acl.notification.description,
active: false, 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;
}
}); });
if (!found) {
if (!notification.allowed) {
notification.active = null;
}
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) { } catch (e) {
console.log(e); //
} }
worker.value = data;
isLoading.value = false;
} }
function sortNotifs() { async function disableNotification(notification) {
notificationAcls.value.sort((a, b) => { await axios.delete(`NotificationSubscriptions/${notification.id}`).then(() => {
if (a.allowed && !b.allowed) { notification.id = null;
return -1; notification.active = false;
} 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(),
},
}
);
quasar.notify({ quasar.notify({
type: 'positive', type: 'positive',
message: t('worker.notificationsManager.unsubscribed'), 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> </script>
<template> <template>
<q-card> <QPage>
<skeleton-summary v-if="!worker" /> <QCard class="q-pa-md">
<template v-if="worker"> <QList>
<div class="header bg-primary q-pa-sm">{{ worker.id }} - {{ worker.firstName }}</div> <div
<q-list> v-show="
<q-item-label header class="text-h6"> notifications.filter(
(notification) => notification.active == true
).length > 0
"
>
<QItemLabel header class="text-h6">
{{ t('worker.notificationsManager.activeNotifications') }} {{ t('worker.notificationsManager.activeNotifications') }}
</q-item-label> </QItemLabel>
<q-item> <QItem>
<div v-for="notif in notificationAcls" :key="notif.id"> <div
<q-chip v-for="notification in notifications.filter(
v-if="notif.active" (notification) => notification.active == true
:key="notif.id" )"
:label="notif.name" :key="notification.id"
>
<QChip
:key="notification.id"
:label="notification.name"
text-color="white" text-color="white"
color="primary" color="primary"
class="q-mr-sm" class="q-mr-sm"
removable removable
@remove="toggleNotif(notif, true)" @remove="disableNotification(notification)"
/> />
</div> </div>
</q-item> </QItem>
<q-item-label header class="text-h6"> </div>
<div v-show="notifications.length > 0">
<QItemLabel header class="text-h6">
{{ t('worker.notificationsManager.availableNotifications') }} {{ t('worker.notificationsManager.availableNotifications') }}
</q-item-label> </QItemLabel>
<div class="row"> <div class="row">
<q-item <QItem
class="col" class="col-3"
:key="notif.id" :key="notification.notificationFk"
v-for="notif in notificationAcls" v-for="notification in notifications"
style="min-width: 350px; max-width: 350px"
> >
<q-item-section> <QItemSection>
<q-item-label>{{ notif.name }}</q-item-label> <QItemLabel>{{ notification.name }}</QItemLabel>
<q-item-label caption>{{ notif.description }}</q-item-label> <QItemLabel caption>{{
</q-item-section> notification.description
<q-item-section side top> }}</QItemLabel>
<q-toggle </QItemSection>
:disable="!notif.allowed || isLoading" <QItemSection side top>
<QToggle
checked-icon="check" checked-icon="check"
unchecked-icon="close" unchecked-icon="close"
indeterminate-icon="block" indeterminate-icon="block"
v-model="notif.active" v-model="notification.active"
@update:model-value="toggleNotif(notif)" @update:model-value="toggleNotification(notification)"
/> />
</q-item-section> </QItemSection>
</q-item> </QItem>
</div> </div>
</q-list> </div>
</template> </QList>
</q-card> </QCard>
</QPage>
</template> </template>

4
src/router/modules/worker.js
View File

@ -11,7 +11,7 @@ export default {
redirect: { name: 'WorkerMain' }, redirect: { name: 'WorkerMain' },
menus: { menus: {
main: ['WorkerList'], main: ['WorkerList'],
card: [], card: ['WorkerNotificationsManager'],
}, },
children: [ children: [
{ {
@ -42,6 +42,7 @@ export default {
path: 'summary', path: 'summary',
meta: { meta: {
title: 'summary', title: 'summary',
icon: 'launch',
}, },
component: () => import('src/pages/Worker/Card/WorkerSummary.vue'), component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
}, },
@ -50,6 +51,7 @@ export default {
path: 'notifications', path: 'notifications',
meta: { meta: {
title: 'notifications', title: 'notifications',
icon: 'notifications',
}, },
component: () => import('src/pages/Worker/Card/WorkerNotificationsManager.vue'), component: () => import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
}, },