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

Documents: Update UI

Browse Source
pull/3890/head
Julio Montoya 4 years ago
parent 956577c123
commit 8840d3eb7e
9 changed files with 185 additions and 440 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. 18
      assets/css/app.scss
  2. 1
      assets/vue/App.vue
  3. 60
      assets/vue/components/ActionCell.vue
  4. 24
      assets/vue/components/ConfirmDelete.vue
  5. 4
      assets/vue/components/Toolbar.vue
  6. 85
      assets/vue/mixins/ListMixin.js
  7. 3
      assets/vue/store/modules/crud.js
  8. 6
      assets/vue/utils/fetch.js
  9. 358
      assets/vue/views/documents/List.vue

18
assets/css/app.scss
Unescape View File

@ -40,9 +40,8 @@
//@import "~bootstrap-select/sass/bootstrap-select"; //@import "~bootstrap-select/sass/bootstrap-select";
//@import '~pretty-checkbox/src/pretty-checkbox.scss'; //@import '~pretty-checkbox/src/pretty-checkbox.scss';
//@import '~jquery-ui/themes/base/all.css'; //@import '~jquery-ui/themes/base/all.css';
/*
@layer components { @layer components {
.card { .card {
@apply bg-white rounded shadow-lg; @apply bg-white rounded shadow-lg;
} }
@ -111,13 +110,6 @@
//.ch-form-label { //.ch-form-label {
// @apply text-gray-500 font-bold; // @apply text-gray-500 font-bold;
//} //}
.p-component {
font-size: 13px;
}
.p-datatable .p-datatable-tbody > tr > td {
}
legend { legend {
float: left; float: left;
width: 100%; width: 100%;
@ -143,16 +135,16 @@
} }
@import "scss/index.scss"; @import "scss/index.scss";
} }*/
a.router-link-exact-active { a.router-link-exact-active {
//@apply border-b-2 bg-gray-100 border-gray-500 text-gray-500 rounded-t; //@apply border-b-2 bg-gray-100 border-gray-500 text-gray-500 rounded-t;
} }
@import 'primevue-md-light-indigo/theme.css'; //@import 'primevue-md-light-indigo/theme.css';
@import '~primevue/resources/primevue.min.css'; //@import '~primevue/resources/primevue.min.css';
//@import '~primeflex/primeflex.css'; //@import '~primeflex/primeflex.css';
@import "~primeicons/primeicons.css"; //@import "~primeicons/primeicons.css";
//@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css"; //@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css"; @import "~@fancyapps/fancybox/dist/jquery.fancybox.css";

1
assets/vue/App.vue
Unescape View File

