Adding features

app/pages/member/my-updates.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <PageHeader
+      title="My Updates"
+      subtitle="View and manage your updates"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- Stats -->
+        <div v-if="!pending" class="mb-8 flex items-center justify-between">
+          <div class="text-stone-300">
+            <span class="text-2xl font-bold text-stone-100">{{ total }}</span>
+            {{ total === 1 ? "update" : "updates" }} posted
+          </div>
+          <UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
+        </div>
+
+        <!-- Loading State -->
+        <div
+          v-if="pending && !updates.length"
+          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 your updates...</p>
+          </div>
+        </div>
+
+        <!-- Updates List -->
+        <div v-else-if="updates.length" class="space-y-6">
+          <UpdateCard
+            v-for="update in updates"
+            :key="update._id"
+            :update="update"
+            :show-preview="true"
+            @edit="handleEdit"
+            @delete="handleDelete"
+          />
+
+          <!-- Load More -->
+          <div v-if="hasMore" class="flex justify-center pt-4">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :loading="loadingMore"
+              @click="loadMore"
+            >
+              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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+              />
+            </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" icon="i-lucide-plus">
+            Post Your First Update
+          </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 { isAuthenticated, checkMemberStatus } = useAuth();
+
+const updates = ref([]);
+const pending = ref(false);
+const loadingMore = ref(false);
+const hasMore = ref(false);
+const total = ref(0);
+
+const showDeleteModal = ref(false);
+const updateToDelete = ref(null);
+const deleting = ref(false);
+
+// Check authentication
+onMounted(async () => {
+  if (!isAuthenticated.value) {
+    const authenticated = await checkMemberStatus();
+    if (!authenticated) {
+      await navigateTo("/login");
+      return;
+    }
+  }
+
+  await loadUpdates();
+});
+
+// Load updates
+const loadUpdates = async () => {
+  pending.value = true;
+  try {
+    const response = await $fetch("/api/updates/my-updates", {
+      params: { limit: 20, skip: 0 },
+    });
+    updates.value = response.updates;
+    total.value = response.total;
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    pending.value = false;
+  }
+};
+
+// Load more updates
+const loadMore = async () => {
+  loadingMore.value = true;
+  try {
+    const response = await $fetch("/api/updates/my-updates", {
+      params: { limit: 20, skip: updates.value.length },
+    });
+    updates.value.push(...response.updates);
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// Handle edit
+const handleEdit = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete
+const handleDelete = (update) => {
+  updateToDelete.value = update;
+  showDeleteModal.value = true;
+};
+
+// Confirm delete
+const confirmDelete = async () => {
+  if (!updateToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    updates.value = updates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+    total.value--;
+
+    showDeleteModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+useHead({
+  title: "My Updates - Ghost Guild",
+});
+</script>