mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Add notifications page with Notifications in table
- At the moment, the notifications are displayed in a table, and have the same functionality as the NotificationMenu where you can click on the title of the Post and visit the Post - Unsure about the styling, it would kind of be nice to have a more condensed list to see more notifications per page, but still be able to click on a row and visit the Post
This commit is contained in:
mattwr18
parent
ceb77d2bb6
commit
7cdc12f4b9
@ -1,37 +1,39 @@
|
||||
<template>
|
||||
<ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
|
||||
<client-only>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
|
||||
</ds-space>
|
||||
<ds-text class="reason-text-for-test" color="soft">
|
||||
{{ $t(`notifications.reason.${notification.reason}`) }}
|
||||
</ds-text>
|
||||
</client-only>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<nuxt-link
|
||||
class="notification-mention-post"
|
||||
:to="{ name: 'post-id-slug', params, ...hashParam }"
|
||||
@click.native="$emit('read')"
|
||||
>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<ds-card
|
||||
:header="from.title || from.post.title"
|
||||
hover
|
||||
space="x-small"
|
||||
class="notifications-card"
|
||||
>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<div>
|
||||
<span v-if="isComment" class="comment-notification-header">
|
||||
{{ $t(`notifications.comment`) }}:
|
||||
</span>
|
||||
{{ from.contentExcerpt | removeHtml }}
|
||||
</div>
|
||||
</ds-card>
|
||||
</ds-space>
|
||||
</nuxt-link>
|
||||
</ds-space>
|
||||
<ds-container>
|
||||
<ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
|
||||
<client-only>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
|
||||
</ds-space>
|
||||
<ds-text class="reason-text-for-test" color="soft">
|
||||
{{ $t(`notifications.reason.${notification.reason}`) }}
|
||||
</ds-text>
|
||||
</client-only>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<nuxt-link
|
||||
class="notification-mention-post"
|
||||
:to="{ name: 'post-id-slug', params, ...hashParam }"
|
||||
@click.native="$emit('read')"
|
||||
>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<ds-card
|
||||
:header="from.title || from.post.title"
|
||||
hover
|
||||
space="x-small"
|
||||
class="notifications-card"
|
||||
>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<div>
|
||||
<span v-if="isComment" class="comment-notification-header">
|
||||
{{ $t(`notifications.comment`) }}:
|
||||
</span>
|
||||
{{ from.contentExcerpt | removeHtml }}
|
||||
</div>
|
||||
</ds-card>
|
||||
</ds-space>
|
||||
</nuxt-link>
|
||||
</ds-space>
|
||||
</ds-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -69,7 +71,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.notification.read {
|
||||
opacity: 0.6; /* Real browsers */
|
||||
filter: alpha(opacity = 60); /* MSIE */
|
||||
|
||||
@ -12,6 +12,9 @@
|
||||
<div class="notifications-menu-popover">
|
||||
<notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
|
||||
</div>
|
||||
<ds-space centered>
|
||||
<nuxt-link to="/notifications">{{ $t('notifications.page') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</template>
|
||||
</dropdown>
|
||||
</template>
|
||||
|
||||
@ -52,7 +52,7 @@ export const notificationQuery = i18n => {
|
||||
${postFragment(lang)}
|
||||
|
||||
query {
|
||||
notifications(read: false, orderBy: updatedAt_desc) {
|
||||
notifications(orderBy: updatedAt_desc) {
|
||||
read
|
||||
reason
|
||||
createdAt
|
||||
|
||||
@ -176,7 +176,13 @@
|
||||
"mentioned_in_comment": "Mentioned you in a comment …",
|
||||
"commented_on_post": "Commented on your post …"
|
||||
},
|
||||
"comment": "Comment"
|
||||
"comment": "Comment",
|
||||
"title": "Notifications",
|
||||
"page": "All notifications",
|
||||
"createdAt": "Notification created at",
|
||||
"type": "Type",
|
||||
"user": "User",
|
||||
"action": "Action"
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Search",
|
||||
|
||||
197
webapp/pages/notifications/index.vue
Normal file
197
webapp/pages/notifications/index.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<ds-card space="small">
|
||||
<ds-flex>
|
||||
<ds-flex-item :width="{ lg: '85%' }">
|
||||
<ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="sorting-dropdown">
|
||||
<dropdown>
|
||||
<a
|
||||
slot="default"
|
||||
slot-scope="{ toggleMenu }"
|
||||
class="locale-menu"
|
||||
href="#"
|
||||
@click.prevent="toggleMenu()"
|
||||
>
|
||||
<ds-icon style="margin-right: 2px;" name="sort" />
|
||||
{{ 'All' }}
|
||||
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
|
||||
</a>
|
||||
<ds-menu
|
||||
slot="popover"
|
||||
slot-scope="{ toggleMenu }"
|
||||
class="locale-menu-popover"
|
||||
:routes="routes"
|
||||
>
|
||||
<ds-menu-item
|
||||
slot="menuitem"
|
||||
slot-scope="item"
|
||||
class="locale-menu-item"
|
||||
:route="item.route"
|
||||
:parents="item.parents"
|
||||
@click.stop.prevent="sortNotifications(item.route.option, toggleMenu)"
|
||||
>
|
||||
{{ item.route.option }}
|
||||
</ds-menu-item>
|
||||
</ds-menu>
|
||||
</dropdown>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-space />
|
||||
<ds-table
|
||||
v-if="notifications && notifications.length"
|
||||
:data="notifications"
|
||||
:fields="fields"
|
||||
id="notifications-table"
|
||||
>
|
||||
<template slot="notifications" slot-scope="scope">
|
||||
<ds-space :class="{ read: scope.row.read, notification: true }" margin="small">
|
||||
<client-only>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<hc-user
|
||||
:user="scope.row.from.author"
|
||||
:date-time="scope.row.from.createdAt"
|
||||
:trunc="35"
|
||||
/>
|
||||
</ds-space>
|
||||
<ds-text class="reason-text-for-test" color="soft">
|
||||
{{ $t(`notifications.reason.${scope.row.reason}`) }}
|
||||
</ds-text>
|
||||
</client-only>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<nuxt-link
|
||||
class="notification-mention-post"
|
||||
:to="{ name: 'post-id-slug', params, ...hashParam }"
|
||||
@click.native="$emit('read')"
|
||||
>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<ds-card
|
||||
:header="scope.row.from.title || scope.row.from.post.title"
|
||||
hover
|
||||
space="x-small"
|
||||
class="notifications-card"
|
||||
>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<div>
|
||||
<span v-if="isComment" class="comment-notification-header">
|
||||
{{ $t(`notifications.comment`) }}:
|
||||
</span>
|
||||
{{ scope.row.from.contentExcerpt | removeHtml }}
|
||||
</div>
|
||||
</ds-card>
|
||||
</ds-space>
|
||||
</nuxt-link>
|
||||
</ds-space>
|
||||
</template>
|
||||
<!-- <template slot="user" slot-scope="scope">
|
||||
<ds-space margin-bottom="base">
|
||||
<hc-user
|
||||
:user="scope.row.from.author"
|
||||
:date-time="scope.row.from.createdAt"
|
||||
:trunc="35"
|
||||
/>
|
||||
</ds-space>
|
||||
{{ $t(`notifications.reason.${scope.row.reason}`) }}
|
||||
</template>
|
||||
<template slot="type" slot-scope="scope">
|
||||
<nuxt-link
|
||||
class="notification-mention-post"
|
||||
:to="{ name: 'post-id-slug', params, ...hashParam }"
|
||||
@click.native="$emit('read')"
|
||||
>
|
||||
<ds-space margin-bottom="x-small">
|
||||
<ds-card
|
||||
:header="scope.row.from.title || scope.row.from.post.title"
|
||||
hover
|
||||
space="x-small"
|
||||
class="notifications-card"
|
||||
>
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<div>
|
||||
<span v-if="isComment" class="comment-notification-header">
|
||||
{{ $t(`notifications.comment`) }}:
|
||||
</span>
|
||||
{{ scope.row.from.contentExcerpt | removeHtml }}
|
||||
</div>
|
||||
</ds-card>
|
||||
</ds-space>
|
||||
</nuxt-link>
|
||||
</template> -->
|
||||
</ds-table>
|
||||
<hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HcUser from '~/components/User/User'
|
||||
import HcEmpty from '~/components/Empty.vue'
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
import { notificationQuery } from '~/graphql/User'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HcUser,
|
||||
Dropdown,
|
||||
HcEmpty,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notifications: [],
|
||||
sortingOptions: ['All', 'Read', 'Unread'],
|
||||
nofiticationRead: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return {
|
||||
notifications: null,
|
||||
// user: this.$t('notifications.user'),
|
||||
// type: this.$t('notifications.type'),
|
||||
}
|
||||
},
|
||||
routes() {
|
||||
let routes = this.sortingOptions.map(option => {
|
||||
return {
|
||||
option,
|
||||
}
|
||||
})
|
||||
return routes
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sortNotifications(option, toggleMenu) {
|
||||
if (option === 'Read') {
|
||||
this.notificationRead = true
|
||||
} else if (option === 'Unread') {
|
||||
this.notificationRead = false
|
||||
} else {
|
||||
this.notificationRead = null
|
||||
}
|
||||
this.$apollo.queries.notificationsPage.refetch()
|
||||
toggleMenu()
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
notificationsPage: {
|
||||
query() {
|
||||
return notificationQuery(this.$i18n)
|
||||
},
|
||||
update({ notifications }) {
|
||||
this.notifications = notifications
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
error(error) {
|
||||
this.$toast.error(error.message)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.sorting-dropdown {
|
||||
float: right;
|
||||
}
|
||||
#notifications-table thead {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user