fix js errors when wrong date is typed in and show error messagebiest-2553

2 files changed, 38 insertions, 10 deletions

diff --git a/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue b/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
index e17d18e..bd29b24 100644
--- a/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
+++ b/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
@@ -50,10 +50,11 @@
 
         <RenewalDialog
             v-if="renewalTask"
-            :renewalDate="renewalDate"
             :renewalState="renewalTask.attributes.renewal"
+            :submissionDate="renewalTask.attributes['submission-date']"
             @update="updateRenewal"
             @close="closeDialogs"
+            @nullDate="nullDate"
         />
 
         <TaskGroupsAddSolversDialog v-if="showTaskGroupsAddSolversDialog" :taskGroup="taskGroup" @newtask="reloadTasks" />
@@ -130,6 +131,7 @@ export default {
     methods: {
         ...mapActions({
             companionError: 'companionError',
+            companionWarning: 'companionWarning',
             companionSuccess: 'companionSuccess',
             createTaskFeedback: 'createTaskFeedback',
             deleteTaskFeedback: 'deleteTaskFeedback',
@@ -186,7 +188,15 @@ export default {
                 },
             });
         },
-        updateRenewal({ state, date }) {
+        updateRenewal({ state, date, warn }) {
+            if (warn) {
+                this.closeDialogs();
+                this.companionWarning({
+                    info: this.$gettext('Die Verlängerungsfrist darf nicht vor dem Abgabedatum liegen.')
+                });
+                return;
+            }
+
             const attributes = { renewal: state };
             if (date) {
                 attributes['renewal-date'] = date.toISOString();
@@ -210,6 +220,12 @@ export default {
             }
             this.closeDialogs();
         },
+        nullDate() {
+            this.closeDialogs();
+            this.companionError({
+                info: this.$gettext('Die Datumsangabe ist ungültig.')
+            });
+        }
     },
 };
 </script>
diff --git a/resources/vue/components/courseware/tasks/RenewalDialog.vue b/resources/vue/components/courseware/tasks/RenewalDialog.vue
index f08719e..c033e56 100644
--- a/resources/vue/components/courseware/tasks/RenewalDialog.vue
+++ b/resources/vue/components/courseware/tasks/RenewalDialog.vue
@@ -24,7 +24,7 @@
                 </label>
                 <label v-if="state === 'granted'">
                     {{ $gettext('neue Frist') }}
-                    <DateInput v-model="date" class="size-l" />
+                    <DateInput v-model="date" class="size-l" :min="submissionDate" @nullDate="nullDate = true" />
                 </label>
             </form>
         </template>
@@ -32,31 +32,43 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex';
 import DateInput from '../layouts/CoursewareDateInput.vue';
+
 export default {
-    props: ['renewalDate', 'renewalState'],
+    props: ['renewalState', 'submissionDate'],
     components: {
         DateInput,
     },
     data: () => ({
         date: null,
         state: null,
+        nullDate: false,
     }),
     methods: {
         resetLocalVars() {
-            this.date = this.renewalDate ?? null;
+            this.date = this.submissionDate ?? null;
             this.state = this.renewalState;
         },
         updateRenewal() {
+            if (this.nullDate) {
+                this.$emit('nullDate');
+                return;
+            }
+
             const date = new Date(this.date);
-            date.setHours(23);
-            date.setMinutes(59);
-            date.setSeconds(59);
-            date.setMilliseconds(999);
+
+            if (date > new Date(this.submissionDate)) {
+                date.setHours(23);
+                date.setMinutes(59);
+                date.setSeconds(59);
+                date.setMilliseconds(999);
+            }
 
             this.$emit('update', {
                 state: this.state,
                 date: this.state === 'granted' ? date || Date.now() : null,
+                warn: date < new Date(this.submissionDate)
             });
         },
     },
@@ -64,7 +76,7 @@ export default {
         this.resetLocalVars();
     },
     watch: {
-        renewalDate(newValue) {
+        submissionDate(newValue) {
             if (newValue !== this.date) {
                 this.resetLocalVars();
             }