fix: mark notifications as read when accessed
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
This commit is contained in:
puriphatt
parent
fc4f2fd7e1
commit
3d3ba53a53
2 changed files with 78 additions and 60 deletions
|
|
@ -115,8 +115,13 @@ function doLogout() {
|
|||
}
|
||||
|
||||
function readNoti(id: string) {
|
||||
const notification = notificationData.value.find((n) => n.id === id);
|
||||
|
||||
state.notiDialog = true;
|
||||
state.notiId = id;
|
||||
if (notification) {
|
||||
notification.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -301,20 +306,19 @@ onMounted(async () => {
|
|||
:offset="[0, 10]"
|
||||
anchor="bottom middle"
|
||||
self="top middle"
|
||||
style="max-height: 30vh; width: 300px"
|
||||
@before-hide="
|
||||
() => {
|
||||
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">
|
||||
{{ $t('noti.title') }}
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="q-px-md q-pb-md q-gutter-x-md">
|
||||
<div class="q-px-sm q-pb-md">
|
||||
<q-btn
|
||||
rounded
|
||||
padding="0px 10px"
|
||||
|
|
@ -328,67 +332,76 @@ onMounted(async () => {
|
|||
@click="setActive(btn)"
|
||||
/>
|
||||
</div>
|
||||
<div style="overflow-y: auto">
|
||||
<section
|
||||
v-if="
|
||||
state.filterUnread
|
||||
? notificationData.filter((v) => !v.read).length
|
||||
: notificationData.length
|
||||
"
|
||||
class="caption cursor-pointer"
|
||||
<section
|
||||
v-if="
|
||||
state.filterUnread
|
||||
? notificationData.filter((v) => !v.read).length
|
||||
: notificationData.length
|
||||
"
|
||||
class="caption cursor-pointer scroll"
|
||||
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
|
||||
v-for="(item, i) in state.filterUnread
|
||||
? notificationData.filter((v) => !v.read)
|
||||
: notificationData"
|
||||
dense
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
v-ripple
|
||||
@click="readNoti(item.id)"
|
||||
:key="i"
|
||||
<div
|
||||
class="rounded q-mr-sm"
|
||||
:style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
|
||||
/>
|
||||
<q-avatar
|
||||
v-if="$q.screen.gt.xs"
|
||||
color="positive"
|
||||
style="height: 36px; width: 36px"
|
||||
>
|
||||
<q-avatar
|
||||
v-if="$q.screen.gt.xs"
|
||||
color="positive"
|
||||
style="height: 36px; width: 36px"
|
||||
>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
|
||||
<div class="col column text-caption q-pl-md ellipsis">
|
||||
<span
|
||||
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]"
|
||||
>
|
||||
<div class="col column text-caption q-pl-md ellipsis">
|
||||
<span class="block ellipsis full-width text-weight-bold">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span
|
||||
class="block ellipsis full-width text-stone"
|
||||
:class="{ 'text-weight-medium': !item.read }"
|
||||
>
|
||||
{{ item.detail }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
</section>
|
||||
<section v-else class="text-center q-py-sm">
|
||||
<span class="app-text-muted">
|
||||
{{ $t('general.noData') }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
align="right"
|
||||
class="text-caption text-stone q-pl-md"
|
||||
:class="{ 'text-weight-bold': !item.read }"
|
||||
>
|
||||
{{ moment(item.createdAt).fromNow() }}
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
<q-tooltip
|
||||
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">
|
||||
<q-btn
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -75,8 +75,13 @@ async function deleteNoti() {
|
|||
}
|
||||
|
||||
function readNoti(id: string) {
|
||||
const notification = noti.value.find((n) => n.id === id);
|
||||
|
||||
state.notiId = id;
|
||||
state.notiDialog = true;
|
||||
if (notification) {
|
||||
notification.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -203,10 +208,10 @@ onMounted(async () => {
|
|||
class="q-py-sm q-px-md rounded row no-wrap items-center"
|
||||
@click.stop="readNoti(n.id)"
|
||||
>
|
||||
<!-- <div
|
||||
<div
|
||||
class="rounded"
|
||||
:style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
|
||||
/> -->
|
||||
/>
|
||||
<q-checkbox
|
||||
:model-value="selectedNoti.includes(n.id)"
|
||||
size="xs"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue