reworked design of profile and team site

frontend/src/pages/Profile.vue

@@ -20,94 +20,27 @@
     <div class="col flex column">
       <q-tab-panels v-model="tab" animated swipeable class="col">
 
-        <q-tab-panel name="profile" class=" fit">
+        <q-tab-panel name="profile" class="fit q-pa-none">
-          <p class="text-h5"> Persönliche Daten </p>
+          <div class="bg-primary q-pa-md">
-          <q-table
+            <p class="text-h3 text-white"> {{userName}} </p>
-            :data="data"
+            <p class="text-white"> {{email}} </p>
-            :columns="columns"
+            <p class="text-white"> Mein Rang: {{userRanking}} </p>
-            row-key="name"
+            <p class="text-white"> Mein Team: {{teamName}} </p>
-            hide-header
-            hide-bottom
-            table-class="my-custom"
-          />
-        </q-tab-panel>
-        <q-tab-panel name="teams">
-          <div class="q-pa-md" align="center">
-            <q-btn-dropdown color="primary" :label="dropDownSelectedItem" size="20px">
-              <q-list>
-                <q-item :clickable="boolAlreadyInTeam" v-close-popup @click="dropDownSelectItem('team')"
-                        :disabled="!boolAlreadyInTeam">
-                  <q-item-section>
-                    <q-item-label v-html="teamName"></q-item-label>
-                  </q-item-section>
-                </q-item>
-
-                <q-item clickable v-close-popup @click="dropDownSelectItem('Offene Teameinladungen')">
-                  <q-item-section avatar>
-                    <q-avatar icon="group_add" color="primary" text-color="white"/>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label>Offene Teameinladungen</q-item-label>
-                  </q-item-section>
-                </q-item>
-
-                <q-item :clickable="!boolAlreadyInTeam" 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>
-                  <q-item-section>
-                    <q-item-label v-show="!boolAlreadyInTeam">Neues Team erstellen</q-item-label>
-                    <q-item-label v-show="boolAlreadyInTeam">Neues Team erstellen<br/>(Team verlassen um Option zu
-                      nutzen)
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
           </div>
-          <p class="text-h5"> Teamstatus </p>
+          <div class="q-pa-md">
-          <p>{{currentTeamStatus}}</p>
+            <q-input v-show="!boolAlreadyInTeam" lazy-rules outlined filled stack-label v-model="newTeamName"
-          <q-input lazy-rules outlined filled stack-label v-model="teamStatus"
+                     type="text"
-                   type="text" label="Neuer Teamstatus"
+                     label="Teamname eingeben"
-                   :rules="[val=>val.length<=160||'Status zu lang!']"/>
+                     :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
-          <div align="center">
+            <q-btn
-            <q-btn label="Teamstatus aktualisieren"
+              v-show="!boolAlreadyInTeam"
-                   :disabled="!teamStatusChecked"
+              :disabled="!newTeamNameValidationSuccesful"
-                   @click="setTeamStatus()"
+              label="Team anlegen"
               color="primary"
-                   type="submit"/>
+              class="full-width"
-          </div>
+              @click="createTeam()"
-          <br/>
+              unelevated
-          <p class="text-h5"> Teammitglieder </p>
-          <q-table
-            :data="teamData"
-            :columns="teamColumns"
-            row-key="name"
-            table-class="my-custom"
-            hide-bottom
-            :pagination.sync="pagination"
             />
-          <br/>
-          <p class="text-h5"> Einladungen </p>
-          <q-input lazy-rules outlined filled stack-label v-model="inviteMail"
-                   type="text" label="Email des Nutzers"
-                   :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
-          <div align="center">
-            <q-btn label="Einladung versenden"
-                   @click="sendTeamInvite()"
-                   :disabled="!teamInviteChecked"
-                   color="primary"
-                   type="submit"/>
-          </div>
-          <br/>
-          <div align="center">
-            <q-btn label="Team verlassen"
-                   :disabled="!leaveConfirmed"
-                   @click="leaveTeam()"
-                   color="negative"
-                   type="submit"/>
-          </div>
             <q-list>
               <q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id">
                 <q-expansion-item
