jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX/UI improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 13:26:51 +01:00
parent 418d3cc402
commit 4e6f5d36b8
14 changed files with 1964 additions and 924 deletions
Download patch file Download diff file Expand all files Collapse all files

599
app/pages/admin/members.vue
View file

@ -8,7 +8,9 @@
<p>Manage members, contributions, and access</p>
</div>
<div class="header-actions">
<button class="btn" @click="showImportModal = true">Import CSV</button>
<button class="btn" @click="showImportModal = true">
Import CSV
</button>
<button
class="btn"
:disabled="selectedMemberIds.length === 0"
@ -16,20 +18,19 @@
>
Send Invites ({{ selectedMemberIds.length }})
</button>
<button class="btn btn-primary" @click="showCreateModal = true">Add Member</button>
<button class="btn btn-primary" @click="showCreateModal = true">
Add Member
</button>
</div>
</div>
</div>
<!-- Search / Filter -->
<div class="filter-bar">
<div class="field" style="margin-bottom: 0; flex: 1;">
<input
v-model="searchQuery"
placeholder="Search members..."
/>
<div class="field" style="margin-bottom: 0; flex: 1">
<input v-model="searchQuery" placeholder="Search members..." />
</div>
<div class="field" style="margin-bottom: 0;">
<div class="field" style="margin-bottom: 0">
<select v-model="circleFilter">
<option value="">All Circles</option>
<option value="community">Community</option>
@ -55,7 +56,13 @@
<tr>
<th class="col-check">
<UCheckbox
:model-value="allVisibleSelected ? true : (someVisibleSelected ? 'indeterminate' : false)"
:model-value="
allVisibleSelected
? true
: someVisibleSelected
? 'indeterminate'
: false
"
@update:model-value="toggleSelectAll"
/>
</th>
@ -79,21 +86,34 @@
</td>
<td class="col-name">{{ member.name }}</td>
<td class="col-email">{{ member.email }}</td>
<td><span class="badge" :class="member.circle">{{ member.circle }}</span></td>
<td>
<span class="badge" :class="member.circle">{{
member.circle
}}</span>
</td>
<td class="col-mono">${{ member.contributionTier }}/mo</td>
<td>
<span :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'">
{{ member.inviteEmailSent ? 'Sent' : 'Not sent' }}
<span
:class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
>
{{ member.inviteEmailSent ? "Sent" : "Not sent" }}
</span>
</td>
<td>
<span :class="member.slackInvited ? 'status-ok' : 'status-dim'">
{{ member.slackInvited ? 'Invited' : 'Pending' }}
{{ member.slackInvited ? "Invited" : "Pending" }}
</span>
</td>
<td class="col-mono col-date">{{ formatDate(member.createdAt) }}</td>
<td class="col-mono col-date">
{{ formatDate(member.createdAt) }}
</td>
<td class="col-actions">
<button @click="sendSlackInvite(member)" class="link-btn">Slack</button>
<NuxtLink :to="`/admin/members/${member._id}`" class="link-btn"
>View</NuxtLink
>
<button @click="sendSlackInvite(member)" class="link-btn">
Slack
</button>
<button @click="editMember(member)" class="link-btn">Edit</button>
</td>
</tr>
@ -106,11 +126,17 @@
</div>
<!-- Create Member Modal -->
<div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
<div
v-if="showCreateModal"
class="modal-overlay"
@click.self="showCreateModal = false"
>
<div class="modal">
<div class="modal-header">
<h2>Add New Member</h2>
<button class="modal-close" @click="showCreateModal = false">&times;</button>
<button class="modal-close" @click="showCreateModal = false">
&times;
</button>
</div>
<form @submit.prevent="createMember" class="modal-body">
@ -120,7 +146,12 @@
</div>
<div class="field">
<label>Email</label>
<input v-model="newMember.email" type="email" placeholder="email@example.com" required />
<input
v-model="newMember.email"
type="email"
placeholder="email@example.com"
required
/>
</div>
<div class="field">
<label>Circle</label>
@ -141,9 +172,11 @@
</select>
</div>
<div class="modal-actions">
<button type="button" class="btn" @click="showCreateModal = false">Cancel</button>
<button type="button" class="btn" @click="showCreateModal = false">
Cancel
</button>
<button type="submit" class="btn btn-primary" :disabled="creating">
{{ creating ? 'Creating...' : 'Create Member' }}
{{ creating ? "Creating..." : "Create Member" }}
</button>
</div>
</form>
@ -151,7 +184,11 @@
</div>
<!-- CSV Import Modal -->
<div v-if="showImportModal" class="modal-overlay" @click.self="closeImportModal">
<div
v-if="showImportModal"
class="modal-overlay"
@click.self="closeImportModal"
>
<div class="modal modal-wide">
<div class="modal-header">
<h2>Import Members from CSV</h2>
@ -161,10 +198,12 @@
<div class="modal-body">
<div v-if="!csvRows.length">
<p class="help-text">
Upload a CSV with columns: <code>name,email,circle,contributionTier</code>
Upload a CSV with columns:
<code>name,email,circle,contributionTier</code>
</p>
<p class="help-text" style="margin-bottom: 12px;">
Valid circles: community, founder, practitioner. Valid tiers: 0, 5, 15, 30, 50.
<p class="help-text" style="margin-bottom: 12px">
Valid circles: community, founder, practitioner. Valid tiers: 0,
5, 15, 30, 50.
</p>
<input
ref="csvFileInput"
@ -181,11 +220,21 @@
<div v-if="csvRows.length">
<div class="csv-summary">
<span>{{ csvRows.length }} row{{ csvRows.length !== 1 ? 's' : '' }} parsed.</span>
<span v-if="csvValidRows.length !== csvRows.length" class="csv-errors">
<span
>{{ csvRows.length }} row{{
csvRows.length !== 1 ? "s" : ""
}}
parsed.</span
>
<span
v-if="csvValidRows.length !== csvRows.length"
class="csv-errors"
>
{{ csvRows.length - csvValidRows.length }} with errors.
</span>
<button @click="resetCsvImport" class="link-btn">Choose different file</button>
<button @click="resetCsvImport" class="link-btn">
Choose different file
</button>
</div>
<div class="csv-table-wrap">
@ -200,9 +249,15 @@
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in csvRows" :key="i" :class="{ 'row-error': row.error }">
<tr
v-for="(row, i) in csvRows"
:key="i"
:class="{ 'row-error': row.error }"
>
<td>
<span v-if="row.error" class="status-error">{{ row.error }}</span>
<span v-if="row.error" class="status-error">{{
row.error
}}</span>
<span v-else class="status-ok">OK</span>
</td>
<td>{{ row.name }}</td>
@ -217,13 +272,17 @@
<div v-if="importResults" class="results-box">
<strong>Import complete</strong>
<p class="status-ok">{{ importResults.created }} created</p>
<p v-if="importResults.failed" class="status-error">{{ importResults.failed }} failed</p>
<div v-if="importResults.results?.some(r => !r.success)">
<p v-if="importResults.failed" class="status-error">
{{ importResults.failed }} failed
</p>
<div v-if="importResults.results?.some((r) => !r.success)">
<p
v-for="fail in importResults.results.filter(r => !r.success)"
v-for="fail in importResults.results.filter(
(r) => !r.success,
)"
:key="fail.email"
class="status-error"
style="font-size: 11px;"
style="font-size: 11px"
>
{{ fail.email }}: {{ fail.error }}
</p>
@ -234,7 +293,7 @@
<div class="modal-actions">
<button @click="closeImportModal" class="btn">
{{ importResults ? 'Done' : 'Cancel' }}
{{ importResults ? "Done" : "Cancel" }}
</button>
<button
v-if="csvValidRows.length && !importResults"
@ -242,18 +301,28 @@
@click="submitImport"
class="btn btn-primary"
>
{{ importing ? 'Importing...' : `Import ${csvValidRows.length} member${csvValidRows.length !== 1 ? 's' : ''}` }}
{{
importing
? "Importing..."
: `Import ${csvValidRows.length} member${csvValidRows.length !== 1 ? "s" : ""}`
}}
</button>
</div>
</div>
</div>
<!-- Edit Member Modal -->
<div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
<div
v-if="showEditModal"
class="modal-overlay"
@click.self="showEditModal = false"
>
<div class="modal">
<div class="modal-header">
<h2>Edit Member</h2>
<button class="modal-close" @click="showEditModal = false">&times;</button>
<button class="modal-close" @click="showEditModal = false">
&times;
</button>
</div>
<form @submit.prevent="submitEditMember" class="modal-body">
@ -293,9 +362,11 @@
</select>
</div>
<div class="modal-actions">
<button type="button" class="btn" @click="showEditModal = false">Cancel</button>
<button type="button" class="btn" @click="showEditModal = false">
Cancel
</button>
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save Changes' }}
{{ saving ? "Saving..." : "Save Changes" }}
</button>
</div>
</form>
@ -303,28 +374,32 @@
</div>
<!-- Send Invites Modal -->
<div v-if="showInviteModal" class="modal-overlay" @click.self="showInviteModal = false">
<div
v-if="showInviteModal"
class="modal-overlay"
@click.self="showInviteModal = false"
>
<div class="modal modal-wide">
<div class="modal-header">
<h2>Send Invite Emails</h2>
<button class="modal-close" @click="showInviteModal = false">&times;</button>
<button class="modal-close" @click="showInviteModal = false">
&times;
</button>
</div>
<div class="modal-body">
<p class="help-text">
Sending to <strong>{{ selectedMemberIds.length }}</strong>
member{{ selectedMemberIds.length !== 1 ? 's' : '' }}.
Each receives a unique magic login link valid for 48 hours.
Sending to <strong>{{ selectedMemberIds.length }}</strong> member{{
selectedMemberIds.length !== 1 ? "s" : ""
}}. Each receives a unique magic login link valid for 48 hours.
</p>
<div class="field">
<label>Email Template</label>
<textarea
v-model="inviteTemplate"
rows="12"
></textarea>
<p class="help-text" style="margin-top: 4px;">
Tokens: <code>{name}</code>, <code>{loginLink}</code>, <code>{circle}</code>
<textarea v-model="inviteTemplate" rows="12"></textarea>
<p class="help-text" style="margin-top: 4px">
Tokens: <code>{name}</code>, <code>{loginLink}</code>,
<code>{circle}</code>
</p>
</div>
@ -336,13 +411,15 @@
<div v-if="inviteResults" class="results-box">
<strong>Invites sent</strong>
<p class="status-ok">{{ inviteResults.sent }} sent</p>
<p v-if="inviteResults.failed" class="status-error">{{ inviteResults.failed }} failed</p>
<div v-if="inviteResults.results?.some(r => !r.success)">
<p v-if="inviteResults.failed" class="status-error">
{{ inviteResults.failed }} failed
</p>
<div v-if="inviteResults.results?.some((r) => !r.success)">
<p
v-for="fail in inviteResults.results.filter(r => !r.success)"
v-for="fail in inviteResults.results.filter((r) => !r.success)"
:key="fail.email"
class="status-error"
style="font-size: 11px;"
style="font-size: 11px"
>
{{ fail.email }}: {{ fail.error }}
</p>
@ -352,7 +429,7 @@
<div class="modal-actions">
<button @click="showInviteModal = false" class="btn">
{{ inviteResults ? 'Done' : 'Cancel' }}
{{ inviteResults ? "Done" : "Cancel" }}
</button>
<button
v-if="!inviteResults"
@ -360,7 +437,11 @@
@click="submitInvites"
class="btn btn-primary"
>
{{ sendingInvites ? 'Sending...' : `Send ${selectedMemberIds.length} invite${selectedMemberIds.length !== 1 ? 's' : ''}` }}
{{
sendingInvites
? "Sending..."
: `Send ${selectedMemberIds.length} invite${selectedMemberIds.length !== 1 ? "s" : ""}`
}}
</button>
</div>
</div>
@ -370,39 +451,39 @@
<script setup>
definePageMeta({
layout: 'admin',
middleware: 'admin',
})
layout: "admin",
middleware: "admin",
});
const toast = useToast()
const toast = useToast();
const {
data: members,
pending,
error,
refresh,
} = await useFetch('/api/admin/members')
} = await useFetch("/api/admin/members");
const searchQuery = ref('')
const circleFilter = ref('')
const showCreateModal = ref(false)
const creating = ref(false)
const searchQuery = ref("");
const circleFilter = ref("");
const showCreateModal = ref(false);
const creating = ref(false);
// Selection
const selectedMemberIds = ref([])
const selectedMemberIds = ref([]);
// CSV import
const showImportModal = ref(false)
const csvFileInput = ref(null)
const csvRows = ref([])
const csvParseError = ref('')
const importing = ref(false)
const importResults = ref(null)
const showImportModal = ref(false);
const csvFileInput = ref(null);
const csvRows = ref([]);
const csvParseError = ref("");
const importing = ref(false);
const importResults = ref(null);
// Invite
const showInviteModal = ref(false)
const sendingInvites = ref(false)
const inviteResults = ref(null)
const showInviteModal = ref(false);
const sendingInvites = ref(false);
const inviteResults = ref(null);
const DEFAULT_INVITE_TEMPLATE = `Hi {name},
@ -413,305 +494,313 @@ Sign in here to get started:
This link expires in 48 hours. After that, you can always request a new login link at https://ghostguild.org/login.
See you inside.`
See you inside.`;
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE)
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
const newMember = reactive({
name: '',
email: '',
circle: 'community',
contributionTier: '0',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
});
const filteredMembers = computed(() => {
if (!members.value) return []
if (!members.value) return [];
return members.value.filter((member) => {
const matchesSearch =
!searchQuery.value ||
member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
member.email.toLowerCase().includes(searchQuery.value.toLowerCase())
member.email.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchesCircle =
!circleFilter.value || member.circle === circleFilter.value
!circleFilter.value || member.circle === circleFilter.value;
return matchesSearch && matchesCircle
})
})
return matchesSearch && matchesCircle;
});
});
// Selection helpers
const allVisibleSelected = computed(() => {
if (!filteredMembers.value.length) return false
if (!filteredMembers.value.length) return false;
return filteredMembers.value.every((m) =>
selectedMemberIds.value.includes(m._id)
)
})
selectedMemberIds.value.includes(m._id),
);
});
const someVisibleSelected = computed(() => {
return filteredMembers.value.some((m) =>
selectedMemberIds.value.includes(m._id)
)
})
selectedMemberIds.value.includes(m._id),
);
});
const toggleSelectAll = () => {
if (allVisibleSelected.value) {
const visibleIds = new Set(filteredMembers.value.map((m) => m._id))
const visibleIds = new Set(filteredMembers.value.map((m) => m._id));
selectedMemberIds.value = selectedMemberIds.value.filter(
(id) => !visibleIds.has(id)
)
(id) => !visibleIds.has(id),
);
} else {
const currentSet = new Set(selectedMemberIds.value)
const currentSet = new Set(selectedMemberIds.value);
for (const m of filteredMembers.value) {
currentSet.add(m._id)
currentSet.add(m._id);
}
selectedMemberIds.value = [...currentSet]
selectedMemberIds.value = [...currentSet];
}
}
};
const toggleSelect = (id) => {
const idx = selectedMemberIds.value.indexOf(id)
const idx = selectedMemberIds.value.indexOf(id);
if (idx >= 0) {
selectedMemberIds.value.splice(idx, 1)
selectedMemberIds.value.splice(idx, 1);
} else {
selectedMemberIds.value.push(id)
selectedMemberIds.value.push(id);
}
}
};
// Invite preview
const invitePreviewMember = computed(() => {
if (!selectedMemberIds.value.length || !members.value) return null
return members.value.find((m) => m._id === selectedMemberIds.value[0])
})
if (!selectedMemberIds.value.length || !members.value) return null;
return members.value.find((m) => m._id === selectedMemberIds.value[0]);
});
const invitePreviewText = computed(() => {
if (!invitePreviewMember.value) return ''
if (!invitePreviewMember.value) return "";
return inviteTemplate.value
.replace(/\{name\}/g, invitePreviewMember.value.name)
.replace(/\{loginLink\}/g, 'https://ghostguild.org/api/auth/verify?token=...')
.replace(/\{circle\}/g, invitePreviewMember.value.circle)
})
.replace(
/\{loginLink\}/g,
"https://ghostguild.org/api/auth/verify?token=...",
)
.replace(/\{circle\}/g, invitePreviewMember.value.circle);
});
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString()
}
return new Date(dateString).toLocaleDateString();
};
// --- Create Member ---
const createMember = async () => {
creating.value = true
creating.value = true;
try {
await $fetch('/api/admin/members', {
method: 'POST',
await $fetch("/api/admin/members", {
method: "POST",
body: newMember,
})
});
showCreateModal.value = false
showCreateModal.value = false;
Object.assign(newMember, {
name: '',
email: '',
circle: 'community',
contributionTier: '0',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
});
await refresh()
toast.add({ title: 'Member created', color: 'green' })
await refresh();
toast.add({ title: "Member created", color: "green" });
} catch (err) {
console.error('Failed to create member:', err)
console.error("Failed to create member:", err);
toast.add({
title: 'Failed to create member',
title: "Failed to create member",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
creating.value = false
creating.value = false;
}
}
};
// --- CSV Import ---
const VALID_CIRCLES = ['community', 'founder', 'practitioner']
const VALID_TIERS = ['0', '5', '15', '30', '50']
const VALID_CIRCLES = ["community", "founder", "practitioner"];
const VALID_TIERS = ["0", "5", "15", "30", "50"];
const handleCsvFile = (event) => {
const file = event.target.files[0]
if (!file) return
const file = event.target.files[0];
if (!file) return;
csvParseError.value = ''
csvRows.value = []
csvParseError.value = "";
csvRows.value = [];
const reader = new FileReader()
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result
parseCsv(text)
}
reader.readAsText(file)
}
const text = e.target.result;
parseCsv(text);
};
reader.readAsText(file);
};
const parseCsv = (text) => {
const lines = text.split(/\r?\n/).filter((l) => l.trim())
const lines = text.split(/\r?\n/).filter((l) => l.trim());
if (lines.length < 2) {
csvParseError.value = 'CSV must have a header row and at least one data row.'
return
csvParseError.value =
"CSV must have a header row and at least one data row.";
return;
}
const header = lines[0].split(',').map((h) => h.trim().toLowerCase())
const nameIdx = header.indexOf('name')
const emailIdx = header.indexOf('email')
const circleIdx = header.indexOf('circle')
const tierIdx = header.indexOf('contributiontier')
const header = lines[0].split(",").map((h) => h.trim().toLowerCase());
const nameIdx = header.indexOf("name");
const emailIdx = header.indexOf("email");
const circleIdx = header.indexOf("circle");
const tierIdx = header.indexOf("contributiontier");
if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
csvParseError.value = `Missing required columns. Found: ${header.join(', ')}. Need: name, email, circle, contributionTier`
return
csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
return;
}
const seenEmails = new Set()
const rows = []
const seenEmails = new Set();
const rows = [];
for (let i = 1; i < lines.length; i++) {
const cols = lines[i].split(',').map((c) => c.trim())
const name = cols[nameIdx] || ''
const email = (cols[emailIdx] || '').toLowerCase()
const circle = (cols[circleIdx] || '').toLowerCase()
const contributionTier = cols[tierIdx] || ''
const cols = lines[i].split(",").map((c) => c.trim());
const name = cols[nameIdx] || "";
const email = (cols[emailIdx] || "").toLowerCase();
const circle = (cols[circleIdx] || "").toLowerCase();
const contributionTier = cols[tierIdx] || "";
let error = null
if (!name) error = 'Missing name'
else if (!email || !email.includes('@')) error = 'Invalid email'
else if (!VALID_CIRCLES.includes(circle)) error = `Invalid circle: ${circle}`
else if (!VALID_TIERS.includes(contributionTier)) error = `Invalid tier: ${contributionTier}`
else if (seenEmails.has(email)) error = 'Duplicate email in CSV'
let error = null;
if (!name) error = "Missing name";
else if (!email || !email.includes("@")) error = "Invalid email";
else if (!VALID_CIRCLES.includes(circle))
error = `Invalid circle: ${circle}`;
else if (!VALID_TIERS.includes(contributionTier))
error = `Invalid tier: ${contributionTier}`;
else if (seenEmails.has(email)) error = "Duplicate email in CSV";
if (!error) seenEmails.add(email)
if (!error) seenEmails.add(email);
rows.push({ name, email, circle, contributionTier, error })
rows.push({ name, email, circle, contributionTier, error });
}
csvRows.value = rows
}
csvRows.value = rows;
};
const csvValidRows = computed(() => csvRows.value.filter((r) => !r.error))
const csvValidRows = computed(() => csvRows.value.filter((r) => !r.error));
const resetCsvImport = () => {
csvRows.value = []
csvParseError.value = ''
importResults.value = null
if (csvFileInput.value) csvFileInput.value.value = ''
}
csvRows.value = [];
csvParseError.value = "";
importResults.value = null;
if (csvFileInput.value) csvFileInput.value.value = "";
};
const closeImportModal = () => {
showImportModal.value = false
showImportModal.value = false;
if (importResults.value) {
resetCsvImport()
refresh()
resetCsvImport();
refresh();
}
}
};
const submitImport = async () => {
importing.value = true
importing.value = true;
try {
const payload = csvValidRows.value.map(({ name, email, circle, contributionTier }) => ({
name,
email,
circle,
contributionTier,
}))
const payload = csvValidRows.value.map(
({ name, email, circle, contributionTier }) => ({
name,
email,
circle,
contributionTier,
}),
);
const result = await $fetch('/api/admin/members/import', {
method: 'POST',
const result = await $fetch("/api/admin/members/import", {
method: "POST",
body: { members: payload },
})
});
importResults.value = result
importResults.value = result;
toast.add({
title: `Imported ${result.created} member${result.created !== 1 ? 's' : ''}`,
title: `Imported ${result.created} member${result.created !== 1 ? "s" : ""}`,
description: result.failed ? `${result.failed} failed` : undefined,
color: result.failed ? 'orange' : 'green',
})
color: result.failed ? "orange" : "green",
});
} catch (err) {
console.error('Import failed:', err)
console.error("Import failed:", err);
toast.add({
title: 'Import failed',
title: "Import failed",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
importing.value = false
importing.value = false;
}
}
};
// --- Send Invites ---
const openInviteModal = () => {
inviteResults.value = null
inviteTemplate.value = DEFAULT_INVITE_TEMPLATE
showInviteModal.value = true
}
inviteResults.value = null;
inviteTemplate.value = DEFAULT_INVITE_TEMPLATE;
showInviteModal.value = true;
};
const submitInvites = async () => {
sendingInvites.value = true
sendingInvites.value = true;
try {
const result = await $fetch('/api/admin/members/invite', {
method: 'POST',
const result = await $fetch("/api/admin/members/invite", {
method: "POST",
body: {
memberIds: selectedMemberIds.value,
emailTemplate: inviteTemplate.value,
},
})
});
inviteResults.value = result
await refresh()
selectedMemberIds.value = []
inviteResults.value = result;
await refresh();
selectedMemberIds.value = [];
toast.add({
title: `Sent ${result.sent} invite${result.sent !== 1 ? 's' : ''}`,
title: `Sent ${result.sent} invite${result.sent !== 1 ? "s" : ""}`,
description: result.failed ? `${result.failed} failed` : undefined,
color: result.failed ? 'orange' : 'green',
})
color: result.failed ? "orange" : "green",
});
} catch (err) {
console.error('Failed to send invites:', err)
console.error("Failed to send invites:", err);
toast.add({
title: 'Failed to send invites',
title: "Failed to send invites",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
sendingInvites.value = false
sendingInvites.value = false;
}
}
};
// --- Existing actions ---
const sendSlackInvite = (member) => {
console.log('Send Slack invite to:', member.email)
}
console.log("Send Slack invite to:", member.email);
};
// --- Edit Member ---
const showEditModal = ref(false)
const saving = ref(false)
const editingMemberId = ref(null)
const showEditModal = ref(false);
const saving = ref(false);
const editingMemberId = ref(null);
const editingMember = reactive({
name: '',
email: '',
circle: 'community',
contributionTier: '0',
status: 'pending_payment',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
status: "pending_payment",
});
const editMember = (member) => {
editingMemberId.value = member._id
editingMemberId.value = member._id;
Object.assign(editingMember, {
name: member.name,
email: member.email,
circle: member.circle,
contributionTier: String(member.contributionTier),
status: member.status || 'pending_payment',
})
showEditModal.value = true
}
status: member.status || "pending_payment",
});
showEditModal.value = true;
};
const submitEditMember = async () => {
saving.value = true
saving.value = true;
try {
await $fetch(`/api/admin/members/${editingMemberId.value}`, {
method: 'PUT',
method: "PUT",
body: {
name: editingMember.name,
email: editingMember.email,
@ -719,20 +808,20 @@ const submitEditMember = async () => {
contributionTier: editingMember.contributionTier,
status: editingMember.status,
},
})
showEditModal.value = false
await refresh()
toast.add({ title: 'Member updated', color: 'green' })
});
showEditModal.value = false;
await refresh();
toast.add({ title: "Member updated", color: "green" });
} catch (err) {
toast.add({
title: 'Failed to update member',
title: "Failed to update member",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
saving.value = false
saving.value = false;
}
}
};
</script>
<style scoped>
@ -756,7 +845,7 @@ const submitEditMember = async () => {
}
.page-header h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 24px;
font-weight: 500;
color: var(--text-bright);
@ -855,7 +944,7 @@ tbody td {
border: none;
color: var(--candle);
cursor: pointer;
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
padding: 2px 6px;
}
@ -915,7 +1004,7 @@ tbody td {
}
.modal-header h2 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
@ -1025,7 +1114,7 @@ tbody td {
/* ---- PREVIEW BOX ---- */
.preview-box {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
color: var(--text-dim);
background: var(--surface);
@ -1070,7 +1159,9 @@ tbody td {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
/* ---- RESPONSIVE ---- */