scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-07 20:40:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add data-e2e to notifications flyout [SCI-11657]

Browse source
This commit is contained in:
Klemen Benedicic 2025-03-07 14:28:47 +01:00
parent 6e68feeb61
commit 8b76c4e180
2 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/vue/navigation/notifications/notification_item.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="sci-navigation--notificaitons-flyout-notification hover:bg-sn-super-light-grey !px-2 !-mx-2">
<div class="sci-navigation--notificaitons-flyout-notification hover:bg-sn-super-light-grey !px-2 !-mx-2" :data-e2e="`e2e-CO-${dataE2e}-${notification.id}`">
<div class="flex item-center">
<a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black grow">
<div class="sci-navigation--notificaitons-flyout-notification-date">
<div class="sci-navigation--notificaitons-flyout-notification-date" :data-e2e="`e2e-TX-${dataE2e}-${notification.id}-timestamp`">
{{ notification.attributes.created_at }}
</div>
</a>
<div class="ml-auto cursor-pointer" @click="toggleRead()">
<div class="ml-auto cursor-pointer" @click="toggleRead()" :data-e2e="`e2e-IC-${dataE2e}-${notification.id}-status`">
<div v-if="!notification.attributes.checked" class="w-2.5 h-2.5 bg-sn-coral rounded-full cursor-pointer"></div>
<div v-else class="w-2.5 h-2.5 border-2 border-sn-grey rounded-full border-solid cursor-pointer hover:border-sn-coral"></div>
</div>
@ -14,10 +14,16 @@
<a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black">
<div class="sci-navigation--notificaitons-flyout-notification-title"
v-html="notification.attributes.title"
:data-seen="notification.attributes.checked"></div>
<div v-html="notification.attributes.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
:data-seen="notification.attributes.checked"
:data-e2e="`e2e-TX-${dataE2e}-${notification.id}-title`"
></div>
<div
v-html="notification.attributes.message"
class="sci-navigation--notificaitons-flyout-notification-message"
:data-e2e="`e2e-TX-${dataE2e}-${notification.id}-message`"
></div>
</a>
<div v-if="notification.attributes.breadcrumbs" class="flex items-center flex-wrap gap-0.5">
<div v-if="notification.attributes.breadcrumbs" class="flex items-center flex-wrap gap-0.5" :data-e2e="`e2e-BC-${dataE2e}-${notification.id}-breadcrumbs`">
<Breadcrumbs :breadcrumbs="notification.attributes.breadcrumbs" />
</div>
</div>
@ -30,7 +36,8 @@ import Breadcrumbs from '../../shared/breadcrumbs.vue';
export default {
name: 'NotificationItem',
props: {
notification: Object
notification: Object,
dataE2e: { type: String, default: '' }
},
components: {
Breadcrumbs

26
app/javascript/vue/navigation/notifications/notifications_flyout.vue
View file

@ -1,8 +1,13 @@
<template>
<div class="sci--navigation--notificaitons-flyout">
<div class="sci--navigation--notificaitons-flyout-title">
<div class="sci--navigation--notificaitons-flyout" data-e2e="e2e-CO-notifications-flyout">
<div class="sci--navigation--notificaitons-flyout-title" data-e2e="e2e-TX-notifications-title">
{{ i18n.t('nav.notifications.title') }}
<a class="ml-auto cursor-pointer text-sm font-normal" :href="this.preferencesUrl" :title="i18n.t('nav.settings')">
<a
class="ml-auto cursor-pointer text-sm font-normal"
:href="this.preferencesUrl"
:title="i18n.t('nav.settings')"
data-e2e="e2e-BT-notifications-settings"
>
{{ i18n.t('nav.settings') }}
</a>
</div>
@ -11,6 +16,7 @@
@click="changeTab('all')"
class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
:class="{'!text-sn-black border-sn-blue': activeTab === 'all'}"
data-e2e="e2e-BT-notifications-all-tab"
>
{{ i18n.t('nav.notifications.all') }}
</div>
@ -18,6 +24,7 @@
@click="changeTab('unread')"
class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
:class="{'!text-sn-black border-sn-blue': activeTab === 'unread'}"
data-e2e="e2e-BT-notifications-unread-tab"
>
{{ i18n.t('nav.notifications.unread') }}
</div>
@ -25,29 +32,32 @@
@click="changeTab('read')"
class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
:class="{'!text-sn-black border-sn-blue': activeTab === 'read'}"
data-e2e="e2e-BT-notifications-read-tab"
>
{{ i18n.t('nav.notifications.read') }}
</div>
<div v-if="activeTab !== 'read'" class="py-2 ml-auto cursor-pointer" @click="markAllNotificationsAsRead">
<div v-if="activeTab !== 'read'" class="py-2 ml-auto cursor-pointer" @click="markAllNotificationsAsRead" data-e2e="e2e-BT-notifications-readAll">
{{ i18n.t('nav.notifications.read_all') }}
</div>
</div>
<hr class="!mt-0.5">
<perfect-scrollbar @wheel="preventPropagation" ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
<div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length">
<div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length" data-e2e="e2e-TX-notifications-today-subtitle">
{{ i18n.t('nav.notifications.today') }}
</div>
<NotificationItem v-for="notification in todayNotifications" :key="notification.type_of + '-' + notification.id"
@updateNotification="updateNotification"
@close="$emit('close')"
:notification="notification" />
<div class="sci-navigation--notificaitons-flyout-subtitle" v-if="olderNotifications.length">
:notification="notification"
:dataE2e="'notifications-today'"/>
<div class="sci-navigation--notificaitons-flyout-subtitle" v-if="olderNotifications.length" data-e2e="e2e-TX-notifications-older-subtitle">
{{ i18n.t('nav.notifications.older') }}
</div>
<NotificationItem v-for="notification in olderNotifications" :key="notification.type_of + '-' + notification.id"
@updateNotification="updateNotification"
@close="$emit('close')"
:notification="notification" />
:notification="notification"
:dataE2e="'notifications-older'"/>
<div class="next-page-loader">
<img src="/images/medium/loading.svg" v-if="loadingPage" />
</div>