143 lines
4.8 KiB
Vue
143 lines
4.8 KiB
Vue
<script setup>
|
|
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: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
|
|
onMounted(() => fetch());
|
|
onUpdated(() => fetch());
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
const quasar = useQuasar();
|
|
|
|
const notifications = ref([]);
|
|
|
|
async function fetch() {
|
|
try {
|
|
await axios
|
|
.get(`NotificationSubscriptions/${entityId.value}/getList`)
|
|
.then(async (res) => {
|
|
if (res.data) {
|
|
notifications.value = res.data;
|
|
}
|
|
});
|
|
} catch (e) {
|
|
//
|
|
}
|
|
}
|
|
|
|
async function disableNotification(notification) {
|
|
await axios
|
|
.delete(`NotificationSubscriptions/${notification.id}`)
|
|
.catch(() => (notification.active = true))
|
|
.then((res) => {
|
|
if (res.data) {
|
|
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'),
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<QPage>
|
|
<QCard class="q-pa-md">
|
|
<QList>
|
|
<div
|
|
v-show="
|
|
notifications.filter(
|
|
(notification) => notification.active == true
|
|
).length
|
|
"
|
|
>
|
|
<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)"
|
|
/>
|
|
</div>
|
|
</QItem>
|
|
</div>
|
|
<div v-show="notifications.length">
|
|
<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>
|