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.
144 lines
4.3 KiB
144 lines
4.3 KiB
<template>
|
|
<div class="documents-list">
|
|
<Toolbar
|
|
:handle-add="addHandler"
|
|
:handle-add-document="addDocumentHandler"
|
|
:handle-upload-document="uploadDocumentHandler"
|
|
:handle-download-document="downloadDocumentHandler"
|
|
/>
|
|
<b-container fluid>
|
|
<b-row>
|
|
<b-col>
|
|
<DataFilter
|
|
:handle-filter="onSendFilter"
|
|
:handle-reset="resetFilter"
|
|
>
|
|
<DocumentsFilterForm
|
|
ref="filterForm"
|
|
slot="filter"
|
|
:values="filters"
|
|
/>
|
|
</DataFilter>
|
|
<br>
|
|
<v-data-table
|
|
v-model="selected"
|
|
dense
|
|
: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.title"
|
|
slot-scope="{ item }"
|
|
>
|
|
<div v-if="item['resourceNode']['resourceFile']">
|
|
<a
|
|
data-fancybox="gallery"
|
|
:href=" item['contentUrl'] "
|
|
>
|
|
<v-icon
|
|
left
|
|
color="primary"
|
|
>mdi-file</v-icon> {{ item['resourceNode']['title'] }}
|
|
</a>
|
|
</div>
|
|
<div v-else>
|
|
<a @click="handleClick(item)">
|
|
<v-icon left>mdi-folder</v-icon>{{ item['resourceNode']['title'] }}
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<template
|
|
slot="item.resourceNode.updatedAt"
|
|
slot-scope="{ item }"
|
|
>
|
|
{{ item.resourceNode.updatedAt | moment("from", "now") }}
|
|
</template>
|
|
|
|
<ActionCell
|
|
slot="item.action"
|
|
slot-scope="props"
|
|
:handle-show="() => showHandler(props.item)"
|
|
:handle-edit="() => editHandler(props.item)"
|
|
:handle-delete="() => deleteHandler(props.item)"
|
|
/>
|
|
</v-data-table>
|
|
</b-col>
|
|
</b-row>
|
|
</b-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',
|
|
components: {
|
|
Toolbar,
|
|
ActionCell,
|
|
DocumentsFilterForm,
|
|
DataFilter
|
|
},
|
|
mixins: [ListMixin],
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{text: 'Title', value: 'resourceNode.title', sortable: true},
|
|
{text: 'Modified', value: 'resourceNode.updatedAt', sortable: true},
|
|
{text: 'Size', value: 'resourceNode.resourceFile.size', sortable: true},
|
|
{text: 'Actions', value: 'action', sortable: false}
|
|
],
|
|
selected: [],
|
|
};
|
|
},
|
|
created() {
|
|
let nodeId = this.$route.params['node'];
|
|
this.findResourceNode('/api/resource_nodes/'+ nodeId);
|
|
},
|
|
computed: {
|
|
// From crud.js list function
|
|
...mapGetters('documents', {
|
|
items: 'list'
|
|
}),
|
|
...mapGetters('resourcenode', {
|
|
resourceNode: 'getResourceNode'
|
|
}),
|
|
// From ListMixin
|
|
...mapFields('documents', {
|
|
deletedResource: 'deleted',
|
|
error: 'error',
|
|
isLoading: 'isLoading',
|
|
resetList: 'resetList',
|
|
totalItems: 'totalItems',
|
|
view: 'view'
|
|
}),
|
|
},
|
|
methods: {
|
|
// From ListMixin
|
|
...mapActions('documents', {
|
|
getPage: 'fetchAll',
|
|
deleteItem: 'del'
|
|
}),
|
|
...mapActions('resourcenode', {
|
|
findResourceNode: 'findResourceNode',
|
|
}),
|
|
}
|
|
};
|
|
</script>
|
|
|