feat: comments delete + refresh on post + formatting

This commit is contained in:
NGPixel 2020-05-31 02:13:41 -04:00
parent 83f7c2867d
commit 8a74904731
7 changed files with 375 additions and 52 deletions

View File

@ -51,7 +51,7 @@
v-icon(left) mdi-comment v-icon(left) mdi-comment
span.text-none Post Comment span.text-none Post Comment
v-divider.mt-3(v-if='permissions.write') v-divider.mt-3(v-if='permissions.write')
.pa-5.d-flex.align-center.justify-center(v-if='isLoading') .pa-5.d-flex.align-center.justify-center(v-if='isLoading && !hasLoadedOnce')
v-progress-circular( v-progress-circular(
indeterminate indeterminate
size='20' size='20'
@ -63,22 +63,38 @@
dense dense
v-else-if='comments && comments.length > 0' v-else-if='comments && comments.length > 0'
) )
v-timeline-item( v-timeline-item.comments-post(
color='pink darken-4' color='pink darken-4'
large large
v-for='cm of comments' v-for='cm of comments'
:key='`comment-` + cm.id' :key='`comment-` + cm.id'
:id='`comment-post-id-` + cm.id'
) )
template(v-slot:icon) template(v-slot:icon)
v-avatar v-avatar(color='blue-grey')
v-img(src='http://i.pravatar.cc/64') //- v-img(src='http://i.pravatar.cc/64')
span.white--text.title {{cm.initials}}
v-card.elevation-1 v-card.elevation-1
v-card-text v-card-text
.caption: strong {{cm.authorName}} .comments-post-actions(v-if='permissions.manage && !isBusy')
.overline.grey--text 3 minutes ago v-icon.mr-3(small, @click='editComment(cm)') mdi-pencil
.mt-3 {{cm.render}} v-icon(small, @click='deleteCommentConfirm(cm)') mdi-delete
.comments-post-name.caption: strong {{cm.authorName}}
.comments-post-date.overline.grey--text {{cm.createdAt | moment('from') }} #[em(v-if='cm.createdAt !== cm.updatedAt') - modified {{cm.updatedAt | moment('from') }}]
.comments-post-content.mt-3(v-html='cm.render')
.pt-5.text-center.body-2.blue-grey--text(v-else-if='permissions.write') Be the first to comment. .pt-5.text-center.body-2.blue-grey--text(v-else-if='permissions.write') Be the first to comment.
.text-center.body-2.blue-grey--text(v-else) No comments yet. .text-center.body-2.blue-grey--text(v-else) No comments yet.
v-dialog(v-model='deleteCommentDialogShown', max-width='500')
v-card
.dialog-header.is-red Confirm Delete
v-card-text.pt-5
span Are you sure you want to permanently delete this comment?
.caption: strong This action cannot be undone!
v-card-chin
v-spacer
v-btn(text, @click='deleteCommentDialogShown = false') {{$t('common:actions.cancel')}}
v-btn(color='red', dark, @click='deleteComment') {{$t('common:actions.delete')}}
</template> </template>
<script> <script>
@ -92,10 +108,18 @@ export default {
return { return {
newcomment: '', newcomment: '',
isLoading: true, isLoading: true,
canFetch: false, hasLoadedOnce: false,
comments: [], comments: [],
guestName: '', guestName: '',
guestEmail: '' guestEmail: '',
commentToDelete: {},
deleteCommentDialogShown: false,
isBusy: false,
scrollOpts: {
duration: 1500,
offset: 0,
easing: 'easeInOutCubic'
}
} }
}, },
computed: { computed: {
@ -107,10 +131,46 @@ export default {
methods: { methods: {
onIntersect (entries, observer, isIntersecting) { onIntersect (entries, observer, isIntersecting) {
if (isIntersecting) { if (isIntersecting) {
this.isLoading = true this.fetch()
this.canFetch = true
} }
}, },
async fetch () {
this.isLoading = true
const results = await this.$apollo.query({
query: gql`
query ($locale: String!, $path: String!) {
comments {
list(locale: $locale, path: $path) {
id
render
authorName
createdAt
updatedAt
}
}
}
`,
variables: {
locale: this.$store.get('page/locale'),
path: this.$store.get('page/path')
},
fetchPolicy: 'network-only'
})
this.comments = _.get(results, 'data.comments.list', []).map(c => {
const nameParts = c.authorName.toUpperCase().split(' ')
let initials = _.head(nameParts).charAt(0)
if (nameParts.length > 1) {
initials += _.last(nameParts).charAt(0)
}
c.initials = initials
return c
})
this.isLoading = false
this.hasLoadedOnce = true
},
/**
* Post New Comment
*/
async postComment () { async postComment () {
let rules = { let rules = {
comment: { comment: {
@ -177,6 +237,7 @@ export default {
slug slug
message message
} }
id
} }
} }
} }
@ -198,6 +259,10 @@ export default {
}) })
this.newcomment = '' this.newcomment = ''
await this.fetch()
this.$nextTick(() => {
this.$vuetify.goTo(`#comment-post-id-${_.get(resp, 'data.comments.create.id', 0)}`, this.scrollOpts)
})
} else { } else {
this.$store.commit('showNotification', { this.$store.commit('showNotification', {
style: 'red', style: 'red',
@ -205,41 +270,117 @@ export default {
icon: 'alert' icon: 'alert'
}) })
} }
} },
}, async editComment (cm) {
apollo: {
comments: { },
query: gql` deleteCommentConfirm (cm) {
query ($pageId: Int!) { this.commentToDelete = cm
comments { this.deleteCommentDialogShown = true
list(pageId: $pageId) { },
id /**
render * Delete Comment
authorName */
createdAt async deleteComment () {
updatedAt this.$store.commit(`loadingStart`, 'comments-delete')
this.isBusy = true
this.deleteCommentDialogShown = false
const resp = await this.$apollo.mutate({
mutation: gql`
mutation (
$id: Int!
) {
comments {
delete (
id: $id
) {
responseResult {
succeeded
errorCode
slug
message
}
}
} }
} }
`,
variables: {
id: this.commentToDelete.id
} }
`, })
variables() {
return { if (_.get(resp, 'data.comments.delete.responseResult.succeeded', false)) {
pageId: this.pageId this.$store.commit('showNotification', {
} style: 'success',
}, message: 'Comment was deleted successfully.',
skip () { icon: 'check'
return !this.canFetch })
},
fetchPolicy: 'cache-and-network', this.comments = _.reject(this.comments, ['id', this.commentToDelete.id])
update: (data) => data.comments.list, } else {
watchLoading (isLoading) { this.$store.commit('showNotification', {
this.isLoading = isLoading style: 'red',
message: _.get(resp, 'data.comments.delete.responseResult.message', 'An unexpected error occured.'),
icon: 'alert'
})
} }
this.isBusy = false
this.$store.commit(`loadingStop`, 'comments-delete')
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.comments-post {
position: relative;
&:hover {
.comments-post-actions {
opacity: 1;
}
}
&-actions {
position: absolute;
top: 16px;
right: 16px;
opacity: 0;
transition: opacity .4s ease;
}
&-content {
> p:first-child {
padding-top: 0;
}
p {
padding-top: 1rem;
margin-bottom: 0;
}
img {
max-width: 100%;
}
code {
background-color: rgba(mc('pink', '500'), .1);
box-shadow: none;
}
pre > code {
margin-top: 1rem;
padding: 12px;
background-color: #111;
box-shadow: none;
border-radius: 5px;
width: 100%;
color: #FFF;
font-weight: 400;
font-size: .85rem;
font-family: Roboto Mono, monospace;
}
}
}
</style> </style>

