some work on api calls of profile and team

frontend/src/pages/MyCaches.vue

@@ -106,11 +106,6 @@
       return {
         tab: 'startedCaches',
         startedCaches: [],
-        inviteMail: "",
-        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
-        teamStatus: "",
-        userName: null,
-        email: null,
       }
     },
     mounted: function () {
@@ -194,73 +189,6 @@
             });
         }
       },
-      getPersonalRanking() {
-        const name = JSON.parse(localStorage.getItem('userToken')).name;
-        console.log(JSON.parse(localStorage.getItem('userToken')).name);
-        this.$axios.get('/api/hello', {params: {name}})
-          .then((response) => {
-            this.userRanking = response.data;
-            console.log(response.data);
-          }).catch((error) => {
-          // Error
-          let msg;
-          let title;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            title = "Problem with response!";
-            msg = error.response;
-          } else if (error.request) {
-            // The request was made but no response was received
-            title = "Problem with request!";
-            msg = "Error occured due to wrong server request!"
-            console.log(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            title = "Error";
-            msg = error.message;
-            console.log('Error', error.message);
-          }
-          console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-        })
-      },
-      getTeamData() {
-        const userName = {name: JSON.parse(localStorage.getItem('userToken')).name};
-        this.$axios.get('/api/getTeam', {params: userName})
-          .then(response => {
-            console.log("getTeam: " + response);
-          }).catch((error) => {
-          // Error
-          let msg;
-          let title;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            title = "Problem with response!";
-            msg = error.response;
-          } else if (error.request) {
-            // The request was made but no response was received
-            title = "Problem with request!";
-            msg = "Error occured due to wrong server request!"
-            console.log(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            title = "Error";
-            msg = error.message;
-            console.log('Error', error.message);
-          }
-          console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-        })
-
-      },
-
-      dropDownSelectItem(item) {
-        if (item === 'team') {
-          this.dropDownSelectedItem = this.teamName;
-        } else {
-          this.dropDownSelectedItem = item;
-        }
-      },
     }
   }
 </script>

frontend/src/pages/Profile.vue

@@ -50,7 +50,8 @@
                   </q-item-section>
                 </q-item>
 
-                <q-item clickable v-close-popup @click="dropDownSelectItem('Neues Team erstellen')">
+                <q-item clickable v-close-popup :disabled="boolAlreadyInTeam"
+                        @click="dropDownSelectItem('Neues Team erstellen')">
                   <q-item-section avatar>
                     <q-avatar icon="add" color="primary" text-color="white"/>
                   </q-item-section>
@@ -78,6 +79,8 @@
                      :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
             <div align="center">
               <q-btn label="Einladung versenden"
+                     @click="sendTeamInvite()"
+                     :disabled="!teamInviteChecked"
                      color="primary"
                      type="submit"/>
             </div>
@@ -89,17 +92,45 @@
                      :rules="[val=>val.length<=160||'Status zu lang!']"/>
             <div align="center">
               <q-btn label="Teamstatus aktualisieren"
+                     :disabled="!teamStatusChecked"
+                     @click="setTeamStatus()"
                      color="primary"
                      type="submit"/>
             </div>
           </div>
           <div v-show="boolInvites">
-
+            <q-list>
+              <q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id">
+                <q-expansion-item
+                  class=""
+                  expand-icon-toggle
+                  expand-separator
+                  icon="location_on"
+                  :label="teamInvite.teamName"
+                  caption="Tritt diesem Team bei"
+                >
+                  <q-item class="q-pr-sm reverse q-gutter-x-sm">
+                    <q-btn @click="joinTeam(teamInvite.id)" unelevated color="positive" stack icon="arrow_forward"
+                           label="Anfrage annehmen" size="sm"/>
+                    <q-btn @click="deleteTeamInvite(teamInvite.id)" unelevated color="negative" stack icon="delete"
+                           label="Anfrage ablehnen" size="sm"/>
+                  </q-item>
+                </q-expansion-item>
+              </q-card>
+            </q-list>
           </div>
           <div v-show="boolCreateTeam">
             <q-input outlined filled stack-label v-model="newTeamName" type="text"
                      label="Teamname eingeben"
                      :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
+            <q-btn
+              :disabled="!newTeamNameValidationSuccesful"
+              label="Team anlegen"
+              color="primary"
+              class="full-width"
+              @click="createTeam()"
+              unelevated
+            />
           </div>
         </q-tab-panel>
 
