reworked design of profile and team site
This commit is contained in:
rchrist
parent
79ca7f53e9
commit
08c933976f
@ -20,124 +20,120 @@
|
||||
<div class="col flex column">
|
||||
<q-tab-panels v-model="tab" animated swipeable class="col">
|
||||
|
||||
<q-tab-panel name="profile" class=" fit">
|
||||
<p class="text-h5"> Persönliche Daten </p>
|
||||
<q-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
table-class="my-custom"
|
||||
/>
|
||||
<q-tab-panel name="profile" class="fit q-pa-none">
|
||||
<div class="bg-primary q-pa-md">
|
||||
<p class="text-h3 text-white"> {{userName}} </p>
|
||||
<p class="text-white"> {{email}} </p>
|
||||
<p class="text-white"> Mein Rang: {{userRanking}} </p>
|
||||
<p class="text-white"> Mein Team: {{teamName}} </p>
|
||||
</div>
|
||||
<div class="q-pa-md">
|
||||
<q-input v-show="!boolAlreadyInTeam" lazy-rules 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
|
||||
v-show="!boolAlreadyInTeam"
|
||||
:disabled="!newTeamNameValidationSuccesful"
|
||||
label="Team anlegen"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="createTeam()"
|
||||
unelevated
|
||||
/>
|
||||
<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="group"
|
||||
:label="teamInvite.team.name"
|
||||
:caption="teamInvite.team.teamStatus"
|
||||
>
|
||||
<q-item class="q-pr-sm reverse q-gutter-x-sm">
|
||||
<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"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
<div align="center">
|
||||
<q-btn label="Team verlassen"
|
||||
@click="confirmLeave()"
|
||||
color="negative"
|
||||
type="submit"/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<q-tab-panel name="teams" class="q-pa-none">
|
||||
<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>
|
||||
<p class="text-h5"> Teamstatus </p>
|
||||
<p>{{currentTeamStatus}}</p>
|
||||
<q-input lazy-rules outlined filled stack-label v-model="teamStatus"
|
||||
type="text" label="Neuer Teamstatus"
|
||||
: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>
|
||||
<br/>
|
||||
<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"
|
||||
<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="primary"
|
||||
color="positive"
|
||||
type="submit"/>
|
||||
<br/>
|
||||
<div align="center">
|
||||
<q-btn label="Team verlassen"
|
||||
@click="confirmLeave()"
|
||||
color="negative"
|
||||
type="submit"/>
|
||||
</div>
|
||||
<br/>
|
||||
</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
|
||||
class=""
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="group"
|
||||
:label="teamInvite.team.name"
|
||||
: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"
|
||||
label="Annehmen" size="sm"/>
|
||||
<q-btn @click="deleteTeamInvite(teamInvite)" unelevated color="negative" stack icon="delete"
|
||||
label="Ablehnen" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-list>
|
||||
<q-input lazy-rules 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
|
||||
/>
|
||||
</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: [
|
||||
{
|
||||
name: 'desc',
|
||||
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,
|
||||
},
|
||||
],
|
||||
inviteActivated: false,
|
||||
boolStatus: false,
|
||||
boolMemberTableUpdating: false,
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user