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. 279
      assets/vue/views/documents/List.vue

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

@ -89,22 +89,36 @@
<!-- </template>-->
<!-- </q-table>-->
<!-- </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="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 class="btn btn--primary" @click="openNew">
<Button
class="btn btn--primary"
@click="openNew"
>
<v-icon icon="mdi-folder-plus" />
{{ $t('New folder') }}
</Button>
<!-- <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="{{ $t('New document') }}" class="btn btn--primary" @click="addDocumentHandler()" >
<Button
class="btn btn--primary"
label="{{ $t('New document') }}"
@click="addDocumentHandler()"
>
<v-icon icon="mdi-file-plus" />
{{ $t('New document') }}
</Button>
<Button label="{{ $t('Upload') }}" class="btn btn--primary" @click="uploadDocumentHandler()">
<Button
class="btn btn--primary"
label="{{ $t('Upload') }}"
@click="uploadDocumentHandler()"
>
<v-icon icon="mdi-file-upload" />
{{ $t('Upload') }}
</Button>
@ -114,7 +128,12 @@
{{ $t('Download') }}
</Button>
-->
<Button label="{{ $t('Delete selected') }}" class="btn btn--danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length">
<Button
:disabled="!selectedItems || !selectedItems.length"
class="btn btn--danger "
label="{{ $t('Delete selected') }}"
@click="confirmDeleteMultiple"
>
<v-icon icon="mdi-delete" />
{{ $t('Delete selected') }}
</Button>
@ -134,30 +153,38 @@
<!-- :scrollable="true"-->
<!-- scrollHeight="height:100%"-->
<DataTable
class="p-datatable-sm"
:value="items"
v-model:selection="selectedItems"
dataKey="iid"
v-model:filters="filters"
filterDisplay="menu"
v-model:selection="selectedItems"
:global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']"
:lazy="true"
:loading="isLoading"
:paginator="true"
:rows="10"
:totalRecords="totalItems"
:loading="isLoading"
:rows-per-page-options="[5, 10, 20, 50]"
:total-records="totalItems"
:value="items"
class="p-datatable-sm"
current-page-report-template="Showing {first} to {last} of {totalRecords}"
data-key="iid"
filter-display="menu"
paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
responsive-layout="scroll"
@page="onPage($event)"
@sort="sortingChanged($event)"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
:globalFilterFields="['resourceNode.title', 'resourceNode.updatedAt']">
>
<span v-if="isCurrentTeacher">
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column
:exportable="false"
selection-mode="multiple"
style="width: 3rem"
/>
</span>
<Column field="resourceNode.title" :header="$t('Title')" :sortable="true">
<Column
:header="$t('Title')"
:sortable="true"
field="resourceNode.title"
>
<template #body="slotProps">
<div v-if="slotProps.data && slotProps.data.resourceNode && slotProps.data.resourceNode.resourceFile">
<ResourceFileLink :resource="slotProps.data" />
@ -165,8 +192,9 @@
<div v-else>
<a
v-if="slotProps.data"
class="cursor-pointer "
@click="handleClick(slotProps.data)"
class="cursor-pointer " >
>
<v-icon icon="mdi-folder" />
{{ slotProps.data.resourceNode.title }}
</a>
@ -189,7 +217,11 @@
<!-- </template>-->
</Column>
<Column field="resourceNode.resourceFile.size" :header="$t('Size')" :sortable="true">
<Column
:header="$t('Size')"
:sortable="true"
field="resourceNode.resourceFile.size"
>
<template #body="slotProps">
{{
slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : ''
@ -197,7 +229,11 @@
</template>
</Column>
<Column field="resourceNode.updatedAt" :header="$t('Modified')" :sortable="true">
<Column
:header="$t('Modified')"
:sortable="true"
field="resourceNode.updatedAt"
>
<template #body="slotProps">
{{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
</template>
@ -206,20 +242,41 @@
<Column :exportable="false">
<template #body="slotProps">
<div class="flex flex-row gap-2">
<Button class="btn btn--primary" @click="showHandler(slotProps.data)">
<Button
class="btn btn--primary"
@click="showHandler(slotProps.data)"
>
<v-icon icon="mdi-information" />
</Button>
<Button v-if="isAuthenticated && isCurrentTeacher" 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
v-if="isAuthenticated && isCurrentTeacher"
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 v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)">
<Button
v-if="isAuthenticated && isCurrentTeacher"
class="btn btn--primary p-mr-2"
@click="editHandler(slotProps.data)"
>
<v-icon icon="mdi-pencil" />
</Button>
<Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--danger" @click="confirmDeleteItem(slotProps.data)" >
<Button
v-if="isAuthenticated && isCurrentTeacher"
class="btn btn--danger"
@click="confirmDeleteItem(slotProps.data)"
>
<v-icon icon="mdi-delete" />
</Button>
</div>
@ -234,45 +291,100 @@
<!-- </template>-->
</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">
<label for="name">{{ $t('Name') }}</label>
<InputText
autocomplete="off"
id="title"
v-model.trim="item.title"
required="true"
autofocus
:class="{'p-invalid': submitted && !item.title}"
autocomplete="off"
autofocus
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>
<template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveItem" />
<Button
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>
</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">
<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">Are you sure you want to delete <b>{{ item.title }}</b>?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteItemDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteItemButton" />
<Button
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>
</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">
<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>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteMultipleDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteMultipleItems" />
<Button
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>
</Dialog>
@ -316,33 +428,23 @@
<!-- />-->
<!-- </template>-->
<!-- </q-table>-->
</template>
<script>
import { mapActions, mapGetters, useStore } from 'vuex';
import { mapFields } from 'vuex-map-fields';
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 DataFilter from '../../components/DataFilter';
import DocumentsFilterForm from '../../components/documents/Filter';
import {RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT} from "../../components/resource_links/visibility";
import isEmpty from "lodash/isEmpty";
import toInteger from "lodash/toInteger";
import {useRoute, useRouter} from "vue-router";
import { RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED } from '../../components/resource_links/visibility';
import isEmpty from 'lodash/isEmpty';
import toInteger from 'lodash/toInteger';
import { useRoute } from 'vue-router';
export default {
name: 'DocumentsList',
servicePrefix: 'Documents',
components: {
ActionCell,
ResourceFileIcon,
ResourceFileLink,
DocumentsFilterForm,
DataFilter
},
mixins: [ListMixin],
setup () {
@ -397,32 +499,6 @@ export default {
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: {
// From crud.js list function
...mapGetters('resourcenode', {
@ -450,6 +526,32 @@ export default {
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: {
// prime
onPage (event) {
@ -483,8 +585,7 @@ export default {
this.submitted = true;
if (this.item.title.trim()) {
if (this.item.id) {
} else {
if (!this.item.id) {
this.item.filetype = 'folder';
this.item.parentResourceNodeId = this.$route.params.node;
this.item.resourceLinkList = JSON.stringify([{
@ -563,13 +664,13 @@ export default {
return true;
},
onRowSelected (items) {
this.selected = items
this.selected = items;
},
selectAllRows () {
this.$refs.selectableTable.selectAllRows()
this.$refs.selectableTable.selectAllRows();
},
clearSelected () {
this.$refs.selectableTable.clearSelected()
this.$refs.selectableTable.clearSelected();
},
async deleteSelected () {
console.log('deleteSelected');

Write Preview
Loading…
Cancel
Save