115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Book } from "@/models/book";
|
|
import { BookService } from "@/services/book.service";
|
|
import { onMounted, ref } from "vue";
|
|
import BookCard from "@/components/BookCard.vue";
|
|
import CreateBookForm from "@/components/CreateBookForm.vue";
|
|
|
|
const books = ref<Book[]>([]);
|
|
const bookService = new BookService();
|
|
const isCreatingBookFormOpened = ref<boolean>(false);
|
|
|
|
function closeBookFormModal() {
|
|
isCreatingBookFormOpened.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
books.value = await bookService.findBooks();
|
|
|
|
books.value.map((book) => {
|
|
book.added_at = new Date(book.added_at);
|
|
});
|
|
|
|
books.value.sort((a, b) => {
|
|
if (a.updated_at > b.updated_at) {
|
|
return -1;
|
|
} else if (a.updated_at < b.updated_at) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CreateBookForm
|
|
:is-active="isCreatingBookFormOpened"
|
|
@close-book-form-modal="closeBookFormModal"
|
|
/>
|
|
<main class="cards">
|
|
<BookCard v-for="book in books" :book="book" :key="book.id" class="card" />
|
|
</main>
|
|
<div class="add-button-container">
|
|
<button @click="isCreatingBookFormOpened = true" class="add-button">
|
|
<h3><font-awesome-icon icon="fa-plus" /> Ajouter un livre</h3>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.add-button-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.add-button {
|
|
padding-right: 1em;
|
|
padding-left: 1em;
|
|
background-color: #1e90ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.add-button:hover {
|
|
transition: 0.3s;
|
|
background-color: #176cc0;
|
|
}
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2em;
|
|
}
|
|
|
|
.action {
|
|
display: inline-flex;
|
|
margin-top: 1rem;
|
|
color: #ffffff;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 500;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
background-color: #2563eb;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.action span {
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
.action:hover span {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.add-button-container {
|
|
margin-left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
</style>
|