View File

@ -823,7 +823,7 @@
border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0;
@at-root .theme--dark & { @at-root .theme--dark & {
background-color: lighten(mc('grey', '900'), 5%); background-color: lighten(mc('blue-grey', '900'), 5%);
} }
} }

View File

@ -40,7 +40,25 @@ module.exports = {
* Fetch list of comments for a page * Fetch list of comments for a page
*/ */
async list (obj, args, context) { async list (obj, args, context) {
return [] const page = await WIKI.models.pages.getPage(args)
if (page) {
if (WIKI.auth.checkAccess(context.req.user, ['read:comments'], {
path: page.path,
locale: page.localeCode
})) {
const comments = await WIKI.models.comments.query().where('pageId', page.id)
return comments.map(c => ({
...c,
authorName: c.name,
authorEmail: c.email,
authorIP: c.ip
}))
} else {
throw new WIKI.Error.PageViewForbidden()
}
} else {
return []
}
} }
}, },
CommentMutation: { CommentMutation: {
@ -49,12 +67,31 @@ module.exports = {
*/ */
async create (obj, args, context) { async create (obj, args, context) {
try { try {
// WIKI.data.commentProvider.create({ const cmId = await WIKI.models.comments.postNewComment({
// ...args, ...args,
// user: context.req.user user: context.req.user,
// }) ip: context.req.ip
})
return { return {
responseResult: graphHelper.generateSuccess('New comment posted successfully') responseResult: graphHelper.generateSuccess('New comment posted successfully'),
id: cmId
}
} catch (err) {
return graphHelper.generateError(err)
}
},
/**
* Delete an Existing Comment
*/
async delete (obj, args, context) {
try {
await WIKI.models.comments.deleteComment({
id: args.id,
user: context.req.user,
ip: context.req.ip
})
return {
responseResult: graphHelper.generateSuccess('Comment deleted successfully')
} }
} catch (err) { } catch (err) {
return graphHelper.generateError(err) return graphHelper.generateError(err)

View File

@ -18,7 +18,8 @@ type CommentQuery {
providers: [CommentProvider] @auth(requires: ["manage:system"]) providers: [CommentProvider] @auth(requires: ["manage:system"])
list( list(
pageId: Int! locale: String!
path: String!
): [CommentPost]! @auth(requires: ["read:comments", "manage:system"]) ): [CommentPost]! @auth(requires: ["read:comments", "manage:system"])
single( single(
@ -41,7 +42,7 @@ type CommentMutation {
content: String! content: String!
guestName: String guestName: String
guestEmail: String guestEmail: String
): DefaultResponse @auth(requires: ["write:comments", "manage:system"]) ): CommentCreateResponse @auth(requires: ["write:comments", "manage:system"])
update( update(
id: Int! id: Int!
@ -85,3 +86,8 @@ type CommentPost {
createdAt: Date! createdAt: Date!
updatedAt: Date! updatedAt: Date!
} }
type CommentCreateResponse {
responseResult: ResponseStatus
id: Int
}

View File

@ -97,6 +97,26 @@ module.exports = {
message: 'Too many attempts! Try again later.', message: 'Too many attempts! Try again later.',
code: 1008 code: 1008
}), }),
CommentGenericError: CustomError('CommentGenericError', {
message: 'An unexpected error occured.',
code: 8001
}),
CommentPostForbidden: CustomError('CommentPostForbidden', {
message: 'You are not authorized to post a comment on this page.',
code: 8002
}),
CommentContentMissing: CustomError('CommentContentMissing', {
message: 'Comment content is missing or too short.',
code: 8003
}),
CommentManageForbidden: CustomError('CommentManageForbidden', {
message: 'You are not authorized to manage comments on this page.',
code: 8004
}),
CommentNotFound: CustomError('CommentNotFound', {
message: 'This comment does not exist.',
code: 8005
}),
InputInvalid: CustomError('InputInvalid', { InputInvalid: CustomError('InputInvalid', {
message: 'Input data is invalid.', message: 'Input data is invalid.',
code: 1012 code: 1012

View File

@ -1,4 +1,8 @@
const Model = require('objection').Model const Model = require('objection').Model
const validate = require('validate.js')
const _ = require('lodash')
/* global WIKI */
/** /**
* Comments model * Comments model
@ -52,4 +56,102 @@ module.exports = class Comment extends Model {
this.createdAt = new Date().toISOString() this.createdAt = new Date().toISOString()
this.updatedAt = new Date().toISOString() this.updatedAt = new Date().toISOString()
} }
/**
* Post New Comment
*/
static async postNewComment ({ pageId, replyTo, content, guestName, guestEmail, user, ip }) {
// -> Input validation
if (user.id === 2) {
const validation = validate({
email: _.toLower(guestEmail),
name: guestName
}, {
email: {
email: true,
length: {
maximum: 255
}
},
name: {
presence: {
allowEmpty: false
},
length: {
minimum: 2,
maximum: 255
}
}
}, { format: 'flat' })
if (validation && validation.length > 0) {
throw new WIKI.Error.InputInvalid(validation[0])
}
}
content = _.trim(content)
if (content.length < 2) {
throw new WIKI.Error.CommentContentMissing()
}
// -> Load Page
const page = await WIKI.models.pages.getPageFromDb(pageId)
if (page) {
if (!WIKI.auth.checkAccess(user, ['write:comments'], {
path: page.path,
locale: page.localeCode
})) {
throw new WIKI.Error.CommentPostForbidden()
}
} else {
throw new WIKI.Error.PageNotFound()
}
// -> Process by comment provider
return WIKI.data.commentProvider.create({
page,
replyTo,
content,
user: {
...user,
...(user.id === 2) ? {
name: guestName,
email: guestEmail
} : {},
ip
}
})
}
/**
* Delete an Existing Comment
*/
static async deleteComment ({ id, user, ip }) {
// -> Load Page
const pageId = await WIKI.data.commentProvider.getPageIdFromCommentId(id)
if (!pageId) {
throw new WIKI.Error.CommentNotFound()
}
const page = await WIKI.models.pages.getPageFromDb(pageId)
if (page) {
if (!WIKI.auth.checkAccess(user, ['manage:comments'], {
path: page.path,
locale: page.localeCode
})) {
throw new WIKI.Error.CommentManageForbidden()
}
} else {
throw new WIKI.Error.PageNotFound()
}
// -> Process by comment provider
await WIKI.data.commentProvider.remove({
id,
page,
user: {
...user,
ip
}
})
}
} }

View File

@ -74,7 +74,7 @@ module.exports = {
ip: user.ip ip: user.ip
} }
// Check for Spam with Akismet // -> Check for Spam with Akismet
if (akismetClient) { if (akismetClient) {
let userRole = 'user' let userRole = 'user'
if (user.groups.indexOf(1) >= 0) { if (user.groups.indexOf(1) >= 0) {
@ -106,16 +106,33 @@ module.exports = {
} }
} }
// Save Comment // -> Save Comment to DB
await WIKI.models.comments.query().insert(newComment) const cm = await WIKI.models.comments.query().insert(newComment)
// -> Return Comment ID
return cm.id
}, },
async update ({ id, content, user, ip }) { async update ({ id, content, user, ip }) {
}, },
/**
* Delete an existing comment by ID
*/
async remove ({ id, user, ip }) { async remove ({ id, user, ip }) {
return WIKI.models.comments.query().findById(id).delete()
}, },
async count ({ pageId }) { /**
* Get the page ID from a comment ID
*/
async getPageIdFromCommentId (id) {
const result = await WIKI.models.comments.query().select('pageId').findById(id)
return (result) ? result.pageId : false
},
/**
* Get the total comments count for a page ID
*/
async count (pageId) {
const result = await WIKI.models.comments.query().count('* as total').where('pageId', pageId).first()
return _.toSafeInteger(result.total)
} }
} }