67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { SessionUser } from "@/components/session/token/SessionUser.vue";
|
|
import Swal from "sweetalert2";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
notification: Object,
|
|
reload: Function
|
|
});
|
|
|
|
const markAsRead = () => {
|
|
console.log('Mark as read ' + props.notification.id);
|
|
SessionUser.objects.notifications.delete(props.notification.id).then((response) => {
|
|
props.reload();
|
|
}).catch((error) => {
|
|
Swal.fire(
|
|
t('common.error'),
|
|
t('user_notifications.mark_as_read_error'),
|
|
'error'
|
|
)
|
|
props.reload();
|
|
})
|
|
};
|
|
|
|
const openLink = () => {
|
|
console.log('Open link');
|
|
};
|
|
|
|
const hasLink = () => {
|
|
return props.notification.data.link !== undefined;
|
|
};
|
|
|
|
const hasControls = () => {
|
|
return props.notification.data.controls !== undefined;
|
|
};
|
|
|
|
const reload = () => {
|
|
props.reload();
|
|
};
|
|
|
|
console.log(props.notification);
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Notification item -->
|
|
<div class="list-item">
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">{{ props.notification.data.title ?? (SessionUser.objects.global.language.no_data + ' ( ' + props.notification.type) + ' )'}}</div>
|
|
<div class="list-item-description">{{ props.notification.data.description ?? SessionUser.objects.global.language.no_data }}</div>
|
|
</div>
|
|
<div class="list-item-controls">
|
|
<button class="button is-small is-primary" v-if="hasLink()" @click="openLink">{{ SessionUser.objects.global.language.open }}</button>
|
|
<button class="button is-small is-dark" @click="markAsRead">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-check"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |