|
|
|
@ -27,6 +27,20 @@ |
|
|
|
|
</b-col> |
|
|
|
|
<b-col /> |
|
|
|
|
<b-col> |
|
|
|
|
<!-- <div v-if="this.selected.length > 0" >--> |
|
|
|
|
<!-- <b-button variant="info" size="sm" @click="deleteSelected">--> |
|
|
|
|
<!-- {{ $t('Info') }}--> |
|
|
|
|
<!-- </b-button>--> |
|
|
|
|
|
|
|
|
|
<!-- <b-button variant="secondary" size="sm" @click="deleteSelected">--> |
|
|
|
|
<!-- {{ $t('Edit') }}--> |
|
|
|
|
<!-- </b-button>--> |
|
|
|
|
|
|
|
|
|
<!-- <b-button variant="danger" size="sm" @click="deleteSelected">--> |
|
|
|
|
<!-- {{ $t('Delete') }}--> |
|
|
|
|
<!-- </b-button>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
|
|
<b-pagination |
|
|
|
|
v-model="options.page" |
|
|
|
|
:disabled.sync="isLoading" |
|
|
|
@ -51,10 +65,9 @@ |
|
|
|
|
:per-page="0" |
|
|
|
|
:fields="fields" |
|
|
|
|
:items="items" |
|
|
|
|
|
|
|
|
|
@row-selected="onRowSelected" |
|
|
|
|
|
|
|
|
|
selectable |
|
|
|
|
small |
|
|
|
|
:current-page.sync="options.page" |
|
|
|
|
:sort-by.sync="options.sortBy" |
|
|
|
|
:sort-desc.sync="options.sortDesc" |
|
|
|
@ -71,16 +84,16 @@ |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template v-slot:cell(selected)="{ rowSelected }"> |
|
|
|
|
<template v-if="rowSelected"> |
|
|
|
|
<span aria-hidden="true">✓</span> |
|
|
|
|
<span class="sr-only">{{ $t('Selected') }}</span> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<span aria-hidden="true"> </span> |
|
|
|
|
<span class="sr-only">{{ $t('Not selected') }}</span> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<!-- <template v-slot:cell(selected)="{ rowSelected }">--> |
|
|
|
|
<!-- <template v-if="rowSelected">--> |
|
|
|
|
<!-- <span aria-hidden="true">✓</span>--> |
|
|
|
|
<!-- <span class="sr-only">{{ $t('Selected') }}</span>--> |
|
|
|
|
<!-- </template>--> |
|
|
|
|
<!-- <template v-else>--> |
|
|
|
|
<!-- <span aria-hidden="true"> </span>--> |
|
|
|
|
<!-- <span class="sr-only">{{ $t('Not selected') }}</span>--> |
|
|
|
|
<!-- </template>--> |
|
|
|
|
<!-- </template>--> |
|
|
|
|
|
|
|
|
|
<template |
|
|
|
|
v-slot:cell(resourceNode.title)="row" |
|
|
|
@ -121,6 +134,7 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template |
|
|
|
|
v-if="isAuthenticated && isCurrentTeacher" |
|
|
|
|
v-slot:cell(action)="row" |
|
|
|
|
> |
|
|
|
|
<ActionCell |
|
|
|
@ -131,6 +145,19 @@ |
|
|
|
|
:handle-delete="() => deleteHandler(row.item)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template |
|
|
|
|
v-else |
|
|
|
|
v-slot:cell(action)="row" |
|
|
|
|
> |
|
|
|
|
<ActionCell |
|
|
|
|
slot="action" |
|
|
|
|
:row="row" |
|
|
|
|
:handle-show="() => showHandler(row.item)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</b-table> |
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
@ -159,7 +186,7 @@ export default { |
|
|
|
|
components: { |
|
|
|
|
Toolbar, |
|
|
|
|
ActionCell, |
|
|
|
|
ResourceFileIcon |
|
|
|
|
ResourceFileIcon, |
|
|
|
|
}, |
|
|
|
|
mixins: [ListMixin], |
|
|
|
|
data() { |
|
|
|
@ -167,7 +194,6 @@ export default { |
|
|
|
|
sortBy: 'title', |
|
|
|
|
sortDesc: false, |
|
|
|
|
fields: [ |
|
|
|
|
'selected', |
|
|
|
|
{label: this.$i18n.t('Title'), key: 'resourceNode.title', sortable: true}, |
|
|
|
|
{label: this.$i18n.t('Modified'), key: 'resourceNode.updatedAt', sortable: true}, |
|
|
|
|
{label: this.$i18n.t('Size'), key: 'resourceNode.resourceFile.size', sortable: true}, |
|
|
|
@ -176,6 +202,7 @@ export default { |
|
|
|
|
pageOptions: [5, 10, 15, 20, this.$i18n.t('All')], |
|
|
|
|
selected: [], |
|
|
|
|
selectMode: 'multi', |
|
|
|
|
isBusy: false |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
@ -183,15 +210,50 @@ export default { |
|
|
|
|
let nodeId = this.$route.params['node']; |
|
|
|
|
this.findResourceNode('/api/resource_nodes/' + nodeId); |
|
|
|
|
this.onUpdateOptions(this.options); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// Detect when scrolled to bottom. |
|
|
|
|
/*const listElm = document.querySelector('#documents'); |
|
|
|
|
listElm.addEventListener('scroll', e => { |
|
|
|
|
console.log('aaa'); |
|
|
|
|
if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) { |
|
|
|
|
this.onScroll(); |
|
|
|
|
} |
|
|
|
|
});*/ |
|
|
|
|
|
|
|
|
|
//const tableScrollBody = this.$refs['selectableTable'].$el; |
|
|
|
|
/* Consider debouncing the event call */ |
|
|
|
|
//tableScrollBody.addEventListener("scroll", this.onScroll); |
|
|
|
|
|
|
|
|
|
//window.addEventListener('scroll', this.onScroll) |
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () =>{ |
|
|
|
|
/*if(window.top.scrollY > window.outerHeight){ |
|
|
|
|
if (!this.isBusy) { |
|
|
|
|
this.fetchItems(); |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
}); |
|
|
|
|
/*const tableScrollBody = this.$refs['documents']; |
|
|
|
|
tableScrollBody.addEventListener("scroll", this.onScroll);*/ |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
// From crud.js list function |
|
|
|
|
...mapGetters('documents', { |
|
|
|
|
items: 'list' |
|
|
|
|
items: 'list', |
|
|
|
|
}), |
|
|
|
|
...mapGetters('resourcenode', { |
|
|
|
|
resourceNode: 'getResourceNode' |
|
|
|
|
}), |
|
|
|
|
...mapGetters({ |
|
|
|
|
|
|
|
|
|
'isAuthenticated': 'security/isAuthenticated', |
|
|
|
|
'isAdmin': 'security/isAdmin', |
|
|
|
|
'isCurrentTeacher': 'security/isCurrentTeacher', |
|
|
|
|
}), |
|
|
|
|
|
|
|
|
|
// From ListMixin |
|
|
|
|
...mapFields('documents', { |
|
|
|
|
deletedItem: 'deleted', |
|
|
|
@ -201,8 +263,40 @@ export default { |
|
|
|
|
totalItems: 'totalItems', |
|
|
|
|
view: 'view' |
|
|
|
|
}), |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async fetchItems() { |
|
|
|
|
console.log('fetchItems'); |
|
|
|
|
/* No need to call if all items retrieved */ |
|
|
|
|
if (this.items.length === this.totalItems) return; |
|
|
|
|
|
|
|
|
|
/* Enable busy state */ |
|
|
|
|
this.isBusy = true; |
|
|
|
|
|
|
|
|
|
/* Missing error handling if call fails */ |
|
|
|
|
let currentPage = this.options.page; |
|
|
|
|
console.log(currentPage); |
|
|
|
|
const startIndex = currentPage++ * this.options.itemsPerPage; |
|
|
|
|
const endIndex = startIndex + this.options.itemsPerPage; |
|
|
|
|
|
|
|
|
|
console.log(this.items.length); |
|
|
|
|
console.log(this.totalItems); |
|
|
|
|
console.log(startIndex, endIndex); |
|
|
|
|
|
|
|
|
|
this.options.page = currentPage; |
|
|
|
|
|
|
|
|
|
await this.fetchNewItems(this.options); |
|
|
|
|
|
|
|
|
|
//const newItems = await this.callDatabase(startIndex, endIndex); |
|
|
|
|
|
|
|
|
|
/* Add new items to existing ones */ |
|
|
|
|
//this.items = this.items.concat(newItems); |
|
|
|
|
|
|
|
|
|
/* Disable busy state */ |
|
|
|
|
this.isBusy = false; |
|
|
|
|
return true; |
|
|
|
|
}, |
|
|
|
|
onRowSelected(items) { |
|
|
|
|
this.selected = items |
|
|
|
|
}, |
|
|
|
|