feat(comments): adds loading indicators + minor other gotchas
This commit is contained in:
Dimitrie Stefanescu
@@ -23,6 +23,9 @@
|
||||
This comment is targeting other resources.
|
||||
<v-btn x-small @click="addMissingResources()">View in full context</v-btn>
|
||||
</div>
|
||||
<div class="px-2" v-show="$apollo.loading">
|
||||
<v-progress-linear indeterminate/>
|
||||
</div>
|
||||
<template v-for="(reply, index) in thread">
|
||||
<div v-if="showTime(index)" :key="index + 'date'" class="d-flex justify-center mouse">
|
||||
<div class="d-inline px-2 py-0 caption text-center mb-2 rounded-lg background grey--text">
|
||||
@@ -49,6 +52,7 @@
|
||||
</template>
|
||||
<div v-if="$loggedIn()" class="px-0 mb-4">
|
||||
<v-textarea
|
||||
:disabled="loadingReply"
|
||||
v-model="replyText"
|
||||
solo
|
||||
hide-details
|
||||
@@ -60,6 +64,9 @@
|
||||
@click:append="addReply"
|
||||
@keydown.enter.exact.prevent="addReply()"
|
||||
></v-textarea>
|
||||
<div class="px-2" v-show="loadingReply">
|
||||
<v-progress-linear indeterminate/>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<v-btn
|
||||
v-show="canArchiveThread"
|
||||
@@ -158,6 +165,7 @@ export default {
|
||||
}
|
||||
}
|
||||
`,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
variables() {
|
||||
return {
|
||||
streamId: this.$route.params.streamId,
|
||||
@@ -168,6 +176,7 @@ export default {
|
||||
// return !this.comment.expanded
|
||||
// },
|
||||
result({ data }) {
|
||||
if(!data) return
|
||||
data.comment.replies.items.forEach((item) => {
|
||||
if (this.localReplies.findIndex((c) => c.id === item.id) === -1)
|
||||
this.localReplies.push(item)
|
||||
@@ -215,7 +224,8 @@ export default {
|
||||
replyText: null,
|
||||
localReplies: [],
|
||||
minimise: false,
|
||||
showArchiveDialog: false
|
||||
showArchiveDialog: false,
|
||||
loadingReply: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -322,8 +332,11 @@ export default {
|
||||
parentComment: this.comment.id,
|
||||
text: this.replyText
|
||||
}
|
||||
|
||||
|
||||
this.loadingReply = true
|
||||
|
||||
try {
|
||||
this.replyText = null
|
||||
await this.$apollo.mutate({
|
||||
mutation: gql`
|
||||
mutation commentReply($input: ReplyCreateInput!) {
|
||||
@@ -332,7 +345,6 @@ export default {
|
||||
`,
|
||||
variables: { input: replyInput }
|
||||
})
|
||||
this.replyText = null
|
||||
this.$mixpanel.track('Comment Action', { type: 'action', name: 'reply' })
|
||||
} catch (e) {
|
||||
this.$eventHub.$emit('notification', {
|
||||
@@ -340,6 +352,8 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
this.loadingReply = false
|
||||
|
||||
setTimeout(() => {
|
||||
// Shhh.
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
|
||||
@@ -176,6 +176,7 @@ export default {
|
||||
}
|
||||
},
|
||||
result({ data }) {
|
||||
if(!data) return
|
||||
for (let c of data.comments.items) {
|
||||
c.expanded = false
|
||||
c.hovered = false
|
||||
@@ -201,6 +202,7 @@ export default {
|
||||
}
|
||||
},
|
||||
updateQuery(prevResult, {subscriptionData}) {
|
||||
if(!subscriptionData) return
|
||||
let newComment = subscriptionData.data.commentActivity
|
||||
|
||||
newComment.expanded = false
|
||||
|
||||
@@ -9,31 +9,7 @@
|
||||
<v-col v-if="stream && stream.branch" cols="12">
|
||||
<v-row v-if="stream.branch.commits.items.length > 0">
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<router-link :to="`/streams/${streamId}/commits/${latestCommit.id}`">
|
||||
<preview-image
|
||||
:height="320"
|
||||
:url="`/preview/${$route.params.streamId}/commits/${latestCommit.id}`"
|
||||
></preview-image>
|
||||
</router-link>
|
||||
<div style="position: absolute; top: 10px; right: 20px">
|
||||
<commit-received-receipts
|
||||
:stream-id="streamId"
|
||||
:commit-id="latestCommit.id"
|
||||
shadow
|
||||
/>
|
||||
</div>
|
||||
<div style="position: absolute; top: 10px; left: 12px">
|
||||
<source-app-avatar :application-name="latestCommit.sourceApplication" />
|
||||
</div>
|
||||
|
||||
<list-item-commit
|
||||
transparent
|
||||
:show-source-app="false"
|
||||
:commit="latestCommit"
|
||||
:stream-id="streamId"
|
||||
></list-item-commit>
|
||||
</v-card>
|
||||
<commit-preview-card :commit="latestCommit" :preview-height="320" :show-stream-and-branch="false"/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-toolbar flat class="transparent">
|
||||
@@ -60,27 +36,6 @@
|
||||
xl="3"
|
||||
>
|
||||
<commit-preview-card :commit="commit" :show-stream-and-branch="false"/>
|
||||
<!-- CommitPreviewCard: () => import('@/main/components/common/CommitPreviewCard'), -->
|
||||
<!-- <v-card>
|
||||
<router-link :to="`/streams/${streamId}/commits/${commit.id}`">
|
||||
<preview-image
|
||||
:height="180"
|
||||
:url="`/preview/${streamId}/commits/${commit.id}`"
|
||||
></preview-image>
|
||||
</router-link>
|
||||
<div style="position: absolute; top: 10px; right: 20px">
|
||||
<commit-received-receipts :stream-id="streamId" :commit-id="commit.id" shadow />
|
||||
</div>
|
||||
<div style="position: absolute; top: 10px; left: 12px">
|
||||
<source-app-avatar :application-name="commit.sourceApplication" />
|
||||
</div>
|
||||
<list-item-commit
|
||||
transparent
|
||||
:show-source-app="false"
|
||||
:commit="commit"
|
||||
:stream-id="streamId"
|
||||
></list-item-commit>
|
||||
</v-card> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="listMode">
|
||||
@@ -104,10 +59,10 @@
|
||||
@infinite="infiniteHandler"
|
||||
>
|
||||
<div slot="no-more">
|
||||
<v-col>You've reached the end - this branch has no more commits.</v-col>
|
||||
<v-col class="caption py-3 text-center">You've reached the end - this branch has no more commits.</v-col>
|
||||
</div>
|
||||
<div slot="no-results">
|
||||
<v-col>You've reached the end - this branch has no more commits.</v-col>
|
||||
<v-col class="caption py-3 text-center">You've reached the end - this branch has no more commits.</v-col>
|
||||
</div>
|
||||
</infinite-loading>
|
||||
|
||||
|
||||
@@ -2,18 +2,7 @@
|
||||
<div>
|
||||
<v-row v-if="stream && stream.commits.totalCount !== 0" no-gutters>
|
||||
<v-col cols="12">
|
||||
<v-card :to="`/streams/${$route.params.streamId}/commits/${stream.commits.items[0].id}`">
|
||||
<preview-image
|
||||
:height="420"
|
||||
:url="`/preview/${$route.params.streamId}/commits/${stream.commits.items[0].id}`"
|
||||
></preview-image>
|
||||
<list-item-commit
|
||||
:commit="stream.commits.items[0]"
|
||||
:stream-id="$route.params.streamId"
|
||||
transparent
|
||||
class="elevation-0"
|
||||
></list-item-commit>
|
||||
</v-card>
|
||||
<commit-preview-card :commit="stream.commits.items[0]" :preview-height="320" :show-stream-and-branch="true"/>
|
||||
<v-list class="pa-0 ma-0"></v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" style="height: 20px"></v-col>
|
||||
@@ -39,7 +28,7 @@
|
||||
md="4"
|
||||
xl="12"
|
||||
>
|
||||
<v-card :to="`/streams/${$route.params.streamId}/branches/${branch.name}`">
|
||||
<v-card class="rounded-lg" :to="`/streams/${$route.params.streamId}/branches/${branch.name}`">
|
||||
<preview-image
|
||||
:height="120"
|
||||
:url="`/preview/${$route.params.streamId}/commits/${branch.commits.items[0].id}`"
|
||||
@@ -92,7 +81,8 @@ export default {
|
||||
NoDataPlaceholder: () => import('@/main/components/common/NoDataPlaceholder'),
|
||||
ListItemCommit: () => import('@/main/components/stream/ListItemCommit'),
|
||||
PreviewImage: () => import('@/main/components/common/PreviewImage'),
|
||||
StreamActivity: () => import('@/main/components/stream/Activity')
|
||||
StreamActivity: () => import('@/main/components/stream/Activity'),
|
||||
CommitPreviewCard: () => import('@/main/components/common/CommitPreviewCard'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -141,6 +131,7 @@ export default {
|
||||
referencedObject
|
||||
createdAt
|
||||
branchName
|
||||
commentCount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user