mirror of https://github.com/doccano/doccano.git
Hironsan
4 years ago
3 changed files with 0 additions and 419 deletions
Split View
Diff Options
-
140frontend/components/containers/comments/Comment.vue
-
137frontend/components/containers/comments/CommentButton.vue
-
142frontend/components/containers/comments/CommentList.vue
@ -1,140 +0,0 @@ |
|||
<template> |
|||
<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 }} |
|||
</span> |
|||
<v-form |
|||
v-else |
|||
v-model="valid" |
|||
> |
|||
<v-row> |
|||
<v-textarea |
|||
v-model="editText" |
|||
auto-grow |
|||
rows="1" |
|||
solo |
|||
:rules="commentRules" |
|||
/> |
|||
</v-row> |
|||
<v-row justify="end"> |
|||
<v-btn |
|||
text |
|||
class="text-capitalize" |
|||
@click="cancel" |
|||
> |
|||
Cancel |
|||
</v-btn> |
|||
<v-btn |
|||
:disabled="!valid" |
|||
color="primary" |
|||
class="text-capitalize" |
|||
@click="updateComment(editText)" |
|||
> |
|||
Update |
|||
</v-btn> |
|||
</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' |
|||
import { CommentItem } from '@/models/comment' |
|||
Vue.use(VueFilterDateFormat) |
|||
Vue.use(VueFilterDateParse) |
|||
|
|||
export default { |
|||
name: 'Comment', |
|||
props: { |
|||
comment: { |
|||
required: true, |
|||
type: Object |
|||
}, |
|||
userId: { |
|||
required: true, |
|||
type: Number |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showEdit: false, |
|||
editText: this.comment.text, |
|||
commentRules: [ |
|||
v => !!v.trim() || 'Comment is required' |
|||
], |
|||
valid: false |
|||
} |
|||
}, |
|||
methods: { |
|||
updateComment(newText) { |
|||
this.showEdit = false |
|||
const comment = CommentItem.valueOf({...this.comment, text:newText }) |
|||
this.$emit('update-comment', comment) |
|||
}, |
|||
cancel() { |
|||
this.showEdit = false |
|||
this.editText = this.comment.text |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,137 +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('comments.comments')" |
|||
:cancel-text="$t('generic.close')" |
|||
@cancel="dialog=false" |
|||
> |
|||
<template #content> |
|||
<v-form v-model="valid"> |
|||
<v-textarea |
|||
v-model="message" |
|||
auto-grow |
|||
hide-details |
|||
outlined |
|||
rows="1" |
|||
name="CommentInput" |
|||
:label="$t('comments.message')" |
|||
:rules="commentRules" |
|||
/> |
|||
<v-btn |
|||
class="white--text text-capitalize mt-3" |
|||
color="primary" |
|||
depressed |
|||
:disabled="!valid" |
|||
@click="add" |
|||
> |
|||
{{ $t('comments.send') }} |
|||
</v-btn> |
|||
</v-form> |
|||
<comment |
|||
v-for="comment in comments.toArray()" |
|||
:key="comment.id" |
|||
:comment="comment" |
|||
:user-id="userId" |
|||
@delete-comment="remove" |
|||
@update-comment="maybeUpdate" |
|||
/> |
|||
</template> |
|||
</base-card> |
|||
</v-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import Vue from 'vue' |
|||
import { mapActions, mapState, mapGetters } from 'vuex' |
|||
import BaseCard from '@/components/molecules/BaseCard.vue' |
|||
import { CommentApplicationService } from '@/services/application/comment.service' |
|||
import { FromApiCommentItemListRepository } from '@/repositories/comment/api' |
|||
import { CommentItem, CommentItemList } from '@/models/comment' |
|||
import Comment from './Comment.vue' |
|||
|
|||
export default Vue.extend({ |
|||
components: { |
|||
BaseCard, |
|||
Comment |
|||
}, |
|||
|
|||
fetch() { |
|||
this.getMyUserId() |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
dialog: false, |
|||
comments: CommentItemList.valueOf([]), |
|||
commentRules: [ |
|||
(v: string) => !!v.trim() || 'Comment is required' |
|||
], |
|||
message: '', |
|||
valid: false |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
...mapGetters('documents', ['currentDoc']), |
|||
...mapState('comments', ['userId']), |
|||
service() { |
|||
const repository = new FromApiCommentItemListRepository() |
|||
const service = new CommentApplicationService(repository) |
|||
return service |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
currentDoc: { |
|||
handler(val) { |
|||
if (val !== undefined) { |
|||
this.list() |
|||
} |
|||
}, |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
async list() { |
|||
this.comments = await this.service.list(this.$route.params.id, this.currentDoc.id) |
|||
}, |
|||
async add() { |
|||
const item = await this.service.create(this.$route.params.id, this.currentDoc.id, this.message) |
|||
this.comments.add(item) |
|||
this.message = '' |
|||
}, |
|||
async remove(item: CommentItem) { |
|||
await this.service.delete(this.$route.params.id, this.currentDoc.id, item) |
|||
this.comments.delete(item) |
|||
}, |
|||
async maybeUpdate(item: CommentItem) { |
|||
const comment = await this.service.update(this.$route.params.id, this.currentDoc.id, item) |
|||
this.comments.update(comment) |
|||
}, |
|||
...mapActions('comments', ['getMyUserId']) |
|||
} |
|||
}) |
|||
</script> |
|||
@ -1,142 +0,0 @@ |
|||
<template> |
|||
<v-data-table |
|||
v-model="selected" |
|||
:headers="headers" |
|||
:items="comments.toArray()" |
|||
:search="search" |
|||
:options.sync="options" |
|||
:server-items-length="comments.count()" |
|||
:loading="isLoading" |
|||
:loading-text="$t('generic.loading')" |
|||
:no-data-text="$t('vuetify.noDataAvailable')" |
|||
:footer-props="{ |
|||
'showFirstLastPage': true, |
|||
'items-per-page-options': [5, 10, 15, 100], |
|||
'items-per-page-text': $t('vuetify.itemsPerPageText'), |
|||
'page-text': $t('dataset.pageText') |
|||
}" |
|||
item-key="id" |
|||
show-select |
|||
> |
|||
<template v-slot:[`item.created_at`]="{ item }"> |
|||
<span>{{ item.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}</span> |
|||
</template> |
|||
<template v-slot:[`item.document_text`]="{ item }"> |
|||
{{ item.document_text | truncate(200) }} |
|||
</template> |
|||
<template v-slot:top> |
|||
<base-modal> |
|||
<template v-slot:opener="modal"> |
|||
<v-btn |
|||
:disabled="selected.length === 0" |
|||
class="text-capitalize ma-6" |
|||
outlined |
|||
@click="modal.open" |
|||
> |
|||
{{ $t('generic.delete') }} |
|||
</v-btn> |
|||
</template> |
|||
<template v-slot:content="modal"> |
|||
<confirm-form |
|||
:items="selected" |
|||
:title="$t('comments.removeComment')" |
|||
:message="$t('comments.removePrompt')" |
|||
item-key="text" |
|||
@ok="remove();modal.close()" |
|||
@cancel="modal.close" |
|||
/> |
|||
</template> |
|||
</base-modal> |
|||
<v-text-field |
|||
v-model="search" |
|||
prepend-inner-icon="search" |
|||
:label="$t('generic.search')" |
|||
single-line |
|||
hide-details |
|||
filled |
|||
/> |
|||
</template> |
|||
</v-data-table> |
|||
</template> |
|||
|
|||
<script> |
|||
import Vue from 'vue' |
|||
import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format' |
|||
import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse' |
|||
import { CommentApplicationService } from '@/services/application/comment.service' |
|||
import { FromApiCommentItemListRepository } from '@/repositories/comment/api' |
|||
import ConfirmForm from '@/components/organisms/utils/ConfirmForm.vue' |
|||
import BaseModal from '@/components/atoms/BaseModal.vue' |
|||
import { CommentItemList } from '~/models/comment' |
|||
Vue.use(VueFilterDateFormat) |
|||
Vue.use(VueFilterDateParse) |
|||
|
|||
export default { |
|||
components: { |
|||
ConfirmForm, |
|||
BaseModal |
|||
}, |
|||
|
|||
fetch() { |
|||
this.list() |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
search: this.$route.query.q, |
|||
comments: CommentItemList.valueOf([]), |
|||
selected: [], |
|||
isLoading: false, |
|||
options: {}, |
|||
headers: [ |
|||
{ |
|||
text: this.$t('comments.created_at'), |
|||
align: 'left', |
|||
value: 'created_at' |
|||
}, |
|||
{ |
|||
text: this.$t('comments.document'), |
|||
value: 'document_text' |
|||
}, |
|||
{ |
|||
text: this.$t('user.username'), |
|||
value: 'username' |
|||
}, |
|||
{ |
|||
text: this.$t('dataset.text'), |
|||
value: 'text' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
service() { |
|||
const repository = new FromApiCommentItemListRepository() |
|||
return new CommentApplicationService(repository) |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
search() { |
|||
this.list() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
async list() { |
|||
this.isLoading = true |
|||
this.comments = await this.service.listProjectComment(this.$route.params.id, this.search) |
|||
this.isLoading = false |
|||
}, |
|||
|
|||
async remove() { |
|||
this.isLoading = true |
|||
const items = CommentItemList.valueOf(this.selected) |
|||
await this.service.deleteBulk(this.$route.params.id, items) |
|||
this.comments.deleteBulk(items) |
|||
this.isLoading = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save