Resolve "Falscher Fokus im CKEditor bei den Courseware-Zertifikatseinstellungen"

Closes #4681

Merge request studip/studip!3483

resources/vue/components/courseware/unit/CoursewareUnitItemDialogSettings.vue

@@ -56,13 +56,14 @@
                         <studip-tooltip-icon :text="$gettext('Erreicht eine Person in diesem Lernmaterial den ' +
                             'hier eingestellten Fortschritt, so erhält Sie ein PDF-Zertifikat per E-Mail.')"/>
                     </label>
-                    <label v-if="makeCert">
+                    <template v-if="makeCert">
+                        <label>
                             <span>
                                 {{ $gettext('Erforderlicher Fortschritt (in Prozent)') }}
                             </span>
                             <input type="number" min="1" max="100" v-model="certThreshold">
                         </label>
-                    <label v-if="makeCert">
+                        <label>
                             <span>
                                 {{ $gettext('Bild wählen') }}
                             </span>
@@ -72,21 +73,22 @@
                                 'haben, um die ganze Seite auszufüllen.')"></studip-tooltip-icon>
                             <courseware-file-chooser :isImage="true" v-model="certImage" @selectFile="updateCertImage" />
                         </label>
-                    <label v-if="makeCert" class="col-3">
+                        <label>
                             <span>
                                 {{ $gettext('Titel') }}
                                 <input type="text" v-model="certTitle">
                             </span>
                         </label>
-                    <label v-if="makeCert">
+                        <label for="cert-text">
                             <span>
                                 {{ $gettext('Text') }}
-                            <studip-wysiwyg v-model="certText"></studip-wysiwyg>
                             </span>
                         </label>
-                    <button v-if="makeCert" type="button" class="button" @click.prevent="previewCertificate">
+                        <studip-wysiwyg v-model="certText" id="cert-text"></studip-wysiwyg>
+                        <button type="button" class="button" @click.prevent="previewCertificate">
                             {{ $gettext('Vorschau') }}
                         </button>
+                    </template>
                 </fieldset>
                 <fieldset v-if="certificatesRemindersEnabled">
                     <legend>
@@ -101,8 +103,8 @@
                             'Teilnehmenden verschickt werden, um z.B. an die Bearbeitung dieses Lernmaterials ' +
                             'zu erinnern.')"/>
                     </label>
-
-                    <label v-if="sendReminders">
+                    <template v-if="sendReminders">
+                        <label>
                             <span>
                                 {{ $gettext('Zeitraum zwischen Erinnerungen') }}
                             </span>
@@ -127,24 +129,25 @@
                                 </option>
                             </select>
                         </label>
-                    <label v-if="sendReminders" class="col-3">
+                        <label class="col-3">
                             <span>
                                 {{ $gettext('Erstmalige Erinnerung am') }}
                                 <input type="date" v-model="reminderStartDate">
                             </span>
                         </label>
-                    <label v-if="sendReminders" class="col-3">
+                        <label class="col-3">
                             <span>
                                 {{ $gettext('Letztmalige Erinnerung am') }}
                                 <input type="date" v-model="reminderEndDate">
                             </span>
                         </label>
-                    <label v-if="sendReminders">
+                        <label for="reminder-text">
                             <span>
                                 {{ $gettext('Text der Erinnerungsmail') }}
-                            <studip-wysiwyg v-model="reminderMailText"></studip-wysiwyg>
                             </span>
                         </label>
+                        <studip-wysiwyg v-model="reminderMailText" id="reminder-text"></studip-wysiwyg>
+                    </template>
                 </fieldset>
                 <fieldset v-if="certificatesRemindersEnabled">
                     <legend>
@@ -158,7 +161,8 @@
                         <studip-tooltip-icon :text="$gettext('Hier kann eingestellt werden, den Fortschritt ' +
                             'aller Teilnehmenden periodisch auf 0 zurückzusetzen.')"/>
                     </label>
-                    <label v-if="resetProgress">
+                    <template v-if="resetProgress">
+                        <label>
                             <span>
                                 {{ $gettext('Zeitraum zum Rücksetzen des Fortschritts') }}
                             </span>
@@ -180,24 +184,25 @@
                                 </option>
                             </select>
                         </label>
-                    <label v-if="resetProgress" class="col-3">
+                        <label class="col-3">
                             <span>
                                 {{ $gettext('Erstmaliges Zurücksetzen am') }}
                                 <input type="date" v-model="resetProgressStartDate">
                             </span>
                         </label>
-                    <label v-if="resetProgress" class="col-3">
+                        <label class="col-3">
                             <span>
                                 {{ $gettext('Letztmaliges Zurücksetzen am') }}
                                 <input type="date" v-model="resetProgressEndDate">
                             </span>
                         </label>
-                    <label v-if="resetProgress">
+                        <label for="reset-text">
                             <span>
                                 {{ $gettext('Text der Rücksetzungsmail') }}
-                            <studip-wysiwyg v-model="resetProgressMailText"></studip-wysiwyg>
                             </span>
                         </label>
+                        <studip-wysiwyg v-model="resetProgressMailText" id="reset-text"></studip-wysiwyg>
+                    </template>
                 </fieldset>
             </form>
             <studip-progress-indicator v-else :description="$gettext('Lade Einstellungen…')"/>
@@ -288,23 +293,23 @@ export default {
             this.makeCert = typeof(this.certSettings) === 'object' &&
                 Object.keys(this.certSettings).length > 0;
             this.certThreshold = this.certSettings.threshold;
-            this.certImage = this.certSettings.image;
+            this.certImage = this.certSettings.image ?? '';
             this.certTitle = this.certSettings.title;
-            this.certText = this.certSettings.text;
+            this.certText = this.certSettings.text ?? '';
             this.reminderSettings = this.currentInstance.attributes['reminder-settings'];
             this.sendReminders = typeof(this.reminderSettings) === 'object' &&
                 Object.keys(this.reminderSettings).length > 0;
             this.reminderInterval = this.reminderSettings.interval;
             this.reminderStartDate = this.reminderSettings.startDate;
             this.reminderEndDate = this.reminderSettings.endDate;
-            this.reminderMailText = this.reminderSettings.mailText;
+            this.reminderMailText = this.reminderSettings.mailText ?? '';
             this.resetProgressSettings = this.currentInstance.attributes['reset-progress-settings'];
             this.resetProgress = typeof(this.resetProgressSettings) === 'object' &&
                 Object.keys(this.resetProgressSettings).length > 0;
             this.resetProgressInterval = this.resetProgressSettings.interval;
             this.resetProgressStartDate = this.resetProgressSettings.startDate;
             this.resetProgressEndDate = this.resetProgressSettings.endDate;
-            this.resetProgressMailText = this.resetProgressSettings.mailText;
+            this.resetProgressMailText = this.resetProgressSettings.mailText ?? '';
         },
         storeSettings() {
             this.$emit('close');