refactor(community): rename Community Connections → Community Ecology
Simplify the feature to pure discovery (filter by topic, see matching members, copy Slack handle). Drop the connection request/confirm flow entirely — Connection model, 7 API endpoints, useConnections composable, and TagInput component deleted. - Rename communityConnections → communityEcology in schema, API, pages - Delete legacy fields: offering, lookingFor, peerSupport - New /ecology page, /api/ecology/suggestions, community-ecology.patch - Nav: "Connections" → "Ecology", remove pending-count badge - Fix auth/member.get.js missing craftTags + communityEcology - Add community_ecology_updated activity log type - Expose slackHandle conditionally when offerPeerSupport is true - Add migration script at scripts/migrate-to-ecology.js (run before deploy)
This commit is contained in:
parent
9577929e0d
commit
0b3896d984
33 changed files with 1002 additions and 2635 deletions
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<PageShell as="form" @submit.prevent="handleSubmit">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
|
||||
<!-- Unauthenticated State -->
|
||||
<div v-else-if="!memberData" class="loading-state">
|
||||
<p style="color: var(--text-faint); margin-bottom: 12px">
|
||||
Please sign in to access your profile settings.
|
||||
|
|
@ -32,263 +30,227 @@
|
|||
subtitle="How you appear to other members"
|
||||
>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
(memberData?._id || memberData?.id) &&
|
||||
memberData?.status === 'active' &&
|
||||
formData.showInDirectory
|
||||
"
|
||||
:to="`/members/${memberData?._id || memberData?.id}`"
|
||||
v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
|
||||
:to="`/members/${memberId}`"
|
||||
class="view-profile-link"
|
||||
>
|
||||
View my public profile →
|
||||
</NuxtLink>
|
||||
</PageHeader>
|
||||
|
||||
<!-- TWO-COLUMN FORM BODY -->
|
||||
<ColumnsLayout cols="2">
|
||||
<!-- ======== LEFT COLUMN ======== -->
|
||||
<template #left>
|
||||
<PageSection>
|
||||
<div class="section-label">Basics</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input
|
||||
v-model="formData.pronouns"
|
||||
type="text"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.pronounsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Timezone</label>
|
||||
<input
|
||||
v-model="formData.timeZone"
|
||||
type="text"
|
||||
placeholder="e.g., America/Toronto"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.timeZonePrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input
|
||||
v-model="formData.pronouns"
|
||||
type="text"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.pronounsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Timezone</label>
|
||||
<input
|
||||
v-model="formData.timeZone"
|
||||
type="text"
|
||||
placeholder="e.g., America/Toronto"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.timeZonePrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
<img :src="ghost.image" :alt="ghost.label" />
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.avatarPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
<img :src="ghost.image" :alt="ghost.label" />
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.avatarPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- About You -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">About You</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.studioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.locationPrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.studioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.locationPrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.bioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.bioPrivacy" />
|
||||
</div>
|
||||
|
||||
<!-- What I Do (craft tags) -->
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="tagSuggestPool = 'craft'; showTagSuggestModal = true"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="openTagSuggest('craft')"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- Visibility -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Visibility</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the public member
|
||||
listing</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the public member listing</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
<!-- ======== RIGHT COLUMN ======== -->
|
||||
<template #right>
|
||||
<PageSection>
|
||||
<div class="section-label">Community Connections</div>
|
||||
<div class="section-label">Community Ecology</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Topics</label>
|
||||
<CooperativeTagSelector
|
||||
v-model="formData.communityConnectionsTopics"
|
||||
:tags="cooperativeTags"
|
||||
@suggest="tagSuggestPool = 'cooperative'; showTagSuggestModal = true"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.communityConnectionsPrivacy" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Details</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsDetails"
|
||||
rows="3"
|
||||
placeholder="What are you hoping to connect about?"
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityConnectionsDetails?.length || 0 }} / 300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.communityConnectionsOfferPeerSupport"
|
||||
aria-label="Offer Peer Support"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Offer Peer Support
|
||||
<span class="toggle-sub"
|
||||
>Let other members request 1:1 time with you</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.communityConnectionsOfferPeerSupport" class="connections-panel">
|
||||
<div class="field">
|
||||
<label>Availability</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsAvailability"
|
||||
rows="3"
|
||||
placeholder="e.g. Weekday afternoons ET"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.communityConnectionsSlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Personal Message</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsPersonalMessage"
|
||||
rows="3"
|
||||
maxlength="200"
|
||||
placeholder="Brief note shown to people requesting time with you"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityConnectionsPersonalMessage?.length || 0 }} / 200
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Topics</label>
|
||||
<CooperativeTagSelector
|
||||
v-model="formData.communityEcologyTopics"
|
||||
:tags="cooperativeTags"
|
||||
@suggest="openTagSuggest('cooperative')"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.communityEcologyPrivacy" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Details</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyDetails"
|
||||
rows="3"
|
||||
placeholder="What are you hoping to connect about?"
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityEcologyDetails?.length || 0 }} / 300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.communityEcologyOfferPeerSupport"
|
||||
aria-label="Offer Peer Support"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Offer Peer Support
|
||||
<span class="toggle-sub"
|
||||
>Share your Slack handle so other members can reach out</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.communityEcologyOfferPeerSupport" class="connections-panel">
|
||||
<div class="field">
|
||||
<label>Availability</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyAvailability"
|
||||
rows="3"
|
||||
placeholder="e.g. Weekday afternoons ET"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.communityEcologySlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Personal Message</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyPersonalMessage"
|
||||
rows="3"
|
||||
maxlength="200"
|
||||
placeholder="Brief note shown alongside your Slack handle"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityEcologyPersonalMessage?.length || 0 }} / 200
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- Notifications -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Notifications</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyEvents"
|
||||
aria-label="Event reminders"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Event reminders
|
||||
<span class="toggle-sub"
|
||||
>Get notified about upcoming events</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyUpdates"
|
||||
aria-label="Community updates"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Community updates
|
||||
<span class="toggle-sub"
|
||||
>New posts from members you follow</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyConnectionRequests"
|
||||
aria-label="Connection requests"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Connection requests
|
||||
<span class="toggle-sub"
|
||||
>When someone wants to connect</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="toggle in notificationToggles"
|
||||
:key="toggle.key"
|
||||
class="toggle-field"
|
||||
>
|
||||
<USwitch
|
||||
v-model="formData.notifications[toggle.key]"
|
||||
:aria-label="toggle.label"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
{{ toggle.label }}
|
||||
<span class="toggle-sub">{{ toggle.sub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
</ColumnsLayout>
|
||||
|
|
@ -313,14 +275,21 @@
|
|||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Tag Suggest Modal -->
|
||||
<TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
});
|
||||
|
|
@ -328,29 +297,20 @@ definePageMeta({
|
|||
const { memberData, checkMemberStatus } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
|
||||
// Available ghost avatars
|
||||
const availableGhosts = [
|
||||
{
|
||||
value: "disbelieving",
|
||||
label: "Disbelieving",
|
||||
image: "/ghosties/Ghost-Disbelieving.png",
|
||||
},
|
||||
{
|
||||
value: "double-take",
|
||||
label: "Double Take",
|
||||
image: "/ghosties/Ghost-Double-Take.png",
|
||||
},
|
||||
{
|
||||
value: "exasperated",
|
||||
label: "Exasperated",
|
||||
image: "/ghosties/Ghost-Exasperated.png",
|
||||
},
|
||||
{ value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
|
||||
{ value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
|
||||
{ value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
|
||||
{ value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
|
||||
{ value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
|
||||
{ value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
|
||||
];
|
||||
|
||||
// Fetch tags and split into pools
|
||||
const notificationToggles = [
|
||||
{ key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
|
||||
{ key: "updates", label: "Community updates", sub: "New posts from members you follow" },
|
||||
];
|
||||
|
||||
const { data: tagsData } = await useFetch("/api/tags");
|
||||
|
||||
const craftTags = computed(() =>
|
||||
|
|
@ -360,11 +320,14 @@ const cooperativeTags = computed(() =>
|
|||
(tagsData.value?.tags || []).filter((t) => t.pool === "cooperative"),
|
||||
);
|
||||
|
||||
// Tag suggest modal state
|
||||
const showTagSuggestModal = ref(false);
|
||||
const tagSuggestPool = ref("");
|
||||
|
||||
// Form state
|
||||
const openTagSuggest = (pool) => {
|
||||
tagSuggestPool.value = pool;
|
||||
showTagSuggestModal.value = true;
|
||||
};
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
pronouns: "",
|
||||
|
|
@ -374,28 +337,25 @@ const formData = reactive({
|
|||
bio: "",
|
||||
location: "",
|
||||
showInDirectory: true,
|
||||
// Craft tags
|
||||
craftTags: [],
|
||||
craftTagsPrivacy: "members",
|
||||
// Community connections
|
||||
communityConnectionsTopics: [],
|
||||
communityConnectionsPrivacy: "members",
|
||||
communityConnectionsDetails: "",
|
||||
communityConnectionsOfferPeerSupport: false,
|
||||
communityConnectionsAvailability: "",
|
||||
communityConnectionsSlackHandle: "",
|
||||
communityConnectionsPersonalMessage: "",
|
||||
// Privacy
|
||||
communityEcologyTopics: [],
|
||||
communityEcologyPrivacy: "members",
|
||||
communityEcologyDetails: "",
|
||||
communityEcologyOfferPeerSupport: false,
|
||||
communityEcologyAvailability: "",
|
||||
communityEcologySlackHandle: "",
|
||||
communityEcologyPersonalMessage: "",
|
||||
pronounsPrivacy: "members",
|
||||
timeZonePrivacy: "members",
|
||||
avatarPrivacy: "members",
|
||||
studioPrivacy: "members",
|
||||
bioPrivacy: "members",
|
||||
locationPrivacy: "members",
|
||||
// Notifications
|
||||
notifyEvents: true,
|
||||
notifyUpdates: true,
|
||||
notifyConnectionRequests: true,
|
||||
notifications: {
|
||||
events: true,
|
||||
updates: true,
|
||||
},
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
|
@ -403,103 +363,88 @@ const saving = ref(false);
|
|||
const saveSuccess = ref(false);
|
||||
const saveError = ref(null);
|
||||
const initialData = ref(null);
|
||||
let saveSuccessTimer = null;
|
||||
|
||||
const memberId = computed(() => memberData.value?._id || memberData.value?.id);
|
||||
|
||||
// Computed
|
||||
const hasChanges = computed(() => {
|
||||
return JSON.stringify(formData) !== JSON.stringify(initialData.value);
|
||||
});
|
||||
|
||||
// Load member data into form
|
||||
const loadProfile = () => {
|
||||
if (memberData.value) {
|
||||
formData.name = memberData.value.name || "";
|
||||
formData.pronouns = memberData.value.pronouns || "";
|
||||
formData.timeZone = memberData.value.timeZone || "";
|
||||
formData.avatar = memberData.value.avatar || "";
|
||||
formData.studio = memberData.value.studio || "";
|
||||
formData.bio = memberData.value.bio || "";
|
||||
formData.location = memberData.value.location || "";
|
||||
if (!memberData.value) return;
|
||||
|
||||
formData.showInDirectory = memberData.value.showInDirectory ?? true;
|
||||
formData.name = memberData.value.name || "";
|
||||
formData.pronouns = memberData.value.pronouns || "";
|
||||
formData.timeZone = memberData.value.timeZone || "";
|
||||
formData.avatar = memberData.value.avatar || "";
|
||||
formData.studio = memberData.value.studio || "";
|
||||
formData.bio = memberData.value.bio || "";
|
||||
formData.location = memberData.value.location || "";
|
||||
formData.showInDirectory = memberData.value.showInDirectory ?? true;
|
||||
|
||||
// Load craft tags
|
||||
formData.craftTags = Array.isArray(memberData.value.craftTags)
|
||||
? [...memberData.value.craftTags]
|
||||
: [];
|
||||
formData.craftTags = Array.isArray(memberData.value.craftTags)
|
||||
? [...memberData.value.craftTags]
|
||||
: [];
|
||||
|
||||
// Load community connections (with fallback to old peerSupport fields)
|
||||
const cc = memberData.value.communityConnections || {};
|
||||
formData.communityConnectionsTopics = Array.isArray(cc.topics) ? [...cc.topics] : [];
|
||||
formData.communityConnectionsOfferPeerSupport = cc.offerPeerSupport ?? memberData.value.peerSupport?.enabled ?? false;
|
||||
formData.communityConnectionsAvailability = cc.availability || memberData.value.peerSupport?.availability || "";
|
||||
formData.communityConnectionsSlackHandle = cc.slackHandle || memberData.value.peerSupport?.slackUsername || "";
|
||||
formData.communityConnectionsPersonalMessage = cc.personalMessage || memberData.value.peerSupport?.personalMessage || "";
|
||||
formData.communityConnectionsDetails = cc.details || "";
|
||||
const ecology = memberData.value.communityEcology || {};
|
||||
formData.communityEcologyTopics = Array.isArray(ecology.topics) ? [...ecology.topics] : [];
|
||||
formData.communityEcologyOfferPeerSupport = ecology.offerPeerSupport ?? false;
|
||||
formData.communityEcologyAvailability = ecology.availability || "";
|
||||
formData.communityEcologySlackHandle = ecology.slackHandle || "";
|
||||
formData.communityEcologyPersonalMessage = ecology.personalMessage || "";
|
||||
formData.communityEcologyDetails = ecology.details || "";
|
||||
|
||||
// Load privacy settings (with defaults)
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.craftTagsPrivacy = privacy.craftTags || "members";
|
||||
formData.communityConnectionsPrivacy = privacy.communityConnections || "members";
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.craftTagsPrivacy = privacy.craftTags || "members";
|
||||
formData.communityEcologyPrivacy = privacy.communityEcology || "members";
|
||||
|
||||
// Load notification prefs
|
||||
const notifs = memberData.value.notifications || {};
|
||||
formData.notifyEvents = notifs.events ?? true;
|
||||
formData.notifyUpdates = notifs.updates ?? true;
|
||||
formData.notifyConnectionRequests = notifs.connectionRequests ?? notifs.peerRequests ?? true;
|
||||
const notifs = memberData.value.notifications || {};
|
||||
formData.notifications.events = notifs.events ?? true;
|
||||
formData.notifications.updates = notifs.updates ?? true;
|
||||
|
||||
// Store initial state for change detection
|
||||
initialData.value = JSON.parse(JSON.stringify(formData));
|
||||
}
|
||||
initialData.value = JSON.parse(JSON.stringify(formData));
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async () => {
|
||||
saving.value = true;
|
||||
saveSuccess.value = false;
|
||||
saveError.value = null;
|
||||
|
||||
try {
|
||||
// Save profile data (includes craft tags + privacy + notifications)
|
||||
await $fetch("/api/members/profile", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
...formData,
|
||||
craftTags: formData.craftTags,
|
||||
notifications: {
|
||||
events: formData.notifyEvents,
|
||||
updates: formData.notifyUpdates,
|
||||
connectionRequests: formData.notifyConnectionRequests,
|
||||
await Promise.all([
|
||||
$fetch("/api/members/profile", {
|
||||
method: "PATCH",
|
||||
body: { ...formData },
|
||||
}),
|
||||
$fetch("/api/members/me/community-ecology", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
topics: formData.communityEcologyTopics,
|
||||
offerPeerSupport: formData.communityEcologyOfferPeerSupport,
|
||||
availability: formData.communityEcologyAvailability,
|
||||
slackHandle: formData.communityEcologySlackHandle,
|
||||
personalMessage: formData.communityEcologyPersonalMessage,
|
||||
details: formData.communityEcologyDetails,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Save community connections data
|
||||
await $fetch("/api/members/me/community-connections", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
topics: formData.communityConnectionsTopics,
|
||||
offerPeerSupport: formData.communityConnectionsOfferPeerSupport,
|
||||
availability: formData.communityConnectionsAvailability,
|
||||
slackHandle: formData.communityConnectionsSlackHandle,
|
||||
personalMessage: formData.communityConnectionsPersonalMessage,
|
||||
details: formData.communityConnectionsDetails,
|
||||
},
|
||||
});
|
||||
}),
|
||||
]);
|
||||
|
||||
saveSuccess.value = true;
|
||||
|
||||
// Refresh member data
|
||||
await checkMemberStatus();
|
||||
loadProfile();
|
||||
|
||||
setTimeout(() => {
|
||||
if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
|
||||
saveSuccessTimer = setTimeout(() => {
|
||||
saveSuccess.value = false;
|
||||
saveSuccessTimer = null;
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
console.error("Profile save error:", error);
|
||||
|
|
@ -510,14 +455,12 @@ const handleSubmit = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// Reset form to initial state
|
||||
const resetForm = () => {
|
||||
loadProfile();
|
||||
saveSuccess.value = false;
|
||||
saveError.value = null;
|
||||
};
|
||||
|
||||
// Initialize on mount
|
||||
onMounted(async () => {
|
||||
if (!memberData.value) {
|
||||
loading.value = true;
|
||||
|
|
@ -536,6 +479,10 @@ onMounted(async () => {
|
|||
loadProfile();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Edit Profile - Ghost Guild",
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue