richard
/
doccano
mirror of https://github.com/doccano/doccano.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Change comment UI

pull/1216/head
Hironsan 4 years ago
parent
20dbba4ebe
commit
6e0049ddd6
5 changed files with 143 additions and 267 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      frontend/components/containers/annotation/CommentButton.vue
  2. 132
      frontend/components/containers/comments/Comment.vue
  3. 103
      frontend/components/containers/comments/CommentButton.vue
  4. 1
      frontend/components/containers/comments/CommentList.vue
  5. 10
      frontend/layouts/annotation.vue

164
frontend/components/containers/annotation/CommentButton.vue
View File

@ -1,164 +0,0 @@
<template>
<div style="display:inline;">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
class="text-capitalize ps-1 pe-1"
min-width="36"
icon
v-on="on"
@click="dialog=true"
>
<v-icon>
mdi-chat
</v-icon>
</v-btn>
</template>
<span>{{ $t('annotation.commentTooltip') }}</span>
</v-tooltip>
<v-dialog
v-model="dialog"
width="800"
>
<base-card
:title="$t('annotation.commentPopupTitle')"
:cancel-text="$t('generic.close')"
@cancel="dialog=false"
>
<template #content>
<v-text-field
v-model="comment"
outlined
>
<template
v-slot:append
>
<v-btn
tile
large
icon
height="auto"
width="auto"
color="primary"
class="ma-0"
@click="addItem"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</template>
</v-text-field>
<v-data-table
:headers="headers"
:items="currentDoc.comments"
:items-per-page="10"
class="elevation-1"
>
<template v-slot:item.action="{ item }">
<v-icon
small
@click="deleteItem(item.id)"
>
mdi-delete
</v-icon>
</template>
<template v-slot:item.text="props">
<v-edit-dialog
large
persistent
@save="editItem"
@open="openEdit(props.item)"
>
<div>{{ props.item.text }}</div>
<template v-slot:input>
<div class="mt-4 title">
Update Comment
</div>
<v-text-field
v-model="editedComment.text"
label="Edit"
single-line
counter
autofocus
/>
</template>
</v-edit-dialog>
</template>
</v-data-table>
</template>
</base-card>
</v-dialog>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import BaseCard from '@/components/molecules/BaseCard'
export default {
components: {
BaseCard
},
data() {
return {
dialog: false,
comment: '',
editedComment: {
text: '',
id: null
}
}
},
computed: {
...mapGetters('documents', ['currentDoc']),
headers() {
return [
{
text: 'Comments',
align: 'start',
sortable: false,
value: 'text'
},
{ text: 'Action', value: 'action', sortable: false }
]
}
},
methods: {
...mapActions('documents', ['addComment', 'deleteComment', 'updateComment']),
addItem() {
if (this.comment === '') {
return
}
const payload = {
text: this.comment,
projectId: this.$route.params.id
}
this.addComment(payload)
this.comment = ''
},
deleteItem(id) {
const payload = {
commentId: id,
projectId: this.$route.params.id
}
this.deleteComment(payload)
},
editItem() {
if (this.editedComment.text === '') {
this.deleteItem(this.editedComment.id)
} else {
this.updateComment({
projectId: this.$route.params.id,
commentId: this.editedComment.id,
text: this.editedComment.text
})
}
},
openEdit(item) {
Object.assign(this.editedComment, item)
}
}
}
</script>

132
frontend/components/containers/comments/Comment.vue
View File

