101 lines
No EOL
3.2 KiB
Vue
101 lines
No EOL
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-6">Members</h1>
|
|
|
|
<div v-if="pending" class="text-center">Loading...</div>
|
|
|
|
<div v-else-if="error" class="text-red-600">
|
|
Error loading members: {{ error }}
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<div class="bg-white rounded-lg border p-4">
|
|
<h3 class="font-semibold mb-2">Total Members: {{ members?.length || 0 }}</h3>
|
|
|
|
<div v-for="member in members" :key="member._id" class="border-b pb-2 mb-2 last:border-b-0">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="font-medium">{{ member.name }}</p>
|
|
<p class="text-gray-600 text-sm">{{ member.email }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="inline-block px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">
|
|
{{ member.circle }}
|
|
</span>
|
|
<p class="text-sm text-gray-500">${{ member.contributionTier }}/month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simple Add Member Form -->
|
|
<div class="bg-white rounded-lg border p-4">
|
|
<h3 class="font-semibold mb-4">Add Member</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<input v-model="newMember.name" placeholder="Name" class="border rounded p-2" />
|
|
<input v-model="newMember.email" placeholder="Email" class="border rounded p-2" />
|
|
<select v-model="newMember.circle" class="border rounded p-2">
|
|
<option value="community">Community</option>
|
|
<option value="founder">Founder</option>
|
|
<option value="practitioner">Practitioner</option>
|
|
</select>
|
|
<select v-model="newMember.contributionTier" class="border rounded p-2">
|
|
<option value="0">$0/month</option>
|
|
<option value="5">$5/month</option>
|
|
<option value="15">$15/month</option>
|
|
<option value="30">$30/month</option>
|
|
<option value="50">$50/month</option>
|
|
</select>
|
|
</div>
|
|
<button @click="createMember" :disabled="creating" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
|
|
{{ creating ? 'Adding...' : 'Add Member' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const { data: members, pending, error, refresh } = await useFetch("/api/admin/members")
|
|
const creating = ref(false)
|
|
|
|
const newMember = reactive({
|
|
name: '',
|
|
email: '',
|
|
circle: 'community',
|
|
contributionTier: '0'
|
|
})
|
|
|
|
const createMember = async () => {
|
|
if (!newMember.name || !newMember.email) {
|
|
alert('Please fill in name and email')
|
|
return
|
|
}
|
|
|
|
creating.value = true
|
|
try {
|
|
await $fetch('/api/admin/members', {
|
|
method: 'POST',
|
|
body: newMember
|
|
})
|
|
|
|
Object.assign(newMember, {
|
|
name: '',
|
|
email: '',
|
|
circle: 'community',
|
|
contributionTier: '0'
|
|
})
|
|
|
|
await refresh()
|
|
alert('Member added successfully!')
|
|
} catch (error) {
|
|
alert('Failed to add member: ' + error.message)
|
|
} finally {
|
|
creating.value = false
|
|
}
|
|
}
|
|
</script> |