init backend, added admin page in front

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/views/AdminView.vue

@@ -1,14 +1,72 @@
 <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'
+import { useAuthStore } from '@/stores/auth.js'
+
+const adminPostsStore = useAdminPostsStore();
+
+onMounted(() => {
+  adminPostsStore.fetchPosts();
+})
 </script>
 
 <template>
-  <div class="flex flex-col mt-20 w-full justify-center items-center gap-4">
-    <Button>test</Button>
-    <Button>test</Button>
-    <Button>test</Button>
+  <div class="grid grid-cols-3 grid-rows-1 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>
+
+</style>