@@ -119,7 +52,8 @@
                   :caption="teamInvite.team.teamStatus"
                 >
                   <q-item class="q-pr-sm reverse q-gutter-x-sm">
-                  <q-btn @click="joinTeam(teamInvite)" unelevated color="positive" stack icon="arrow_forward"
+                    <q-btn :disabled="boolAlreadyInTeam" @click="joinTeam(teamInvite)" unelevated color="positive" stack
+                           icon="arrow_forward"
                            label="Annehmen" size="sm"/>
                     <q-btn @click="deleteTeamInvite(teamInvite)" unelevated color="negative" stack icon="delete"
                            label="Ablehnen" size="sm"/>
@@ -127,17 +61,79 @@
                 </q-expansion-item>
               </q-card>
             </q-list>
-          <q-input lazy-rules outlined filled stack-label v-model="newTeamName" type="text"
+            <div align="center">
-                   label="Teamname eingeben"
+              <q-btn label="Team verlassen"
-                   :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
+                     @click="confirmLeave()"
-          <q-btn
+                     color="negative"
-            :disabled="!newTeamNameValidationSuccesful"
+                     type="submit"/>
-            label="Team anlegen"
+            </div>
-            color="primary"
+          </div>
-            class="full-width"
+        </q-tab-panel>
-            @click="createTeam()"
+        <q-tab-panel name="teams" class="q-pa-none">
-            unelevated
+          <div class="bg-primary q-pa-md">
+            <p class="text-h3 text-white"> {{teamName}} </p>
+            <p class="text-white"> Unser Rang: {{teamRanking}} </p>
+            <p v-show="!boolStatus" class="text-white">
+              {{currentTeamStatus}}
+              <q-btn icon="create"
+                     class="on-right"
+                     @click="updateStatus()"
+                     color="amber"/>
+            </p>
+            <q-input v-show="boolStatus" lazy-rules outlined filled stack-label v-model="teamStatus"
+                     type="text" label="Neuer Teamstatus" bg-color="white"
+                     :rules="[val=>val.length<=160||'Status zu lang!']"/>
+            <div v-show="boolStatus" align="center">
+              <q-btn icon="done"
+                     class="on-left"
+                     :disabled="!teamStatusChecked"
+                     @click="setTeamStatus()"
+                     color="positive"
+                     type="submit"/>
+              <q-btn icon="clear"
+                     class="on-right"
+                     @click="updateStatus()"
+                     color="negative"
+                     type="submit"/>
+            </div>
+          </div>
+          <div class="bg-white q-pa-md">
+            <p class="text-h5"> Teammitglieder </p>
+            <q-table
+              name="teamDataTable"
+              :data="teamData"
+              :columns="teamColumns"
+              row-key="name"
+              table-class="my-custom"
+              hide-bottom
+              :pagination.sync="pagination"
             />
+            <br/>
+            <div align="center">
+              <q-btn label="Nutzer einladen"
+                     @click="activateInvite()"
+                     color="primary"
+                     type="submit"/>
+            </div>
+            <br/>
+            <q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail"
+                     type="text" label="Email des Nutzers"
+                     :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
+            <q-btn v-show="inviteActivated"
+                   icon="arrow_right_alt"
+                   @click="sendTeamInvite()"
+                   :disabled="!teamInviteChecked"
+                   color="positive"
+                   type="submit"/>
+            <br/>
+            <div align="center">
+              <q-btn label="Team verlassen"
+                     @click="confirmLeave()"
+                     color="negative"
+                     type="submit"/>
+            </div>
+            <br/>
+          </div>
         </q-tab-panel>
 
       </q-tab-panels>
@@ -175,55 +171,17 @@
         teamName: null,
         boolAlreadyInTeam: false,
         teamRanking: null,
-        dropDownSelectedItem: null,
-        boolMyTeam: true,
-        boolInvites: false,
-        boolCreateTeam: false,
         newTeamName: "",
         leaveTeamCheck: "",
         teamMembers: [],
         teamInvites: [],
