chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor: Format code

Browse Source
pull/4403/head
Angel Fernando Quiroz Campos 3 years ago
parent a67f96f6c4
commit 0ec7d64d02
1 changed files with 343 additions and 242 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 585
      assets/vue/views/documents/List.vue

585
assets/vue/views/documents/List.vue
Unescape View File

@ -1,111 +1,125 @@
<template> <template>
<!-- <Toolbar--> <!-- <Toolbar-->
<!-- :handle-add="addHandler"--> <!-- :handle-add="addHandler"-->
<!-- :handle-add-document="addDocumentHandler"--> <!-- :handle-add-document="addDocumentHandler"-->
<!-- :handle-upload-document="uploadDocumentHandler"--> <!-- :handle-upload-document="uploadDocumentHandler"-->
<!-- :handle-download-document="downloadDocumentHandler"--> <!-- :handle-download-document="downloadDocumentHandler"-->
<!-- :filters="filters"--> <!-- :filters="filters"-->
<!-- :on-send-filter="onSendFilter"--> <!-- :on-send-filter="onSendFilter"-->
<!-- :reset-filter="resetFilter"--> <!-- :reset-filter="resetFilter"-->
<!-- />--> <!-- />-->
<!-- <DataFilter--> <!-- <DataFilter-->
<!-- :handle-filter="onSendFilter"--> <!-- :handle-filter="onSendFilter"-->
<!-- :handle-reset="resetFilter"--> <!-- :handle-reset="resetFilter"-->
<!-- >--> <!-- >-->
<!-- <DocumentsFilterForm--> <!-- <DocumentsFilterForm-->
<!-- ref="filterForm"--> <!-- ref="filterForm"-->
<!-- slot="filter"--> <!-- slot="filter"-->
<!-- :values="filters"--> <!-- :values="filters"-->
<!-- />--> <!-- />-->
<!-- </DataFilter>--> <!-- </DataFilter>-->
<!-- :filter="filter"--> <!-- :filter="filter"-->
<!-- :no-data-label="$t('Data unavailable')"--> <!-- :no-data-label="$t('Data unavailable')"-->
<!-- <div class="q-pa-md" >--> <!-- <div class="q-pa-md" >-->
<!-- <q-table--> <!-- <q-table-->
<!-- dense--> <!-- dense-->
<!-- :rows="items"--> <!-- :rows="items"-->
<!-- :columns="columns"--> <!-- :columns="columns"-->
<!-- row-key="@id"--> <!-- row-key="@id"-->
<!-- @request="onRequest"--> <!-- @request="onRequest"-->
<!-- v-model:pagination="pagination"--> <!-- v-model:pagination="pagination"-->
<!-- :no-results-label="$t('No results')"--> <!-- :no-results-label="$t('No results')"-->
<!-- :loading-label="$t('Loading')"--> <!-- :loading-label="$t('Loading')"-->
<!-- :rows-per-page-label="$t('Records per page:')"--> <!-- :rows-per-page-label="$t('Records per page:')"-->
<!-- :rows-per-page-options="[10, 20, 50, 0]"--> <!-- :rows-per-page-options="[10, 20, 50, 0]"-->
<!-- :loading="isLoading"--> <!-- :loading="isLoading"-->
<!-- selection="multiple"--> <!-- selection="multiple"-->
<!-- v-model:selected="selectedItems"--> <!-- v-model:selected="selectedItems"-->
<!-- >--> <!-- >-->
<!-- <template v-slot:body="props">--> <!-- <template v-slot:body="props">-->
<!-- <q-tr :props="props">--> <!-- <q-tr :props="props">-->
<!-- <q-td auto-width>--> <!-- <q-td auto-width>-->
<!-- <q-checkbox dense v-model="props.selected" />--> <!-- <q-checkbox dense v-model="props.selected" />-->
<!-- </q-td>--> <!-- </q-td>-->
<!-- <q-td key="resourceNode.title" :props="props">--> <!-- <q-td key="resourceNode.title" :props="props">-->
<!-- <div v-if="props.row.resourceNode.resourceFile">--> <!-- <div v-if="props.row.resourceNode.resourceFile">-->
<!-- <a--> <!-- <a-->
<!-- data-fancybox="gallery"--> <!-- data-fancybox="gallery"-->
<!-- :href="props.row.contentUrl"--> <!-- :href="props.row.contentUrl"-->
<!-- >--> <!-- >-->
<!-- <ResourceFileIcon :file="props.row" />--> <!-- <ResourceFileIcon :file="props.row" />-->
<!-- {{ props.row.title }}--> <!-- {{ props.row.title }}-->
<!-- </a>--> <!-- </a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div v-else>--> <!-- <div v-else>-->
<!-- <a @click="handleClick(props.row)" class="cursor-pointer" >--> <!-- <a @click="handleClick(props.row)" class="cursor-pointer" >-->
<!-- <v-icon--> <!-- <v-icon-->
<!-- icon="folder"--> <!-- icon="folder"-->
<!-- size="lg"--> <!-- size="lg"-->
<!-- />--> <!-- />-->
<!-- {{ props.row.resourceNode.title }}--> <!-- {{ props.row.resourceNode.title }}-->
<!-- </a>--> <!-- </a>-->
<!-- </div>--> <!-- </div>-->
<!-- </q-td>--> <!-- </q-td>-->
<!-- <q-td key="resourceNode.updatedAt" :props="props">--> <!-- <q-td key="resourceNode.updatedAt" :props="props">-->
<!-- {{ $filters.relativeDatetime(props.row.resourceNode.updatedAt) }}--> <!-- {{ $filters.relativeDatetime(props.row.resourceNode.updatedAt) }}-->
<!-- </q-td>--> <!-- </q-td>-->
<!-- <q-td key="resourceNode.resourceFile.size" :props="props">--> <!-- <q-td key="resourceNode.resourceFile.size" :props="props">-->
<!-- <span v-if="props.row.resourceNode.resourceFile">--> <!-- <span v-if="props.row.resourceNode.resourceFile">-->
<!-- {{--> <!-- {{-->
<!-- $filters.prettyBytes(props.row.resourceNode.resourceFile.size)--> <!-- $filters.prettyBytes(props.row.resourceNode.resourceFile.size)-->
<!-- }}--> <!-- }}-->
<!-- </span>--> <!-- </span>-->
<!-- </q-td>--> <!-- </q-td>-->
<!-- <q-td key="action" :props="props">--> <!-- <q-td key="action" :props="props">-->
<!-- <ActionCell--> <!-- <ActionCell-->
<!-- :handle-show="() => showHandler(props.row)"--> <!-- :handle-show="() => showHandler(props.row)"-->
<!-- :handle-edit="() => editHandler(props.row)"--> <!-- :handle-edit="() => editHandler(props.row)"-->
<!-- :handle-delete="() => deleteHandler(props.row)"--> <!-- :handle-delete="() => deleteHandler(props.row)"-->
<!-- />--> <!-- />-->
<!-- </q-td>--> <!-- </q-td>-->
<!-- </q-tr>--> <!-- </q-tr>-->
<!-- </template>--> <!-- </template>-->
<!-- </q-table>--> <!-- </q-table>-->
<!-- </div>--> <!-- </div>-->
<div v-if="isAuthenticated && isCurrentTeacher" class="q-card"> <div
v-if="isAuthenticated && isCurrentTeacher"
class="q-card"
>
<div class="p-4 flex flex-row gap-1 mb-2"> <div class="p-4 flex flex-row gap-1 mb-2">
<div class="flex flex-row gap-2" > <div class="flex flex-row gap-2">
<!-- <Button label="New" icon="pi pi-plus" class="p-button-primary p-button-sm p-mr-2" @click="openNew" />--> <!-- <Button label="New" icon="pi pi-plus" class="p-button-primary p-button-sm p-mr-2" @click="openNew" />-->
<Button class="btn btn--primary" @click="openNew"> <Button
<v-icon icon="mdi-folder-plus"/> class="btn btn--primary"
@click="openNew"
>
<v-icon icon="mdi-folder-plus" />
{{ $t('New folder') }} {{ $t('New folder') }}
</Button> </Button>
<!-- <Button label="New folder" icon="pi pi-plus" class="p-button-success p-mr-2" @click="addHandler()" />--> <!-- <Button label="New folder" icon="pi pi-plus" class="p-button-success p-mr-2" @click="addHandler()" />-->
<!-- <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />--> <!-- <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />-->
<Button label="{{ $t('New document') }}" class="btn btn--primary" @click="addDocumentHandler()" > <Button
<v-icon icon="mdi-file-plus"/> class="btn btn--primary"
label="{{ $t('New document') }}"
@click="addDocumentHandler()"
>
<v-icon icon="mdi-file-plus" />
{{ $t('New document') }} {{ $t('New document') }}
</Button> </Button>
<Button label="{{ $t('Upload') }}" class="btn btn--primary" @click="uploadDocumentHandler()"> <Button
<v-icon icon="mdi-file-upload"/> class="btn btn--primary"
label="{{ $t('Upload') }}"
@click="uploadDocumentHandler()"
>
<v-icon icon="mdi-file-upload" />
{{ $t('Upload') }} {{ $t('Upload') }}
</Button> </Button>
<!-- <!--
@ -114,8 +128,13 @@
{{ $t('Download') }} {{ $t('Download') }}
</Button> </Button>
--> -->
<Button label="{{ $t('Delete selected') }}" class="btn btn--danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length"> <Button
<v-icon icon="mdi-delete"/> :disabled="!selectedItems || !selectedItems.length"
class="btn btn--danger "
label="{{ $t('Delete selected') }}"
@click="confirmDeleteMultiple"
>
<v-icon icon="mdi-delete" />
{{ $t('Delete selected') }} {{ $t('Delete selected') }}
</Button> </Button>
</div> </div>
@ -131,43 +150,52 @@
<!-- :filter-apply="filterCallback"--> <!-- :filter-apply="filterCallback"-->
<!-- :onLazyLoad ="filterCallback($event)"--> <!-- :onLazyLoad ="filterCallback($event)"-->
<!-- :scrollable="true"--> <!-- :scrollable="true"-->
<!-- scrollHeight="height:100%"--> <!-- scrollHeight="height:100%"-->
<DataTable <DataTable
class="p-datatable-sm" v-model:filters="filters"
:value="items" v-model:selection="selectedItems"
v-model:selection="selectedItems" :global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']"
dataKey="iid" :lazy="true"
v-model:filters="filters" :loading="isLoading"
filterDisplay="menu" :paginator="true"
:lazy="true" :rows="10"
:paginator="true" :rows-per-page-options="[5, 10, 20, 50]"
:rows="10" :total-records="totalItems"
:totalRecords="totalItems" :value="items"
:loading="isLoading" class="p-datatable-sm"
@page="onPage($event)" current-page-report-template="Showing {first} to {last} of {totalRecords}"
@sort="sortingChanged($event)" data-key="iid"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown" filter-display="menu"
:rowsPerPageOptions="[5, 10, 20, 50]" paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
responsiveLayout="scroll" responsive-layout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" @page="onPage($event)"
:globalFilterFields="['resourceNode.title', 'resourceNode.updatedAt']"> @sort="sortingChanged($event)"
>
<span v-if="isCurrentTeacher"> <span v-if="isCurrentTeacher">
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column> <Column
:exportable="false"
selection-mode="multiple"
style="width: 3rem"
/>
</span> </span>
<Column field="resourceNode.title" :header="$t('Title')" :sortable="true"> <Column
:header="$t('Title')"
:sortable="true"
field="resourceNode.title"
>
<template #body="slotProps"> <template #body="slotProps">
<div v-if="slotProps.data && slotProps.data.resourceNode && slotProps.data.resourceNode.resourceFile"> <div v-if="slotProps.data && slotProps.data.resourceNode && slotProps.data.resourceNode.resourceFile">
<ResourceFileLink :resource="slotProps.data" /> <ResourceFileLink :resource="slotProps.data" />
</div> </div>
<div v-else> <div v-else>
<a <a
v-if="slotProps.data" v-if="slotProps.data"
@click="handleClick(slotProps.data)" class="cursor-pointer "
class="cursor-pointer " > @click="handleClick(slotProps.data)"
<v-icon icon="mdi-folder"/> >
<v-icon icon="mdi-folder" />
{{ slotProps.data.resourceNode.title }} {{ slotProps.data.resourceNode.title }}
</a> </a>
</div> </div>
@ -178,18 +206,22 @@
<!-- </template>--> <!-- </template>-->
<!-- --> <!-- -->
<!-- <template #filter="{filterModel}">--> <!-- <template #filter="{filterModel}">-->
<!-- <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by title"/>--> <!-- <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by title"/>-->
<!-- </template>--> <!-- </template>-->
<!-- <template #filterclear="{filterCallback}">--> <!-- <template #filterclear="{filterCallback}">-->
<!-- <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>--> <!-- <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>-->
<!-- </template>--> <!-- </template>-->
<!-- <template #filterapply="{filterCallback}">--> <!-- <template #filterapply="{filterCallback}">-->
<!-- <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>--> <!-- <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>-->
<!-- </template>--> <!-- </template>-->
</Column> </Column>
<Column field="resourceNode.resourceFile.size" :header="$t('Size')" :sortable="true"> <Column
:header="$t('Size')"
:sortable="true"
field="resourceNode.resourceFile.size"
>
<template #body="slotProps"> <template #body="slotProps">
{{ {{
slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : '' slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : ''
@ -197,7 +229,11 @@
</template> </template>
</Column> </Column>
<Column field="resourceNode.updatedAt" :header="$t('Modified')" :sortable="true"> <Column
:header="$t('Modified')"
:sortable="true"
field="resourceNode.updatedAt"
>
<template #body="slotProps"> <template #body="slotProps">
{{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }} {{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
</template> </template>
@ -206,73 +242,149 @@
<Column :exportable="false"> <Column :exportable="false">
<template #body="slotProps"> <template #body="slotProps">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<Button class="btn btn--primary" @click="showHandler(slotProps.data)"> <Button
<v-icon icon="mdi-information"/> class="btn btn--primary"
@click="showHandler(slotProps.data)"
>
<v-icon icon="mdi-information" />
</Button> </Button>
<Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary" @click="changeVisibilityHandler(slotProps.data, slotProps)"> <Button
<v-icon v-if="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye"/> v-if="isAuthenticated && isCurrentTeacher"
<v-icon v-if="RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye-off"/> class="btn btn--primary"
@click="changeVisibilityHandler(slotProps.data, slotProps)"
>
<v-icon
v-if="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility"
icon="mdi-eye"
/>
<v-icon
v-if="RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility"
icon="mdi-eye-off"
/>
</Button> </Button>
<Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)"> <Button
<v-icon icon="mdi-pencil"/> v-if="isAuthenticated && isCurrentTeacher"
class="btn btn--primary p-mr-2"
@click="editHandler(slotProps.data)"
>
<v-icon icon="mdi-pencil" />
</Button> </Button>
<Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--danger" @click="confirmDeleteItem(slotProps.data)" > <Button
<v-icon icon="mdi-delete"/> v-if="isAuthenticated && isCurrentTeacher"
class="btn btn--danger"
@click="confirmDeleteItem(slotProps.data)"
>
<v-icon icon="mdi-delete" />
</Button> </Button>
</div> </div>
</template> </template>
</Column> </Column>
<!-- <template #paginatorLeft>--> <!-- <template #paginatorLeft>-->
<!-- <Button type="button" icon="pi pi-refresh" class="p-button-text" />--> <!-- <Button type="button" icon="pi pi-refresh" class="p-button-text" />-->
<!-- </template>--> <!-- </template>-->
<!-- <template #paginatorRight>--> <!-- <template #paginatorRight>-->
<!-- <Button type="button" icon="pi pi-cloud" class="p-button-text" />--> <!-- <Button type="button" icon="pi pi-cloud" class="p-button-text" />-->
<!-- </template>--> <!-- </template>-->
</DataTable> </DataTable>
<Dialog v-model:visible="itemDialog" :style="{width: '450px'}" :header="$t('New folder')" :modal="true" class="p-fluid"> <Dialog
v-model:visible="itemDialog"
:header="$t('New folder')"
:modal="true"
:style="{width: '450px'}"
class="p-fluid"
>
<div class="p-field"> <div class="p-field">
<label for="name">{{ $t('Name') }}</label> <label for="name">{{ $t('Name') }}</label>
<InputText <InputText
autocomplete="off" id="title"
id="title" v-model.trim="item.title"
v-model.trim="item.title" :class="{'p-invalid': submitted && !item.title}"
required="true" autocomplete="off"
autofocus autofocus
:class="{'p-invalid': submitted && !item.title}" required="true"
/> />
<small class="p-error" v-if="submitted && !item.title">$t('Title is required')</small> <small
v-if="submitted && !item.title"
class="p-error"
>$t('Title is required')</small>
</div> </div>
<template #footer> <template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/> <Button
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveItem" /> class="p-button-text"
icon="pi pi-times"
label="Cancel"
@click="hideDialog"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Save"
@click="saveItem"
/>
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteItemDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog
v-model:visible="deleteItemDialog"
:modal="true"
:style="{width: '450px'}"
header="Confirm"
>
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i
<span v-if="item">Are you sure you want to delete <b>{{item.title}}</b>?</span> class="pi pi-exclamation-triangle p-mr-3"
style="font-size: 2rem"
/>
<span v-if="item">Are you sure you want to delete <b>{{ item.title }}</b>?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteItemDialog = false"/> <Button
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteItemButton" /> class="p-button-text"
icon="pi pi-times"
label="No"
@click="deleteItemDialog = false"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Yes"
@click="deleteItemButton"
/>
</template> </template>
</Dialog> </Dialog>
<Dialog v-model:visible="deleteMultipleDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog
v-model:visible="deleteMultipleDialog"
:modal="true"
:style="{width: '450px'}"
header="Confirm"
>
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i
class="pi pi-exclamation-triangle p-mr-3"
style="font-size: 2rem"
/>
<span v-if="item">{{ $t('Are you sure you want to delete the selected items?') }}</span> <span v-if="item">{{ $t('Are you sure you want to delete the selected items?') }}</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteMultipleDialog = false"/> <Button
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteMultipleItems" /> class="p-button-text"
icon="pi pi-times"
label="No"
@click="deleteMultipleDialog = false"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Yes"
@click="deleteMultipleItems"
/>
</template> </template>
</Dialog> </Dialog>
@ -316,36 +428,26 @@
<!-- />--> <!-- />-->
<!-- </template>--> <!-- </template>-->
<!-- </q-table>--> <!-- </q-table>-->
</template> </template>
<script> <script>
import {mapActions, mapGetters, useStore} from 'vuex'; import { mapActions, mapGetters, useStore } from 'vuex';
import { mapFields } from 'vuex-map-fields'; import { mapFields } from 'vuex-map-fields';
import ListMixin from '../../mixins/ListMixin'; import ListMixin from '../../mixins/ListMixin';
import ActionCell from '../../components/ActionCell.vue';
//import Toolbar from '../../components/Toolbar.vue';
import ResourceFileIcon from '../../components/documents/ResourceFileIcon.vue';
import ResourceFileLink from '../../components/documents/ResourceFileLink.vue'; import ResourceFileLink from '../../components/documents/ResourceFileLink.vue';
import DataFilter from '../../components/DataFilter'; import { RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED } from '../../components/resource_links/visibility';
import DocumentsFilterForm from '../../components/documents/Filter'; import isEmpty from 'lodash/isEmpty';
import {RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT} from "../../components/resource_links/visibility"; import toInteger from 'lodash/toInteger';
import isEmpty from "lodash/isEmpty"; import { useRoute } from 'vue-router';
import toInteger from "lodash/toInteger";
import {useRoute, useRouter} from "vue-router";
export default { export default {
name: 'DocumentsList', name: 'DocumentsList',
servicePrefix: 'Documents', servicePrefix: 'Documents',
components: { components: {
ActionCell,
ResourceFileIcon,
ResourceFileLink, ResourceFileLink,
DocumentsFilterForm,
DataFilter
}, },
mixins: [ListMixin], mixins: [ListMixin],
setup() { setup () {
const store = useStore(); const store = useStore();
const route = useRoute(); const route = useRoute();
@ -357,7 +459,7 @@ export default {
let cid = toInteger(route.query.cid); let cid = toInteger(route.query.cid);
let courseIri = '/api/courses/' + cid; let courseIri = '/api/courses/' + cid;
store.dispatch('course/findCourse', { id: courseIri }); store.dispatch('course/findCourse', { id: courseIri });
store.dispatch('resourcenode/findResourceNode', { id: '/api/resource_nodes/' + nodeId}); store.dispatch('resourcenode/findResourceNode', { id: '/api/resource_nodes/' + nodeId });
let sid = toInteger(route.query.sid); let sid = toInteger(route.query.sid);
if (sid) { if (sid) {
@ -365,7 +467,7 @@ export default {
store.dispatch('session/findSession', { id: sessionIri }); store.dispatch('session/findSession', { id: sessionIri });
} }
}, },
data() { data () {
return { return {
RESOURCE_LINK_PUBLISHED: RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_PUBLISHED: RESOURCE_LINK_PUBLISHED,
RESOURCE_LINK_DRAFT: RESOURCE_LINK_DRAFT, RESOURCE_LINK_DRAFT: RESOURCE_LINK_DRAFT,
@ -378,10 +480,10 @@ export default {
// {name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false} // {name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false}
// ], // ],
columns: [ columns: [
{ label: this.$i18n.t('Title'), field: 'title', name: 'title', sortable: true}, { label: this.$i18n.t('Title'), field: 'title', name: 'title', sortable: true },
{ label: this.$i18n.t('Modified'), field: 'resourceNode.updatedAt', name: 'updatedAt', sortable: true}, { label: this.$i18n.t('Modified'), field: 'resourceNode.updatedAt', name: 'updatedAt', sortable: true },
{ label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', name: 'size', sortable: true}, { label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', name: 'size', sortable: true },
{ label: this.$i18n.t('Actions'), name: 'action', sortable: false} { label: this.$i18n.t('Actions'), name: 'action', sortable: false }
], ],
pageOptions: [10, 20, 50, this.$i18n.t('All')], pageOptions: [10, 20, 50, this.$i18n.t('All')],
selected: [], selected: [],
@ -393,36 +495,10 @@ export default {
deleteItemDialog: false, deleteItemDialog: false,
deleteMultipleDialog: false, deleteMultipleDialog: false,
item: {}, item: {},
filters: {'loadNode' : 1}, filters: { 'loadNode': 1 },
submitted: false, submitted: false,
}; };
}, },
mounted() {
this.filters['loadNode'] = 1;
this.onUpdateOptions(this.options);
// 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: { computed: {
// From crud.js list function // From crud.js list function
...mapGetters('resourcenode', { ...mapGetters('resourcenode', {
@ -450,9 +526,35 @@ export default {
view: 'view' view: 'view'
}), }),
}, },
mounted () {
this.filters['loadNode'] = 1;
this.onUpdateOptions(this.options);
// 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);*/
},
methods: { methods: {
// prime // prime
onPage(event) { onPage (event) {
this.options.itemsPerPage = event.rows; this.options.itemsPerPage = event.rows;
this.options.page = event.page + 1; this.options.page = event.page + 1;
this.options.sortBy = event.sortField; this.options.sortBy = event.sortField;
@ -460,7 +562,7 @@ export default {
this.onUpdateOptions(this.options); this.onUpdateOptions(this.options);
}, },
sortingChanged(event) { sortingChanged (event) {
console.log('sortingChanged'); console.log('sortingChanged');
console.log(event); console.log(event);
this.options.sortBy = event.sortField; this.options.sortBy = event.sortField;
@ -470,21 +572,20 @@ export default {
// ctx.sortBy ==> Field key for sorting by (or null for no sorting) // ctx.sortBy ==> Field key for sorting by (or null for no sorting)
// ctx.sortDesc ==> true if sorting descending, false otherwise // ctx.sortDesc ==> true if sorting descending, false otherwise
}, },
openNew() { openNew () {
this.item = {}; this.item = {};
this.submitted = false; this.submitted = false;
this.itemDialog = true; this.itemDialog = true;
}, },
hideDialog() { hideDialog () {
this.itemDialog = false; this.itemDialog = false;
this.submitted = false; this.submitted = false;
}, },
saveItem() { saveItem () {
this.submitted = true; this.submitted = true;
if (this.item.title.trim()) { if (this.item.title.trim()) {
if (this.item.id) { if (!this.item.id) {
} else {
this.item.filetype = 'folder'; this.item.filetype = 'folder';
this.item.parentResourceNodeId = this.$route.params.node; this.item.parentResourceNodeId = this.$route.params.node;
this.item.resourceLinkList = JSON.stringify([{ this.item.resourceLinkList = JSON.stringify([{
@ -501,18 +602,18 @@ export default {
this.item = {}; this.item = {};
} }
}, },
editItem(item) { editItem (item) {
this.item = {...item}; this.item = { ...item };
this.itemDialog = true; this.itemDialog = true;
}, },
confirmDeleteItem(item) { confirmDeleteItem (item) {
this.item = item; this.item = item;
this.deleteItemDialog = true; this.deleteItemDialog = true;
}, },
confirmDeleteMultiple() { confirmDeleteMultiple () {
this.deleteMultipleDialog = true; this.deleteMultipleDialog = true;
}, },
deleteMultipleItems() { deleteMultipleItems () {
console.log('deleteMultipleItems'); console.log('deleteMultipleItems');
console.log(this.selectedItems); console.log(this.selectedItems);
this.deleteMultipleAction(this.selectedItems); this.deleteMultipleAction(this.selectedItems);
@ -523,7 +624,7 @@ export default {
this.selectedItems = null; this.selectedItems = null;
//this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});*/ //this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});*/
}, },
deleteItemButton() { deleteItemButton () {
console.log('deleteItem'); console.log('deleteItem');
this.deleteItem(this.item); this.deleteItem(this.item);
//this.items = this.items.filter(val => val.iid !== this.item.iid); //this.items = this.items.filter(val => val.iid !== this.item.iid);
@ -531,7 +632,7 @@ export default {
this.item = {}; this.item = {};
this.onUpdateOptions(this.options); this.onUpdateOptions(this.options);
}, },
async fetchItems() { async fetchItems () {
console.log('fetchItems'); console.log('fetchItems');
/* No need to call if all items retrieved */ /* No need to call if all items retrieved */
if (this.items.length === this.totalItems) return; if (this.items.length === this.totalItems) return;
@ -562,16 +663,16 @@ export default {
this.isBusy = false; this.isBusy = false;
return true; return true;
}, },
onRowSelected(items) { onRowSelected (items) {
this.selected = items this.selected = items;
}, },
selectAllRows() { selectAllRows () {
this.$refs.selectableTable.selectAllRows() this.$refs.selectableTable.selectAllRows();
}, },
clearSelected() { clearSelected () {
this.$refs.selectableTable.clearSelected() this.$refs.selectableTable.clearSelected();
}, },
async deleteSelected() { async deleteSelected () {
console.log('deleteSelected'); console.log('deleteSelected');
/*for (let i = 0; i < this.selected.length; i++) { /*for (let i = 0; i < this.selected.length; i++) {
let item = this.selected[i]; let item = this.selected[i];

Write Preview
Loading…
Cancel
Save