oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

feat: Re-enable profile page and allow editing name
Some checks failed
Build BAB Application Deployment Artifact / build (push) Failing after 4m48s
Details

Browse Source
This commit is contained in:
Patrick Toal
2024-06-15 10:28:38 -04:00
parent d063b0cf0d
commit 6ec4a1e025
3 changed files with 76 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/ProfilePage.vue
View File

@@ -1,15 +1,45 @@
<template>
<toolbar-component pageTitle="Member Profile" />
<q-page padding>
<q-list bordered>
<q-page
padding
class="row">
<q-list class="col-sm-4 col-12">
<q-separator />
<q-item>
<q-item-section avatar>
<q-avatar icon="person" />
</q-item-section>
<q-item-section>
{{ authStore.currentUser?.name }}
<q-item-label caption>Name</q-item-label>
<q-input
filled
v-model="newName"
@keydown.enter.prevent="editName"
v-if="newName !== undefined" />
<div v-else>
{{ authStore.currentUser?.name }}
</div>
</q-item-section>
<q-item-section avatar>
<q-btn
square
@click="editName"
:icon="newName !== undefined ? 'check' : 'edit'" />
<q-btn
v-if="newName !== undefined"
square
color="negative"
@click="newName = undefined"
icon="cancel" />
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-avatar icon="email" />
</q-item-section>
<q-item-section>
<q-item-label caption>E-mail</q-item-label>
{{ authStore.currentUser?.email }}
</q-item-section>
</q-item>
<q-separator />
@@ -17,15 +47,27 @@
<q-item-section>
<q-item-label overline>Certifications</q-item-label>
<div>
<q-chip square icon="verified" color="green" text-color="white"
>J/27</q-chip
>
<q-chip square icon="verified" color="blue" text-color="white"
>Capri25</q-chip
>
<q-chip square icon="verified" color="grey-9" text-color="white"
>Night</q-chip
>
<q-chip
square
icon="verified"
color="green"
text-color="white">
J/27
</q-chip>
<q-chip
square
icon="verified"
color="blue"
text-color="white">
Capri25
</q-chip>
<q-chip
square
icon="verified"
color="grey-9"
text-color="white">
Night
</q-chip>
</div>
</q-item-section>
</q-item>
@@ -36,6 +78,21 @@
<script setup lang="ts">
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import { useAuthStore } from 'src/stores/auth';
import { ref } from 'vue';
const authStore = useAuthStore();
const newName = ref();
const editName = async () => {
if (newName.value) {
try {
await authStore.updateName(newName.value);
newName.value = undefined;
} catch (e) {
console.log(e);
}
} else {
newName.value = authStore.currentUser?.name || '';
}
};
</script>