Biest #3468

Closes #3468

Merge request studip/studip!2467

resources/vue/components/courseware/CoursewareAccordionContainer.vue

@@ -4,6 +4,7 @@
         containerClass="cw-container-accordion"
         :canEdit="canEdit"
         :isTeacher="isTeacher"
+        :editDataValid="editDataValid"
         @showEdit="setShowEdit"
         @storeContainer="storeContainer"
         @closeEdit="initCurrentData"
@@ -89,13 +90,17 @@
         </template>
         <template v-slot:containerEditDialog>
             <form class="default cw-container-dialog-edit-form" @submit.prevent="">
-                <fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
+                <fieldset
+                    v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)"
+                    :key="index"
+                    :class="{ invalid: !section.name && !section.icon }"
+                >
                     <label>
-                        {{ $gettext('Title')}}
+                        {{ $gettext('Titel')}}
                         <input type="text" v-model="section.name" />
                     </label>
                     <label>
-                        {{ $gettext('Icon')}}
+                        {{ $gettext('Symbol')}}
                         <studip-select :options="icons" v-model="section.icon">
                             <template #open-indicator="selectAttributes">
                                 <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
@@ -168,6 +173,7 @@ export default {
             assistiveLive: '',
             showDeleteDialog: false,
             currentSection: null,
+            editDataValid: true,
         };
     },
     computed: {
@@ -270,6 +276,7 @@ export default {
         async storeContainer() {
             const timeout = setTimeout(() => this.processing = true, 800);
             this.currentContainer.attributes.payload.sections = this.currentContainer.attributes.payload.sections.filter(section => !section.locked);
+            let validSections = true;
             this.currentContainer.attributes.payload.sections.forEach(section => {
                 section.blocks = section.blocks.map((block) => {return block.id;});
                 delete section.locked;
@@ -420,6 +427,17 @@ export default {
                 }
             },
             deep: true
+        },
+        currentContainer: {
+            handler() {
+                this.editDataValid = true;
+                this.currentContainer.attributes.payload.sections.forEach(section => {
+                    if (!section.icon && !section.name) {
+                        this.editDataValid = false;
+                    }
+                });
+            },
+            deep: true
         }
     }
 };

resources/vue/components/courseware/CoursewareDefaultContainer.vue

@@ -41,6 +41,7 @@
                 closeClass="cancel"
                 @close="closeEdit"
                 @confirm="storeContainer"
+                :confirmDisabled="!editDataValid"
                 height="430"
                 width="680"
             >
@@ -147,6 +148,10 @@ export default {
         container: Object,
         canEdit: Boolean,
         isTeacher: Boolean,
+        editDataValid: {
+            type: Boolean,
+            default: true
+        },
     },
     data() {
         return {

resources/vue/components/courseware/CoursewareTabsContainer.vue

@@ -4,6 +4,7 @@
         containerClass="cw-container-tabs"
         :canEdit="canEdit"
         :isTeacher="isTeacher"
+        :editDataValid="editDataValid"
         @showEdit="setShowEdit"
         @storeContainer="storeContainer"
         @closeEdit="initCurrentData"
@@ -88,13 +89,17 @@
         </template>
         <template v-slot:containerEditDialog>
             <form class="default cw-container-dialog-edit-form" @submit.prevent="">
-                <fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
+                <fieldset
+                    v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)"
+                    :key="index"
+                    :class="{ invalid: !section.name && !section.icon }"
+                >
                     <label>
-                        {{ $gettext('Title') }}
+                        {{ $gettext('Titel') }}
                         <input type="text" v-model="section.name" />
                     </label>
                     <label>
-                        {{ $gettext('Icon') }}
+                        {{ $gettext('Symbol') }}
                         <studip-select :options="icons" v-model="section.icon">
                             <template #open-indicator="selectAttributes">
                                 <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
@@ -173,6 +178,7 @@ export default {
             assistiveLive: '',
             showDeleteDialog: false,
             currentSection: null,
+            editDataValid: true,
         };
     },
     computed: {
@@ -418,6 +424,17 @@ export default {
                 }
             },
             deep: true
+        },
+        currentContainer: {
+            handler() {
+                this.editDataValid = true;
+                this.currentContainer.attributes.payload.sections.forEach(section => {
+                    if (!section.icon && !section.name) {
+                        this.editDataValid = false;
+                    }
+                });
+            },
+            deep: true
         }
     }
 };