* Create composable to detect files from generic data about documents * Add disable state for base button * Create Base dialog components to reuse common visualization * Create button toolbar * Add new size for iconspull/4726/head
Daniel Gayoso González
2 years ago
parent
1db210073b
commit
a0dc565a5b
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<PrimeChart type="pie" :data="data" :options="{}" class="w-full md:w-30rem" /> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import PrimeChart from 'primevue/chart' |
||||
|
||||
defineProps({ |
||||
data: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,33 @@ |
||||
<template> |
||||
<Dialog |
||||
:header="title" |
||||
:modal="true" |
||||
:style="{width: '450px'}" |
||||
:visible="isVisible" |
||||
class="p-fluid" |
||||
@update:visible="$emit('update:isVisible', $event)" |
||||
> |
||||
<slot></slot> |
||||
<template #footer> |
||||
<slot name="footer"></slot> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import Dialog from 'primevue/dialog' |
||||
|
||||
defineProps({ |
||||
title: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
isVisible: { |
||||
type: Boolean, |
||||
required: true, |
||||
} |
||||
}) |
||||
|
||||
defineEmits(['update:isVisible']) |
||||
|
||||
</script> |
||||
@ -0,0 +1,61 @@ |
||||
<template> |
||||
<BaseDialog |
||||
:title="title" |
||||
:is-visible="isVisible" |
||||
@update:is-visible="$emit('update:isVisible', $event)" |
||||
> |
||||
<slot></slot> |
||||
<template #footer> |
||||
<BaseButton |
||||
:label="innerCancelLabel" |
||||
type="black" |
||||
icon="close" |
||||
@click="$emit('cancelClicked')" |
||||
/> |
||||
<BaseButton |
||||
:label="innerConfirmLabel" |
||||
type="secondary" |
||||
icon="confirm" |
||||
@click="$emit('confirmClicked')" |
||||
/> |
||||
</template> |
||||
</BaseDialog> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import BaseDialog from "./BaseDialog.vue"; |
||||
import BaseButton from "./BaseButton.vue"; |
||||
import {computed} from "vue"; |
||||
import {useI18n} from "vue-i18n"; |
||||
|
||||
const {t} = useI18n() |
||||
|
||||
const props = defineProps({ |
||||
title: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
isVisible: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
confirmLabel: { |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
cancelLabel: { |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
}) |
||||
|
||||
defineEmits(['update:isVisible', 'confirmClicked', 'cancelClicked']) |
||||
|
||||
const innerConfirmLabel = computed(() => { |
||||
return props.confirmLabel === "" ? t('Yes') : props.confirmLabel |
||||
}) |
||||
|
||||
const innerCancelLabel = computed(() => { |
||||
return props.cancelLabel === "" ? t('No') : props.cancelLabel |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<Toolbar :class="toolbarClass"> |
||||
<template #start> |
||||
<div class="flex flex-wrap"> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
</Toolbar> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import Toolbar from "primevue/toolbar"; |
||||
import {computed} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
showTopBorder: { |
||||
type: Boolean, |
||||
default: false, |
||||
} |
||||
}) |
||||
|
||||
const toolbarClass = computed(() => { |
||||
if (props.showTopBorder) { |
||||
return 'pt-5 border-t border-b'; |
||||
} |
||||
return ''; |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,22 @@ |
||||
|
||||
|
||||
export function useFileUtils() { |
||||
|
||||
const isImage = (fileData) => { |
||||
return isFile(fileData) && fileData.resourceNode.resourceFile.image |
||||
} |
||||
|
||||
const isVideo = (fileData) => { |
||||
return isFile(fileData) && fileData.resourceNode.resourceFile.video |
||||
} |
||||
|
||||
const isFile = (fileData) => { |
||||
return fileData.resourceNode && fileData.resourceNode.resourceFile |
||||
} |
||||
|
||||
return { |
||||
isFile, |
||||
isImage, |
||||
isVideo, |
||||
} |
||||
} |
||||
@ -0,0 +1,587 @@ |
||||
<template> |
||||
<ButtonToolbar v-if="isAuthenticated && isCurrentTeacher"> |
||||
<BaseButton |
||||
v-if="showBackButtonIfNotRootFolder" |
||||
:label="t('Back')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="back" |
||||
@click="back" |
||||
/> |
||||
<BaseButton |
||||
:label="t('New document')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="file-add" |
||||
@click="goToNewDocument" |
||||
/> |
||||
<BaseButton |
||||
:disabled="true" |
||||
:label="t('New drawing')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="drawing" |
||||
/> |
||||
<BaseButton |
||||
:disabled="true" |
||||
:label="t('Record audio')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="record-add" |
||||
/> |
||||
<BaseButton |
||||
:label="t('Upload')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="file-upload" |
||||
@click="goToUploadFile" |
||||
/> |
||||
<BaseButton |
||||
:label="t('New folder')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="folder-plus" |
||||
@click="openNew" |
||||
/> |
||||
<BaseButton |
||||
:disabled="true" |
||||
:label="t('New cloud file')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="file-cloud-add" |
||||
/> |
||||
<BaseButton |
||||
:disabled="!hasImageInDocumentEntries" |
||||
:label="t('Slideshow')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="view-gallery" |
||||
@click="showSlideShowWithFirstImage" |
||||
/> |
||||
<BaseButton |
||||
:label="t('Usage')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="usage" |
||||
@click="showUsageDialog" |
||||
/> |
||||
<BaseButton |
||||
:disabled="true" |
||||
:label="t('Download all')" |
||||
type="black" |
||||
class="mr-2 mb-2" |
||||
icon="download" |
||||
/> |
||||
</ButtonToolbar> |
||||
|
||||
<DataTable |
||||
v-model:filters="filters" |
||||
v-model:selection="selectedItems" |
||||
:global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']" |
||||
:lazy="true" |
||||
:loading="isLoading" |
||||
:paginator="true" |
||||
:rows="options.itemsPerPage" |
||||
:rows-per-page-options="[5, 10, 20, 50]" |
||||
:total-records="totalItems" |
||||
:value="items" |
||||
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" |
||||
striped-rows |
||||
class="mb-5" |
||||
@page="onPage($event)" |
||||
@sort="sortingChanged($event)" |
||||
> |
||||
<Column |
||||
v-if="isCurrentTeacher" |
||||
:exportable="false" |
||||
selection-mode="multiple" |
||||
/> |
||||
|
||||
<Column |
||||
:header="t('Title')" |
||||
:sortable="true" |
||||
field="resourceNode.title" |
||||
> |
||||
<template #body="slotProps"> |
||||
<DocumentEntry |
||||
v-if="slotProps.data" |
||||
:data="slotProps.data" |
||||
/> |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:header="t('Size')" |
||||
:sortable="true" |
||||
field="resourceNode.resourceFile.size" |
||||
> |
||||
<template #body="slotProps"> |
||||
{{ |
||||
slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : |
||||
'' |
||||
}} |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:header="t('Modified')" |
||||
:sortable="true" |
||||
field="resourceNode.updatedAt" |
||||
> |
||||
<template #body="slotProps"> |
||||
{{ useRelativeDatetime(slotProps.data.resourceNode.updatedAt) }} |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:exportable="false" |
||||
> |
||||
<template #body="slotProps"> |
||||
<div class="flex flex-row justify-end gap-2"> |
||||
<BaseButton |
||||
type="black" |
||||
icon="information" |
||||
size="small" |
||||
@click="btnShowInformationOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="black" |
||||
:icon="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility ? 'eye-on' : (RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility ? 'eye-off' : '')" |
||||
size="small" |
||||
@click="btnChangeVisibilityOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="black" |
||||
icon="edit" |
||||
size="small" |
||||
@click="btnEditOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="danger" |
||||
icon="delete" |
||||
size="small" |
||||
@click="confirmDeleteItem(slotProps.data)" |
||||
/> |
||||
</div> |
||||
</template> |
||||
</Column> |
||||
</DataTable> |
||||
|
||||
<ButtonToolbar |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
show-top-border |
||||
> |
||||
<BaseButton |
||||
:label="t('Select all')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="select-all" |
||||
@click="selectAll" |
||||
/> |
||||
<BaseButton |
||||
:label="t('Unselect all')" |
||||
class="mr-2 mb-2" |
||||
type="black" |
||||
icon="unselect-all" |
||||
@click="unselectAll" |
||||
/> |
||||
<BaseButton |
||||
:disabled="!selectedItems || !selectedItems.length" |
||||
:label="t('Delete selected')" |
||||
class="mr-2 mb-2" |
||||
type="danger" |
||||
icon="delete" |
||||
@click="showDeleteMultipleDialog" |
||||
/> |
||||
</ButtonToolbar> |
||||
|
||||
<BaseDialogConfirmCancel |
||||
v-model:is-visible="isNewFolderDialogVisible" |
||||
:title="t('New folder')" |
||||
:confirm-label="t('Save')" |
||||
:cancel-label="t('Cancel')" |
||||
@confirm-clicked="createNewFolder" |
||||
@cancel-clicked="hideNewFolderDialog" |
||||
> |
||||
<div class="p-float-label"> |
||||
<InputText |
||||
id="title" |
||||
v-model.trim="item.title" |
||||
:class="{ 'p-invalid': submitted && !item.title }" |
||||
autocomplete="off" |
||||
autofocus |
||||
name="name" |
||||
required="true" |
||||
/> |
||||
<label |
||||
v-t="'Name'" |
||||
for="name" |
||||
/> |
||||
</div> |
||||
<small |
||||
v-if="submitted && !item.title" |
||||
v-t="'Title is required'" |
||||
class="p-error" |
||||
/> |
||||
</BaseDialogConfirmCancel> |
||||
|
||||
<BaseDialogConfirmCancel |
||||
v-model:is-visible="isDeleteItemDialogVisible" |
||||
:title="t('Confirm')" |
||||
@confirm-clicked="deleteSingleItem" |
||||
@cancel-clicked="isDeleteItemDialogVisible = false" |
||||
> |
||||
<div class="confirmation-content"> |
||||
<BaseIcon icon="alert" size="big" class="mr-2" /> |
||||
<span v-if="item">{{ t('Are you sure you want to delete') }} <b>{{ item.title }}</b>?</span> |
||||
</div> |
||||
</BaseDialogConfirmCancel> |
||||
|
||||
<BaseDialogConfirmCancel |
||||
v-model:is-visible="isDeleteMultipleDialogVisible" |
||||
:title="t('Confirm')" |
||||
@confirm-clicked="deleteMultipleItems" |
||||
@cancel-clicked="isDeleteMultipleDialogVisible = false" |
||||
> |
||||
<div class="confirmation-content"> |
||||
<BaseIcon icon="alert" size="big" class="mr-2" /> |
||||
<span v-if="item">{{ t('Are you sure you want to delete the selected items?') }}</span> |
||||
</div> |
||||
</BaseDialogConfirmCancel> |
||||
|
||||
<BaseDialog |
||||
v-model:is-visible="isFileUsageDialogVisible" |
||||
:title="t('Space available')" |
||||
> |
||||
<p>This feature is in development, this is a mockup with placeholder data!</p> |
||||
<BaseChart |
||||
:data="usageData" |
||||
/> |
||||
</BaseDialog> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import {useStore} from 'vuex' |
||||
import {RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED} from '../../components/resource_links/visibility' |
||||
import {isEmpty} from 'lodash' |
||||
import {useRoute, useRouter} from 'vue-router' |
||||
import {useI18n} from 'vue-i18n' |
||||
import {computed, onMounted, ref, watch} from 'vue' |
||||
import {useCidReq} from '../../composables/cidReq' |
||||
import {useDatatableList} from '../../composables/datatableList' |
||||
import {useRelativeDatetime} from '../../composables/formatDate' |
||||
import axios from 'axios' |
||||
import {useToast} from 'primevue/usetoast'; |
||||
import DocumentEntry from "../../components/documents/DocumentEntry.vue"; |
||||
import BaseButton from "../../components/basecomponents/BaseButton.vue"; |
||||
import ButtonToolbar from "../../components/basecomponents/ButtonToolbar.vue"; |
||||
import BaseIcon from "../../components/basecomponents/BaseIcon.vue"; |
||||
import BaseDialogConfirmCancel from "../../components/basecomponents/BaseDialogConfirmCancel.vue"; |
||||
import {useFileUtils} from "../../composables/fileUtils"; |
||||
import BaseDialog from "../../components/basecomponents/BaseDialog.vue"; |
||||
import BaseChart from "../../components/basecomponents/BaseChart.vue"; |
||||
|
||||
const store = useStore() |
||||
const route = useRoute() |
||||
const router = useRouter() |
||||
|
||||
const {t} = useI18n() |
||||
|
||||
const {filters, options, onUpdateOptions, deleteItem} = useDatatableList('Documents') |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const {cid, sid, gid} = useCidReq() |
||||
|
||||
const {isImage} = useFileUtils() |
||||
|
||||
store.dispatch('course/findCourse', {id: `/api/courses/${cid}`}) |
||||
|
||||
if (sid) { |
||||
store.dispatch('session/findSession', {id: `/api/sessions/${sid}`}) |
||||
} |
||||
|
||||
const item = ref({}) |
||||
const usageData = ref({}) |
||||
|
||||
const isNewFolderDialogVisible = ref(false) |
||||
const isDeleteItemDialogVisible = ref(false) |
||||
const isDeleteMultipleDialogVisible = ref(false) |
||||
const isFileUsageDialogVisible = ref(false) |
||||
|
||||
const submitted = ref(false) |
||||
|
||||
filters.value.loadNode = 1 |
||||
|
||||
const selectedItems = ref([]) |
||||
|
||||
const isAuthenticated = computed(() => store.getters['security/isAuthenticated']) |
||||
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']) |
||||
|
||||
const items = computed(() => store.getters['documents/getRecents']) |
||||
const isLoading = computed(() => store.getters['documents/isLoading']) |
||||
|
||||
const totalItems = computed(() => store.getters['documents/getTotalItems']) |
||||
|
||||
const resourceNode = computed(() => store.getters['resourcenode/getResourceNode']) |
||||
|
||||
const hasImageInDocumentEntries = computed(() => { |
||||
return items.value.find(i => isImage(i)) !== undefined |
||||
}) |
||||
|
||||
onMounted(() => { |
||||
filters.value.loadNode = 1 |
||||
|
||||
// Set resource node. |
||||
let nodeId = route.params.node |
||||
|
||||
if (isEmpty(nodeId)) { |
||||
nodeId = route.query.node |
||||
} |
||||
|
||||
store.dispatch('resourcenode/findResourceNode', {id: `/api/resource_nodes/${nodeId}`}); |
||||
|
||||
onUpdateOptions(options.value) |
||||
}); |
||||
|
||||
watch( |
||||
() => route.params, |
||||
() => { |
||||
const nodeId = route.params.node |
||||
|
||||
const finderParams = {id: `/api/resource_nodes/${nodeId}`, cid, sid, gid}; |
||||
|
||||
store.dispatch('resourcenode/findResourceNode', finderParams); |
||||
|
||||
if ('DocumentsList' === route.name) { |
||||
onUpdateOptions(options.value); |
||||
} |
||||
} |
||||
); |
||||
|
||||
const showBackButtonIfNotRootFolder = computed(() => { |
||||
if (!resourceNode.value) { |
||||
return false; |
||||
} |
||||
return resourceNode.value.resourceType.name !== 'courses'; |
||||
}) |
||||
|
||||
function back() { |
||||
if (!resourceNode.value) { |
||||
return; |
||||
} |
||||
let parent = resourceNode.value.parent; |
||||
if (parent) { |
||||
let queryParams = {cid, sid, gid} |
||||
router.push({name: 'DocumentsList', params: {node: parent.id}, query: queryParams}); |
||||
} |
||||
} |
||||
|
||||
function openNew() { |
||||
item.value = {} |
||||
submitted.value = false |
||||
isNewFolderDialogVisible.value = true |
||||
} |
||||
|
||||
function hideNewFolderDialog() { |
||||
isNewFolderDialogVisible.value = false |
||||
submitted.value = false |
||||
} |
||||
|
||||
function createNewFolder() { |
||||
submitted.value = true |
||||
|
||||
if (item.value.title?.trim()) { |
||||
if (!item.value.id) { |
||||
item.value.filetype = 'folder' |
||||
item.value.parentResourceNodeId = route.params.node |
||||
item.value.resourceLinkList = JSON.stringify([{ |
||||
gid, |
||||
sid, |
||||
cid, |
||||
visibility: RESOURCE_LINK_PUBLISHED, // visible by default |
||||
}]) |
||||
|
||||
store.dispatch('documents/createWithFormData', item.value) |
||||
.then(() => { |
||||
toast.add({ |
||||
severity: 'success', |
||||
detail: t('Saved'), |
||||
life: 3500, |
||||
}) |
||||
|
||||
onUpdateOptions(options.value) |
||||
}) |
||||
} |
||||
isNewFolderDialogVisible.value = false |
||||
item.value = {} |
||||
} |
||||
} |
||||
|
||||
function selectAll() { |
||||
selectedItems.value = items.value; |
||||
} |
||||
function showDeleteMultipleDialog() { |
||||
isDeleteMultipleDialogVisible.value = true |
||||
} |
||||
|
||||
function confirmDeleteItem (itemToDelete) { |
||||
item.value = itemToDelete |
||||
isDeleteItemDialogVisible.value = true |
||||
} |
||||
|
||||
function deleteMultipleItems () { |
||||
store.dispatch('documents/delMultiple', selectedItems.value) |
||||
.then(() => { |
||||
isDeleteMultipleDialogVisible.value = false |
||||
unselectAll() |
||||
}) |
||||
|
||||
onUpdateOptions(options.value) |
||||
//this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});*/ |
||||
} |
||||
|
||||
function unselectAll () { |
||||
selectedItems.value = []; |
||||
} |
||||
|
||||
function deleteSingleItem() { |
||||
deleteItem(item) |
||||
|
||||
item.value = {} |
||||
|
||||
isDeleteItemDialogVisible.value = false |
||||
} |
||||
|
||||
function onPage (event) { |
||||
options.value = { |
||||
itemsPerPage: event.rows, |
||||
page: event.page + 1, |
||||
sortBy: event.sortField, |
||||
sortDesc: event.sortOrder === -1 |
||||
} |
||||
|
||||
onUpdateOptions(options.value) |
||||
} |
||||
|
||||
function sortingChanged (event) { |
||||
options.value.sortBy = event.sortField |
||||
options.value.sortDesc = event.sortOrder === -1 |
||||
|
||||
onUpdateOptions(options.value) |
||||
} |
||||
|
||||
function goToNewDocument () { |
||||
router.push({ |
||||
name: 'DocumentsCreateFile', |
||||
query: route.query, |
||||
}) |
||||
} |
||||
|
||||
function goToUploadFile () { |
||||
router.push({ |
||||
name: 'DocumentsUploadFile', |
||||
query: route.query |
||||
}) |
||||
} |
||||
|
||||
function btnShowInformationOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
if (item) { |
||||
folderParams.id = item['@id']; |
||||
} |
||||
|
||||
router.push({ |
||||
name: 'DocumentsShow', |
||||
params: folderParams, |
||||
query: folderParams |
||||
}); |
||||
} |
||||
|
||||
function btnChangeVisibilityOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
folderParams.id = item['@id']; |
||||
|
||||
axios |
||||
.put(item['@id'] + '/toggle_visibility') |
||||
.then(response => { |
||||
item.resourceLinkListFromEntity = response.data.resourceLinkListFromEntity; |
||||
}) |
||||
; |
||||
} |
||||
|
||||
function btnEditOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
folderParams.id = item['@id']; |
||||
|
||||
if ('folder' === item.filetype || isEmpty(item.filetype)) { |
||||
router.push({ |
||||
name: 'DocumentsUpdate', |
||||
params: {id: item['@id']}, |
||||
query: folderParams, |
||||
}); |
||||
|
||||
return; |
||||
} |
||||
|
||||
if ('file' === item.filetype) { |
||||
folderParams.getFile = true; |
||||
|
||||
if (item.resourceNode.resourceFile |
||||
&& item.resourceNode.resourceFile.mimeType |
||||
&& 'text/html' === item.resourceNode.resourceFile.mimeType |
||||
) { |
||||
//folderParams.getFile = true; |
||||
} |
||||
|
||||
router.push({ |
||||
name: 'DocumentsUpdateFile', |
||||
params: {id: item['@id']}, |
||||
query: folderParams |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function showSlideShowWithFirstImage() { |
||||
let item = items.value.find(i => isImage(i)) |
||||
if (item === undefined) { return } |
||||
// Right now Vue prime datatable does not offer a method to click on a row in a table |
||||
// https://primevue.org/datatable/#api.datatable.methods |
||||
// so we click on the dom element that has the href on the item |
||||
document.querySelector(`a[href='${item.contentUrl}']`).click() |
||||
// start slideshow trusting the button to play is present |
||||
document.querySelector('button[class="fancybox-button fancybox-button--play"]').click() |
||||
} |
||||
|
||||
function showUsageDialog() { |
||||
// TODO retrieve usage data from server |
||||
usageData.value = { |
||||
datasets: [{ |
||||
data: [83, 14, 5], |
||||
backgroundColor: [ |
||||
'rgba(255, 99, 132, 0.7)', |
||||
'rgba(54, 162, 235, 0.7)', |
||||
'rgba(255, 206, 86, 0.7)', |
||||
'rgba(75, 192, 192, 0.7)', |
||||
'rgba(153, 102, 255, 0.7)', |
||||
'rgba(255, 159, 64, 0.7)' |
||||
], |
||||
}], |
||||
labels: ['Course', 'Teacher', 'Available space'], |
||||
} |
||||
isFileUsageDialogVisible.value = true |
||||
} |
||||
</script> |
||||
@ -1,486 +0,0 @@ |
||||
<template> |
||||
<Toolbar v-if="isAuthenticated && isCurrentTeacher"> |
||||
<template #start> |
||||
<Button |
||||
:label="t('New folder')" |
||||
class="p-button-plain p-button-outlined" |
||||
icon="mdi mdi-folder-plus" |
||||
@click="openNew" |
||||
/> |
||||
<Button |
||||
:label="t('New document')" |
||||
class="p-button-plain p-button-outlined" |
||||
icon="mdi mdi-file-plus" |
||||
@click="goToNewDocument" |
||||
/> |
||||
<Button |
||||
:label="t('Upload')" |
||||
class="p-button-plain p-button-outlined" |
||||
icon="mdi mdi-file-upload" |
||||
@click="goToUploadFile" |
||||
/> |
||||
<!-- |
||||
<Button label="{{ $t('Download') }}" class="btn btn--primary" @click="downloadDocumentHandler()" :disabled="!selectedItems || !selectedItems.length"> |
||||
<v-icon icon="mdi-file-download"/> |
||||
{{ $t('Download') }} |
||||
</Button> |
||||
--> |
||||
<Button |
||||
:disabled="!selectedItems || !selectedItems.length" |
||||
:label="t('Delete selected')" |
||||
class="p-button-danger p-button-outlined" |
||||
icon="mdi mdi-delete" |
||||
@click="confirmDeleteMultiple" |
||||
/> |
||||
</template> |
||||
</Toolbar> |
||||
|
||||
<DataTable |
||||
v-model:filters="filters" |
||||
v-model:selection="selectedItems" |
||||
:global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']" |
||||
:lazy="true" |
||||
:loading="isLoading" |
||||
:paginator="true" |
||||
:rows="options.itemsPerPage" |
||||
:rows-per-page-options="[5, 10, 20, 50]" |
||||
:total-records="totalItems" |
||||
:value="items" |
||||
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" |
||||
striped-rows |
||||
@page="onPage($event)" |
||||
@sort="sortingChanged($event)" |
||||
> |
||||
<Column |
||||
v-if="isCurrentTeacher" |
||||
:exportable="false" |
||||
selection-mode="multiple" |
||||
/> |
||||
|
||||
<Column |
||||
:header="t('Title')" |
||||
:sortable="true" |
||||
field="resourceNode.title" |
||||
> |
||||
<template #body="slotProps"> |
||||
<DocumentEntry |
||||
v-if="slotProps.data" |
||||
:data="slotProps.data" |
||||
/> |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:header="t('Size')" |
||||
:sortable="true" |
||||
field="resourceNode.resourceFile.size" |
||||
> |
||||
<template #body="slotProps"> |
||||
{{ |
||||
slotProps.data.resourceNode.resourceFile ? $filters.prettyBytes(slotProps.data.resourceNode.resourceFile.size) : '' |
||||
}} |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:header="t('Modified')" |
||||
:sortable="true" |
||||
field="resourceNode.updatedAt" |
||||
> |
||||
<template #body="slotProps"> |
||||
{{ useRelativeDatetime(slotProps.data.resourceNode.updatedAt) }} |
||||
</template> |
||||
</Column> |
||||
|
||||
<Column |
||||
:exportable="false" |
||||
> |
||||
<template #body="slotProps"> |
||||
<div class="flex flex-row justify-end gap-2"> |
||||
<BaseButton |
||||
type="black" |
||||
icon="information" |
||||
size="small" |
||||
@click="btnShowInformationOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="black" |
||||
:icon="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility ? 'eye-on' : (RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility ? 'eye-off' : '')" |
||||
size="small" |
||||
@click="btnChangeVisibilityOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="black" |
||||
icon="edit" |
||||
size="small" |
||||
@click="btnEditOnClick(slotProps.data)" |
||||
/> |
||||
|
||||
<BaseButton |
||||
v-if="isAuthenticated && isCurrentTeacher" |
||||
type="danger" |
||||
icon="delete" |
||||
size="small" |
||||
@click="confirmDeleteItem(slotProps.data)" |
||||
/> |
||||
</div> |
||||
</template> |
||||
</Column> |
||||
</DataTable> |
||||
|
||||
<Dialog |
||||
v-model:visible="itemDialog" |
||||
:header="$t('New folder')" |
||||
:modal="true" |
||||
:style="{width: '450px'}" |
||||
class="p-fluid" |
||||
> |
||||
<div class="p-float-label"> |
||||
<InputText |
||||
id="title" |
||||
v-model.trim="item.title" |
||||
:class="{ 'p-invalid': submitted && !item.title }" |
||||
autocomplete="off" |
||||
autofocus |
||||
name="name" |
||||
required="true" |
||||
/> |
||||
<label |
||||
v-t="'Name'" |
||||
for="name" |
||||
/> |
||||
</div> |
||||
<small |
||||
v-if="submitted && !item.title" |
||||
v-t="'Title is required'" |
||||
class="p-error" |
||||
/> |
||||
|
||||
<template #footer> |
||||
<Button |
||||
class="p-button-outlined p-button-plain" |
||||
icon="pi pi-times" |
||||
label="Cancel" |
||||
@click="hideDialog" |
||||
/> |
||||
<Button |
||||
class="p-button-secondary" |
||||
icon="pi pi-check" |
||||
label="Save" |
||||
@click="saveItem" |
||||
/> |
||||
</template> |
||||
</Dialog> |
||||
|
||||
<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" |
||||
/> |
||||
<span v-if="item">Are you sure you want to delete <b>{{ item.title }}</b>?</span> |
||||
</div> |
||||
<template #footer> |
||||
<Button |
||||
:label="t('No')" |
||||
class="p-button-outlined p-button-plain" |
||||
icon="pi pi-times" |
||||
@click="deleteItemDialog = false" |
||||
/> |
||||
<Button |
||||
:label="t('Yes')" |
||||
class="p-button-secondary" |
||||
icon="pi pi-check" |
||||
@click="btnCofirmSingleDeleteOnClick" |
||||
/> |
||||
</template> |
||||
</Dialog> |
||||
|
||||
<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" |
||||
/> |
||||
<span v-if="item">{{ $t('Are you sure you want to delete the selected items?') }}</span> |
||||
</div> |
||||
<template #footer> |
||||
<Button |
||||
class="p-button-outlined p-button-plain" |
||||
icon="pi pi-times" |
||||
label="No" |
||||
@click="deleteMultipleDialog = false" |
||||
/> |
||||
<Button |
||||
class="p-button-secondary" |
||||
icon="pi pi-check" |
||||
label="Yes" |
||||
@click="deleteMultipleItems" |
||||
/> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { useStore } from 'vuex' |
||||
import { RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED } from '../../components/resource_links/visibility' |
||||
import { isEmpty } from 'lodash' |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
import { useI18n } from 'vue-i18n' |
||||
import Toolbar from 'primevue/toolbar' |
||||
import Dialog from 'primevue/dialog' |
||||
import { computed, onMounted, ref, watch } from 'vue' |
||||
import { useCidReq } from '../../composables/cidReq' |
||||
import { useDatatableList } from '../../composables/datatableList' |
||||
import { useRelativeDatetime } from '../../composables/formatDate' |
||||
import axios from 'axios' |
||||
import { useToast } from 'primevue/usetoast'; |
||||
import DocumentEntry from "../../components/documents/DocumentEntry.vue"; |
||||
import BaseButton from "../../components/basecomponents/BaseButton.vue"; |
||||
|
||||
const store = useStore() |
||||
const route = useRoute() |
||||
const router = useRouter() |
||||
const { t } = useI18n() |
||||
|
||||
const { filters, options, onUpdateOptions, deleteItem } = useDatatableList('Documents') |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const { cid, sid, gid } = useCidReq() |
||||
|
||||
store.dispatch('course/findCourse', { id: `/api/courses/${cid}` }) |
||||
|
||||
if (sid) { |
||||
store.dispatch('session/findSession', { id: `/api/sessions/${sid}` }) |
||||
} |
||||
|
||||
const item = ref({}) |
||||
|
||||
const itemDialog = ref(false) |
||||
const deleteItemDialog = ref(false) |
||||
const deleteMultipleDialog = ref(false) |
||||
|
||||
const submitted = ref(false) |
||||
|
||||
filters.value.loadNode = 1 |
||||
|
||||
const selectedItems = ref([]) |
||||
|
||||
const isAuthenticated = computed(() => store.getters['security/isAuthenticated']) |
||||
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']) |
||||
|
||||
const items = computed(() => store.getters['documents/getRecents']) |
||||
const isLoading = computed(() => store.getters['documents/isLoading']) |
||||
|
||||
const totalItems = computed(() => store.getters['documents/getTotalItems']) |
||||
|
||||
onMounted(() => { |
||||
filters.value.loadNode = 1 |
||||
|
||||
// Set resource node. |
||||
let nodeId = route.params.node |
||||
|
||||
if (isEmpty(nodeId)) { |
||||
nodeId = route.query.node |
||||
} |
||||
|
||||
store.dispatch('resourcenode/findResourceNode', { id: `/api/resource_nodes/${nodeId}` }); |
||||
|
||||
onUpdateOptions(options.value) |
||||
}); |
||||
|
||||
watch( |
||||
() => route.params, |
||||
() => { |
||||
const nodeId = route.params.node |
||||
|
||||
const finderParams = { id: `/api/resource_nodes/${nodeId}`, cid, sid, gid }; |
||||
|
||||
store.dispatch('resourcenode/findResourceNode', finderParams); |
||||
|
||||
if ('DocumentsList' === route.name) { |
||||
onUpdateOptions(options.value); |
||||
} |
||||
} |
||||
); |
||||
|
||||
function openNew () { |
||||
item.value = {} |
||||
submitted.value = false |
||||
itemDialog.value = true |
||||
} |
||||
|
||||
function hideDialog () { |
||||
itemDialog.value = false |
||||
submitted.value = false |
||||
} |
||||
|
||||
function saveItem () { |
||||
submitted.value = true |
||||
|
||||
if (item.value.title?.trim()) { |
||||
if (!item.value.id) { |
||||
item.value.filetype = 'folder' |
||||
item.value.parentResourceNodeId = route.params.node |
||||
item.value.resourceLinkList = JSON.stringify([{ |
||||
gid, |
||||
sid, |
||||
cid, |
||||
visibility: RESOURCE_LINK_PUBLISHED, // visible by default |
||||
}]) |
||||
|
||||
store.dispatch('documents/createWithFormData', item.value) |
||||
.then(() => { |
||||
toast.add({ |
||||
severity: 'success', |
||||
detail: t('Saved'), |
||||
life: 3500, |
||||
}) |
||||
|
||||
onUpdateOptions(options.value) |
||||
}) |
||||
} |
||||
itemDialog.value = false |
||||
item.value = {} |
||||
} |
||||
} |
||||
|
||||
function confirmDeleteMultiple () { |
||||
deleteMultipleDialog.value = true |
||||
} |
||||
|
||||
function confirmDeleteItem (itemToDelete) { |
||||
item.value = itemToDelete |
||||
deleteItemDialog.value = true |
||||
} |
||||
|
||||
function deleteMultipleItems () { |
||||
store.dispatch('documents/delMultiple', selectedItems.value) |
||||
.then(() => { |
||||
deleteMultipleDialog.value = false |
||||
selectedItems.value = [] |
||||
}) |
||||
|
||||
onUpdateOptions(options.value) |
||||
//this.$toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});*/ |
||||
} |
||||
|
||||
function btnCofirmSingleDeleteOnClick () { |
||||
deleteItem(item) |
||||
|
||||
item.value = {} |
||||
|
||||
deleteItemDialog.value = false |
||||
} |
||||
|
||||
function onPage (event) { |
||||
options.value = { |
||||
itemsPerPage: event.rows, |
||||
page: event.page + 1, |
||||
sortBy: event.sortField, |
||||
sortDesc: event.sortOrder === -1 |
||||
} |
||||
|
||||
onUpdateOptions(options.value) |
||||
} |
||||
|
||||
function sortingChanged (event) { |
||||
options.value.sortBy = event.sortField |
||||
options.value.sortDesc = event.sortOrder === -1 |
||||
|
||||
onUpdateOptions(options.value) |
||||
} |
||||
|
||||
function goToNewDocument () { |
||||
router.push({ |
||||
name: 'DocumentsCreateFile', |
||||
query: route.query, |
||||
}) |
||||
} |
||||
|
||||
function goToUploadFile () { |
||||
router.push({ |
||||
name: 'DocumentsUploadFile', |
||||
query: route.query |
||||
}) |
||||
} |
||||
|
||||
function btnShowInformationOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
if (item) { |
||||
folderParams.id = item['@id']; |
||||
} |
||||
|
||||
router.push({ |
||||
name: 'DocumentsShow', |
||||
params: folderParams, |
||||
query: folderParams |
||||
}); |
||||
} |
||||
|
||||
function btnChangeVisibilityOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
folderParams.id = item['@id']; |
||||
|
||||
axios |
||||
.put(item['@id'] + '/toggle_visibility') |
||||
.then(response => { |
||||
item.resourceLinkListFromEntity = response.data.resourceLinkListFromEntity; |
||||
}) |
||||
; |
||||
} |
||||
|
||||
function btnEditOnClick (item) { |
||||
const folderParams = route.query; |
||||
|
||||
folderParams.id = item['@id']; |
||||
|
||||
if ('folder' === item.filetype || isEmpty(item.filetype)) { |
||||
router.push({ |
||||
name: 'DocumentsUpdate', |
||||
params: { id: item['@id'] }, |
||||
query: folderParams, |
||||
}); |
||||
|
||||
return; |
||||
} |
||||
|
||||
if ('file' === item.filetype) { |
||||
folderParams.getFile = true; |
||||
|
||||
if (item.resourceNode.resourceFile |
||||
&& item.resourceNode.resourceFile.mimeType |
||||
&& 'text/html' === item.resourceNode.resourceFile.mimeType |
||||
) { |
||||
//folderParams.getFile = true; |
||||
} |
||||
|
||||
router.push({ |
||||
name: 'DocumentsUpdateFile', |
||||
params: { id: item['@id'] }, |
||||
query: folderParams |
||||
}); |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue