chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: mark notifications as read when accessed
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source
This commit is contained in:
puriphatt 2025-03-10 14:39:24 +07:00
parent fc4f2fd7e1
commit 3d3ba53a53
2 changed files with 78 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/layouts/MainLayout.vue
View file

@ -115,8 +115,13 @@ function doLogout() {
} }
function readNoti(id: string) { function readNoti(id: string) {
const notification = notificationData.value.find((n) => n.id === id);
state.notiDialog = true; state.notiDialog = true;
state.notiId = id; state.notiId = id;
if (notification) {
notification.read = true;
}
} }
onMounted(async () => { onMounted(async () => {
@ -301,20 +306,19 @@ onMounted(async () => {
:offset="[0, 10]" :offset="[0, 10]"
anchor="bottom middle" anchor="bottom middle"
self="top middle" self="top middle"
style="max-height: 30vh; width: 300px"
@before-hide=" @before-hide="
() => { () => {
state.notiOpen = false; state.notiOpen = false;
} }
" "
> >
<div class="q-px-md q-py-sm row col-12 items-center"> <div class="q-pa-sm row col-12 items-center">
<div class="text-subtitle1 text-weight-bold"> <div class="text-subtitle1 text-weight-bold">
{{ $t('noti.title') }} {{ $t('noti.title') }}
</div> </div>
<q-space /> <q-space />
</div> </div>
<div class="q-px-md q-pb-md q-gutter-x-md"> <div class="q-px-sm q-pb-md">
<q-btn <q-btn
rounded rounded
padding="0px 10px" padding="0px 10px"
@ -328,14 +332,14 @@ onMounted(async () => {
@click="setActive(btn)" @click="setActive(btn)"
/> />
</div> </div>
<div style="overflow-y: auto">
<section <section
v-if=" v-if="
state.filterUnread state.filterUnread
? notificationData.filter((v) => !v.read).length ? notificationData.filter((v) => !v.read).length
: notificationData.length : notificationData.length
" "
class="caption cursor-pointer" class="caption cursor-pointer scroll"
style="max-height: 30vh; width: 300px"
> >
<q-item <q-item
v-for="(item, i) in state.filterUnread v-for="(item, i) in state.filterUnread
@ -343,11 +347,15 @@ onMounted(async () => {
: notificationData" : notificationData"
dense dense
clickable clickable
class="q-py-sm" class="items-center q-py-xs q-px-sm"
v-ripple v-ripple
@click="readNoti(item.id)" @click="readNoti(item.id)"
:key="i" :key="i"
> >
<div
class="rounded q-mr-sm"
:style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
/>
<q-avatar <q-avatar
v-if="$q.screen.gt.xs" v-if="$q.screen.gt.xs"
color="positive" color="positive"
@ -357,18 +365,20 @@ onMounted(async () => {
</q-avatar> </q-avatar>
<div class="col column text-caption q-pl-md ellipsis"> <div class="col column text-caption q-pl-md ellipsis">
<span <span class="block ellipsis full-width text-weight-bold">
class="block ellipsis full-width text-weight-bold"
>
{{ item.title }} {{ item.title }}
</span> </span>
<span class="block ellipsis full-width text-stone"> <span
class="block ellipsis full-width text-stone"
:class="{ 'text-weight-medium': !item.read }"
>
{{ item.detail }} {{ item.detail }}
</span> </span>
</div> </div>
<span <span
align="right" align="right"
class="text-caption text-stone q-pl-sm" class="text-caption text-stone q-pl-md"
:class="{ 'text-weight-bold': !item.read }"
> >
{{ moment(item.createdAt).fromNow() }} {{ moment(item.createdAt).fromNow() }}
</span> </span>
@ -383,12 +393,15 @@ onMounted(async () => {
</q-tooltip> </q-tooltip>
</q-item> </q-item>
</section> </section>
<section v-else class="text-center q-py-sm"> <section
v-else
class="text-center q-py-sm"
style="max-height: 30vh; width: 300px"
>
<span class="app-text-muted"> <span class="app-text-muted">
{{ $t('general.noData') }} {{ $t('general.noData') }}
</span> </span>
</section> </section>
</div>
<div class="col bordered-t"> <div class="col bordered-t">
<q-btn <q-btn
flat flat

9
src/pages/00_notification/MainPage.vue
View file

@ -75,8 +75,13 @@ async function deleteNoti() {
} }
function readNoti(id: string) { function readNoti(id: string) {
const notification = noti.value.find((n) => n.id === id);
state.notiId = id; state.notiId = id;
state.notiDialog = true; state.notiDialog = true;
if (notification) {
notification.read = true;
}
} }
onMounted(async () => { onMounted(async () => {
@ -203,10 +208,10 @@ onMounted(async () => {
class="q-py-sm q-px-md rounded row no-wrap items-center" class="q-py-sm q-px-md rounded row no-wrap items-center"
@click.stop="readNoti(n.id)" @click.stop="readNoti(n.id)"
> >
<!-- <div <div
class="rounded" class="rounded"
:style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`" :style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
/> --> />
<q-checkbox <q-checkbox
:model-value="selectedNoti.includes(n.id)" :model-value="selectedNoti.includes(n.id)"
size="xs" size="xs"