mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Paginate notifications, reusable component w/ test
This commit is contained in:
mattwr18
parent
084388a21e
commit
7007b1c444
71
webapp/components/Paginate/Paginate.spec.js
Normal file
71
webapp/components/Paginate/Paginate.spec.js
Normal file
@ -0,0 +1,71 @@
|
||||
import { mount, createLocalVue } from '@vue/test-utils'
|
||||
import Styleguide from '@human-connection/styleguide'
|
||||
import Paginate from './Paginate'
|
||||
|
||||
const localVue = createLocalVue()
|
||||
|
||||
localVue.use(Styleguide)
|
||||
|
||||
describe('Paginate.vue', () => {
|
||||
let propsData, wrapper, Wrapper, nextButton, backButton
|
||||
|
||||
beforeEach(() => {
|
||||
propsData = {}
|
||||
})
|
||||
|
||||
Wrapper = () => {
|
||||
return mount(Paginate, { propsData, localVue })
|
||||
}
|
||||
describe('mount', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
describe('next button', () => {
|
||||
beforeEach(() => {
|
||||
propsData.hasNext = true
|
||||
wrapper = Wrapper()
|
||||
nextButton = wrapper.findAll('.ds-button').at(0)
|
||||
})
|
||||
|
||||
it('is disabled by default', () => {
|
||||
propsData = {}
|
||||
wrapper = Wrapper()
|
||||
nextButton = wrapper.findAll('.ds-button').at(0)
|
||||
expect(nextButton.attributes().disabled).toEqual('disabled')
|
||||
})
|
||||
|
||||
it('is not disabled if hasNext is true', () => {
|
||||
expect(nextButton.attributes().disabled).toBeUndefined()
|
||||
})
|
||||
|
||||
it('emits back when clicked', async () => {
|
||||
await nextButton.trigger('click')
|
||||
expect(wrapper.emitted().next).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('back button', () => {
|
||||
beforeEach(() => {
|
||||
propsData.hasPrevious = true
|
||||
wrapper = Wrapper()
|
||||
backButton = wrapper.findAll('.ds-button').at(1)
|
||||
})
|
||||
|
||||
it('is disabled by default', () => {
|
||||
propsData = {}
|
||||
wrapper = Wrapper()
|
||||
backButton = wrapper.findAll('.ds-button').at(1)
|
||||
expect(backButton.attributes().disabled).toEqual('disabled')
|
||||
})
|
||||
|
||||
it('is not disabled if hasPrevious is true', () => {
|
||||
expect(backButton.attributes().disabled).toBeUndefined()
|
||||
})
|
||||
|
||||
it('emits back when clicked', async () => {
|
||||
await backButton.trigger('click')
|
||||
expect(wrapper.emitted().back).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
26
webapp/components/Paginate/Paginate.vue
Normal file
26
webapp/components/Paginate/Paginate.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<ds-flex direction="row-reverse">
|
||||
<ds-flex-item width="50px">
|
||||
<ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="50px">
|
||||
<ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hasNext: { type: Boolean, default: false },
|
||||
hasPrevious: { type: Boolean, default: false },
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$emit('back')
|
||||
},
|
||||
next() {
|
||||
this.$emit('next')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -51,8 +51,8 @@ export const notificationQuery = i18n => {
|
||||
${commentFragment(lang)}
|
||||
${postFragment(lang)}
|
||||
|
||||
query($read: Boolean, $orderBy: NotificationOrdering) {
|
||||
notifications(read: $read, orderBy: $orderBy) {
|
||||
query($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
|
||||
notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
|
||||
read
|
||||
reason
|
||||
createdAt
|
||||
|
||||
@ -5,158 +5,52 @@
|
||||
<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" />
|
||||
{{ selected }}
|
||||
<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, toggleMenu)"
|
||||
>
|
||||
{{ item.route.label }}
|
||||
</ds-menu-item>
|
||||
</ds-menu>
|
||||
</dropdown>
|
||||
<client-only>
|
||||
<notifications-dropdown-filter @sortNotifications="sortNotifications" />
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-space />
|
||||
<ds-table
|
||||
v-if="selectedNotifications && selectedNotifications.length"
|
||||
:data="selectedNotifications"
|
||||
:fields="fields"
|
||||
class="notifications-table"
|
||||
>
|
||||
<template slot="icon" slot-scope="scope">
|
||||
<ds-icon
|
||||
v-if="scope.row.from.post"
|
||||
name="comment"
|
||||
v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
|
||||
/>
|
||||
<ds-icon
|
||||
v-else
|
||||
name="bookmark"
|
||||
v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
|
||||
/>
|
||||
</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"
|
||||
:class="{ 'notification-status': scope.row.read }"
|
||||
/>
|
||||
</ds-space>
|
||||
<ds-text :class="{ 'notification-status': scope.row.read }">
|
||||
{{ $t(`notifications.reason.${scope.row.reason}`) }}
|
||||
</ds-text>
|
||||
</template>
|
||||
<template slot="post" slot-scope="scope">
|
||||
<nuxt-link
|
||||
class="notification-mention-post"
|
||||
:class="{ 'notification-status': scope.row.read }"
|
||||
:to="{
|
||||
name: 'post-id-slug',
|
||||
params: {
|
||||
id:
|
||||
scope.row.from.__typename === 'Comment'
|
||||
? scope.row.from.post.id
|
||||
: scope.row.from.id,
|
||||
slug:
|
||||
scope.row.from.__typename === 'Comment'
|
||||
? scope.row.from.post.slug
|
||||
: scope.row.from.slug,
|
||||
},
|
||||
hash: scope.row.from.__typename === 'Comment' ? `#commentId-${scope.row.from.id}` : {},
|
||||
}"
|
||||
@click.native="markNotificationAsRead(scope.row.from.id)"
|
||||
>
|
||||
<b>{{ scope.row.from.title || scope.row.from.post.title | truncate(50) }}</b>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<template slot="content" slot-scope="scope">
|
||||
<b :class="{ 'notification-status': scope.row.read }">
|
||||
{{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}
|
||||
</b>
|
||||
</template>
|
||||
</ds-table>
|
||||
<hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
|
||||
<notifications-table
|
||||
@markNotificationAsRead="markNotificationAsRead"
|
||||
:notifications="notifications"
|
||||
/>
|
||||
<paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HcUser from '~/components/User/User'
|
||||
import HcEmpty from '~/components/Empty.vue'
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
|
||||
import NotificationsDropdownFilter from '~/components/NotificationsDropdownFilter/NotificationsDropdownFilter'
|
||||
import Paginate from '~/components/Paginate/Paginate'
|
||||
import { notificationQuery, markAsReadMutation } from '~/graphql/User'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HcUser,
|
||||
Dropdown,
|
||||
HcEmpty,
|
||||
NotificationsDropdownFilter,
|
||||
NotificationsTable,
|
||||
Paginate,
|
||||
},
|
||||
data() {
|
||||
const pageSize = 12
|
||||
return {
|
||||
selectedNotifications: [],
|
||||
selected: this.$t('notifications.sortingLabel.all'),
|
||||
sortingOptions: [
|
||||
{ label: this.$t('notifications.sortingLabel.all'), value: null },
|
||||
{ label: this.$t('notifications.sortingLabel.read'), value: true },
|
||||
{ label: this.$t('notifications.sortingLabel.unread'), value: false },
|
||||
],
|
||||
offset: 0,
|
||||
notifications: [],
|
||||
nofiticationRead: null,
|
||||
pageSize,
|
||||
first: pageSize,
|
||||
hasNext: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return {
|
||||
icon: {
|
||||
label: ' ',
|
||||
width: '60px',
|
||||
},
|
||||
user: {
|
||||
label: this.$t('notifications.user'),
|
||||
width: '33.333%',
|
||||
},
|
||||
post: this.$t('notifications.post'),
|
||||
content: this.$t('notifications.content'),
|
||||
}
|
||||
},
|
||||
routes() {
|
||||
let routes = this.sortingOptions.map(option => {
|
||||
return {
|
||||
label: option.label,
|
||||
value: option.value,
|
||||
}
|
||||
})
|
||||
return routes
|
||||
hasPrevious() {
|
||||
return this.offset > 0
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sortNotifications(option, toggleMenu) {
|
||||
sortNotifications(option) {
|
||||
this.notificationRead = option.value
|
||||
this.selected = option.label
|
||||
this.$apollo.queries.notifications.refresh()
|
||||
toggleMenu()
|
||||
},
|
||||
async markNotificationAsRead(notificationSourceId) {
|
||||
try {
|
||||
@ -168,6 +62,12 @@ export default {
|
||||
this.$toast.error(error.message)
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.offset = Math.max(this.offset - this.pageSize, 0)
|
||||
},
|
||||
next() {
|
||||
this.offset += this.pageSize
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
notifications: {
|
||||
@ -175,13 +75,21 @@ export default {
|
||||
return notificationQuery(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
const { first, offset } = this
|
||||
return {
|
||||
read: this.notificationRead,
|
||||
orderBy: 'updatedAt_desc',
|
||||
first,
|
||||
offset,
|
||||
}
|
||||
},
|
||||
update({ notifications }) {
|
||||
this.selectedNotifications = notifications
|
||||
if (!notifications) return []
|
||||
this.hasNext = notifications.length >= this.pageSize
|
||||
if (notifications.length <= 0 && this.offset > 0) return this.notifications // edge case, avoid a blank page
|
||||
return notifications.map((notification, index) =>
|
||||
Object.assign({}, notification, { index: this.offset + index }),
|
||||
)
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
error(error) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user