85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="mb-6 flex items-center justify-between">
|
||
|
|
<h2 class="page-title">وبلاگ</h2>
|
||
|
|
<RouterLink :to="{ name: 'blog-edit' }" class="btn-primary">مطلب جدید</RouterLink>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p v-if="error" class="mb-4 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">{{ error }}</p>
|
||
|
|
|
||
|
|
<div v-if="loading" class="text-slate-500">در حال بارگذاری...</div>
|
||
|
|
|
||
|
|
<div v-else-if="posts.length === 0" class="card text-center text-slate-500">
|
||
|
|
هنوز مطلبی منتشر نشده است.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="card overflow-hidden p-0">
|
||
|
|
<table class="w-full text-sm">
|
||
|
|
<thead class="border-b border-slate-100 bg-slate-50 text-right">
|
||
|
|
<tr>
|
||
|
|
<th class="px-4 py-3 font-medium text-slate-600">عنوان</th>
|
||
|
|
<th class="px-4 py-3 font-medium text-slate-600">اسلاگ</th>
|
||
|
|
<th class="px-4 py-3 font-medium text-slate-600">وضعیت</th>
|
||
|
|
<th class="px-4 py-3 font-medium text-slate-600">عملیات</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="post in posts" :key="post.id" class="border-b border-slate-50 hover:bg-slate-50/50">
|
||
|
|
<td class="px-4 py-3 font-medium">{{ post.title }}</td>
|
||
|
|
<td class="px-4 py-3 text-slate-600" dir="ltr">{{ post.slug }}</td>
|
||
|
|
<td class="px-4 py-3">
|
||
|
|
<span
|
||
|
|
class="rounded-full px-2 py-0.5 text-xs"
|
||
|
|
:class="post.published ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'"
|
||
|
|
>
|
||
|
|
{{ post.published ? 'منتشر شده' : 'پیشنویس' }}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-3">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<RouterLink :to="{ name: 'blog-edit', params: { id: post.id } }" class="text-brand hover:underline">
|
||
|
|
ویرایش
|
||
|
|
</RouterLink>
|
||
|
|
<button type="button" class="text-red-500 hover:underline" @click="remove(post.id)">حذف</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import { api, type BlogPost } from '@/api/client'
|
||
|
|
|
||
|
|
const loading = ref(true)
|
||
|
|
const error = ref('')
|
||
|
|
const posts = ref<BlogPost[]>([])
|
||
|
|
|
||
|
|
async function load() {
|
||
|
|
loading.value = true
|
||
|
|
error.value = ''
|
||
|
|
try {
|
||
|
|
posts.value = await api.getBlogPosts()
|
||
|
|
} catch (e) {
|
||
|
|
error.value = e instanceof Error ? e.message : 'خطا در بارگذاری'
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function remove(id: string) {
|
||
|
|
if (!confirm('آیا از حذف این مطلب مطمئن هستید؟')) return
|
||
|
|
try {
|
||
|
|
await api.deleteBlogPost(id)
|
||
|
|
posts.value = posts.value.filter((p) => p.id !== id)
|
||
|
|
} catch (e) {
|
||
|
|
error.value = e instanceof Error ? e.message : 'خطا در حذف'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(load)
|
||
|
|
</script>
|