79381b08cc
# Pull Request Template ## Description This PR will replace the usage of `timeMixin` with `timeHelper` Fixes https://linear.app/chatwoot/issue/CW-3451/move-time-mixin-to-a-helper ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Please refer to this issue description. https://linear.app/chatwoot/issue/CW-3451/move-time-mixin-to-a-helper ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Sojan Jose <sojan@pepalo.com>
105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<woot-button
|
|
size="expanded"
|
|
color-scheme="secondary"
|
|
variant="link"
|
|
class="w-full"
|
|
@click="onClickOpenNotification()"
|
|
>
|
|
<div
|
|
class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
|
|
>
|
|
<div
|
|
v-if="!notificationItem.read_at"
|
|
class="w-2 h-2 rounded-full bg-woot-500"
|
|
/>
|
|
<div v-else class="flex w-2" />
|
|
<div
|
|
class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
|
|
>
|
|
<div class="flex justify-between">
|
|
<div class="flex items-center">
|
|
<span class="font-bold text-slate-800 dark:text-slate-100">
|
|
{{
|
|
`#${
|
|
notificationItem.primary_actor
|
|
? notificationItem.primary_actor.id
|
|
: $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
|
|
}`
|
|
}}
|
|
</span>
|
|
<span
|
|
class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
|
|
>
|
|
{{
|
|
$t(
|
|
`NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div v-if="hasNotificationAssignee">
|
|
<thumbnail
|
|
:src="notificationAssigneeThumbnail"
|
|
size="16px"
|
|
:username="notificationAssigneeName"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full">
|
|
<span
|
|
class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
|
|
>
|
|
{{ notificationItem.push_message_title }}
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
|
|
>
|
|
{{ dynamicTime(notificationItem.last_activity_at) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</woot-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
|
import { dynamicTime } from 'shared/helpers/timeHelper';
|
|
|
|
export default {
|
|
components: {
|
|
Thumbnail,
|
|
},
|
|
props: {
|
|
notificationItem: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
computed: {
|
|
notificationAssignee() {
|
|
const { primary_actor: primaryActor } = this.notificationItem;
|
|
return primaryActor?.meta?.assignee;
|
|
},
|
|
hasNotificationAssignee() {
|
|
return !!this.notificationAssignee;
|
|
},
|
|
notificationAssigneeName() {
|
|
return this.notificationAssignee?.name || '';
|
|
},
|
|
notificationAssigneeThumbnail() {
|
|
return this.notificationAssignee?.thumbnail || '';
|
|
},
|
|
},
|
|
methods: {
|
|
dynamicTime,
|
|
onClickOpenNotification() {
|
|
this.$emit('open-notification', this.notificationItem);
|
|
},
|
|
},
|
|
};
|
|
</script>
|