71 lines
No EOL
1.9 KiB
Vue
71 lines
No EOL
1.9 KiB
Vue
<script setup>
|
|
|
|
import { Button } from '@/components/ui/button/index.js'
|
|
import { CirclePlus, Pencil, Trash } from 'lucide-vue-next'
|
|
import { useAdminPostsStore } from '@/stores/adminPosts.js'
|
|
import { onMounted } from 'vue'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@/components/ui/table/index.js'
|
|
|
|
const adminPostsStore = useAdminPostsStore();
|
|
|
|
onMounted(() => {
|
|
adminPostsStore.fetchPosts();
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-3 grid-rows-1 mt-28 sm:mt-20 w-full justify-center items-center gap-4">
|
|
<div class="col-span-3 col-start-1 lg:col-span-1 lg:col-start-2 mx-5 lg:mx-0">
|
|
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
|
|
Admin
|
|
</h1>
|
|
<RouterLink to="/admin/post/create">
|
|
<Button class="mb-6">
|
|
<CirclePlus class="mr-2" />
|
|
Créer
|
|
</Button>
|
|
</RouterLink>
|
|
<Table>
|
|
<TableCaption>List of posts</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead>City</TableHead>
|
|
<TableHead>Country</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="post in adminPostsStore.posts" :key="post.id">
|
|
<TableCell>{{ post.id }}</TableCell>
|
|
<TableCell>{{ post.date }}</TableCell>
|
|
<TableCell>{{ post.city }}</TableCell>
|
|
<TableCell>{{ post.country }}</TableCell>
|
|
<TableCell>
|
|
<div class="flex gap-2">
|
|
<Button>
|
|
<Pencil size="16"/>
|
|
</Button>
|
|
<Button>
|
|
<Trash size="16"/>
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |