Adding features
This commit is contained in:
parent
600fef2b7c
commit
2b55ca4104
75 changed files with 9796 additions and 2759 deletions
135
app/pages/updates/[id]/edit.vue
Normal file
135
app/pages/updates/[id]/edit.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Edit Update"
|
||||
subtitle="Make changes to your update"
|
||||
theme="stone"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<section class="py-12 px-4">
|
||||
<UContainer class="px-4">
|
||||
<!-- Loading State -->
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex justify-center items-center py-20"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-stone-400">Loading update...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div v-else-if="update" class="max-w-3xl">
|
||||
<UpdateForm
|
||||
:initial-data="update"
|
||||
:submitting="submitting"
|
||||
:error="error"
|
||||
submit-label="Update"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div
|
||||
v-if="success"
|
||||
class="mt-6 bg-green-500/10 border border-green-500/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-green-300">✓ Update saved successfully!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Not Found -->
|
||||
<div v-else class="text-center py-20">
|
||||
<p class="text-stone-400 mb-4">Update not found</p>
|
||||
<UButton to="/updates" variant="outline" color="neutral">
|
||||
Back to Updates
|
||||
</UButton>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute();
|
||||
const { isAuthenticated, checkMemberStatus, memberData } = useAuth();
|
||||
|
||||
const update = ref(null);
|
||||
const loading = ref(true);
|
||||
const submitting = ref(false);
|
||||
const error = ref(null);
|
||||
const success = ref(false);
|
||||
|
||||
// Load update
|
||||
const loadUpdate = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await $fetch(`/api/updates/${route.params.id}`);
|
||||
|
||||
// Check if user is the author
|
||||
if (memberData.value && data.author._id !== memberData.value.id) {
|
||||
error.value = "You can only edit your own updates";
|
||||
update.value = null;
|
||||
return;
|
||||
}
|
||||
|
||||
update.value = data;
|
||||
} catch (err) {
|
||||
console.error("Failed to load update:", err);
|
||||
error.value = err.data?.statusMessage || "Failed to load update";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Check authentication
|
||||
onMounted(async () => {
|
||||
if (!isAuthenticated.value) {
|
||||
const authenticated = await checkMemberStatus();
|
||||
if (!authenticated) {
|
||||
await navigateTo("/login");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await loadUpdate();
|
||||
});
|
||||
|
||||
const handleSubmit = async (formData) => {
|
||||
submitting.value = true;
|
||||
error.value = null;
|
||||
success.value = false;
|
||||
|
||||
try {
|
||||
await $fetch(`/api/updates/${route.params.id}`, {
|
||||
method: "PATCH",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
success.value = true;
|
||||
|
||||
// Redirect to the update after a short delay
|
||||
setTimeout(() => {
|
||||
navigateTo(`/updates/${route.params.id}`);
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
console.error("Failed to update:", err);
|
||||
error.value =
|
||||
err.data?.statusMessage || "Failed to save update. Please try again.";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigateTo(`/updates/${route.params.id}`);
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: "Edit Update - Ghost Guild",
|
||||
});
|
||||
</script>
|
||||
153
app/pages/updates/[id]/index.vue
Normal file
153
app/pages/updates/[id]/index.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Update"
|
||||
subtitle="Member update"
|
||||
theme="stone"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<section class="py-12 px-4">
|
||||
<UContainer class="px-4">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex justify-center items-center py-20">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-stone-400">Loading update...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Update Content -->
|
||||
<div v-else-if="update" class="max-w-3xl">
|
||||
<UpdateCard
|
||||
:update="update"
|
||||
:show-preview="false"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
|
||||
<!-- Comments Placeholder -->
|
||||
<div
|
||||
class="mt-8 p-8 border border-stone-700 rounded-lg bg-stone-800/30"
|
||||
>
|
||||
<h3 class="text-lg font-semibold text-stone-200 mb-4">Comments</h3>
|
||||
<p class="text-stone-400 text-center py-8">Comments coming soon</p>
|
||||
</div>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="mt-6">
|
||||
<UButton
|
||||
to="/updates"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
icon="i-lucide-arrow-left"
|
||||
>
|
||||
Back to Updates
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="text-center py-20">
|
||||
<p class="text-stone-400 mb-4">{{ error }}</p>
|
||||
<UButton to="/updates" variant="outline" color="neutral">
|
||||
Back to Updates
|
||||
</UButton>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<UModal
|
||||
v-model:open="showDeleteModal"
|
||||
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="showDeleteModal = false"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
<UButton color="red" :loading="deleting" @click="confirmDelete">
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute();
|
||||
|
||||
const update = ref(null);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
const showDeleteModal = ref(false);
|
||||
const deleting = ref(false);
|
||||
|
||||
// Load update
|
||||
const loadUpdate = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const data = await $fetch(`/api/updates/${route.params.id}`);
|
||||
update.value = data;
|
||||
console.log("✅ Update loaded successfully:", data);
|
||||
} catch (err) {
|
||||
console.error("❌ Failed to load update:", err);
|
||||
console.error("Error details:", {
|
||||
status: err.statusCode,
|
||||
message: err.data?.statusMessage,
|
||||
data: err.data,
|
||||
});
|
||||
error.value =
|
||||
err.data?.statusMessage || err.statusMessage || "Update not found";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadUpdate();
|
||||
});
|
||||
|
||||
const handleEdit = () => {
|
||||
navigateTo(`/updates/${route.params.id}/edit`);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
showDeleteModal.value = true;
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
deleting.value = true;
|
||||
try {
|
||||
await $fetch(`/api/updates/${route.params.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
// Redirect to updates feed
|
||||
await navigateTo("/updates");
|
||||
} catch (err) {
|
||||
console.error("Failed to delete update:", err);
|
||||
alert("Failed to delete update. Please try again.");
|
||||
deleting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
update.value
|
||||
? `Update by ${update.value.author?.name} - Ghost Guild`
|
||||
: "Update - Ghost Guild",
|
||||
),
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue