mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-03 15:57:15 +00:00
55425f57de
* feat: notifications wip * feat: wip * feat: longpoll and notifications.controller.ts * feat: longpoll and notifications.controller.ts * feat: enable email notifications * fix: notification styles and list * fix: update swagger feat: connect poller to frontend * fix: minor ui corrections * feat: move notifications to ee feat: scroll to commentId fix: polling fail on network error fix: unreadcount not updating fix: add workspace to comment mention event * fix: pubsub for notifications * fix: warning maxListeners * fix: update ui * fix: minor fixes * chore: move pub-sub to redis folder * fix: update ui and schema feat: optimistic comment update and create * fix: row empty during inital load causing row not loading * fix: build * fix: some updated * fix: minor ui corrections * fix: manage local state manually for interactivity * fix: remove prev notifcation data * fix: review comments * fix: code rabbit comments * fix: code rabbit comments * feat: delete notifications * fix: code rabbit comments * fix: row RowMeta manipulation fix: overflow notifications * fix: invalid offset * fix: updated widths * fix: tests * fix: playwright * feat: resolved by comments * feat: update layout * fix: wait 5 seconds before polling start, after polling starts, reload the notifications * fix: bug fixes * fix: disable long polling for playwright * fix: update migration * fix: lint * fix: code rabbit comments * fix: resolve tooltip * feat: resolve ee * fix: build failing * fix: review comments * fix: dependency synx * fix: update notification style
74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { NotificationType } from 'nocodb-sdk'
|
|
import { timeAgo } from '~/utils/datetimeUtils'
|
|
|
|
const props = defineProps<{
|
|
item: NotificationType
|
|
}>()
|
|
|
|
const item = toRef(props, 'item')
|
|
|
|
const { isMobileMode } = useGlobal()
|
|
|
|
const notificationStore = useNotification()
|
|
|
|
const { toggleRead, deleteNotification } = notificationStore
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex pl-6 pr-4 w-full overflow-x-hidden group py-4 hover:bg-gray-50 gap-3 relative cursor-pointer">
|
|
<div class="w-9.625">
|
|
<slot name="avatar">
|
|
<img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="w-8" />
|
|
</slot>
|
|
</div>
|
|
|
|
<div class="text-[13px] min-h-12 w-full leading-5">
|
|
<slot />
|
|
</div>
|
|
<div v-if="item" class="text-xs whitespace-nowrap absolute right-4.1 bottom-5 text-gray-600">
|
|
{{ timeAgo(item.created_at) }}
|
|
</div>
|
|
<div class="flex items-start">
|
|
<NcTooltip v-if="!item.is_read">
|
|
<template #title>
|
|
<span>Mark as read</span>
|
|
</template>
|
|
|
|
<NcButton
|
|
:class="{
|
|
'!opacity-100': isMobileMode,
|
|
}"
|
|
type="secondary"
|
|
class="!border-0 transition-all duration-100 opacity-0 !group-hover:opacity-100"
|
|
size="xsmall"
|
|
@click.stop="() => toggleRead(item)"
|
|
>
|
|
<GeneralIcon icon="check" class="text-gray-700" />
|
|
</NcButton>
|
|
</NcTooltip>
|
|
<NcDropdown
|
|
v-else
|
|
:class="{
|
|
'!opacity-100': isMobileMode,
|
|
}"
|
|
class="transition-all duration-100 opacity-0 !group-hover:opacity-100"
|
|
>
|
|
<NcButton size="xsmall" type="secondary" @click.stop>
|
|
<GeneralIcon icon="threeDotVertical" />
|
|
</NcButton>
|
|
|
|
<template #overlay>
|
|
<NcMenu>
|
|
<NcMenuItem @click.stop="() => toggleRead(item)"> Mark as unread </NcMenuItem>
|
|
<NcDivider />
|
|
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click.stop="deleteNotification(item)"> Delete </NcMenuItem>
|
|
</NcMenu>
|
|
</template>
|
|
</NcDropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|