Updates to profile
This commit is contained in:
parent
1b8dacf92a
commit
970b185151
16 changed files with 652 additions and 1585 deletions
|
|
@ -48,6 +48,7 @@
|
|||
v-model="formData.name"
|
||||
placeholder="Your name"
|
||||
disabled
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
<UInput
|
||||
v-model="formData.pronouns"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
|
|
@ -78,6 +80,7 @@
|
|||
<UInput
|
||||
v-model="formData.timeZone"
|
||||
placeholder="e.g., America/Toronto"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
|
|
@ -147,6 +150,7 @@
|
|||
<UInput
|
||||
v-model="formData.studio"
|
||||
placeholder="Studio name"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
|
|
@ -164,6 +168,7 @@
|
|||
<UInput
|
||||
v-model="formData.location"
|
||||
placeholder="Toronto, ON"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
|
|
@ -184,6 +189,7 @@
|
|||
placeholder="Share your background, interests, and experience..."
|
||||
:rows="4"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
|
|
@ -191,43 +197,6 @@
|
|||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<UFormField
|
||||
label="Skills"
|
||||
name="skills"
|
||||
description="Add your skills (press Enter or comma to add)"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<UInput
|
||||
v-model="currentSkillInput"
|
||||
placeholder="Type a skill and press Enter"
|
||||
@keydown.enter.prevent="addSkill"
|
||||
@keydown.comma.prevent="addSkill"
|
||||
/>
|
||||
<div
|
||||
v-if="formData.skills?.length"
|
||||
class="flex flex-wrap gap-2"
|
||||
>
|
||||
<span
|
||||
v-for="(skill, index) in formData.skills"
|
||||
:key="skill"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
@click="removeSkill(index)"
|
||||
>
|
||||
{{ skill }}
|
||||
<span class="opacity-50 group-hover:opacity-100"
|
||||
>×</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
v-model="formData.skillsPrivacy"
|
||||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -246,12 +215,55 @@
|
|||
name="offering"
|
||||
description="Skills, resources, or support you can offer the community"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="formData.offering"
|
||||
placeholder="e.g., Mentorship in game design, playtesting, technical advice..."
|
||||
:rows="3"
|
||||
autoresize
|
||||
/>
|
||||
<div class="space-y-3">
|
||||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-stone-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
<UInput
|
||||
v-model="currentOfferingTagInput"
|
||||
placeholder="Type a skill and press Enter (e.g., Unity, Playtesting)"
|
||||
@keydown.enter.prevent="addOfferingTag"
|
||||
@keydown.comma.prevent="addOfferingTag"
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
v-if="formData.offering.tags?.length"
|
||||
class="flex flex-wrap gap-2 mt-2"
|
||||
>
|
||||
<span
|
||||
v-for="(tag, index) in formData.offering.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
@click="removeOfferingTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
<span class="opacity-50 group-hover:opacity-100"
|
||||
>×</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-stone-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="formData.offering.text"
|
||||
placeholder="e.g., I have 10+ years in Unity and love helping new devs. Can also playtest narrative games."
|
||||
:rows="3"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
v-model="formData.offeringPrivacy"
|
||||
|
|
@ -265,12 +277,55 @@
|
|||
name="lookingFor"
|
||||
description="Support, collaboration, or resources you need"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="formData.lookingFor"
|
||||
placeholder="e.g., Co-founder for studio, help with publishing, feedback on project..."
|
||||
:rows="3"
|
||||
autoresize
|
||||
/>
|
||||
<div class="space-y-3">
|
||||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-stone-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
<UInput
|
||||
v-model="currentLookingForTagInput"
|
||||
placeholder="Type what you need and press Enter (e.g., Co-founder, Marketing)"
|
||||
@keydown.enter.prevent="addLookingForTag"
|
||||
@keydown.comma.prevent="addLookingForTag"
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
v-if="formData.lookingFor.tags?.length"
|
||||
class="flex flex-wrap gap-2 mt-2"
|
||||
>
|
||||
<span
|
||||
v-for="(tag, index) in formData.lookingFor.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30 flex items-center gap-2 group hover:bg-purple-500/30 transition-colors cursor-pointer"
|
||||
@click="removeLookingForTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
<span class="opacity-50 group-hover:opacity-100"
|
||||
>×</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-stone-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="formData.lookingFor.text"
|
||||
placeholder="e.g., Seeking a business-minded co-founder for a worker co-op studio. Also need help understanding the publishing landscape."
|
||||
:rows="3"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
<PrivacyToggle
|
||||
v-model="formData.lookingForPrivacy"
|
||||
|
|
@ -280,49 +335,176 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<!-- Peer Support -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
|
||||
>
|
||||
Social Links
|
||||
Peer Support
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="mb-6 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-stone-300 text-sm leading-relaxed">
|
||||
Offer guidance to fellow members through the
|
||||
<NuxtLink
|
||||
to="/peer-support"
|
||||
class="text-purple-400 hover:text-purple-300 underline"
|
||||
>
|
||||
Peer Support directory
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<UFormField label="Mastodon" name="mastodon">
|
||||
<UInput
|
||||
v-model="formData.socialLinks.mastodon"
|
||||
placeholder="@username@instance.social"
|
||||
<!-- Enable Toggle -->
|
||||
<div class="flex items-start gap-4">
|
||||
<USwitch v-model="formData.peerSupportEnabled" />
|
||||
<div>
|
||||
<p class="font-medium text-stone-200">
|
||||
Offer Peer Support
|
||||
</p>
|
||||
<p class="text-sm text-stone-400 mt-1">
|
||||
Make yourself available to support other members
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conditional Fields -->
|
||||
<div
|
||||
v-if="formData.peerSupportEnabled"
|
||||
class="space-y-6 pl-4 border-l-2 border-purple-500/30"
|
||||
>
|
||||
<!-- Skill-Based Topics -->
|
||||
<UFormField
|
||||
label="Skill-Based Topics"
|
||||
name="peerSupportSkillTopics"
|
||||
description="Skills from your offerings where you can provide guidance"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<UInput
|
||||
v-model="currentPeerSkillTopicInput"
|
||||
placeholder="Type a skill and press Enter"
|
||||
@keydown.enter.prevent="addPeerSkillTopic"
|
||||
@keydown.comma.prevent="addPeerSkillTopic"
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
v-if="formData.peerSupportSkillTopics?.length"
|
||||
class="flex flex-wrap gap-2"
|
||||
>
|
||||
<span
|
||||
v-for="(
|
||||
topic, index
|
||||
) in formData.peerSupportSkillTopics"
|
||||
:key="topic"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
@click="removePeerSkillTopic(index)"
|
||||
>
|
||||
{{ topic }}
|
||||
<span class="opacity-50 group-hover:opacity-100"
|
||||
>×</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-stone-500 mt-2">
|
||||
Suggested from your offerings:
|
||||
<span
|
||||
v-for="tag in formData.offering.tags?.filter(
|
||||
(t) =>
|
||||
!formData.peerSupportSkillTopics?.includes(t),
|
||||
)"
|
||||
:key="tag"
|
||||
class="inline-block ml-2 text-blue-400 hover:text-blue-300 cursor-pointer underline"
|
||||
@click="addSuggestedSkillTopic(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<!-- Conversational Support Topics -->
|
||||
<UFormField
|
||||
label="Conversational Support Topics"
|
||||
name="peerSupportSupportTopics"
|
||||
description="Select emotional and conversational support areas"
|
||||
>
|
||||
<div class="space-y-2 mt-2">
|
||||
<label
|
||||
v-for="topic in availableSupportTopics"
|
||||
:key="topic"
|
||||
class="flex items-center gap-3 p-3 rounded-lg border border-stone-700 hover:border-purple-500/50 transition-colors cursor-pointer"
|
||||
:class="
|
||||
formData.peerSupportSupportTopics.includes(topic)
|
||||
? 'bg-purple-500/10 border-purple-500/50'
|
||||
: 'bg-stone-900/50'
|
||||
"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="topic"
|
||||
v-model="formData.peerSupportSupportTopics"
|
||||
class="rounded border-stone-600 text-purple-500 focus:ring-purple-500 focus:ring-offset-0 bg-stone-800"
|
||||
/>
|
||||
<span class="text-stone-200">{{ topic }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<!-- Availability -->
|
||||
<UFormField
|
||||
label="Your Availability"
|
||||
name="peerSupportAvailability"
|
||||
description="When are you generally available for peer support sessions?"
|
||||
required
|
||||
>
|
||||
<UTextarea
|
||||
v-model="formData.peerSupportAvailability"
|
||||
placeholder="e.g., Weekday evenings (6-9pm EST), weekends flexible, or by appointment"
|
||||
rows="3"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="LinkedIn" name="linkedin">
|
||||
<UInput
|
||||
v-model="formData.socialLinks.linkedin"
|
||||
placeholder="https://linkedin.com/in/username"
|
||||
<!-- Personal Message -->
|
||||
<UFormField
|
||||
label="Personal Message to Potential Chatters"
|
||||
name="peerSupportMessage"
|
||||
description="A friendly message to encourage people to reach out"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="formData.peerSupportMessage"
|
||||
placeholder="e.g., I love talking about this stuff! No question is too basic."
|
||||
rows="2"
|
||||
maxlength="200"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
<template #hint>
|
||||
<span class="text-xs text-stone-500">
|
||||
{{ formData.peerSupportMessage?.length || 0 }}/200
|
||||
characters
|
||||
</span>
|
||||
</template>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Website" name="website">
|
||||
<!-- Slack Username -->
|
||||
<UFormField
|
||||
label="Slack Username"
|
||||
name="peerSupportSlackUsername"
|
||||
description="Your Slack username so members can message you"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="formData.socialLinks.website"
|
||||
placeholder="https://yourwebsite.com"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Other" name="other">
|
||||
<UInput
|
||||
v-model="formData.socialLinks.other"
|
||||
placeholder="Any other relevant link"
|
||||
v-model="formData.peerSupportSlackUsername"
|
||||
placeholder="@yourslackname"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<PrivacyToggle
|
||||
v-model="formData.socialLinksPrivacy"
|
||||
label="Privacy for all social links"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -389,181 +571,6 @@
|
|||
</UForm>
|
||||
</template>
|
||||
|
||||
<template #updates>
|
||||
<div class="mt-8">
|
||||
<!-- Loading State -->
|
||||
<div
|
||||
v-if="loadingUpdates && !myUpdates.length"
|
||||
class="flex justify-center items-center py-20"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-stone-400">Loading your updates...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Updates List -->
|
||||
<div v-else-if="myUpdates.length" class="space-y-6">
|
||||
<UpdateCard
|
||||
v-for="update in myUpdates"
|
||||
:key="update._id"
|
||||
:update="update"
|
||||
:show-preview="true"
|
||||
@edit="handleEditUpdate"
|
||||
@delete="handleDeleteUpdate"
|
||||
/>
|
||||
|
||||
<!-- Load More -->
|
||||
<div v-if="hasMoreUpdates" class="flex justify-center pt-4">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:loading="loadingMoreUpdates"
|
||||
@click="loadMoreUpdates"
|
||||
>
|
||||
Load More
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="text-center py-20">
|
||||
<div class="w-16 h-16 mx-auto mb-4 opacity-50">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
class="text-stone-600"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-stone-300 mb-2">
|
||||
No updates yet
|
||||
</h3>
|
||||
<p class="text-stone-400 mb-6">
|
||||
Share your first update with the community!
|
||||
</p>
|
||||
<UButton to="/updates/new"> Post Your First Update </UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #peer-support>
|
||||
<div class="space-y-8 mt-8 max-w-4xl">
|
||||
<div
|
||||
class="backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-6"
|
||||
>
|
||||
<h3 class="text-lg font-semibold text-purple-200 mb-2">
|
||||
About Peer Support
|
||||
</h3>
|
||||
<p class="text-stone-300 text-sm leading-relaxed mb-4">
|
||||
Peer support allows you to offer guidance to fellow members
|
||||
or find peers who can help you. Enable peer support to
|
||||
appear in the directory, or browse available supporters.
|
||||
</p>
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<UButton to="/member/settings/peer-support">
|
||||
Configure Peer Support
|
||||
</UButton>
|
||||
<UButton to="/peer-support" variant="outline">
|
||||
Browse Peer Supporters
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Status -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
|
||||
>
|
||||
Your Peer Support Status
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-sm text-stone-400">Status</p>
|
||||
<p class="text-lg font-medium">
|
||||
<span
|
||||
v-if="memberData.peerSupport?.enabled"
|
||||
class="text-green-400"
|
||||
>
|
||||
✓ Active - You're offering peer support
|
||||
</span>
|
||||
<span v-else class="text-stone-400">
|
||||
Not currently offering peer support
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="memberData.peerSupport?.enabled">
|
||||
<div
|
||||
v-if="memberData.peerSupport.topics?.length"
|
||||
class="mb-4"
|
||||
>
|
||||
<p class="text-sm text-stone-400 mb-2">
|
||||
Topics you help with:
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="topic in memberData.peerSupport.topics"
|
||||
:key="topic"
|
||||
class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30"
|
||||
>
|
||||
{{ topic }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="memberData.peerSupport.availability">
|
||||
<p class="text-sm text-stone-400 mb-1">
|
||||
Your availability:
|
||||
</p>
|
||||
<p class="text-stone-200">
|
||||
{{ memberData.peerSupport.availability }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="memberData.peerSupport.personalMessage"
|
||||
class="mt-4"
|
||||
>
|
||||
<p class="text-sm text-stone-400 mb-1">
|
||||
Your personal message:
|
||||
</p>
|
||||
<p class="text-stone-200 italic">
|
||||
"{{ memberData.peerSupport.personalMessage }}"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="memberData.peerSupport.slackUsername"
|
||||
class="mt-4"
|
||||
>
|
||||
<p class="text-sm text-stone-400 mb-1">
|
||||
Slack username:
|
||||
</p>
|
||||
<p class="text-stone-200">
|
||||
{{ memberData.peerSupport.slackUsername }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #account>
|
||||
<div class="space-y-8 mt-8">
|
||||
<!-- Current Membership -->
|
||||
|
|
@ -750,32 +757,6 @@
|
|||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Delete Update Modal -->
|
||||
<UModal
|
||||
v-model:open="showDeleteUpdateModal"
|
||||
title="Delete Update?"
|
||||
description="Are you sure you want to delete this update? This action cannot be undone."
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="showDeleteUpdateModal = false"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
<UButton
|
||||
color="red"
|
||||
:loading="deletingUpdate"
|
||||
@click="confirmDeleteUpdate"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
|
@ -816,16 +797,6 @@ const tabItems = [
|
|||
slot: "profile",
|
||||
value: "profile",
|
||||
},
|
||||
{
|
||||
label: "My Updates",
|
||||
slot: "updates",
|
||||
value: "updates",
|
||||
},
|
||||
{
|
||||
label: "Peer Support",
|
||||
slot: "peer-support",
|
||||
value: "peer-support",
|
||||
},
|
||||
{
|
||||
label: "Account",
|
||||
slot: "account",
|
||||
|
|
@ -875,45 +846,54 @@ const formData = reactive({
|
|||
avatar: "",
|
||||
studio: "",
|
||||
bio: "",
|
||||
skills: [],
|
||||
location: "",
|
||||
offering: "",
|
||||
lookingFor: "",
|
||||
socialLinks: {
|
||||
mastodon: "",
|
||||
linkedin: "",
|
||||
website: "",
|
||||
other: "",
|
||||
offering: {
|
||||
text: "",
|
||||
tags: [],
|
||||
},
|
||||
lookingFor: {
|
||||
text: "",
|
||||
tags: [],
|
||||
},
|
||||
showInDirectory: true,
|
||||
// Peer support fields
|
||||
peerSupportEnabled: false,
|
||||
peerSupportSkillTopics: [],
|
||||
peerSupportSupportTopics: [],
|
||||
peerSupportAvailability: "",
|
||||
peerSupportMessage: "",
|
||||
peerSupportSlackUsername: "",
|
||||
// Privacy settings
|
||||
pronounsPrivacy: "members",
|
||||
timeZonePrivacy: "members",
|
||||
avatarPrivacy: "public",
|
||||
avatarPrivacy: "members",
|
||||
studioPrivacy: "members",
|
||||
bioPrivacy: "members",
|
||||
skillsPrivacy: "members",
|
||||
locationPrivacy: "members",
|
||||
offeringPrivacy: "members",
|
||||
lookingForPrivacy: "members",
|
||||
socialLinksPrivacy: "members",
|
||||
});
|
||||
|
||||
const currentSkillInput = ref("");
|
||||
// Tag input refs
|
||||
const currentOfferingTagInput = ref("");
|
||||
const currentLookingForTagInput = ref("");
|
||||
const currentPeerSkillTopicInput = ref("");
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const saveSuccess = ref(false);
|
||||
const saveError = ref(null);
|
||||
const initialData = ref(null);
|
||||
|
||||
// Updates state
|
||||
const myUpdates = ref([]);
|
||||
const loadingUpdates = ref(false);
|
||||
const loadingMoreUpdates = ref(false);
|
||||
const hasMoreUpdates = ref(false);
|
||||
const showDeleteUpdateModal = ref(false);
|
||||
const updateToDelete = ref(null);
|
||||
const deletingUpdate = ref(false);
|
||||
// Available conversational support topics for peer support
|
||||
const availableSupportTopics = [
|
||||
"Co-founder relationships",
|
||||
"Burnout prevention",
|
||||
"Impostor syndrome",
|
||||
"Work-life boundaries",
|
||||
"Conflict resolution",
|
||||
"General chat & support",
|
||||
];
|
||||
|
||||
// Account management state
|
||||
const contributionOptions = ref([]);
|
||||
|
|
@ -944,18 +924,49 @@ const hasChanges = computed(() => {
|
|||
return JSON.stringify(formData) !== JSON.stringify(initialData.value);
|
||||
});
|
||||
|
||||
// Add skill
|
||||
const addSkill = () => {
|
||||
const skill = currentSkillInput.value.trim().replace(/,$/, "");
|
||||
if (skill && !formData.skills.includes(skill)) {
|
||||
formData.skills.push(skill);
|
||||
currentSkillInput.value = "";
|
||||
// Offering tag management
|
||||
const addOfferingTag = () => {
|
||||
const tag = currentOfferingTagInput.value.trim().replace(/,$/, "");
|
||||
if (tag && !formData.offering.tags.includes(tag)) {
|
||||
formData.offering.tags.push(tag);
|
||||
currentOfferingTagInput.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
// Remove skill
|
||||
const removeSkill = (index) => {
|
||||
formData.skills.splice(index, 1);
|
||||
const removeOfferingTag = (index) => {
|
||||
formData.offering.tags.splice(index, 1);
|
||||
};
|
||||
|
||||
// Looking For tag management
|
||||
const addLookingForTag = () => {
|
||||
const tag = currentLookingForTagInput.value.trim().replace(/,$/, "");
|
||||
if (tag && !formData.lookingFor.tags.includes(tag)) {
|
||||
formData.lookingFor.tags.push(tag);
|
||||
currentLookingForTagInput.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const removeLookingForTag = (index) => {
|
||||
formData.lookingFor.tags.splice(index, 1);
|
||||
};
|
||||
|
||||
// Peer support skill topic management
|
||||
const addPeerSkillTopic = () => {
|
||||
const topic = currentPeerSkillTopicInput.value.trim().replace(/,$/, "");
|
||||
if (topic && !formData.peerSupportSkillTopics.includes(topic)) {
|
||||
formData.peerSupportSkillTopics.push(topic);
|
||||
currentPeerSkillTopicInput.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const removePeerSkillTopic = (index) => {
|
||||
formData.peerSupportSkillTopics.splice(index, 1);
|
||||
};
|
||||
|
||||
const addSuggestedSkillTopic = (tag) => {
|
||||
if (!formData.peerSupportSkillTopics.includes(tag)) {
|
||||
formData.peerSupportSkillTopics.push(tag);
|
||||
}
|
||||
};
|
||||
|
||||
// Load member data
|
||||
|
|
@ -967,30 +978,56 @@ const loadProfile = () => {
|
|||
formData.avatar = memberData.value.avatar || "";
|
||||
formData.studio = memberData.value.studio || "";
|
||||
formData.bio = memberData.value.bio || "";
|
||||
formData.skills = memberData.value.skills || [];
|
||||
formData.location = memberData.value.location || "";
|
||||
formData.offering = memberData.value.offering || "";
|
||||
formData.lookingFor = memberData.value.lookingFor || "";
|
||||
formData.socialLinks = memberData.value.socialLinks || {
|
||||
mastodon: "",
|
||||
linkedin: "",
|
||||
website: "",
|
||||
other: "",
|
||||
};
|
||||
|
||||
// Load offering (handle both old string and new object format)
|
||||
if (typeof memberData.value.offering === "string") {
|
||||
formData.offering = { text: memberData.value.offering, tags: [] };
|
||||
} else {
|
||||
formData.offering = {
|
||||
text: memberData.value.offering?.text || "",
|
||||
tags: memberData.value.offering?.tags || [],
|
||||
};
|
||||
}
|
||||
|
||||
// Load lookingFor (handle both old string and new object format)
|
||||
if (typeof memberData.value.lookingFor === "string") {
|
||||
formData.lookingFor = { text: memberData.value.lookingFor, tags: [] };
|
||||
} else {
|
||||
formData.lookingFor = {
|
||||
text: memberData.value.lookingFor?.text || "",
|
||||
tags: memberData.value.lookingFor?.tags || [],
|
||||
};
|
||||
}
|
||||
|
||||
formData.showInDirectory = memberData.value.showInDirectory ?? true;
|
||||
|
||||
// Load peer support data
|
||||
if (memberData.value.peerSupport) {
|
||||
formData.peerSupportEnabled =
|
||||
memberData.value.peerSupport.enabled || false;
|
||||
formData.peerSupportSkillTopics =
|
||||
memberData.value.peerSupport.skillTopics || [];
|
||||
formData.peerSupportSupportTopics =
|
||||
memberData.value.peerSupport.supportTopics || [];
|
||||
formData.peerSupportAvailability =
|
||||
memberData.value.peerSupport.availability || "";
|
||||
formData.peerSupportMessage =
|
||||
memberData.value.peerSupport.personalMessage || "";
|
||||
formData.peerSupportSlackUsername =
|
||||
memberData.value.peerSupport.slackUsername || "";
|
||||
}
|
||||
|
||||
// Load privacy settings (with defaults)
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "public";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.skillsPrivacy = privacy.skills || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.offeringPrivacy = privacy.offering || "members";
|
||||
formData.lookingForPrivacy = privacy.lookingFor || "members";
|
||||
formData.socialLinksPrivacy = privacy.socialLinks || "members";
|
||||
|
||||
// Store initial state for change detection
|
||||
initialData.value = JSON.parse(JSON.stringify(formData));
|
||||
|
|
@ -1004,11 +1041,25 @@ const handleSubmit = async () => {
|
|||
saveError.value = null;
|
||||
|
||||
try {
|
||||
// Save profile data
|
||||
await $fetch("/api/members/profile", {
|
||||
method: "PATCH",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
// Save peer support data separately
|
||||
await $fetch("/api/members/me/peer-support", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
enabled: formData.peerSupportEnabled,
|
||||
skillTopics: formData.peerSupportSkillTopics,
|
||||
supportTopics: formData.peerSupportSupportTopics,
|
||||
availability: formData.peerSupportAvailability,
|
||||
personalMessage: formData.peerSupportMessage,
|
||||
slackUsername: formData.peerSupportSlackUsername,
|
||||
},
|
||||
});
|
||||
|
||||
saveSuccess.value = true;
|
||||
|
||||
// Refresh member data
|
||||
|
|
@ -1035,78 +1086,6 @@ const resetForm = () => {
|
|||
saveError.value = null;
|
||||
};
|
||||
|
||||
// Load user's updates
|
||||
const loadUpdates = async () => {
|
||||
if (!memberData.value?.id) return;
|
||||
|
||||
loadingUpdates.value = true;
|
||||
try {
|
||||
const response = await $fetch(`/api/updates/user/${memberData.value.id}`, {
|
||||
params: { limit: 20, skip: 0 },
|
||||
});
|
||||
myUpdates.value = response.updates;
|
||||
hasMoreUpdates.value = response.hasMore;
|
||||
} catch (error) {
|
||||
console.error("Failed to load updates:", error);
|
||||
} finally {
|
||||
loadingUpdates.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Load more updates
|
||||
const loadMoreUpdates = async () => {
|
||||
if (!memberData.value?.id) return;
|
||||
|
||||
loadingMoreUpdates.value = true;
|
||||
try {
|
||||
const response = await $fetch(`/api/updates/user/${memberData.value.id}`, {
|
||||
params: { limit: 20, skip: myUpdates.value.length },
|
||||
});
|
||||
myUpdates.value.push(...response.updates);
|
||||
hasMoreUpdates.value = response.hasMore;
|
||||
} catch (error) {
|
||||
console.error("Failed to load more updates:", error);
|
||||
} finally {
|
||||
loadingMoreUpdates.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle edit update
|
||||
const handleEditUpdate = (update) => {
|
||||
navigateTo(`/updates/${update._id}/edit`);
|
||||
};
|
||||
|
||||
// Handle delete update
|
||||
const handleDeleteUpdate = (update) => {
|
||||
updateToDelete.value = update;
|
||||
showDeleteUpdateModal.value = true;
|
||||
};
|
||||
|
||||
// Confirm delete update
|
||||
const confirmDeleteUpdate = async () => {
|
||||
if (!updateToDelete.value) return;
|
||||
|
||||
deletingUpdate.value = true;
|
||||
try {
|
||||
await $fetch(`/api/updates/${updateToDelete.value._id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
// Remove from list
|
||||
myUpdates.value = myUpdates.value.filter(
|
||||
(u) => u._id !== updateToDelete.value._id,
|
||||
);
|
||||
|
||||
showDeleteUpdateModal.value = false;
|
||||
updateToDelete.value = null;
|
||||
} catch (error) {
|
||||
console.error("Failed to delete update:", error);
|
||||
alert("Failed to delete update. Please try again.");
|
||||
} finally {
|
||||
deletingUpdate.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Format date helper
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "";
|
||||
|
|
@ -1334,7 +1313,6 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
loadProfile();
|
||||
loadUpdates();
|
||||
loadContributionOptions();
|
||||
selectedContributionTier.value = memberData.value?.contributionTier || "";
|
||||
});
|
||||
|
|
@ -1349,6 +1327,7 @@ useHead({
|
|||
:deep(label) {
|
||||
color: rgb(231 229 228) !important; /* stone-200 */
|
||||
font-weight: 500;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Field descriptions - lighter gray for readability */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue