Replaced semester text input field with dropdown select for editing p…

…ostponement requests
imimap · Oct 27, 2022 · da6ff31 · da6ff31
1 parent 877b606
commit da6ff31
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 109 deletions.
diff --git a/client/src/components/admin/modals/EditPostponementModal.vue b/client/src/components/admin/modals/EditPostponementModal.vue
@@ -9,7 +9,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="postponementEditModalLabel">
-            Verschiebungsantrag bearbeiten
+            {{ $t("postponement.actions.edit") }}
           </h5>
           <button type="button"
                   class="btn-close"
@@ -20,12 +20,14 @@
         </div>
         <div class="modal-body">
           <p>
-            für {{ student?.firstName }} {{ student?.lastName }}
+            {{ $t("postponement.for") }} {{ student?.firstName }} {{ student?.lastName }}
             ({{ student?.studentProfile.studentId }})
           </p>
 
           <div class="mb-3">
-            <label for="newSemesterOfStudy" class="form-label">Hochschulsemester</label>
+            <label for="newSemesterOfStudy" class="form-label">
+              {{ $t("postponement.semester") }}
+            </label>
             <input type="number"
                    min="1"
                    class="form-control"
@@ -37,18 +39,23 @@
           </div>
 
           <div class="mb-3">
-            <label for="newSemester" class="form-label">Fachsemester</label>
-            <input type="text"
-                   class="form-control"
-                   id="newSemester"
-                   aria-describedby="newSemester"
-                   :placeholder="postponement?.newSemester"
-                   v-model="newSemester"
-            >
+            <label for="newSemester" class="form-label">
+              {{ $t("postponement.semesterOfStudy") }}
+            </label>
+            <select v-model="newSemester" class="form-select" id="newSemester">
+              <option
+                v-for="semester in upcomingSemesters"
+                :key="semester"
+                :value="semester"
+                :selected="semester === postponement?.newSemester"
+              >
+                {{ semester }}
+              </option>
+            </select>
           </div>
 
           <div class="mb-3">
-            <label for="reason" class="form-label">Grund</label>
+            <label for="reason" class="form-label">{{ $t("postponement.reason") }}</label>
             <textarea class="form-control"
                       id="reason"
                       aria-describedby="reason"
@@ -59,9 +66,11 @@
 
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            {{ $t("actions.abort") }}
+          </button>
           <button type="button" class="btn btn-success" @click="updatePostponement">
-            Speichern
+            {{ $t("actions.save") }}
           </button>
         </div>
       </div>
@@ -74,7 +83,7 @@ import { defineComponent, PropType } from 'vue';
 import Postponement, { PostponementRequester } from '@/models/Postponement';
 import { createPayloadFromChangedProps } from '@/utils/admin';
 import { showSuccessNotification } from '@/utils/notification';
