Patrick Toal
6ec4a1e025
Some checks failed
Build BAB Application Deployment Artifact / build (push) Failing after 4m48s
99 lines
2.5 KiB
Vue
99 lines
2.5 KiB
Vue
<template>
|
|
<toolbar-component pageTitle="Member Profile" />
|
|
<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>
|
|
<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 />
|
|
<q-item>
|
|
<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>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-page>
|
|
</template>
|
|
|
|
<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>
|