diff --git a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue index acc2282110d926238d001de79f30d41a0cc9bf7c..3ee9a96b2224d617f3ab6db4087f8dc6c9de8a1d 100644 --- a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue +++ b/resources/vue/components/courseware/containers/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> @@ -166,6 +171,7 @@ export default { assistiveLive: '', showDeleteDialog: false, currentSection: null, + editDataValid: true, }; }, computed: { @@ -268,6 +274,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; @@ -418,6 +425,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/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue index d818a34366c7c563adec6f380c15112adcb40063..1fa05f50ae8ac5393448a2579983630106e63737 100644 --- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue +++ b/resources/vue/components/courseware/containers/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/containers/CoursewareTabsContainer.vue b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue index 475c33f7e53ebeb139501fec6c40392404def161..725c017eaab8f8dbea3da49b57dff319616121ef 100644 --- a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue +++ b/resources/vue/components/courseware/containers/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> @@ -169,6 +174,7 @@ export default { assistiveLive: '', showDeleteDialog: false, currentSection: null, + editDataValid: true, }; }, computed: { @@ -414,6 +420,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 } } };