@@ -130,18 +161,21 @@
       return {
         tab: 'profile',
         inviteMail: "",
-        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
+        currentTeamStatus: "",
         teamStatus: "",
         userName: null,
         email: null,
         userRanking: null,
         teamName: null,
+        boolAlreadyInTeam: false,
         teamRanking: null,
         dropDownSelectedItem: null,
         boolMyTeam: true,
         boolInvites: false,
         boolCreateTeam: false,
         newTeamName: "",
+        teamMembers: [],
+        teamInvites: [],
         columns: [
           {
             name: 'desc',
@@ -238,6 +272,24 @@
       hasAdminState() {
         return this.$store.getters['auth/GET_ADMINSTATE'];
       },
+      newTeamNameValidationSuccesful() {
+        if (this.newTeamName.length >= 5) {
+          return true;
+        }
+        return false;
+      },
+      teamInviteChecked() {
+        if (this.validateEmail(this.inviteMail)) {
+          return true;
+        }
+        return false;
+      },
+      teamStatusChecked() {
+        if (this.teamStatus.length <= 160) {
+          return true;
+        }
+        return false;
+      },
     },
     created: function () {
       this.$store.commit('auth/SET_AUTHENTICATED');
@@ -248,11 +300,13 @@
       this.data[1].userData = this.email;
       this.userRanking = 1234;
       this.data[2].userData = this.userRanking;
+      this.getTeamData();
       this.teamName = "BuGa19Community";
       this.data[3].userData = this.teamName;
       this.dropDownSelectedItem = this.teamName;
       this.teamRanking = 2019;
       this.data[4].userData = this.teamRanking;
+      this.currentTeamStatus = "Dienstag 15:00 Treffen zum Blumencache";
     },
     methods: {
       validateEmail(email) {
@@ -260,60 +314,27 @@
         return re.test(String(email).toLowerCase());
       },
       getPersonalRanking() {
-        const token = JSON.parse(localStorage.getItem('userToken')).token;
+        let token = JSON.parse(localStorage.getItem('userToken')).token;
         this.$axios.get('/api/getRankingPlace', {token})
           .then((response) => {
             this.userRanking = response.data;
             console.log(response.data);
           }).catch((error) => {
-          // Error
+          this.handleError(error);
-          let msg;
-          let title;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            title = "Problem with response!";
-            msg = error.response;
-          } else if (error.request) {
-            // The request was made but no response was received
-            title = "Problem with request!";
-            msg = "Error occured due to wrong server request!"
-            console.log(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            title = "Error";
-            msg = error.message;
-            console.log('Error', error.message);
-          }
-          console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
         })
       },
       getTeamData() {
-        const userName = {name: JSON.parse(localStorage.getItem('userToken')).token};
+        let token = JSON.parse(localStorage.getItem('userToken')).token;
-        this.$axios.get('/api/getTeam', {params: userName})
+        this.$axios.get('/api/getTeamOfUser', {token})
           .then(response => {
+            this.teamName = response.data;
+            if (this.teamName.length >= 3) {
+              this.boolAlreadyInTeam = true;
+            }
             console.log("getTeam: " + response);
+            this.currentTeamStatus = response.data.teamStatus;
           }).catch((error) => {
-          // Error
+          this.handleError(error);
-          let msg;
-          let title;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            title = "Problem with response!";
-            msg = error.response;
-          } else if (error.request) {
-            // The request was made but no response was received
-            title = "Problem with request!";
-            msg = "Error occured due to wrong server request!"
-            console.log(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            title = "Error";
-            msg = error.message;
-            console.log('Error', error.message);
-          }
-          console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
         })
 
       },
@@ -336,6 +357,144 @@
           this.boolCreateTeam = true;
         }
       },
+      createTeam() {
+        let params = {};
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        params.name = this.newTeamName;
+        this.$axios.post('/api/createTeam', {params})
+          .then(response => {
+            console.log("createTeam: " + response);
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Das Team " + this.newTeamName + " wurde erfolgreich erstellt!",
+              title: "Teamerstellung",
+              color: "blue"
+            });
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      fetchTeamMembers() {
+        let name = this.teamName;
+        this.$axios.get('/api/getTeamMembers', {name})
+          .then((response) => {
+            console.log(response.data);
+            this.teamMembers = response.data;
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      fetchTeamInvites() {
+        let token;
+        if (localStorage.getItem('userToken')) {
+          token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        this.$axios.get('/api/getMyTeamInvites', {token})
+          .then((response) => {
+            console.log(response.data);
+            this.teamInvites = response.data;
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      joinTeam(inviteId) {
+        let params;
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        params.teamID = inviteId;
+        this.$axios.put('/api/joinTeam', {params})
+          .then((response) => {
+            console.log(response.data);
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Du bist dem Team " + response.data.teamName + " erfolgreich beigetreten!",
+              title: "Teambeitrittsanfrage",
+              color: "blue"
+            });
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      deleteTeamInvite(inviteId) {
+        let params;
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        params.teamInviteID = inviteId;
+        this.$axios.delete('/api/deleteTeamInvite', {params})
+          .then((response) => {
+            console.log(response.data);
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Du hast die Anfrage von Team " + response.data.teamName + " gelöscht!",
+              title: "Teambeitrittsanfrage",
+              color: "blue"
+            });
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      sendTeamInvite() {
+        let params;
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        params.invitedUserEmail = this.inviteMail;
+        this.$axios.post('/api/sendTeamInvite', {params})
+          .then((response) => {
+            console.log(response.data);
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      setTeamStatus() {
+        let params;
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        params.teamStatus = this.teamStatus;
+        this.$axios.put('/api/setTeamStatus', {params})
+          .then((response) => {
+            console.log(response.data);
+            this.getTeamData();
+          }).catch((error) => {
+          this.handleError(error);
+        })
+      },
+      handleError(error) {
+        // Error
+        let msg;
+        let title;
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          title = "Problem with response!";
+          msg = error.response;
+        } else if (error.request) {
+          // The request was made but no response was received
+          title = "Problem with request!";
+          msg = "Error occured due to wrong server request!";
+          console.log(error.request);
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          title = "Error";
+          msg = error.message;
+          console.log('Error', error.message);
+        }
+        console.log(error.config);
+        this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+      }
     }
   }
 </script>