Skip to content

feat(profile): settings dialog and user profile component #692

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
at-wr merged 2 commits into from
Jan 20, 2025
Merged

feat(profile): settings dialog and user profile component #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c145488
feat(profile): settings dialog and user profile component
at-wr Jan 20, 2025
820ec22
feat(docs): add changeset
at-wr Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fast-spies-tease.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"enspire": minor
---

Settings dialog and user profile component
47 changes: 36 additions & 11 deletions app/pages/profile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<script setup lang="ts">
import type { AllClubs } from '@@/types/api/user/all_clubs'
import { Button } from '@/components/ui/button'
import { dark } from '@clerk/themes'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import type { MyRecords } from '@@/types/api/cas/record/my'
import { useUser } from 'vue-clerk'
import { usePreferredDark } from '@vueuse/core'
Expand All @@ -9,6 +12,9 @@ import {
Settings,
Clock,
} from 'lucide-vue-next'
import { UserProfile } from 'vue-clerk'

const isDark = usePreferredDark()

definePageMeta({
middleware: ['auth'],
Expand All @@ -29,6 +35,9 @@ const stats = ref({

const isLoading = ref(true)

// Add this with your other refs
const isSettingsOpen = ref(false)

// Fetch clubs data
const { data: clubs } = await useQuery<AllClubs>({
queryKey: ['/api/user/all_clubs'],
Expand Down Expand Up @@ -84,24 +93,40 @@ onMounted(() => {
<Card>
<CardHeader>
<CardTitle class="text-3xl">
<div class="flex items-center gap-4">
<Avatar class="h-16 w-16 rounded-lg">
<AvatarImage v-if="user" :src="user.imageUrl" :alt="user.firstName" />
<AvatarFallback class="rounded-lg">
{{ user?.firstName?.slice(0, 2) }}
</AvatarFallback>
</Avatar>
<div>
👋 Hi, {{ user?.firstName }}!
<div class="text-base font-normal text-muted-foreground">
{{ user?.primaryEmailAddress }}
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-4">
<Avatar class="h-16 w-16 rounded-lg">
<AvatarImage v-if="user" :src="user.imageUrl" :alt="user.firstName" />
<AvatarFallback class="rounded-lg">
{{ user?.firstName?.slice(0, 2) }}
</AvatarFallback>
</Avatar>
<div>
👋🏻 Hi, {{ user?.firstName }}!
<div class="text-base font-normal text-muted-foreground">
{{ user?.primaryEmailAddress }}
</div>
</div>
</div>
<Button variant="ghost" size="icon" @click="isSettingsOpen = true">
<Settings class="h-5 w-5" />
<span class="sr-only">Open settings</span>
</Button>
</div>
</CardTitle>
</CardHeader>
<!-- Rest of your existing card content -->
</Card>

<!-- Settings Dialog -->
<Dialog :open="isSettingsOpen" @update:open="isSettingsOpen = false">
<DialogContent class="sm:max-w-[880px] p-0">
<UserProfile
:appearance="{ baseTheme: isDark ? dark : undefined }"
/>
</DialogContent>
</Dialog>

<div class="grid gap-4 md:grid-cols-2">
<!-- Account Info Card -->
<Card>
Expand Down
Loading