@ -1,70 +1,96 @@
<template>
<div>
<v-timeline-item
small
>
<div class="font-weight-normal">
<strong>{{ comment.username }}</strong> @{{ comment.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-if="comment.user == userId"
icon
color="green"
v-bind="attrs"
v-on="on"
@click="showEdit=true"
>
<v-icon>mdi-comment-edit-outline</v-icon>
</v-btn>
</template>
<span>Edit Comment</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-if="comment.user == userId"
icon
color="red"
v-bind="attrs"
v-on="on"
@click="$emit('delete-comment', comment)"
>
<v-icon>mdi-delete-outline</v-icon>
</v-btn>
</template>
<span>Delete Comment</span>
</v-tooltip>
</div>
<div v-if="!showEdit">
<v-card class="elevation-0">
<v-card-title>
<v-list-item class="grow ps-0">
<v-list-item-avatar>
<v-icon large>
mdi-account-circle
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ comment.username }}</v-list-item-title>
<v-list-item-subtitle>
{{ comment.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}
</v-list-item-subtitle>
</v-list-item-content>
<v-row
align="center"
justify="end"
>
<v-menu
v-if="comment.user == userId"
bottom
left
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title
@click="showEdit=true"
>
Edit
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title
@click="$emit('delete-comment', comment)"
>
Delete
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</v-list-item>
</v-card-title>
<v-card-text class="body-1">
<span v-if="!showEdit">
{{ comment.text }}
</div>
<div v-else>
<v-textarea
v-model="editText"
solo
/>
<div>
</span>
<v-form v-else>
<v-row>
<v-textarea
v-model="editText"
auto-grow
rows="1"
solo
/>
</v-row>
<v-row justify="end">
<v-btn
color="red"
text
class="text-capitalize"
@click="showEdit=false"
>
Close
Cancel
</v-btn>
<v-btn
color="green"
color="primary"
class="text-capitalize"
@click="updateComment(editText)"
>
Update
</v-btn>
</div>
</div>
</v-timeline-item>
</div>
</v-row>
</v-form>
</v-card-text>
<v-divider />
</v-card>
</template>
<script>
import Vue from 'vue'
import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'

frontend/components/containers/comments/CommentSection.vue → frontend/components/containers/comments/CommentButton.vue
View File

@ -1,61 +1,81 @@
<template>
<div>
<div class="font-weight-bold ml-8 mb-2">
{{ this.$t('comments.comments') }}
</div>
<v-timeline
align-top
dense
>
<v-timeline-item
fill-dot
class="mb-12"
color="green"
large
>
<v-textarea
v-model="message"
outlined
name="CommentInput"
:label="this.$t('comments.message')"
value=""
/>
<div style="display:inline;">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
class="white--text"
color="green"
depressed
:disabled="message.length === 0"
@click="add"
class="text-capitalize ps-1 pe-1"
min-width="36"
icon
v-on="on"
@click="dialog=true"
>
{{ this.$t('comments.send') }}
<v-icon>
mdi-chat
</v-icon>
</v-btn>
</v-timeline-item>
<comment
v-for="comment in comments"
:key="comment.id"
:comment="comment"
:user-id="userId"
@delete-comment="remove"
@update-comment="update"
/>
</v-timeline>
</template>
<span>{{ $t('annotation.commentTooltip') }}</span>
</v-tooltip>
<v-dialog
v-model="dialog"
width="800"
>
<base-card
:title="$t('comments.comments')"
:cancel-text="$t('generic.close')"
@cancel="dialog=false"
>
<template #content>
<v-form>
<v-textarea
v-model="message"
auto-grow
hide-details
outlined
rows="1"
name="CommentInput"
:label="$t('comments.message')"
/>
<v-btn
class="white--text text-capitalize mt-3"
color="primary"
depressed
:disabled="message.length === 0"
@click="add"
>
{{ $t('comments.send') }}
</v-btn>
</v-form>
<comment
v-for="comment in comments"
:key="comment.id"
:comment="comment"
:user-id="userId"
@delete-comment="remove"
@update-comment="update"
/>
</template>
</base-card>
</v-dialog>
</div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import BaseCard from '@/components/molecules/BaseCard'
import Comment from './Comment'
export default {
name: 'CommentSection',
components: { Comment },
components: {
BaseCard,
Comment
},
fetch() {
this.getMyUserId()
},
data() {
return {
dialog: false,
message: ''
}
},
@ -110,5 +130,4 @@ export default {
...mapMutations('comments', ['updateSelectedComments'])
}
}
</script>

1
frontend/components/containers/comments/CommentList.vue
View File

@ -107,6 +107,5 @@ export default {
...mapActions('comments', ['getProjectCommentList']),
...mapMutations('comments', ['updateSelectedComments'])
}
}
</script>

10
frontend/layouts/annotation.vue
View File

@ -58,6 +58,7 @@
/>
<guideline-button />
<clear-annotations-button />
<comment-button />
<settings
v-model="options"
:errors="errors"
@ -81,11 +82,6 @@
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="9">
<comment-section />
</v-col>
</v-row>
</v-container>
<v-container
v-else
@ -117,7 +113,7 @@ import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
import MetadataBox from '@/components/organisms/annotation/MetadataBox'
import FilterButton from '@/components/containers/annotation/FilterButton'
import ApproveButton from '@/components/containers/annotation/ApproveButton'
import CommentSection from '../components/containers/comments/CommentSection.vue'
import CommentButton from '../components/containers/comments/CommentButton.vue'
import Pagination from '~/components/containers/annotation/Pagination'
import TheHeader from '~/components/organisms/layout/TheHeader'
import TheSideBar from '~/components/organisms/layout/TheSideBar'
@ -136,7 +132,7 @@ export default {
ApproveButton,
MetadataBox,
ClearAnnotationsButton,
CommentSection,
CommentButton,
Settings
},

Write Preview
Loading…
Cancel
Save