Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-09-04 22:04:59 +00:00
Code Issues Actions Projects Releases Wiki Activity

added unread and read all function with endpoints for notifications

Browse Source
This commit is contained in:
Ronchie Blondiau
2024-07-05 13:36:31 +00:00
committed by Julien Fastré
parent 2b09e1459c
commit 2d67843901
14 changed files with 805 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
View File

@@ -1,14 +1,16 @@
import {createApp} from "vue";
import { createApp } from "vue";
import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
import NotificationReadAllToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadAllToggle.vue";
const i18n = _createI18n({});
window.addEventListener('DOMContentLoaded', function (e) {
document.querySelectorAll('.notification_toggle_read_status')
.forEach(function (el, i) {
createApp({
template: `<notification-read-toggle
window.addEventListener("DOMContentLoaded", function (e) {
document
.querySelectorAll(".notification_toggle_read_status")
.forEach(function (el, i) {
createApp({
template: `<notification-read-toggle
:notificationId="notificationId"
:buttonClass="buttonClass"
:buttonNoText="buttonNoText"
@@ -17,40 +19,45 @@ window.addEventListener('DOMContentLoaded', function (e) {
@markRead="onMarkRead"
@markUnread="onMarkUnread">
</notification-read-toggle>`,
components: {
NotificationReadToggle,
},
data() {
return {
notificationId: el.dataset.notificationId,
buttonClass: el.dataset.buttonClass,
buttonNoText: 'false' === el.dataset.buttonText,
showUrl: el.dataset.showButtonUrl,
isRead: 1 === Number.parseInt(el.dataset.notificationCurrentIsRead),
container: el.dataset.container
}
},
computed: {
getContainer() {
return document.querySelectorAll(`div.${this.container}`);
}
},
methods: {
onMarkRead() {
if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer[i].classList.replace('read', 'unread');
} else { throw 'data-container attribute is missing' }
this.isRead = false;
},
onMarkUnread() {
if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer[i].classList.replace('unread', 'read');
} else { throw 'data-container attribute is missing' }
this.isRead = true;
},
}
})
.use(i18n)
.mount(el);
});
components: {
NotificationReadToggle,
},
data() {
return {
notificationId: parseInt(el.dataset.notificationId),
buttonClass: el.dataset.buttonClass,
buttonNoText: "false" === el.dataset.buttonText,
showUrl: el.dataset.showButtonUrl,
isRead: 1 === Number.parseInt(el.dataset.notificationCurrentIsRead),
container: el.dataset.container,
};
},
computed: {
getContainer() {
return document.querySelectorAll(`div.${this.container}`);
},
},
methods: {
onMarkRead() {
if (typeof this.getContainer[i] !== "undefined") {
this.getContainer[i].classList.replace("read", "unread");
} else {
throw "data-container attribute is missing";
}
this.isRead = false;
},
onMarkUnread() {
if (typeof this.getContainer[i] !== "undefined") {
this.getContainer[i].classList.replace("unread", "read");
} else {
throw "data-container attribute is missing";
}
this.isRead = true;
},
},
})
.use(i18n)
.mount(el);
});
});

39
src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts Normal file
View File

@@ -0,0 +1,39 @@
import { createApp } from "vue";
import { _createI18n } from "../../vuejs/_js/i18n";
import NotificationReadAllToggle from "../../vuejs/_components/Notification/NotificationReadAllToggle.vue";
const i18n = _createI18n({});
document.addEventListener("DOMContentLoaded", function () {
const elements = document.querySelectorAll(".notification_all_read");
elements.forEach((element) => {
console.log('launch');
createApp({
template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
components: {
NotificationReadAllToggle,
},
methods: {
markAsRead(id: number) {
const el = document.querySelector<HTMLDivElement>(`div.notification-status[data-notification-id="${id}"]`);
if (el === null) {
return;
}
el.classList.add('read');
el.classList.remove('unread');
},
markAsUnread(id: number) {
const el = document.querySelector<HTMLDivElement>(`div.notification-status[data-notification-id="${id}"]`);
if (el === null) {
return;
}
el.classList.remove('read');
el.classList.add('unread');
},
}
})
.use(i18n)
.mount(element);
});
});