CW page metadata image fix

Closes #911

Merge request studip/studip!1160

resources/vue/components/courseware/CoursewareStructuralElement.vue

@@ -293,18 +293,18 @@
                             <courseware-tab :name="textEdit.image" :index="2">
                                 <form class="default" @submit.prevent="">
                                     <img
-                                        v-if="image"
+                                        v-if="showPreviewImage"
                                         :src="image"
                                         class="cw-structural-element-image-preview"
                                         :alt="$gettext('Vorschaubild')"
                                     />
-                                    <label v-if="image">
+                                    <label v-if="showPreviewImage">
                                         <button class="button" @click="deleteImage" v-translate>Bild löschen</button>
                                     </label>
                                     <div v-if="uploadFileError" class="messagebox messagebox_error">
                                         {{ uploadFileError }}
                                     </div>
-                                    <label v-if="!image">
+                                    <label v-if="!showPreviewImage">
                                         <translate>Bild hochladen</translate>
                                         <input ref="upload_image" type="file" accept="image/*" @change="checkUploadFile" />
                                     </label>
@@ -723,6 +723,7 @@ export default {
                 passsword: '',
                 'expire-date': ''
             },
+            deletingPreviewImage: false,
         };
     },
 
@@ -834,6 +835,10 @@ export default {
             return this.structuralElement.relationships?.image?.meta?.['download-url'] ?? null;
         },
 
+        showPreviewImage() {
+            return this.image !== null && this.deletingPreviewImage === false;
+        },
+
         structuralElementLoaded() {
             return this.structuralElement !== null && this.structuralElement !== {};
         },
@@ -1309,6 +1314,7 @@ export default {
         initCurrent() {
             this.currentElement = _.cloneDeep(this.structuralElement);
             this.uploadFileError = '';
+            this.deletingPreviewImage = false;
         },
         async menuAction(action) {
             switch (action) {
@@ -1415,8 +1421,9 @@ export default {
             }
         },
         deleteImage() {
-            this.deleteImageForStructuralElement(this.currentElement);
-            this.initCurrent();
+            if (!this.deletingPreviewImage) {
+                this.deletingPreviewImage = true;
+            }
         },
         async storeCurrentElement() {
             await this.loadStructuralElement(this.currentElement.id);
@@ -1442,6 +1449,9 @@ export default {
                     console.error(error);
                     this.uploadFileError = this.$gettext('Fehler beim Hochladen der Datei.');
                 });
+                await this.loadStructuralElement(this.currentElement.id);
+            } else if (this.deletingPreviewImage) {
+                await this.deleteImageForStructuralElement(this.currentElement);
             }
             this.showElementEditDialog(false);