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

129
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,67 +332,76 @@ 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 scroll"
class="caption cursor-pointer" style="max-height: 30vh; width: 300px"
>
<q-item
v-for="(item, i) in state.filterUnread
? notificationData.filter((v) => !v.read)
: notificationData"
dense
clickable
class="items-center q-py-xs q-px-sm"
v-ripple
@click="readNoti(item.id)"
:key="i"
> >
<q-item <div
v-for="(item, i) in state.filterUnread class="rounded q-mr-sm"
? notificationData.filter((v) => !v.read) :style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
: notificationData" />
dense <q-avatar
clickable v-if="$q.screen.gt.xs"
class="q-py-sm" color="positive"
v-ripple style="height: 36px; width: 36px"
@click="readNoti(item.id)"
:key="i"
> >
<q-avatar <q-icon color="white" name="mdi-check" />
v-if="$q.screen.gt.xs" </q-avatar>
color="positive"
style="height: 36px; width: 36px"
>
<q-icon color="white" name="mdi-check" />
</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 }}
</span>
<span class="block ellipsis full-width text-stone">
{{ item.detail }}
</span>
</div>
<span
align="right"
class="text-caption text-stone q-pl-sm"
>
{{ moment(item.createdAt).fromNow() }}
</span>
<q-tooltip
anchor="top middle"
self="bottom middle"
:delay="1000"
:offset="[10, 10]"
>
{{ item.title }} {{ item.title }}
</span>
<span
class="block ellipsis full-width text-stone"
:class="{ 'text-weight-medium': !item.read }"
>
{{ item.detail }} {{ item.detail }}
</q-tooltip> </span>
</q-item> </div>
</section> <span
<section v-else class="text-center q-py-sm"> align="right"
<span class="app-text-muted"> class="text-caption text-stone q-pl-md"
{{ $t('general.noData') }} :class="{ 'text-weight-bold': !item.read }"
>
{{ moment(item.createdAt).fromNow() }}
</span> </span>
</section> <q-tooltip
</div> anchor="top middle"
self="bottom middle"
:delay="1000"
:offset="[10, 10]"
>
{{ item.title }}
{{ item.detail }}
</q-tooltip>
</q-item>
</section>
<section
v-else
class="text-center q-py-sm"
style="max-height: 30vh; width: 300px"
>
<span class="app-text-muted">
{{ $t('general.noData') }}
</span>
</section>
<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"