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

3 files changed, 54 insertions, 15 deletions

diff --git a/resources/vue/components/courseware/layouts/CoursewareDateInput.vue b/resources/vue/components/courseware/layouts/CoursewareDateInput.vue
index 57a5619..d0129a0 100644
--- a/resources/vue/components/courseware/layouts/CoursewareDateInput.vue
+++ b/resources/vue/components/courseware/layouts/CoursewareDateInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :value="formattedDate" @input="onInput" type="date" />
+    <input :value="formattedDate" @input="onInput" type="date" :min="formattedMinDate" />
 </template>
 
 <script>
@@ -8,20 +8,28 @@ const toISO8601 = (date) => date.toISOString();
 const pad = (what, length = 2) => `00000000${what}`.substr(-length);
 
 export default {
-    props: ['value'],
+    props: ['value', 'min'],
     data: () => ({
         date: new Date(),
+        submissionDate: new Date()
     }),
     computed: {
         formattedDate() {
             return `${this.date.getFullYear()}-${pad(this.date.getMonth() + 1)}-${pad(this.date.getDate())}`;
         },
+        formattedMinDate() {
+            return `${this.submissionDate.getFullYear()}-${pad(this.submissionDate.getMonth() + 1)}-${pad(this.submissionDate.getDate())}`;
+        }
     },
     methods: {
         onInput({ target }) {
-            const newValue = toISO8601(target.valueAsDate);
-            if (newValue !== this.value) {
-                this.$emit('input', newValue);
+            if (target.valueAsDate) {
+                const newValue = toISO8601(target.valueAsDate);
+                if (newValue !== this.value) {
+                    this.$emit('input', newValue);
+                }
+            } else {
+                this.$emit('nullDate');
             }
         },
     },
@@ -29,6 +37,9 @@ export default {
         if (this.value) {
             this.date = fromISO8601(this.value);
         }
+        if (this.min) {
+            this.submissionDate = fromISO8601(this.min);
+        }
     },
 };
 </script>
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();
             }