From ba9d8b3c217240cdb4cf49f7fb84bebf1695b3d8 Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Tue, 2 May 2023 07:22:09 +0200
Subject: [PATCH] refs #4797 section code refactored

---
 src/i18n/es/index.js                          |   4 +-
 .../Card/WorkerNotificationsManager.vue       | 413 +++++++-----------
 src/router/modules/worker.js                  |   4 +-
 3 files changed, 173 insertions(+), 248 deletions(-)

diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 41c556dc8..6328c8f5d 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -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',
     },
diff --git a/src/pages/Worker/Card/WorkerNotificationsManager.vue b/src/pages/Worker/Card/WorkerNotificationsManager.vue
index 37a0bb5c6..511144ff0 100644
--- a/src/pages/Worker/Card/WorkerNotificationsManager.vue
+++ b/src/pages/Worker/Card/WorkerNotificationsManager.vue
@@ -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',
                             },
                         ],
+                        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);
+        //
     }
-
-    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>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index b6abd7c7e..17a937c64 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -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'),
                 },