You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.7 KiB
106 lines
2.7 KiB
5 years ago
|
<template>
|
||
|
|
<div class="documents-list">
|
||
|
|
<Toolbar
|
||
|
|
:handle-add="addHandler"
|
||
|
|
:handle-add-document="addDocumentHandler"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<v-container grid-list-xl fluid>
|
||
|
|
<v-layout row wrap>
|
||
|
|
<v-flex lg12>
|
||
|
|
<DataFilter :handle-filter="onSendFilter" :handle-reset="resetFilter">
|
||
|
|
<DocumentsFilterForm
|
||
|
|
ref="filterForm"
|
||
|
|
:values="filters"
|
||
|
|
slot="filter"
|
||
|
|
/>
|
||
|
|
</DataFilter>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<v-data-table
|
||
|
|
v-model="selected"
|
||
|
|
:headers="headers"
|
||
|
|
:items="items"
|
||
|
|
:items-per-page.sync="options.itemsPerPage"
|
||
|
|
:loading="isLoading"
|
||
|
|
:loading-text="$t('Loading...')"
|
||
|
|
:options.sync="options"
|
||
|
|
:server-items-length="totalItems"
|
||
|
|
class="elevation-1"
|
||
|
|
item-key="@id"
|
||
|
|
show-select
|
||
|
|
@update:options="onUpdateOptions"
|
||
|
|
>
|
||
|
|
<template slot="item.resourceNode" slot-scope="{ item }">
|
||
|
|
{{ item['@id'] }}
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<ActionCell
|
||
|
|
slot="item.action"
|
||
|
|
slot-scope="props"
|
||
|
|
:handle-show="() => showHandler(props.item)"
|
||
|
|
:handle-edit="() => editHandler(props.item)"
|
||
|
|
:handle-delete="() => deleteHandler(props.item)"
|
||
|
|
></ActionCell>
|
||
|
|
</v-data-table>
|
||
|
|
</v-flex>
|
||
|
|
</v-layout>
|
||
|
|
</v-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapActions, mapGetters } from 'vuex';
|
||
|
|
import { mapFields } from 'vuex-map-fields';
|
||
|
|
import ListMixin from '../../mixins/ListMixin';
|
||
|
|
import ActionCell from '../../components/ActionCell';
|
||
|
|
import DocumentsFilterForm from '../../components/documents/Filter';
|
||
|
|
import DataFilter from '../../components/DataFilter';
|
||
|
|
import Toolbar from '../../components/Toolbar';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'DocumentsList',
|
||
|
|
servicePrefix: 'Documents',
|
||
|
|
mixins: [ListMixin],
|
||
|
|
components: {
|
||
|
|
Toolbar,
|
||
|
|
ActionCell,
|
||
|
|
DocumentsFilterForm,
|
||
|
|
DataFilter
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
headers: [
|
||
|
|
{text: 'Title', value: 'resourceNode.title', sortable: true},
|
||
|
|
{text: 'Last modified', value: 'resourceNode.updatedAt', sortable: true},
|
||
|
|
{
|
||
|
|
text: 'Actions',
|
||
|
|
value: 'action',
|
||
|
|
sortable: false
|
||
|
|
}
|
||
|
|
],
|
||
|
|
selected: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters('documents', {
|
||
|
|
items: 'list'
|
||
|
|
}),
|
||
|
|
...mapFields('documents', {
|
||
|
|
deletedItem: 'deleted',
|
||
|
|
error: 'error',
|
||
|
|
isLoading: 'isLoading',
|
||
|
|
resetList: 'resetList',
|
||
|
|
totalItems: 'totalItems',
|
||
|
|
view: 'view'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions('documents', {
|
||
|
|
getPage: 'fetchAll',
|
||
|
|
deleteItem: 'del'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|