|
|
@ -1,13 +1,16 @@
|
|
|
|
<template lang="pug">
|
|
|
|
<template lang="pug">
|
|
|
|
div
|
|
|
|
div(v-intersect.once.quiet='onIntersect')
|
|
|
|
v-textarea#discussion-new(
|
|
|
|
v-textarea#discussion-new(
|
|
|
|
solo
|
|
|
|
outlined
|
|
|
|
flat
|
|
|
|
flat
|
|
|
|
placeholder='Write a new comment...'
|
|
|
|
placeholder='Write a new comment...'
|
|
|
|
auto-grow
|
|
|
|
auto-grow
|
|
|
|
dense
|
|
|
|
dense
|
|
|
|
rows='3'
|
|
|
|
rows='3'
|
|
|
|
hide-details
|
|
|
|
hide-details
|
|
|
|
|
|
|
|
v-model='newcomment'
|
|
|
|
|
|
|
|
color='blue-grey darken-2'
|
|
|
|
|
|
|
|
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
.d-flex.align-center.pt-3
|
|
|
|
.d-flex.align-center.pt-3
|
|
|
|
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
|
|
|
|
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
|
|
|
@ -15,17 +18,30 @@
|
|
|
|
v-spacer
|
|
|
|
v-spacer
|
|
|
|
v-btn(
|
|
|
|
v-btn(
|
|
|
|
dark
|
|
|
|
dark
|
|
|
|
color='pink darken-4'
|
|
|
|
color='blue-grey darken-2'
|
|
|
|
|
|
|
|
@click='postComment'
|
|
|
|
|
|
|
|
depressed
|
|
|
|
)
|
|
|
|
)
|
|
|
|
v-icon(left) mdi-comment
|
|
|
|
v-icon(left) mdi-comment
|
|
|
|
span Post Comment
|
|
|
|
span.text-none Post Comment
|
|
|
|
v-divider.mt-3
|
|
|
|
v-divider.mt-3
|
|
|
|
|
|
|
|
.pa-5.d-flex.align-center.justify-center(v-if='isLoading')
|
|
|
|
|
|
|
|
v-progress-circular(
|
|
|
|
|
|
|
|
indeterminate
|
|
|
|
|
|
|
|
size='20'
|
|
|
|
|
|
|
|
width='1'
|
|
|
|
|
|
|
|
color='blue-grey'
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
.caption.blue-grey--text.pl-3: em Loading comments...
|
|
|
|
v-timeline(
|
|
|
|
v-timeline(
|
|
|
|
dense
|
|
|
|
dense
|
|
|
|
|
|
|
|
v-else-if='comments && comments.length > 0'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
v-timeline-item(
|
|
|
|
v-timeline-item(
|
|
|
|
color='pink darken-4'
|
|
|
|
color='pink darken-4'
|
|
|
|
large
|
|
|
|
large
|
|
|
|
|
|
|
|
v-for='cm of comments'
|
|
|
|
|
|
|
|
:key='`comment-` + cm.id'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
template(v-slot:icon)
|
|
|
|
template(v-slot:icon)
|
|
|
|
v-avatar
|
|
|
|
v-avatar
|
|
|
@ -34,25 +50,66 @@
|
|
|
|
v-card-text
|
|
|
|
v-card-text
|
|
|
|
.caption: strong John Smith
|
|
|
|
.caption: strong John Smith
|
|
|
|
.overline.grey--text 3 minutes ago
|
|
|
|
.overline.grey--text 3 minutes ago
|
|
|
|
.mt-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat. #[br] #[br] Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue.
|
|
|
|
.mt-3 {{cm.render}}
|
|
|
|
v-timeline-item(
|
|
|
|
.pt-5.text-center.body-2.blue-grey--text(v-else) Be the first to comment.
|
|
|
|
color='pink darken-4'
|
|
|
|
|
|
|
|
large
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
template(v-slot:icon)
|
|
|
|
|
|
|
|
v-avatar
|
|
|
|
|
|
|
|
v-img(src='http://i.pravatar.cc/32')
|
|
|
|
|
|
|
|
v-card.elevation-1
|
|
|
|
|
|
|
|
v-card-text
|
|
|
|
|
|
|
|
.caption: strong Nikola Tesla
|
|
|
|
|
|
|
|
.overline.grey--text Yesterday at 8:03 AM
|
|
|
|
|
|
|
|
.mt-3 Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat.
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import gql from 'graphql-tag'
|
|
|
|
|
|
|
|
import { get } from 'vuex-pathify'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
|
|
|
|
data () {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
newcomment: '',
|
|
|
|
|
|
|
|
isLoading: true,
|
|
|
|
|
|
|
|
canFetch: false,
|
|
|
|
|
|
|
|
comments: []
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
pageId: get('page/id')
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
onIntersect () {
|
|
|
|
|
|
|
|
this.isLoading = true
|
|
|
|
|
|
|
|
this.canFetch = true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
async postComment () {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
apollo: {
|
|
|
|
|
|
|
|
comments: {
|
|
|
|
|
|
|
|
query: gql`
|
|
|
|
|
|
|
|
query ($pageId: Int!) {
|
|
|
|
|
|
|
|
comments {
|
|
|
|
|
|
|
|
list(pageId: $pageId) {
|
|
|
|
|
|
|
|
id
|
|
|
|
|
|
|
|
render
|
|
|
|
|
|
|
|
authorName
|
|
|
|
|
|
|
|
createdAt
|
|
|
|
|
|
|
|
updatedAt
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
`,
|
|
|
|
|
|
|
|
variables() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
pageId: this.pageId
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
skip () {
|
|
|
|
|
|
|
|
return !this.canFetch
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
fetchPolicy: 'cache-and-network',
|
|
|
|
|
|
|
|
update: (data) => data.comments.list,
|
|
|
|
|
|
|
|
watchLoading (isLoading) {
|
|
|
|
|
|
|
|
this.isLoading = isLoading
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
<style lang="scss">
|
|
|
|