salix-front/src/pages/Worker/Card/WorkerNotificationsManager.vue

<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
                                        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>
            </q-list>
        </template>
    </q-card>
</template>