@ -419,6 +419,7 @@ export default {
let isAuthenticated = false; let isAuthenticated = false;
if (!isEmpty(window.user)) { if (!isEmpty(window.user)) {
console.log('is logged in as ' + window.user.username); console.log('is logged in as ' + window.user.username);
console.log('userAvatar ' + window.userAvatar);
this.user = window.user; this.user = window.user;
this.userAvatar = window.userAvatar; this.userAvatar = window.userAvatar;
isAuthenticated = true; isAuthenticated = true;

60
assets/vue/components/ActionCell.vue
Unescape View File

@ -1,63 +1,31 @@
<template> <template>
<!-- <div>-->
<!-- <b-button-toolbar>-->
<!-- <b-button-->
<!-- v-if="handleShow"-->
<!-- variant="info"-->
<!-- size="sm"-->
<!-- class="mr-2"-->
<!-- @click="handleShow"-->
<!-- >{{ $t('Info') }}-->
<!-- </b-button>-->
<!-- <b-button-->
<!-- v-if="handleEdit"-->
<!-- size="sm"-->
<!-- class="mr-2"-->
<!-- @click="handleEdit"-->
<!-- >{{ $t('Edit') }}-->
<!-- </b-button>-->
<!-- <b-button-->
<!-- v-if="handleDelete"-->
<!-- variant="danger"-->
<!-- size="sm"-->
<!-- @click="confirmDelete = true"-->
<!-- >{{ $t('Delete') }}-->
<!-- </b-button>-->
<!-- </b-button-toolbar>-->
<!-- <ConfirmDelete-->
<!-- v-if="handleDelete"-->
<!-- :visible="confirmDelete"-->
<!-- :handle-delete="handleDelete"-->
<!-- @close="confirmDelete = false"-->
<!-- />-->
<!-- </div>-->
<q-td slot="body-cell-action" auto-width> <q-td slot="body-cell-action" auto-width>
<q-btn <q-btn
v-if="handleShow" v-if="handleShow"
flat
round
dense dense
color="secondary" color="secondary"
@click="handleShow" @click="handleShow"
icon="format_align_justify" label="Show"
/> />
<q-btn v-if="handleEdit" flat round dense color="secondary" @click="handleEdit" icon="edit" />
<q-btn <q-btn
v-if="handleDelete" v-if="handleEdit"
icon="delete"
flat
round
dense dense
color="secondary" color="secondary"
@click="confirmDelete = true" @click="handleEdit"
label="Edit"
/>
<q-btn
v-if="handleDelete"
label="Delete"
dense
color="red"
@click="confirmDeleteClick = true"
/> />
<ConfirmDelete <ConfirmDelete
v-if="handleDelete" v-if="handleDelete"
:show="confirmDelete" :show="confirmDeleteClick"
:handle-delete="handleDelete" :handle-delete="handleDelete"
:handle-cancel="() => (confirmDelete = false)" :handle-cancel="() => (confirmDeleteClick = false)"
/> />
</q-td> </q-td>
</template> </template>
@ -72,7 +40,7 @@ export default {
}, },
data() { data() {
return { return {
confirmDelete: false confirmDeleteClick: false
}; };
}, },
props: { props: {

24
assets/vue/components/ConfirmDelete.vue
Unescape View File

@ -1,25 +1,6 @@
<template> <template>
<!-- <b-modal--> <div class="q-pa-md q-gutter-sm">
<!-- v-model="show"--> <q-dialog :model-value="show" persistent>
<!-- persistent-->
<!-- hide-footer-->
<!-- >-->
<!-- <b-card>-->
<!-- <b-card-text>{{ $t('Are you sure you want to delete this item?') }}</b-card-text>-->
<!-- <b-button-->
<!-- color="error darken-1"-->
<!-- @click="handleDelete"-->
<!-- >{{ $t('Yes') }}-->
<!-- </b-button>-->
<!-- <b-button-->
<!-- color="secondary darken-1"-->
<!-- text-->
<!-- @click.stop="show = false"-->
<!-- >{{ $t('No') }}-->
<!-- </b-button>-->
<!-- </b-card>-->
<!-- </b-modal>-->
<q-dialog :value="show" persistent>
<q-card> <q-card>
<q-card-section class="row items-center"> <q-card-section class="row items-center">
<q-avatar icon="warning" color="primary" text-color="white" /> <q-avatar icon="warning" color="primary" text-color="white" />
@ -32,6 +13,7 @@
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</div>
</template> </template>
<script> <script>

4
assets/vue/components/Toolbar.vue
Unescape View File

@ -1,7 +1,6 @@
<template> <template>
<q-toolbar class="q-my-md"> <q-toolbar class="q-my-md">
<slot name="left" /> <slot name="left" />
<q-space /> <q-space />
<q-btn <q-btn
@ -54,7 +53,6 @@
<q-btn <q-btn
v-if="handleAdd" v-if="handleAdd"
color="primary" color="primary"
rounded
@click="addItem" @click="addItem"
> >
<font-awesome-icon icon="folder-plus" /> New folder <font-awesome-icon icon="folder-plus" /> New folder
@ -63,7 +61,6 @@
<q-btn <q-btn
v-if="handleAddDocument" v-if="handleAddDocument"
color="primary" color="primary"
rounded
@click="addDocument" @click="addDocument"
> >
<font-awesome-icon icon="file-alt" /> New document <font-awesome-icon icon="file-alt" /> New document
@ -72,7 +69,6 @@
<q-btn <q-btn
v-if="handleUploadDocument" v-if="handleUploadDocument"
color="primary" color="primary"
rounded
@click="uploadDocument" @click="uploadDocument"
> >
<font-awesome-icon icon="cloud-upload-alt" /> File upload <font-awesome-icon icon="cloud-upload-alt" /> File upload

85
assets/vue/mixins/ListMixin.js
Unescape View File

@ -12,7 +12,7 @@ export default {
data() { data() {
return { return {
pagination: { pagination: {
sortBy: null, sortBy: 'resourceNode.title',
descending: false, descending: false,
page: 1, // page to be displayed page: 1, // page to be displayed
rowsPerPage: 3, // maximum displayed rows rowsPerPage: 3, // maximum displayed rows
@ -26,7 +26,7 @@ export default {
//sortBy: [], vuetify //sortBy: [], vuetify
//sortDesc: [], , vuetify //sortDesc: [], , vuetify
page: 1, page: 1,
itemsPerPage: 20 itemsPerPage: 3
}, },
//filters: {} //filters: {}
}; };
@ -36,7 +36,10 @@ export default {
console.log('watch listmixin'); console.log('watch listmixin');
// react to route changes... // react to route changes...
this.resetList = true; this.resetList = true;
this.onUpdateOptions(this.options);
this.onRequest({
pagination: this.pagination,
});
let nodeId = this.$route.params['node']; let nodeId = this.$route.params['node'];
if (!isEmpty(nodeId)) { if (!isEmpty(nodeId)) {
this.findResourceNode('/api/resource_nodes/'+ nodeId); this.findResourceNode('/api/resource_nodes/'+ nodeId);
@ -53,30 +56,52 @@ export default {
}, },
items() { items() {
this.options.totalItems = this.totalItems; this.pagination.page = this.nextPage;
this.pagination.rowsNumber = this.totalItems;
this.nextPage = null;
//this.options.totalItems = this.totalItems;
} }
}, },
methods: { methods: {
onRequest(props, init) { onRequest(props) {
const { pagination: { page, rowsPerPage: itemsPerPage, sortBy, descending }} = props; console.log('onRequest');
console.log(props);
const { page, rowsPerPage: itemsPerPage, sortBy, descending } = props.pagination;
const filter = props.filter;
this.nextPage = page; this.nextPage = page;
let params = {
...this.filtration, let params = {};
};
if (itemsPerPage > 0) { if (itemsPerPage > 0) {
params = { ...params, itemsPerPage, page }; params = { ...params, itemsPerPage, page };
} }
if (sortBy) { if (sortBy) {
params[`order[${sortBy}]`] = descending ? "DESC" : "ASC"; params[`order[${sortBy}]`] = descending ? "desc" : "asc";
}
if (this.$route.params.node) {
params[`resourceNode.parent`] = this.$route.params.node;
} }
this.getPage({ params }).then(() => {
console.log(params);
this.resetList = true;
this.getPage(params).then(() => {
//this.options.sortBy = sortBy;
//this.options.sortDesc = sortDesc;
//this.options.itemsPerPage = itemsPerPage;
//this.options.totalItems = totalItems;
this.pagination.sortBy = sortBy; this.pagination.sortBy = sortBy;
this.pagination.descending = descending; this.pagination.descending = descending;
this.pagination.rowsPerPage = itemsPerPage; this.pagination.rowsPerPage = itemsPerPage;
if (!init) {
this.filters = { ...this.filtration };
}
}); });
/*this.getPage({ params }).then(() => {
this.pagination.sortBy = sortBy;
this.pagination.descending = descending;
this.pagination.rowsPerPage = itemsPerPage;
//this.filters = { ...this.filter };
});*/
}, },
fetchNewItems({ page, itemsPerPage, sortBy, sortDesc, totalItems } = {}) { fetchNewItems({ page, itemsPerPage, sortBy, sortDesc, totalItems } = {}) {
let params = { let params = {
@ -105,37 +130,6 @@ export default {
this.options.totalItems = totalItems; this.options.totalItems = totalItems;
//}); //});
}, },
onUpdateOptions({ page, itemsPerPage, sortBy, sortDesc, totalItems, getPage } = {}) {
let params = {
...this.filters
};
if (itemsPerPage > 0) {
params = { ...params, itemsPerPage, page };
}
if (this.$route.params.node) {
params[`resourceNode.parent`] = this.$route.params.node;
}
if (isString(sortBy) && isBoolean(sortDesc)) {
//params[`order[${sortBy[0]}]`] = sortDesc[0] ? 'desc' : 'asc'
params[`order[${sortBy}]`] = sortDesc ? 'desc' : 'asc'
}
this.resetList = true;
console.log('onUpdateOptions');
console.log(params);
if (getPage) {
getPage(params).then(() => {
this.options.sortBy = sortBy;
this.options.sortDesc = sortDesc;
this.options.itemsPerPage = itemsPerPage;
this.options.totalItems = totalItems;
});
}
//console.log('end');
},
onSendFilter() { onSendFilter() {
this.resetList = true; this.resetList = true;
@ -221,6 +215,7 @@ export default {
} }
}, },
deleteHandler(item) { deleteHandler(item) {
console.log(item);
this.deleteItem(item).then(() => this.onUpdateOptions(this.options)); this.deleteItem(item).then(() => this.onUpdateOptions(this.options));
}, },
formatDateTime formatDateTime

3
assets/vue/store/modules/crud.js
Unescape View File

@ -1,5 +1,6 @@
import { getField, updateField } from 'vuex-map-fields'; import { getField, updateField } from 'vuex-map-fields';
import remove from 'lodash/remove'; import remove from 'lodash/remove';
import map from 'lodash/map';
import SubmissionError from '../../error/SubmissionError'; import SubmissionError from '../../error/SubmissionError';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
@ -126,9 +127,9 @@ export default function makeCrudModule({
if (!service) throw new Error('No service specified!'); if (!service) throw new Error('No service specified!');
commit(ACTIONS.TOGGLE_LOADING); commit(ACTIONS.TOGGLE_LOADING);
service service
.findAll({ params }) .findAll({ params })
//.findAll( params )
.then(response => response.json()) .then(response => response.json())
.then(retrieved => { .then(retrieved => {
//console.log(retrieved['hydra:totalItems']); //console.log(retrieved['hydra:totalItems']);

6
assets/vue/utils/fetch.js
Unescape View File

@ -39,7 +39,10 @@ export default function(id, options = {}) {
options.headers.set('Content-Type', MIME_TYPE);*/ options.headers.set('Content-Type', MIME_TYPE);*/
if (options.params) { if (options.params) {
console.log('params');
console.log(options.params);
const params = normalize(options.params); const params = normalize(options.params);
//const params = options.params;
let queryString = Object.keys(params) let queryString = Object.keys(params)
.map(key => .map(key =>
Array.isArray(params[key]) Array.isArray(params[key])
@ -48,6 +51,9 @@ export default function(id, options = {}) {
) )
.join('&'); .join('&');
id = `${id}?${queryString}`; id = `${id}?${queryString}`;
console.log(id, 'id');
} }
const entryPoint = ENTRYPOINT + (ENTRYPOINT.endsWith('/') ? '' : '/'); const entryPoint = ENTRYPOINT + (ENTRYPOINT.endsWith('/') ? '' : '/');

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

@ -1,225 +1,84 @@
<template> <template>
<div> <div class="q-pa-md">
<!-- <Toolbar--> <Toolbar
<!-- :handle-add="addHandler"--> :handle-add="addHandler"
<!-- :handle-add-document="addDocumentHandler"--> :handle-add-document="addDocumentHandler"
<!-- :handle-upload-document="uploadDocumentHandler"--> :handle-upload-document="uploadDocumentHandler"
<!-- :filters="filters"-->
<!-- :on-send-filter="onSendFilter"-->
<!-- :reset-filter="resetFilter"-->
<!-- />-->
<!-- <q-table-->
<!-- id="documents"-->
<!-- ref="selectableTable"-->
<!-- title="Documents"-->
<!-- :rows="items"-->
<!-- :columns="fields"-->
<!-- row-key="iid"-->
<!-- />-->
<!-- :pagination.sync="pagination"-->
<!-- @request="onRequest"-->
<!--:loading="isLoading"-->
<!-- <q-table-->
<!-- :rows="items"-->
<!-- :columns="columns"-->
<!-- row-key="iid"-->
<!-- @request="onRequest"-->
<!-- :no-data-label="$t('Data unavailable')"-->
<!-- :no-results-label="$t('No results')"-->
<!-- :loading-label="$t('Loading...')"-->
<!-- :rows-per-page-label="$t('Records per page:')"-->
<!-- :loading="isLoading"-->
<!-- >-->
<!-- { 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('Size'), field: 'resourceNode.resourceFile.size', name: 'size', sortable: true},-->
<!-- { label: this.$i18n.t('Actions'), name: 'action', sortable: false}-->
<Toolbar class="p-mb-4">
<template #left>
<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="btn btn-primary" @click="openNew" />
<!-- <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="btn btn-primary" @click="addDocumentHandler()" />
<Button label="Upload" icon="pi pi-plus" class="btn btn-primary" @click="uploadDocumentHandler()" />
<Button label="Delete" icon="pi pi-trash" class="btn btn-danger " @click="confirmDeleteSelected" :disabled="!selectedItems || !selectedItems.length" />
</div>
</template>
<!-- <template #right>-->
<!-- <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />-->
<!-- <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />-->
<!-- </template>-->
</Toolbar>
<DataTable
:value="items"
v-model:selection="selectedItems"
dataKey="iid"
:filters="filters" :filters="filters"
:lazy="true" :on-send-filter="onSendFilter"
:paginator="true" :reset-filter="resetFilter"
:rows="10" />
:totalRecords="totalItems"
<q-table
dense
flat
:rows="items"
:columns="columns"
row-key="@id"
:filter="filter"
@request="onRequest"
v-model:pagination="pagination"
:no-data-label="$t('Data unavailable')"
:no-results-label="$t('No results')"
:loading-label="$t('Loading...')"
:rows-per-page-label="$t('Records per page:')"
:loading="isLoading" :loading="isLoading"
@page="onPage($event)" selection="multiple"
@sort="sortingChanged($event)" v-model:selected="selectedItems"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
> >
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column> <template v-slot:body="props">
<Column field="resourceNode.title" :header="$t('Title')" :sortable="true"> <q-tr :props="props">
<template #body="slotProps"> <q-td auto-width>
<q-checkbox dense v-model="props.selected" />
<div v-if="slotProps.data.resourceNode.resourceFile"> </q-td>
<q-td key="resourceNode.title" :props="props">
<div v-if="props.row.resourceNode.resourceFile">
<a <a
data-fancybox="gallery" data-fancybox="gallery"
:href="slotProps.data.contentUrl" :href="props.row.contentUrl"
> >
<ResourceFileIcon :file="slotProps.data" /> <ResourceFileIcon :file="props.row" />
{{ slotProps.data.title }} {{ props.row.title }}
</a> </a>
</div> </div>
<div v-else> <div v-else>
<a @click="handleClick(slotProps.data)" class="cursor-pointer" > <a @click="handleClick(props.row)" class="cursor-pointer" >
<font-awesome-icon <font-awesome-icon
icon="folder" icon="folder"
size="lg" size="lg"
/> />
{{ slotProps.data.resourceNode.title }} {{ props.row.resourceNode.title }}
</a> </a>
</div> </div>
</template> </q-td>
</Column> <q-td key="resourceNode.updatedAt" :props="props">
<Column field="resourceNode.updatedAt" :header="$t('Modified')" :sortable="true"> {{$luxonDateTime.fromISO(props.row.resourceNode.updatedAt).toRelative() }}
<template #body="slotProps"> </q-td>
{{$luxonDateTime.fromISO(slotProps.data.resourceNode.updatedAt).toRelative() }}
</template>
</Column>
<Column field="resourceNode.resourceFile.size" :header="$t('Size')" :sortable="true"> <q-td key="resourceNode.resourceFile.size" :props="props">
<template #body="slotProps"> <span v-if="props.row.resourceNode.resourceFile">
{{ {{
slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : '' $filters.prettyBytes(props.row.resourceNode.resourceFile.size)
}} }}
</template> </span>
</Column> </q-td>
<Column :exportable="false"> <q-td key="action" :props="props">
<template #body="slotProps"> <ActionCell
<div class="flex flex-row gap-2"> :handle-show="() => showHandler(props.row)"
<Button label="Show" class="p-button-sm p-button p-button-success p-mr-2" @click="showHandler(slotProps.data)" /> :handle-edit="() => editHandler(props.row)"
<Button label="Edit" icon="pi pi-pencil" class="p-button-sm p-button p-button-success p-mr-2" @click="editHandler(slotProps.data)" /> :handle-delete="() => deleteHandler(props.row)"
<Button label="Delete" icon="pi pi-trash" class="p-button-sm p-button p-button-danger" @click="confirmDeleteSelected(slotProps.data)" />
</div>
</template>
</Column>
<template #paginatorLeft>
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorRight>
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
<Dialog v-model:visible="itemDialog" :style="{width: '450px'}" :header="$t('New folder')" :modal="true" 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}"
/> />
<small class="p-error" v-if="submitted && !item.title">$t('Title is required')</small> </q-td>
</div> </q-tr>
<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" />
</template>
</Dialog>
<Dialog v-model:visible="deleteItemDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content">
<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="deleteItem" />
</template>
</Dialog>
<Dialog v-model:visible="deleteItemsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<span v-if="item">Are you sure you want to delete the selected products?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteItemsDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedItems" />
</template> </template>
</Dialog> </q-table>
<!-- <template v-slot:body="props">-->
<!-- <q-tr :props="props">-->
<!-- <q-td key="title" :props="props">-->
<!-- {{ props.row.title }}-->
<!-- </q-td>-->
<!-- <q-td key="resourceNode.updatedAt" :props="props">-->
<!-- {{ props.row.resourceNode.updatedAt }}-->
<!-- </q-td>-->
<!-- <q-td key="resourceNode.resourceFile.size" :props="props">-->
<!-- {{ props.row.resourceNode.resourceFile.size }}-->
<!-- </q-td>-->
<!-- </q-tr>-->
<!-- </template>-->
<!-- <template v-slot:body-cell-updatedAt="props">-->
<!-- <q-td slot="body-cell-updatedAt" auto-width>-->
<!-- {{-->
<!-- moment(props.row.resourceNode.updatedAt).fromNow()-->
<!-- }}-->
<!-- </q-td>-->
<!-- </template>-->
<!-- <template v-slot:body-cell-size="props">-->
<!-- <q-td slot="body-cell-updatedAt" auto-width>-->
<!-- <span v-if="props.row.resourceNode.resourceFile">-->
<!-- {{ $filters.prettyBytes(props.row.resourceNode.resourceFile.size) }}-->
<!-- </span>-->
<!-- </q-td>-->
<!-- </template>-->
<!-- <template v-slot:body-cell-action="props">-->
<!-- <ActionCell-->
<!-- slot="body-cell-action"-->
<!-- slot-scope="props"-->
<!-- :handle-show="() => showHandler(props.row)"-->
<!-- :handle-edit="() => editHandler(props.row)"-->
<!-- :handle-delete="() => deleteHandler(props.row)"-->
<!-- />-->
<!-- </template>-->
<!-- </q-table>-->
</div> </div>
</template> </template>
<script> <script>
//import { list } from '../../utils/vuexer';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { mapFields } from 'vuex-map-fields'; import { mapFields } from 'vuex-map-fields';
import ListMixin from '../../mixins/ListMixin'; import ListMixin from '../../mixins/ListMixin';
@ -227,12 +86,10 @@ import ActionCell from '../../components/ActionCell.vue';
import Toolbar from '../../components/Toolbar.vue'; import Toolbar from '../../components/Toolbar.vue';
import ResourceFileIcon from './ResourceFileIcon.vue'; import ResourceFileIcon from './ResourceFileIcon.vue';
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import moment from 'moment'
//import { useToast } from 'primevue/usetoast'; //import { useToast } from 'primevue/usetoast';
import { ref, reactive, onMounted, computed } from 'vue'; import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
/*const servicePrefix = 'documents'; /*const servicePrefix = 'documents';
const { getters, actions } = list(servicePrefix);*/ const { getters, actions } = list(servicePrefix);*/
@ -252,38 +109,28 @@ export default {
sortBy: 'title', sortBy: 'title',
sortDesc: false, sortDesc: false,
columns: [ columns: [
//{ name: 'action' }, {align: 'left', name: 'resourceNode.title', label: this.$i18n.t('Title'), field: 'resourceNode.title', sortable: true},
//{ name: 'id', field: '@id', label: this.$t('iid') }, {align: 'left', name: 'resourceNode.updatedAt', label: this.$i18n.t('Modified'), field: 'resourceNode.updatedAt', sortable: true},
{ label: this.$i18n.t('Title'), field: 'title', name: 'title', sortable: true}, {name: 'resourceNode.resourceFile.size', label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', sortable: true},
{ label: this.$i18n.t('Modified'), field: 'resourceNode.updatedAt', name: 'updatedAt', sortable: true}, {name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false}
{ label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', name: 'size', sortable: true},
{ label: this.$i18n.t('Actions'), name: 'action', sortable: false}
], ],
pageOptions: [5, 10, 15, 20, this.$i18n.t('All')], pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
selected: [], selected: [],
selectMode: 'multi',
isBusy: false, isBusy: false,
options: [], options: [],
// prime vue
itemDialog: false,
deleteItemDialog: false,
deleteItemsDialog: false,
item: {},
selectedItems: null,
filters: {},
submitted: false,
}; };
}, },
created() { created() {
console.log('vue/views/documents/List.vue'); console.log('vue/views/documents/List.vue');
this.moment = moment;
const route = useRoute() const route = useRoute()
let nodeId = route.params['node']; let nodeId = route.params['node'];
if (!isEmpty(nodeId)) { if (!isEmpty(nodeId)) {
this.findResourceNode('/api/resource_nodes/' + nodeId); this.findResourceNode('/api/resource_nodes/' + nodeId);
} }
this.options.getPage = this.getPage;
this.onUpdateOptions(this.options); this.onRequest({
pagination: this.pagination,
});
}, },
mounted() { mounted() {
// Detect when scrolled to bottom. // Detect when scrolled to bottom.
@ -335,19 +182,6 @@ export default {
}), }),
}, },
methods: { methods: {
onPage(event) {
console.log(event);
console.log(event.page);
console.log(event.sortField);
console.log(event.sortOrder);
this.options.itemsPerPage = event.rows;
this.options.page = event.page + 1;
this.options.sortBy = event.sortField;
this.options.sortDesc = event.sortOrder === -1;
this.onUpdateOptions(this.options);
},
openNew() { openNew() {
this.item = {}; this.item = {};
this.submitted = false; this.submitted = false;
@ -362,7 +196,6 @@ export default {
if (this.item.title.trim()) { if (this.item.title.trim()) {
if (this.item.id) { if (this.item.id) {
//this.products[this.findIndexById(this.product.id)] = this.product;
//this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000}); //this.$toast.add({severity:'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
} else { } else {
//this.products.push(this.product); //this.products.push(this.product);
@ -383,43 +216,25 @@ export default {
this.item = {}; this.item = {};
} }
}, },
editItem(product) { editItem(item) {
this.product = {...product}; this.item = {...item};
this.itemDialog = true; this.itemDialog = true;
}, },
confirmDeleteItem(product) { confirmDeleteItem(item) {
this.product = product; this.item = item;
this.deleteProductDialog = true; this.deleteItemDialog = true;
}, },
deleteItem() { confirmDeleteMultiple() {
console.log('deleteItem'); this.deleteMultipleDialog = true;
this.deleteItemAction(this.item);
this.items = this.items.filter(val => val.iid !== this.item.iid);
this.deleteProductDialog = false;
this.item = {};
},
findIndexById(id) {
let index = -1;
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].id === id) {
index = i;
break;
}
}
return index;
},
exportCSV() {
this.$refs.dt.exportCSV();
},
confirmDeleteSelected() {
this.deleteItemsDialog = true;
}, },
deleteSelectedItems() { deleteMultipleItems() {
console.log('deleteMultipleItems');
console.log(this.selectedItems);
this.deleteMultipleAction(this.selectedItems); this.deleteMultipleAction(this.selectedItems);
this.onUpdateOptions(this.options); this.onRequest({
/*this.products = this.products.filter(val => !this.selectedProducts.includes(val));*/ pagination: this.pagination,
this.deleteItemsDialog = false; });
this.deleteMultipleDialog = false;
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});*/
}, },
@ -463,10 +278,6 @@ export default {
clearSelected() { clearSelected() {
this.$refs.selectableTable.clearSelected() this.$refs.selectableTable.clearSelected()
}, },
allSelected() {
},
toggleSelected() {
},
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++) {
@ -476,7 +287,9 @@ export default {
}*/ }*/
this.deleteMultipleAction(this.selected); this.deleteMultipleAction(this.selected);
this.onUpdateOptions(this.options); this.onRequest({
pagination: this.pagination,
});
/*const promises = this.selected.map(async item => { /*const promises = this.selected.map(async item => {
const result = await this.deleteItem(item); const result = await this.deleteItem(item);
@ -495,21 +308,12 @@ export default {
*/ */
console.log('end -- deleteSelected'); console.log('end -- deleteSelected');
}, },
sortingChanged(event) {
console.log('sortingChanged');
this.options.sortBy = event.sortField;
this.options.sortDesc = event.sortOrder === -1;
this.onUpdateOptions(this.options);
// ctx.sortBy ==> Field key for sorting by (or null for no sorting)
// ctx.sortDesc ==> true if sorting descending, false otherwise
},
//...actions, //...actions,
// From ListMixin // From ListMixin
...mapActions('documents', { ...mapActions('documents', {
getPage: 'fetchAll', getPage: 'fetchAll',
create: 'create', create: 'create',
deleteItemAction: 'del', deleteItem: 'del',
deleteMultipleAction: 'delMultiple' deleteMultipleAction: 'delMultiple'
}), }),
...mapActions('resourcenode', { ...mapActions('resourcenode', {

Write Preview
Loading…
Cancel
Save