<template> <select v-model="currentValue" @change="changeSelection"> <option v-if="unchoose" value=""><translate>kein Ordner ausgewählt</translate></option> <optgroup v-if="this.context.type === 'courses'" :label="textOptGroupCourse"> <option v-for="folder in loadedCourseFolders" :key="folder.id" :value="folder.id"> {{ folder.attributes.name }} </option> </optgroup> <optgroup v-if="allowUserFolders" :label="textOptGroupUser"> <option v-for="folder in loadedUserFolders" :key="folder.id" :value="folder.id"> {{ folder.attributes.name }} </option> </optgroup> </select> </template> <script> import { mapActions, mapGetters } from 'vuex'; export default { name: 'courseware-folder-chooser', props: { value: String, allowUserFolders: { type: Boolean, default: false }, allowHomeworkFolders: { type: Boolean, default: false }, unchoose: { type: Boolean, default: false }, }, data() { return { currentValue: Object, textOptGroupCourse: this.$gettext('Dateibereich dieser Veranstaltung'), textOptGroupUser: this.$gettext('Eigener Dateibereich'), }; }, computed: { ...mapGetters({ context: 'context', relatedFolders: 'folders/related', userId: 'userId', }), courseObject() { return { type: 'courses', id: `${this.context.id}` }; }, userObject() { return { type: 'users', id: `${this.userId}` }; }, loadedCourseFolders() { let loadedCourseFolders = []; let CourseFolders = this.relatedFolders({ parent: this.courseObject, relationship: 'folders' }) ?? []; CourseFolders.forEach(folder => { if (this.validateParentFolder(folder)) { switch (folder.attributes['folder-type']) { case 'HiddenFolder': if (folder.attributes['data-content']['download_allowed'] === 1) { loadedCourseFolders.push(folder); } break; case 'HomeworkFolder': if(this.allowHomeworkFolders) { loadedCourseFolders.push(folder); } break; default: loadedCourseFolders.push(folder); } } }); return loadedCourseFolders; }, loadedUserFolders() { let loadedUserFolders = []; let UserFolders = this.relatedFolders({ parent: this.userObject, relationship: 'folders' }) ?? []; UserFolders.forEach(folder => { if (folder.attributes['folder-type'] === 'PublicFolder') { loadedUserFolders.push(folder); } }); return loadedUserFolders; }, }, methods: { ...mapActions({ loadRelatedFolders: 'folders/loadRelated' }), changeSelection() { this.$emit('input', this.currentValue); }, getCourseFolders() { const parent = this.courseObject; const relationship = 'folders'; const options = { 'page[limit]': 10000 }; return this.loadRelatedFolders({ parent, relationship, options }); }, getUserFolders() { const parent = this.userObject; const relationship = 'folders'; const options = { 'page[limit]': 10000 }; return this.loadRelatedFolders({ parent, relationship, options }); }, validateParentFolder(folder) { let courseFolders = this.relatedFolders({ parent: this.courseObject, relationship: 'folders' }) ?? []; let validation = true; if (courseFolders.length > 0 && folder?.relationships?.parent) { let parentId = folder.relationships.parent.data.id; let parent = courseFolders.find(f => f.id === parentId); if (parent) { validation = this.hiddenParentFolderValidation(parent); } } return validation; }, hiddenParentFolderValidation(parentFolder) { if (parentFolder.attributes['folder-type'] === 'HiddenFolder') { return false; } else if (parentFolder?.relationships?.parent) { // Recursively validating the parents. return this.validateParentFolder(parentFolder); } else { return true; } } }, mounted() { this.currentValue = this.value; if (this.context.type !== 'users') { this.getCourseFolders(); } this.getUserFolders(); }, }; </script>