diff --git a/resources/vue/components/courseware/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/CoursewareAccordionContainer.vue index 544e46ca2d1190690a8002b7ec54b13e1878e506..36817230bac4181ea781be244d80c394c99cc1ce 100644 --- a/resources/vue/components/courseware/CoursewareAccordionContainer.vue +++ b/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 } } }; diff --git a/resources/vue/components/courseware/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/CoursewareDefaultContainer.vue index 62bd8d6d25ac1dd0ab2e296553e9a28d7c587511..c31aeacc293a531084e42f4d2cef2e576bc7d7ae 100644 --- a/resources/vue/components/courseware/CoursewareDefaultContainer.vue +++ b/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 { diff --git a/resources/vue/components/courseware/CoursewareTabsContainer.vue b/resources/vue/components/courseware/CoursewareTabsContainer.vue index d2a8c0585607c4588e6cd555b3f440b6537d44fb..22266d4f40f2efbfa31a7c653fa1f42e0c9b930e 100644 --- a/resources/vue/components/courseware/CoursewareTabsContainer.vue +++ b/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 } } };