-        columns: [
+        inviteActivated: false,
-          {
+        boolStatus: false,
-            name: 'desc',
+        boolMemberTableUpdating: false,
-            required: true,
-            align: 'left',
-            field: row => row.name,
-            format: val => `${val}`,
-          },
-          {
-            name: 'userData',
-            required: true,
-            align: 'left',
-            field: 'userData',
-          }
-        ],
-        data: [
-          {
-            name: 'Benutzername',
-            userData: this.userName,
-          },
-          {
-            name: 'E-Mail',
-            userData: this.email,
-          },
-          {
-            name: 'Rang',
-            userData: this.userRanking,
-          },
-          {
-            name: 'Team',
-            userData: this.teamName,
-          },
-          {
-            name: 'Team-Rang',
-            userData: this.teamRanking,
-          },
-        ],
         teamColumns: [
           {
             name: 'desc',
-            label: 'Benutzername',
+            label: 'Name',
             required: true,
             align: 'left',
             field: row => row.name,
@@ -244,7 +202,6 @@
           descending: false,
           page: 1,
           rowsPerPage: 10
-          // rowsNumber: xx if getting data from a server
         },
       }
     },
@@ -283,14 +240,40 @@
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
       this.userName = JSON.parse(localStorage.getItem('userToken')).name;
-      this.data[0].userData = this.userName;
       this.email = JSON.parse(localStorage.getItem('userMail'));
-      this.data[1].userData = this.email;
       this.getPersonalRanking();
       this.getTeamData();
       this.fetchTeamInvites();
     },
     methods: {
+      confirmLeave() {
+        this.$q.dialog({
+          title: 'Verlassen...',
+          message: 'Willst du dein aktuelles Team wirklich verlassen?',
+          persistent: true,
+          cancel: true,
+        }).onOk(() => {
+          console.log('>>>> OK');
+          this.leaveTeam();
+        }).onCancel(() => {
+          console.log('>>>> Cancel')
+        }).onDismiss(() => {
+        })
+      },
+      activateInvite() {
+        if (this.inviteActivated) {
+          this.inviteActivated = false;
+        } else {
+          this.inviteActivated = true;
+        }
+      },
+      updateStatus() {
+        if (this.boolStatus) {
+          this.boolStatus = false;
+        } else {
+          this.boolStatus = true;
+        }
+      },
       validateEmail(email) {
         let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return re.test(String(email).toLowerCase());
@@ -300,7 +283,6 @@
         this.$axios.get('/api/getRankingPlace', {params: {email}})
           .then((response) => {
             this.userRanking = response.data;
-            this.data[2].userData = this.userRanking;
           }).catch((error) => {
           this.handleError(error);
         })
@@ -324,35 +306,12 @@
               this.boolAlreadyInTeam = true;
               this.teamName = response.data.name;
               this.currentTeamStatus = response.data.teamStatus;
-              //this.teamRanking = response.data.teamRanking;
               this.fetchTeamMembers();
             }
-            this.data[3].userData = this.teamName;
-            this.dropDownSelectedItem = this.teamName;
-            this.data[4].userData = this.teamRanking;
             console.log("getTeam: " + response);
           }).catch((error) => {
           this.handleError(error);
-        })
+        });
-      },
-
-      dropDownSelectItem(item) {
-        if (item === 'team') {
-          this.dropDownSelectedItem = this.teamName;
-          this.boolMyTeam = true;
-          this.boolInvites = false;
-          this.boolCreateTeam = false;
-        } else if (item === 'Offene Teameinladungen') {
-          this.dropDownSelectedItem = item;
-          this.boolMyTeam = false;
-          this.boolInvites = true;
-          this.boolCreateTeam = false;
-        } else {
-          this.dropDownSelectedItem = item;
-          this.boolMyTeam = false;
-          this.boolInvites = false;
-          this.boolCreateTeam = true;
-        }
       },
       createTeam() {
         let params = {};
@@ -395,6 +354,7 @@
         })
       },
       fetchTeamMembers() {
+        this.teamData = [];
         let name = this.teamName;
         this.$axios.get('/api/getTeamMembers', {params: {name}})
           .then((response) => {
@@ -510,6 +470,7 @@
           }).catch((error) => {
           this.handleError(error);
         })
+        this.updateStatus();
       },
       handleError(error) {
         // Error