Skip to content
Snippets Groups Projects
Commit 6e5d57cc authored by Ron Lucke's avatar Ron Lucke Committed by Jan-Hendrik Willms
Browse files

fix #3908 

Closes #3908

Merge request studip/studip!2775
parent deb3a605
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue
+ 77
− 42
View file @ 6e5d57cc
<template>
<studip-dialog
<studip-dialog
:title="$gettext('Darstellung')"
:confirmText="$gettext('Speichern')"
confirmClass="accept"
:closeText="$gettext('Schließen')"
closeClass="cancel"
height="470"
height="540"
width="870"
@close="$emit('close')"
@confirm="storeLayout"
......@@ -23,12 +23,8 @@
<label v-if="showPreviewImage">
<button class="button" @click="deleteImage">{{ $gettext('Bild löschen') }}</button>
</label>
<courseware-companion-box
v-if="uploadFileError"
:msgCompanion="uploadFileError"
mood="sad"
/>
<label v-if="!showPreviewImage">
<courseware-companion-box v-if="uploadFileError" :msgCompanion="uploadFileError" mood="sad" />
<template v-if="!showPreviewImage">
<img
v-if="currentFile"
:src="uploadImageURL"
......@@ -36,14 +32,32 @@
:alt="$gettext('Vorschaubild')"
/>
<div v-else class="cw-structural-element-image-preview-placeholder"></div>
{{ $gettext('Bild hochladen') }}
<input class="cw-file-input" ref="upload_image" type="file" accept="image/*" @change="checkUploadFile" />
</label>
<label>
{{ $gettext('Bild hochladen') }}
<input
class="cw-file-input"
ref="upload_image"
type="file"
accept="image/*"
@change="checkUploadFile"
/>
</label>
{{ $gettext('oder') }}
<br />
<button class="button" type="button" @click="showStockImageSelector = true">
{{ $gettext('Aus dem Bilderpool auswählen') }}
</button>
<StockImageSelector
v-if="showStockImageSelector"
@close="showStockImageSelector = false"
@select="onSelectStockImage"
/>
</template>
</form>
<form class="default cw-unit-item-dialog-layout-content-settings" @submit.prevent="">
<label>
{{ $gettext('Titel') }}
<input type="text" v-model="currentElement.attributes.title"/>
<input type="text" v-model="currentElement.attributes.title" />
</label>
<label>
{{ $gettext('Beschreibung') }}
......@@ -62,13 +76,9 @@
class="cw-vs-select"
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
><studip-icon shape="arr_1down" :size="10"
/></span>
</template>
<template #no-options>
{{ $gettext('Es steht keine Auswahl zur Verfügung') }}.
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
</template>
<template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung') }}. </template>
<template #selected-option="{ name, hex }">
<span class="vs__option-color" :style="{ 'background-color': hex }"></span
><span>{{ name }}</span>
......@@ -96,19 +106,19 @@
<script>
import CoursewareCompanionBox from '../layouts/CoursewareCompanionBox.vue';
import StockImageSelector from '../../stock-images/SelectorDialog.vue';
import colorMixin from '@/vue/mixins/courseware/colors.js';
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'courseware-unit-item-dialog-layout',
components: {
CoursewareCompanionBox
CoursewareCompanionBox,
StockImageSelector,
},
props: {
unit: Object,
unitElement: Object
unitElement: Object,
},
mixins: [colorMixin],
data() {
......@@ -120,18 +130,26 @@ export default {
uploadImageURL: null,
currentRootLayout: 'default',
loadingInstance: false,
}
showStockImageSelector: false,
selectedStockImage: null,
};
},
computed: {
...mapGetters({
context: 'context',
instanceById: 'courseware-instances/byId',
userId: 'userId'
userId: 'userId',
}),
colors() {
return this.mixinColors.filter(color => color.darkmode);
return this.mixinColors.filter((color) => color.darkmode);
},
image() {
if (this.selectedStockImage) {
return this.selectedStockImage.attributes['download-urls'].small
}
if (this.uploadImageURL) {
return this.uploadImageURL;
}
return this.currentElement.relationships?.image?.meta?.['download-url'] ?? null;
},
......@@ -140,15 +158,14 @@ export default {
},
instance() {
if (this.inCourseContext) {
return this.instanceById({id: 'course_' + this.context.id + '_' + this.unit.id});
return this.instanceById({ id: 'course_' + this.context.id + '_' + this.unit.id });
} else {
return this.instanceById({id: 'user_' + this.context.id + '_' + this.unit.id});
return this.instanceById({ id: 'user_' + this.context.id + '_' + this.unit.id });
}
},
inCourseContext() {
return this.context.type === 'courses';
}
},
},
methods: {
...mapActions({
......@@ -162,9 +179,10 @@ export default {
uploadImageForStructuralElement: 'uploadImageForStructuralElement',
deleteImageForStructuralElement: 'deleteImageForStructuralElement',
storeCoursewareSettings: 'storeCoursewareSettings',
setStockImageForStructuralElement: 'setStockImageForStructuralElement',
}),
async loadUnitInstance() {
const context = {type: this.context.type, id: this.context.id, unit: this.unit.id};
const context = { type: this.context.type, id: this.context.id, unit: this.unit.id };
await this.loadInstance(context);
},
initData() {
......@@ -192,11 +210,13 @@ export default {
this.$emit('close');
await this.loadStructuralElement(this.currentElement.id);
if (
this.unitElement.relationships['edit-blocker'].data !== null
&& this.unitElement.relationships['edit-blocker'].data?.id !== this.userId
this.unitElement.relationships['edit-blocker'].data !== null &&
this.unitElement.relationships['edit-blocker'].data?.id !== this.userId
) {
this.companionWarning({
info: this.$gettext('Ihre Änderungen konnten nicht gespeichert werden, die Daten werden bereits von einem anderen Nutzer bearbeitet.')
info: this.$gettext(
'Ihre Änderungen konnten nicht gespeichert werden, die Daten werden bereits von einem anderen Nutzer bearbeitet.'
),
});
return false;
} else {
......@@ -207,13 +227,20 @@ export default {
this.uploadImageForStructuralElement({
structuralElement: this.currentElement,
file: this.currentFile,
}).then(() => {
this.loadStructuralElement(this.currentElement.id)
}).catch((error) => {
console.error(error);
this.companionWarning({
info: this.$gettext('Beim Hochladen der Bilddatei ist ein Fehler aufgetretten.')
})
.then(() => {
this.loadStructuralElement(this.currentElement.id);
})
.catch((error) => {
console.error(error);
this.companionWarning({
info: this.$gettext('Beim Hochladen der Bilddatei ist ein Fehler aufgetretten.'),
});
});
} else if (this.selectedStockImage) {
await this.setStockImageForStructuralElement({
structuralElement: this.currentElement,
stockImage: this.selectedStockImage,
});
} else if (this.deletingPreviewImage) {
await this.deleteImageForStructuralElement(this.currentElement);
......@@ -233,13 +260,21 @@ export default {
instance: currentInstance,
});
}
}
},
onSelectStockImage(stockImage) {
if (this.$refs?.upload_image) {
this.$refs.upload_image.value = null;
}
this.selectedStockImage = stockImage;
this.showStockImageSelector = false;
this.deletingPreviewImage = false;
},
},
async mounted() {
this.loadingInstance = true;
await this.loadUnitInstance();
this.loadingInstance = false;
this.initData();
}
}
},
};
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment