mirror of https://github.com/doccano/doccano.git
Hironsan
3 years ago
2 changed files with 212 additions and 13 deletions
Split View
Diff Options
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<v-data-table |
|||
:value="value" |
|||
:headers="headers" |
|||
:items="items" |
|||
:options.sync="options" |
|||
:server-items-length="total" |
|||
:search="search" |
|||
:loading="isLoading" |
|||
:loading-text="$t('generic.loading')" |
|||
:no-data-text="$t('vuetify.noDataAvailable')" |
|||
:footer-props="{ |
|||
'showFirstLastPage': true, |
|||
'items-per-page-options': [5, 50, 100], |
|||
'items-per-page-text': $t('vuetify.itemsPerPageText'), |
|||
'page-text': $t('dataset.pageText') |
|||
}" |
|||
item-key="id" |
|||
show-select |
|||
@input="$emit('input', $event)" |
|||
> |
|||
<template v-slot:top> |
|||
<v-text-field |
|||
v-model="search" |
|||
prepend-inner-icon="search" |
|||
:label="$t('generic.search')" |
|||
single-line |
|||
hide-details |
|||
filled |
|||
/> |
|||
</template> |
|||
<template v-slot:[`item.text`]="{ item }"> |
|||
<span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span> |
|||
<span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span> |
|||
</template> |
|||
<template v-slot:[`item.commentCount`]="{ item }"> |
|||
<span> {{ item.commentCount }} </span> |
|||
</template> |
|||
<template v-slot:[`item.action`]="{ item }"> |
|||
<v-btn |
|||
small |
|||
color="primary text-capitalize" |
|||
@click="toLabeling(item)" |
|||
> |
|||
{{ $t('dataset.annotate') }} |
|||
</v-btn> |
|||
</template> |
|||
</v-data-table> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import Vue, { PropType } from 'vue' |
|||
import _ from 'lodash' |
|||
import { DataOptions } from 'vuetify/types' |
|||
import { DocumentDTO } from '~/services/application/document.service' |
|||
|
|||
export default Vue.extend({ |
|||
props: { |
|||
isLoading: { |
|||
type: Boolean, |
|||
default: false, |
|||
required: true |
|||
}, |
|||
items: { |
|||
type: Array as PropType<DocumentDTO[]>, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
value: { |
|||
type: Array as PropType<DocumentDTO[]>, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
total: { |
|||
type: Number, |
|||
default: 0, |
|||
required: true |
|||
}, |
|||
pageLink: { |
|||
type: String, |
|||
default: '', |
|||
required: true |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
search: this.$route.query.q, |
|||
options: {} as DataOptions, |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
headers() { |
|||
return [ |
|||
{ |
|||
text: this.$t('dataset.text'), |
|||
value: 'text', |
|||
sortable: false |
|||
}, |
|||
{ |
|||
text: this.$t('dataset.metadata'), |
|||
value: 'meta', |
|||
sortable: false |
|||
}, |
|||
{ |
|||
text: this.$t('comments.comments'), |
|||
value: 'commentCount', |
|||
sortable: false |
|||
}, |
|||
{ |
|||
text: this.$t('dataset.action'), |
|||
value: 'action', |
|||
sortable: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
'$route.query': _.debounce(function() { |
|||
// @ts-ignore |
|||
this.$emit('change-query') |
|||
}, 1000 |
|||
), |
|||
options: { |
|||
handler() { |
|||
this.$router.push({ |
|||
query: { |
|||
limit: this.options.itemsPerPage.toString(), |
|||
offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(), |
|||
q: this.search |
|||
} |
|||
}) |
|||
}, |
|||
deep: true |
|||
}, |
|||
search() { |
|||
this.$router.push({ |
|||
query: { |
|||
limit: this.options.itemsPerPage.toString(), |
|||
offset: '0', |
|||
q: this.search |
|||
} |
|||
}) |
|||
this.options.page = 1 |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
toLabeling(item: DocumentDTO) { |
|||
const index = this.items.indexOf(item) |
|||
const offset = (this.options.page - 1) * this.options.itemsPerPage |
|||
const page = (offset + index + 1).toString() |
|||
this.$router.push({ |
|||
path: this.localePath(this.pageLink), |
|||
query: { |
|||
page, |
|||
q: this.search |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
</script> |
@ -1,33 +1,67 @@ |
|||
<template> |
|||
<v-card> |
|||
<v-card-title class="mb-2"> |
|||
<document-action-menu /> |
|||
<!-- <document-action-menu /> |
|||
<document-deletion-button class="ms-2" /> |
|||
<v-spacer /> |
|||
<document-bulk-deletion-button /> |
|||
<document-bulk-deletion-button /> --> |
|||
</v-card-title> |
|||
<document-list /> |
|||
<document-list |
|||
v-model="selected" |
|||
:items="item.items" |
|||
:is-loading="isLoading" |
|||
:page-link="pageLink" |
|||
:total="item.count" |
|||
@change-query="$fetch" |
|||
/> |
|||
</v-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import DocumentList from '@/components/containers/documents/DocumentList' |
|||
import DocumentActionMenu from '@/components/containers/documents/DocumentActionMenu' |
|||
import DocumentDeletionButton from '@/components/containers/documents/DocumentDeletionButton' |
|||
import DocumentBulkDeletionButton from '@/components/containers/documents/DocumentBulkDeletionButton' |
|||
<script lang="ts"> |
|||
import Vue from 'vue' |
|||
import DocumentList from '@/components/document/DocumentList.vue' |
|||
import { DocumentListDTO, DocumentDTO } from '@/services/application/document.service' |
|||
|
|||
export default { |
|||
export default Vue.extend({ |
|||
layout: 'project', |
|||
|
|||
components: { |
|||
DocumentList, |
|||
DocumentActionMenu, |
|||
DocumentDeletionButton, |
|||
DocumentBulkDeletionButton |
|||
}, |
|||
|
|||
async fetch() { |
|||
this.isLoading = true |
|||
this.item = await this.$services.document.list(this.projectId, this.$route.query) |
|||
this.isLoading = false |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
dialogCreate: false, |
|||
dialogDelete: false, |
|||
pageLink: '', |
|||
item: {} as DocumentListDTO, |
|||
selected: [] as DocumentDTO[], |
|||
isLoading: false |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
canDelete(): boolean { |
|||
return this.selected.length > 0 |
|||
}, |
|||
projectId(): string { |
|||
return this.$route.params.id |
|||
} |
|||
}, |
|||
|
|||
async created() { |
|||
this.pageLink = await this.$services.project.getPageLink(this.projectId) |
|||
}, |
|||
|
|||
validate({ params, query }) { |
|||
// @ts-ignore |
|||
return /^\d+$/.test(params.id) && /^\d+|$/.test(query.limit) && /^\d+|$/.test(query.offset) |
|||
} |
|||
} |
|||
}) |
|||
</script> |
Write
Preview
Loading…
Cancel
Save