src/i18n/en/index.js

@@ -255,6 +255,7 @@ export default {
             list: 'List',
             basicData: 'Basic data',
             summary: 'Summary',
+            notifications: 'Notifications',
         },
         list: {
             name: 'Name',
@@ -288,6 +289,15 @@ export default {
             role: 'Role',
             sipExtension: 'Extension',
         },
+        notificationsManager: {
+            activeNotifications: 'Active notifications',
+            availableNotifications: 'Available notifications',
+            table: {
+                name: 'Permission description',
+                subscribed: 'Subscribed',
+                role: 'Necessary role',
+            }
+        },
     },
     components: {
         topbar: {},

src/i18n/es/index.js

@@ -253,6 +253,7 @@ export default {
             list: 'Listado',
             basicData: 'Datos básicos',
             summary: 'Resumen',
+            notifications: 'Notificaciones'
         },
         list: {
             name: 'Nombre',
@@ -286,6 +287,10 @@ export default {
             role: 'Rol',
             sipExtension: 'Extensión',
         },
+        notificationsManager: {
+            activeNotifications: 'Notificaciones activas',
+            availableNotifications: 'Notificaciones disponibles',
+        },
     },
     components: {
         topbar: {},

src/pages/Worker/Card/WorkerCard.vue

@@ -18,6 +18,12 @@ const { t } = useI18n();
                     </q-item-section>
                     <q-item-section>{{ t('worker.pageTitles.basicData') }}</q-item-section>
                 </q-item>
+                <q-item :to="{ name: 'WorkerNotificationsManager' }" clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="notifications" />
+                    </q-item-section>
+                    <q-item-section>{{ t('worker.pageTitles.notifications') }}</q-item-section>
+                </q-item>
             </q-list>
         </q-scroll-area>
     </q-drawer>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, ref, onUpdated } from 'vue';
+import { onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
@@ -18,8 +18,6 @@ onMounted(async () => {
     await fetch();
 });
 
-onUpdated(async () => await fetch());
-
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();

src/pages/Worker/Card/WorkerNotificationsManager.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => await fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+const { getToken } = useSession();
+
+t == t;
+
+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',
+                    },
+                ],
+            },
+        },
+    ],
+};
+async function fetch() {
+    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 = {
+            where: {
+                roleFk: data.user.roleFk,
+            },
+            include: [
+                {
+                    relation: 'notification',
+                    scope: {
+                        relation: 'notificationSubscription',
+                    },
+                },
+                {
+                    relation: 'role',
+                },
+            ],
+        };
+
+        const notifsAcl = await axios.get(`NotificationAcls`, {
+            params: {
+                filter: JSON.stringify(filterAcl),
+            },
+            headers: {
+                Authorization: getToken(),
+            },
+        });
+
+        data.notifsAcl = notifsAcl.data;
+    } catch (e) {
+        console.log(e);
+    }
+
+    worker.value = data;
+}
+</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 class="q-pa-sm">
+                        <q-chip
+                            v-for="notif in worker.subscribedNotifs"
+                            :key="notif.notificationFk"
+                            :label="notif.notification.name"
+                            text-color="white"
+                            color="primary"
+                            class="q-mr-sm"
+                            removable
+                            @remove="removeNotif(notif)"
+                        />
+                    </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
+                                        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>
+            </q-list>
+        </template>
+    </q-card>
+</template>

src/router/modules/worker.js

@@ -41,6 +41,14 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
                 },
+                {
+                    name: 'WorkerNotificationsManager',
+                    path: 'notifications',
+                    meta: {
+                        title: 'notifications'
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+                },
             ]
         },
     ]