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: Fix ui

Browse Source
pull/3890/head
Julio Montoya 4 years ago
parent 8840d3eb7e
commit dba1fed569
10 changed files with 234 additions and 215 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. 8
      assets/css/app.scss
  2. 62
      assets/vue/components/ActionCell.vue
  3. 183
      assets/vue/components/Toolbar.vue
  4. 11
      assets/vue/components/documents/Form.vue
  5. 8
      assets/vue/hooks/useState.js
  6. 20
      assets/vue/mixins/ListMixin.js
  7. 4
      assets/vue/store/index.js
  8. 1
      assets/vue/store/modules/crud.js
  9. 3
      assets/vue/utils/fetch.js
  10. 149
      assets/vue/views/documents/List.vue

8
assets/css/app.scss
Unescape View File

@ -40,7 +40,7 @@
//@import "~bootstrap-select/sass/bootstrap-select";
//@import '~pretty-checkbox/src/pretty-checkbox.scss';
//@import '~jquery-ui/themes/base/all.css';
/*
@layer components {
.card {
@apply bg-white rounded shadow-lg;
@ -62,6 +62,10 @@
@apply text-white bg-blue-700 hover:bg-blue-800;
}
.btn-success {
@apply text-white bg-green-700 hover:bg-green-800;
}
.btn-danger {
@apply text-white bg-red-700 hover:bg-red-800;
}
@ -135,7 +139,7 @@
}
@import "scss/index.scss";
}*/
}
a.router-link-exact-active {
//@apply border-b-2 bg-gray-100 border-gray-500 text-gray-500 rounded-t;

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

@ -1,32 +1,38 @@
<template>
<q-td slot="body-cell-action" auto-width>
<q-btn
v-if="handleShow"
dense
color="secondary"
@click="handleShow"
label="Show"
/>
<q-btn
v-if="handleEdit"
dense
color="secondary"
@click="handleEdit"
label="Edit"
/>
<q-btn
v-if="handleDelete"
label="Delete"
dense
color="red"
@click="confirmDeleteClick = true"
/>
<ConfirmDelete
v-if="handleDelete"
:show="confirmDeleteClick"
:handle-delete="handleDelete"
:handle-cancel="() => (confirmDeleteClick = false)"
/>
<!-- auto-width-->
<q-td slot="body-cell-action" >
<div class="p-4 flex flex-row gap-1">
<q-btn
v-if="handleShow"
no-caps
dense
color="secondary"
@click="handleShow"
label="Show"
/>
<q-btn
v-if="handleEdit"
no-caps
dense
color="secondary"
@click="handleEdit"
label="Edit"
/>
<q-btn
v-if="handleDelete"
no-caps
label="Delete"
dense
color="red"
@click="confirmDeleteClick = true"
/>
<ConfirmDelete
v-if="handleDelete"
:show="confirmDeleteClick"
:handle-delete="handleDelete"
:handle-cancel="() => (confirmDeleteClick = false)"
/>
</div>
</q-td>
</template>

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

@ -1,98 +1,109 @@
<template>
<q-toolbar class="q-my-md">
<div class="q-card">
<slot name="left" />
<q-space />
<!-- <q-space />-->
<div class="p-4 flex flex-row gap-1">
<q-btn
v-if="handleList"
:loading="isLoading"
color="primary"
@click="listItem"
unelevated
>
{{ $t('List') }}
</q-btn>
<q-btn
v-if="handleList"
:loading="isLoading"
color="primary"
@click="listItem"
unelevated
>
{{ $t('List') }}
</q-btn>
<q-btn
v-if="handleEdit"
:loading="isLoading"
color="primary"
@click="editItem"
unelevated
>
{{ $t('Edit') }}
</q-btn>
<q-btn
v-if="handleEdit"
no-caps
class="btn btn-primary"
:loading="isLoading"
@click="editItem"
unelevated
>
{{ $t('Edit') }}
</q-btn>
<q-btn
v-if="handleSubmit"
:loading="isLoading"
color="primary"
@click="submitItem"
unelevated
>
<font-awesome-icon icon="save" />
{{ $t('Submit') }}
</q-btn>
<!-- <v-btn-->
<!-- v-if="handleReset"-->
<!-- color="primary"-->
<!-- class="ml-sm-2"-->
<!-- @click="resetItem"-->
<!-- >-->
<!-- {{ $t('Reset') }}-->
<!-- </v-btn>-->
<q-btn
v-if="handleDelete"
color="red"
unelevated
class="ml-sm-2"
@click="confirmDelete = true"
>
{{ $t('Delete') }}
</q-btn>
<q-btn
v-if="handleSubmit"
no-caps
class="btn btn-primary"
:loading="isLoading"
@click="submitItem"
unelevated
>
<font-awesome-icon icon="save" />
{{ $t('Submit') }}
</q-btn>
<!-- <v-btn-->
<!-- v-if="handleReset"-->
<!-- color="primary"-->
<!-- class="ml-sm-2"-->
<!-- @click="resetItem"-->
<!-- >-->
<!-- {{ $t('Reset') }}-->
<!-- </v-btn>-->
<q-btn
v-if="handleDelete"
no-caps
class="btn btn-danger"
unelevated
@click="confirmDelete = true"
>
{{ $t('Delete') }}
</q-btn>
<q-btn
v-if="handleAdd"
color="primary"
@click="addItem"
>
<font-awesome-icon icon="folder-plus" /> New folder
</q-btn>
<q-btn
v-if="handleAddDocument"
color="primary"
@click="addDocument"
>
<font-awesome-icon icon="file-alt" /> New document
</q-btn>
<!-- color="primary"-->
<q-btn
v-if="handleUploadDocument"
color="primary"
@click="uploadDocument"
>
<font-awesome-icon icon="cloud-upload-alt" /> File upload
</q-btn>
<q-btn
v-if="handleAdd"
no-caps
class="btn btn-primary"
@click="addItem"
>
<font-awesome-icon icon="folder-plus" />
New folder
</q-btn>
<!-- <DataFilter-->
<!-- v-if="filters"-->
<!-- :handle-filter="onSendFilter"-->
<!-- :handle-reset="resetFilter"-->
<!-- >-->
<!-- <DocumentsFilterForm-->
<!-- ref="filterForm"-->
<!-- slot="filter"-->
<!-- :values="filters"-->
<!-- />-->
<!-- </DataFilter>-->
<q-btn
no-caps
class="btn btn-primary"
v-if="handleAddDocument"
@click="addDocument"
>
<font-awesome-icon icon="file-alt" /> New document
</q-btn>
<ConfirmDelete
v-if="handleDelete"
:visible="confirmDelete"
:handle-delete="handleDelete"
@close="confirmDelete = false"
/>
</q-toolbar>
<q-btn
no-caps
class="btn btn-primary"
v-if="handleUploadDocument"
@click="uploadDocument"
>
<font-awesome-icon icon="cloud-upload-alt" /> File upload
</q-btn>
<!-- <DataFilter-->
<!-- v-if="filters"-->
<!-- :handle-filter="onSendFilter"-->
<!-- :handle-reset="resetFilter"-->
<!-- >-->
<!-- <DocumentsFilterForm-->
<!-- ref="filterForm"-->
<!-- slot="filter"-->
<!-- :values="filters"-->
<!-- />-->
<!-- </DataFilter>-->
<ConfirmDelete
v-if="handleDelete"
:visible="confirmDelete"
:handle-delete="handleDelete"
@close="confirmDelete = false"
/>
</div>
</div>
</template>
<script>

11
assets/vue/components/documents/Form.vue
Unescape View File

@ -1,15 +1,13 @@
<template>
<!-- @input="$v.item.title.$touch()"-->
<!-- @blur="$v.item.title.$touch()"-->
<q-input
id="item_title"
v-model="item.title"
:error-messages="titleErrors"
:placeholder="$t('Title')"
required
@input="$v.item.title.$touch()"
@blur="$v.item.title.$touch()"
/>
</template>
<script>
@ -45,16 +43,15 @@ export default {
};
},
computed: {
// eslint-disable-next-line
item() {
return this.initialValues || this.values;
},
titleErrors() {
const errors = [];
if (!this.$v.item.title.$dirty) return errors;
/*if (!this.$v.item.title.$dirty) return errors;
has(this.violations, 'title') && errors.push(this.violations.title);
!this.$v.item.title.required && errors.push(this.$t('Field is required'));
!this.$v.item.title.required && errors.push(this.$t('Field is required'));*/
return errors;
},

8
assets/vue/hooks/useState.js
Unescape View File

@ -5,11 +5,9 @@ const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value
}
const isSettingsPanelOpen = ref(false)
const isSearchPanelOpen = ref(false)
const isNotificationsPanelOpen = ref(false)
const isSettingsPanelOpen = ref(false);
const isSearchPanelOpen = ref(false);
const isNotificationsPanelOpen = ref(false);
export default function useState() {
return {

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

@ -15,7 +15,7 @@ export default {
sortBy: 'resourceNode.title',
descending: false,
page: 1, // page to be displayed
rowsPerPage: 3, // maximum displayed rows
rowsPerPage: 10, // maximum displayed rows
rowsNumber: 10, // max number of rows
},
nextPage: null,
@ -26,7 +26,7 @@ export default {
//sortBy: [], vuetify
//sortDesc: [], , vuetify
page: 1,
itemsPerPage: 3
itemsPerPage: 10
},
//filters: {}
};
@ -66,10 +66,13 @@ export default {
onRequest(props) {
console.log('onRequest');
console.log(props);
const { page, rowsPerPage: itemsPerPage, sortBy, descending } = props.pagination;
const { page, rowsPerPage: itemsPerPage, sortBy, descending } = props.pagination;
const filter = props.filter;
this.nextPage = page;
if (isEmpty(this.nextPage)) {
this.nextPage = 1;
}
let params = {};
if (itemsPerPage > 0) {
@ -133,12 +136,14 @@ export default {
onSendFilter() {
this.resetList = true;
this.onUpdateOptions(this.options);
this.pagination.page = 1;
this.onRequest({pagination: this.pagination})
},
resetFilter() {
this.filters = {};
this.onUpdateOptions(this.options);
this.pagination.page = 1;
this.onRequest({pagination: this.pagination})
},
addHandler() {
@ -216,7 +221,10 @@ export default {
},
deleteHandler(item) {
console.log(item);
this.deleteItem(item).then(() => this.onUpdateOptions(this.options));
this.pagination.page = 1;
this.deleteItem(item).then(() =>
this.onRequest({pagination: this.pagination})
);
},
formatDateTime
}

4
assets/vue/store/index.js
Unescape View File

@ -2,9 +2,9 @@ import { createStore, createLogger } from "vuex";
import notifications from './modules/notifications';
import SecurityModule from "./security";
import createPersistedState from "vuex-persistedstate";
//createLogger(),
export default createStore({
plugins: [createLogger(), createPersistedState()],
plugins: [createPersistedState()],
modules: {
notifications,
security: SecurityModule,

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

@ -94,7 +94,6 @@ export default function makeCrudModule({
.catch(e => handleError(commit, e));
},
del: ({ commit }, item) => {
console.log('del');
commit(ACTIONS.TOGGLE_LOADING);

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

@ -52,7 +52,6 @@ export default function(id, options = {}) {
.join('&');
id = `${id}?${queryString}`;
console.log(id, 'id');
}
@ -124,6 +123,8 @@ export default function(id, options = {}) {
}*/
return global.fetch(new URL(id, entryPoint), options).then(response => {
console.log(response);
if (response.ok) return response;
return response.json().then(json => {

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

@ -1,81 +1,80 @@
<template>
<div class="q-pa-md">
<Toolbar
:handle-add="addHandler"
:handle-add-document="addDocumentHandler"
:handle-upload-document="uploadDocumentHandler"
:filters="filters"
:on-send-filter="onSendFilter"
:reset-filter="resetFilter"
/>
<Toolbar
:handle-add="addHandler"
:handle-add-document="addDocumentHandler"
:handle-upload-document="uploadDocumentHandler"
:filters="filters"
:on-send-filter="onSendFilter"
:reset-filter="resetFilter"
/>
<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"
selection="multiple"
v-model:selected="selectedItems"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-checkbox dense v-model="props.selected" />
</q-td>
<q-table
dense
: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:')"
:rows-per-page-options="[10, 20, 50, 0]"
:loading="isLoading"
selection="multiple"
v-model:selected="selectedItems"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-checkbox dense v-model="props.selected" />
</q-td>
<q-td key="resourceNode.title" :props="props">
<div v-if="props.row.resourceNode.resourceFile">
<a
data-fancybox="gallery"
:href="props.row.contentUrl"
>
<ResourceFileIcon :file="props.row" />
{{ props.row.title }}
</a>
</div>
<div v-else>
<a @click="handleClick(props.row)" class="cursor-pointer" >
<font-awesome-icon
icon="folder"
size="lg"
/>
{{ props.row.resourceNode.title }}
</a>
</div>
</q-td>
<q-td key="resourceNode.title" :props="props">
<div v-if="props.row.resourceNode.resourceFile">
<a
data-fancybox="gallery"
:href="props.row.contentUrl"
>
<ResourceFileIcon :file="props.row" />
{{ props.row.title }}
</a>
</div>
<div v-else>
<a @click="handleClick(props.row)" class="cursor-pointer" >
<font-awesome-icon
icon="folder"
size="lg"
/>
{{ props.row.resourceNode.title }}
</a>
</div>
</q-td>
<q-td key="resourceNode.updatedAt" :props="props">
{{$luxonDateTime.fromISO(props.row.resourceNode.updatedAt).toRelative() }}
</q-td>
<q-td key="resourceNode.updatedAt" :props="props">
{{$luxonDateTime.fromISO(props.row.resourceNode.updatedAt).toRelative() }}
</q-td>
<q-td key="resourceNode.resourceFile.size" :props="props">
<span v-if="props.row.resourceNode.resourceFile">
{{
$filters.prettyBytes(props.row.resourceNode.resourceFile.size)
}}
</span>
</q-td>
<q-td key="resourceNode.resourceFile.size" :props="props">
<span v-if="props.row.resourceNode.resourceFile">
{{
$filters.prettyBytes(props.row.resourceNode.resourceFile.size)
}}
</span>
</q-td>
<q-td key="action" :props="props">
<ActionCell
:handle-show="() => showHandler(props.row)"
:handle-edit="() => editHandler(props.row)"
:handle-delete="() => deleteHandler(props.row)"
/>
</q-td>
</q-tr>
</template>
</q-table>
<q-td key="action" :props="props">
<ActionCell
:handle-show="() => showHandler(props.row)"
:handle-edit="() => editHandler(props.row)"
:handle-delete="() => deleteHandler(props.row)"
/>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</template>
<script>
@ -87,12 +86,8 @@ import Toolbar from '../../components/Toolbar.vue';
import ResourceFileIcon from './ResourceFileIcon.vue';
import { useRoute } from 'vue-router'
//import { useToast } from 'primevue/usetoast';
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
/*const servicePrefix = 'documents';
const { getters, actions } = list(servicePrefix);*/
import isEmpty from 'lodash/isEmpty';
export default {
@ -114,7 +109,7 @@ export default {
{name: 'resourceNode.resourceFile.size', label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', sortable: true},
{name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false}
],
pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
//pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
selected: [],
isBusy: false,
options: [],

Write Preview
Loading…
Cancel
Save