-import { updatePostponement } from '@/utils/gateways';
+import { loadUpcomingSemesters, updatePostponement } from '@/utils/gateways';
 
 export default defineComponent({
   name: 'EditPostponementModal',
@@ -99,6 +108,7 @@ export default defineComponent({
     return {
       updatableProperties,
       ...initialProps,
+      upcomingSemesters: [] as string[],
     };
   },
   methods: {
@@ -117,15 +127,18 @@ export default defineComponent({
       this.reset();
     },
     reset() {
-      this.newSemesterOfStudy = undefined;
-      this.newSemester = undefined;
-      this.reason = undefined;
+      this.updatableProperties.forEach((prop) => {
+        this[prop] = this.postponement?.[prop];
+      });
     },
   },
   watch: {
     postponement() {
       this.reset();
     },
   },
+  async mounted() {
+    this.upcomingSemesters = await loadUpcomingSemesters();
+  },
 });
 </script>
diff --git a/client/src/components/postponements/CreatePostponement.vue b/client/src/components/postponements/CreatePostponement.vue
@@ -1,81 +1,80 @@
 <template>
-    <div id="form-block4" class="text-left">
-      <form v-on:submit.prevent>
-        <h3>{{ $t("postponement.heading") }}</h3>
-        <div class="pl-5">
-          <div class="row">&nbsp;</div>
-          <div class="row">
-            <div class="field">
-              {{ $t("postponement.statement") }}
-            </div>
+  <div id="form-block4" class="text-left">
+    <form v-on:submit.prevent>
+      <h3>{{ $t("postponement.heading") }}</h3>
+      <div class="pl-5">
+        <div class="row">&nbsp;</div>
+        <div class="row">
+          <div class="field">
+            {{ $t("postponement.statement") }}
           </div>
-          <div class="row">&nbsp;</div>
-          <div class="row">
-            <div class="field">
-              {{ $t("postponement.request") }}:
-              <select v-model="this.newSemester" class="required">
-                <option
-                  v-for="semester in this.nextSemesters"
-                  v-bind:key="semester"
-                  v-bind:newSemester="semester"
-                  :value="semester">
-                  {{ semester }}
-                </option>
-              </select>
-            </div>
-          </div>
-          <div class="row">&nbsp;</div>
-          <div class="row">
-            <div class="form-group max required">
-              {{ $t("postponement.info") }}:
-              <label class="sr-only" for="postponementSemester">
-                {{ $t("postponement.semesterOfStudy") }}
-              </label>
-              <input
-                v-model="this.newSemesterOfStudy"
-                cols="5"
-                class="form-control"
-                type="number"
-                min="4"
-                id="postponementSemester"/>
-            </div>
+        </div>
+        <div class="row">&nbsp;</div>
+        <div class="row">
+          <div class="field">
+            {{ $t("postponement.request") }}:
+            <select v-model="newSemester" class="required">
+              <option
+                v-for="semester in nextSemesters"
+                v-bind:key="semester"
+                :value="semester">
+                {{ semester }}
+              </option>
+            </select>
           </div>
-          <div class="row">&nbsp;</div>
-          <div class="row">
-            <div class="form-group">
-              <label for="postponementReason" class="required">
-                {{ $t("postponement.reason") }}
-              </label>
-              <textarea
-                v-model="this.reason"
-                cols="50"
-                rows="10"
-                class="form-control"
-                id="postponementReason"/>
-            </div>
+        </div>
+        <div class="row">&nbsp;</div>
+        <div class="row">
+          <div class="form-group max required">
+            {{ $t("postponement.info") }}:
+            <label class="sr-only" for="postponementSemester">
+              {{ $t("postponement.semesterOfStudy") }}
+            </label>
+            <input
+              v-model="newSemesterOfStudy"
+              class="form-control"
+              type="number"
+              min="4"
+              id="postponementSemester"/>
           </div>
-          <div class="row my-4">
-            <div class="col-md-4">
-              <button
-                v-on:click="savePostponement"
-                type="submit"
-                class="btn btn-secondary">
-                {{ $t("actions.send") }}
-              </button>
-            </div>
+        </div>
+        <div class="row">&nbsp;</div>
+        <div class="row">
+          <div class="form-group">
+            <label for="postponementReason" class="required">
+              {{ $t("postponement.reason") }}
+            </label>
+            <textarea
+              v-model="reason"
+              cols="50"
+              rows="10"
+              class="form-control"
+              id="postponementReason"/>
           </div>
-          <div class="row mt-3">
-            <a href="javascript:history.back()">{{ $t("actions.back") }}</a>
+        </div>
+        <div class="row my-4">
+          <div class="col-md-4">
+            <button
+              v-on:click="savePostponement"
+              type="submit"
+              class="btn btn-secondary">
+              {{ $t("actions.send") }}
+            </button>
           </div>
         </div>
-      </form>
-    </div>
+        <div class="row mt-3">
+          <a href="javascript:history.back()">{{ $t("actions.back") }}</a>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import http from '@/utils/http-common';
 import { showErrorNotification, showSuccessNotification } from '@/utils/notification';
+import { loadUpcomingSemesters } from '@/utils/gateways';
 
 export default defineComponent({
   name: 'CreatePostponement',
@@ -88,15 +87,9 @@ export default defineComponent({
     };
   },
   async created() {
-    let res;
-    try {
-      res = await http.get('/info/semesters/upcoming');
-      this.nextSemesters = res.data;
-      // eslint-disable-next-line prefer-destructuring
-      this.newSemester = res.data[0];
-    } catch (err: any) {
-      await showErrorNotification(`Fehler beim Anfragen der Namen der folgenden Semester [ERROR: ${err.message}]`);
-    }
+    this.nextSemesters = await loadUpcomingSemesters();
+    // eslint-disable-next-line prefer-destructuring
+    this.newSemester = this.nextSemesters[0];
   },
   methods: {
     async savePostponement() {

diff --git a/client/src/locales/de/postponement.ts b/client/src/locales/de/postponement.ts
@@ -4,7 +4,12 @@ const postponement = {
   request: 'Ich beantrage eine Verschiebung auf das Semester',
   info: 'Dieses Semester wird mein Fachsemester Nummer',
   semesterOfStudy: 'Fachsemester',
+  semester: 'Hochschulsemester',
   reason: 'Begründung',
+  for: 'für',
+  actions: {
+    edit: 'Verschiebungsantrag bearbeiten',
+  },
 };
 
 export default postponement;
diff --git a/client/src/locales/en/postponement.ts b/client/src/locales/en/postponement.ts
@@ -3,8 +3,13 @@ const postponement = {
   statement: 'I do not wish to do my internship during the 4th semester.',
   request: 'I request a postponement to the semester',
   info: 'That semester will be my semester of study number',
-  semesterOfStudy: 'semester of study',
-  reason: 'reason',
+  semesterOfStudy: 'Semester of study',
+  semester: 'Semester',
+  reason: 'Reason',
+  for: 'for',
+  actions: {
+    edit: 'Edit postponement request',
+  },
 };
 
 export default postponement;
diff --git a/client/src/utils/gateways.ts b/client/src/utils/gateways.ts
@@ -186,14 +186,24 @@ export const updatePostponement = async (
   }
 };
 
-// TODO: Also used in Home. Consolidate
 export const loadAvailableSemesters = async (): Promise<string[]> => {
   try {
     const res = await apiClient.get('/info/semesters');
     return await res.data;
   } catch (err: any) {
     if (err.response?.data?.error?.message) err.message = err.response.data.error.message;
-    await showErrorNotification(`Fehler beim Abfragen der verfügbaren semester [ERROR: ${err.message}]`);
+    await showErrorNotification(`Fehler beim Abfragen der verfügbaren Semester [ERROR: ${err.message}]`);
+    return [];
+  }
+};
+
+export const loadUpcomingSemesters = async (): Promise<string[]> => {
+  try {
+    const res = await apiClient.get('/info/semesters/upcoming');
+    return await res.data;
+  } catch (err: any) {
+    if (err.response?.data?.error?.message) err.message = err.response.data.error.message;
+    await showErrorNotification(`Fehler beim Abfragen der kommenden Semester [ERROR: ${err.message}]`);
     return [];
   }
 };

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
@@ -6,7 +6,7 @@
         <option value="">All</option>
         <option v-for="(semester, index) in availableSemesters"
                 v-bind:key="index"
-                v-bind:semester="semester">
+        >
           {{ semester }}
         </option>
       </select>
@@ -20,6 +20,7 @@ import { defineComponent } from 'vue';
 import Map from '@/components/Map.vue';
 import http from '@/utils/http-common';
 import { MapLocation } from '@/store/types/MapLocation';
+import { loadAvailableSemesters } from '@/utils/gateways';
 
 export default defineComponent({
   name: 'Home',
@@ -50,20 +51,9 @@ export default defineComponent({
         this.loadingState = false;
       }
     },
-    async getAvailableSemesters() {
-      try {
-        const res = await http.get('/info/semesters/upcoming');
-        this.availableSemesters = await res.data;
-      } catch (err: any) {
-        await this.$store.dispatch('addNotification', {
-          text: `Fehler beim Abfragen der verfügbaren semester [ERROR: ${err.message}]`,
-          type: 'danger',
-        });
-      }
-    },
   },
   async created() {
-    await this.getAvailableSemesters();
+    this.availableSemesters = await loadAvailableSemesters();
     await this.searchInternshipBySemester();
   },
 });