Skip to content

Commit

Permalink
up
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjamincanac
benjamincanac committed Feb 19, 2025
1 parent 429eea4 commit eeafa2c
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 206 deletions.
6 changes: 4 additions & 2 deletions app/pages/settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const links = [[{
</script>

<template>
<UDashboardPanel id="settings">
<UDashboardPanel id="settings" :ui="{ body: 'lg:py-12' }">
<template #header>
<UDashboardNavbar title="Settings">
<template #leading>
Expand All @@ -45,7 +45,9 @@ const links = [[{
</template>

<template #body>
<NuxtPage />
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
<NuxtPage />
</div>
</template>
</UDashboardPanel>
</template>
203 changes: 100 additions & 103 deletions app/pages/settings/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,114 +48,111 @@ function onFileClick() {
</script>

<template>
<div class="space-y-4">
<UPageCard>
<div class="flex justify-between items-center gap-4">
<UFormField label="Theme" description="Customize the look and feel of your dashboard." />
<UColorModeSelect />
</div>
<UForm
id="settings"
:schema="profileSchema"
:state="profile"
@submit="onSubmit"
>
<UPageCard
title="Profile"
description="These informations will be displayed publicly."
variant="naked"
orientation="horizontal"
class="mb-4"
>
<UButton
form="settings"
label="Save changes"
color="neutral"
type="submit"
class="w-fit lg:ms-auto"
/>
</UPageCard>
<UPageCard>
<div class="flex justify-between items-center gap-4">
<UFormField label="Profile" description="This information will be displayed publicly so be careful what you share." />
<UButton
form="settings"
label="Save changes"
color="neutral"
type="submit"

<UPageCard variant="subtle">
<UFormField
name="name"
label="Name"
description="Will appear on receipts, invoices, and other communication."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UInput
v-model="profile.name"
autocomplete="off"
/>
</div>
</UFormField>
<USeparator />
<UForm
id="settings"
:schema="profileSchema"
:state="profile"
class="space-y-4"
@submit="onSubmit"
<UFormField
name="email"
label="Email"
description="Used to sign in, for email receipts and product updates."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UFormField
name="name"
label="Name"
description="Will appear on receipts, invoices, and other communication."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UInput
v-model="profile.name"
autocomplete="off"
/>
</UFormField>
<USeparator />
<UFormField
name="email"
label="Email"
description="Used to sign in, for email receipts and product updates."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UInput
v-model="profile.email"
type="email"
autocomplete="off"
/>
</UFormField>
<USeparator />
<UFormField
name="username"
label="Username"
description="Your unique username for logging in and your profile URL."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UInput
v-model="profile.username"
type="username"
autocomplete="off"
<UInput
v-model="profile.email"
type="email"
autocomplete="off"
/>
</UFormField>
<USeparator />
<UFormField
name="username"
label="Username"
description="Your unique username for logging in and your profile URL."
required
class="flex max-sm:flex-col justify-between items-start gap-4"
>
<UInput
v-model="profile.username"
type="username"
autocomplete="off"
/>
</UFormField>
<USeparator />
<UFormField
name="avatar"
label="Avatar"
description="JPG, GIF or PNG. 1MB Max."
class="flex max-sm:flex-col justify-between sm:items-center gap-4"
>
<div class="flex flex-wrap items-center gap-3">
<UAvatar
:src="profile.avatar"
:alt="profile.name"
size="lg"
/>
</UFormField>
<USeparator />
<UFormField
name="avatar"
label="Avatar"
description="JPG, GIF or PNG. 1MB Max."
class="flex max-sm:flex-col justify-between sm:items-center gap-4"
>
<div class="flex flex-wrap items-center gap-3">
<UAvatar
:src="profile.avatar"
:alt="profile.name"
size="lg"
/>
<UButton
label="Choose"
color="neutral"
@click="onFileClick"
/>
<input
ref="fileRef"
type="file"
class="hidden"
accept=".jpg, .jpeg, .png, .gif"
@change="onFileChange"
>
</div>
</UFormField>
<USeparator />
<UFormField
name="bio"
label="Bio"
description="Brief description for your profile. URLs are hyperlinked."
class="flex max-sm:flex-col justify-between items-start gap-4"
:ui="{ container: 'w-full' }"
>
<UTextarea
v-model="profile.bio"
:rows="5"
autoresize
class="w-full"
<UButton
label="Choose"
color="neutral"
@click="onFileClick"
/>
</UFormField>
</UForm>
<input
ref="fileRef"
type="file"
class="hidden"
accept=".jpg, .jpeg, .png, .gif"
@change="onFileChange"
>
</div>
</UFormField>
<USeparator />
<UFormField
name="bio"
label="Bio"
description="Brief description for your profile. URLs are hyperlinked."
class="flex max-sm:flex-col justify-between items-start gap-4"
:ui="{ container: 'w-full' }"
>
<UTextarea
v-model="profile.bio"
:rows="5"
autoresize
class="w-full"
/>
</UFormField>
</UPageCard>
</div>
</UForm>
</template>
34 changes: 17 additions & 17 deletions app/pages/settings/members.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { Member } from '~/types'
const { data: members } = await useFetch<Member[]>('/api/members', { default: () => [] })
const q = ref('')
const isInviteModalOpen = ref(false)
const filteredMembers = computed(() => {
return members.value.filter((member) => {
Expand All @@ -14,21 +13,22 @@ const filteredMembers = computed(() => {
</script>

<template>
<div class="flex max-sm:flex-col items-start gap-4 justify-between">
<div class="sm:sticky sm:top-0 flex sm:flex-col max-sm:items-center gap-4 max-sm:w-full justify-between">
<div class="flex flex-col gap-1">
<span class="text-lg font-semibold">Manage access</span>
<span class="text-sm text-neutral-500">Invite new members by email address.</span>
</div>
<div>
<UButton
label="Invite people"
color="neutral"
@click="isInviteModalOpen = true"
/>
</div>
</div>
<UPageCard class="w-full" :ui="{ container: 'p-0 sm:p-0', header: 'p-4 mb-0' }">
<div>
<UPageCard
title="Members"
description="Invite new members by email address."
variant="naked"
orientation="horizontal"
class="mb-4"
>
<UButton
label="Invite people"
color="neutral"
class="w-fit lg:ms-auto"
/>
</UPageCard>

<UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', header: 'p-4 mb-0 border-b border-(--ui-border)' }">
<template #header>
<UInput
v-model="q"
Expand All @@ -38,7 +38,7 @@ const filteredMembers = computed(() => {
class="w-full"
/>
</template>
<!-- ~/components/settings/MembersList.vue -->

<SettingsMembersList :members="filteredMembers" />
</UPageCard>
</div>
Expand Down
53 changes: 23 additions & 30 deletions app/pages/settings/notifications.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,35 +44,28 @@ async function onChange() {
</script>

<template>
<div class="flex flex-col gap-4">
<div
v-for="(section, index) in sections"
:key="index"
>
<div class="flex flex-col mb-4">
<span class="text-lg font-semibold">
{{ section.title }}
</span>
<span class="text-sm text-(--ui-text-muted)">
{{ section.description }}
</span>
</div>
<UPageCard :ui="{ container: 'divide-y divide-(--ui-border)' }">
<UFormField
v-for="field in section.fields"
:key="field.name"
:name="field.name"
:label="field.label"
:description="field.description"
class="flex items-center justify-between pt-4 first:pt-0 not-last:pb-4 gap-2"
>
<USwitch
v-model="state[field.name]"
size="md"
@update:model-value="onChange"
/>
</UFormField>
</UPageCard>
</div>
<div v-for="(section, index) in sections" :key="index">
<UPageCard
:title="section.title"
:description="section.description"
variant="naked"
class="mb-4"
/>

<UPageCard variant="subtle" :ui="{ container: 'divide-y divide-(--ui-border)' }">
<UFormField
v-for="field in section.fields"
:key="field.name"
:name="field.name"
:label="field.label"
:description="field.description"
class="flex items-center justify-between not-last:pb-4 gap-2"
>
<USwitch
v-model="state[field.name]"
@update:model-value="onChange"
/>
</UFormField>
</UPageCard>
</div>
</template>
Loading

0 comments on commit eeafa2c

Please sign in to comment.