* Refactor API.js

* Add pseudo login to laboratory login * Refactor Registration of Patients * Refactor Registration of Institutions
ImisDevelopers · Mar 24, 2020 · 3f53dd8 · 3f53dd8
1 parent 120f9e2
commit 3f53dd8
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 252 deletions.
diff --git a/client/src/api/Api.js b/client/src/api/Api.js
@@ -1,3 +1,10 @@
+const METHOD = {
+  GET: "GET",
+  POST: "POST",
+  PUT: "PUT",
+  DELETE: "DELETE"
+};
+
 class Api {
   constructor() {
     if (
@@ -10,109 +17,88 @@ class Api {
     }
   }
 
-  getCall(url) {
-    return fetch(encodeURI(`${this.BASE_URL}/${url}`), {
-      method: "GET",
+  executeRequest(url, method, body) {
+    const options = {
+      method: method,
       headers: {
         "Content-Type": "application/json"
       }
-    }).then(response => {
-      return response.json();
-    });
-  }
+    };
 
-  postCall(url, body) {
-    return fetch(encodeURI(`${this.BASE_URL}/${url}`), {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(body)
-    }).then(response => {
-      return response.json();
-    });
-  }
-
-  putCall(url, body) {
-    return fetch(encodeURI(`${this.BASE_URL}/${url}`), {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(body)
-    }).then(response => {
-      return response.json();
-    });
-  }
+    if (body) {
+      options.body = JSON.stringify(body);
+    }
 
-  deleteCall(url) {
-    return fetch(encodeURI(`${this.BASE_URL}/${url}`), {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json"
+    return fetch(encodeURI(`${this.BASE_URL}/${url}`), options).then(
+      response => {
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error(response);
+          throw new Error(`An error occured: Status ${response.status}`);
+        }
       }
-    }).then(response => {
-      return response.json();
-    });
+    );
   }
 
   /*
    * ----------------------------------
    */
 
   postDoctorCreateAppointment({ doctorId, laboratoryId, patientId }) {
-    return this.postCall("/doctor/create_appointment", {
+    return this.executeRequest("/doctor/create_appointment", METHOD.POST, {
       doctorId,
       laboratoryId,
       patientId
     });
   }
 
   getTestReports(testId) {
-    return this.getCall(`/test_report/${testId}`);
+    return this.executeRequest(`/test_report/${testId}`, METHOD.GET);
   }
 
   // TODO: postTestReport, putTestReport | how to handle multipart/form-data in fetch ?!
 
   getTestReport(testId) {
-    return this.getCall(`/test_report/${testId}`);
+    return this.executeRequest(`/test_report/${testId}`, METHOD.GET);
   }
 
   deleteTestReport(testId) {
-    return this.deleteCall(`/test_report/${testId}`);
+    return this.executeRequest(`/test_report/${testId}`, METHOD.DELETE);
   }
 
   postInstitution(institution) {
-    return this.postCall("/institutions", institution);
+    return this.executeRequest("/institutions", METHOD.POST, institution);
   }
 
   postLabtest(labtest) {
-    return this.postCall("/labtest", labtest);
+    return this.executeRequest("/labtest", METHOD.POST, labtest);
   }
 
   putLabtest({ updatedTestStatus }) {
-    return this.postCall("/labtest", updatedTestStatus);
+    return this.executeRequest("/labtest", METHOD.PUT, updatedTestStatus);
   }
 
   getLabtestByPatient(patientId) {
-    return this.getCall(`/labtest/patient/${patientId}`);
+    return this.executeRequest(`/labtest/patient/${patientId}`, METHOD.GET);
   }
 
   getPatients() {
-    return this.getCall("/patients");
+    return this.executeRequest("/patients", METHOD.GET);
   }
 
   postPatient(patient) {
-    return this.postCall("/patients", patient);
+    return this.executeRequest("/patients", METHOD.POST, patient);
   }
 
   getPatient(id) {
-    return this.getCall(`/patients/${id}`);
+    return this.executeRequest(`/patients/${id}`, METHOD.GET);
   }
 
   getStats(lowerBoundsZip, upperBoundsZip) {
-    return this.getCall(
-      `/stats?lowerBoundsZip=${lowerBoundsZip}&upperBoundsZips=${upperBoundsZip}`
+    return this.executeRequest(
+      `/stats?lowerBoundsZip=${lowerBoundsZip}&upperBoundsZips=${upperBoundsZip}`,
+      METHOD.GET
     );
   }
 }

diff --git a/client/src/components/laboratory/Login.vue b/client/src/components/laboratory/Login.vue
@@ -1,11 +1,11 @@
 <template>
   <a-card style="width: 500px; margin: 2rem auto; min-height: 300px">
-    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :form="form">
       <p>{{ title }}</p>
       <a-form-item label="Kennung">
         <a-input
           v-decorator="[
-            'note',
+            'id',
             {
               rules: [
                 {
@@ -21,7 +21,7 @@
       <a-form-item label="Passwort">
         <a-input
           v-decorator="[
-            'note',
+            'password',
             {
               rules: [
                 {
@@ -32,6 +32,7 @@
             }
           ]"
           type="password"
+          placeholder="**********"
         />
       </a-form-item>
       <a-divider />
@@ -41,6 +42,10 @@
         </a-button>
       </a-form-item>
     </a-form>
+    <p class="test-acess">
+      Testzugang: Kennung <i><b>1234</b></i
+      >, Password <i><b>asdf</b></i>
+    </p>
   </a-card>
 </template>
 
@@ -52,17 +57,36 @@ export default {
   props: {
     title: String
   },
+  data() {
+    return {
+      form: this.$form.createForm(this)
+    };
+  },
   methods: {
     handleLogin(e) {
       e.preventDefault();
 
-      // TODO: Send login request
-      console.log("Handle login.");
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return;
+        }
 
-      this.$emit("on-login-success");
+        if (values.id === "1234" && values.password === "asdf") {
+          this.$emit("on-login-success");
+        } else {
+          this.$notification["error"]({
+            message: "Login Fehler",
+            description: "Kennung und / oder Password nicht korrekt."
+          });
+        }
+      });
     }
   }
 };
 </script>
 
-<style></style>
+<style scoped>
+.test-acess {
+  color: red;
+}
+</style>
diff --git a/client/src/components/page/LinkSampleAndPatientPage.vue b/client/src/components/page/LinkSampleAndPatientPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-tabs defaultActiveKey="1" v-model="activeKey">
-      <a-tab-pane tab="1. Laboranmeldung" key="1">
+      <a-tab-pane tab="1. Laboranmeldung" key="1" :disabled="isLoggedIn">
         <Login
           @on-login-success="onLoginSuccess"
           :title="

diff --git a/client/src/components/page/LinkTestResultAndPatientPage.vue b/client/src/components/page/LinkTestResultAndPatientPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-tabs defaultActiveKey="1" v-model="activeKey">
-      <a-tab-pane tab="1. Laboranmeldung" key="1">
+      <a-tab-pane tab="1. Laboranmeldung" key="1" :disabled="isLoggedIn">
         <Login
           @on-login-success="onLoginSuccess"
           :title="