134 lines
2.9 KiB
Vue
134 lines
2.9 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";
|
|
import { useAuth } from "@/composables/useAuth";
|
|
import { useToast } from "vue-toast-notification";
|
|
|
|
const books = ref<Book[]>([]);
|
|
const bookService = new BookService();
|
|
const isCreatingBookFormOpened = ref<boolean>(false);
|
|
const { isAuthenticated } = useAuth();
|
|
const toastService = useToast();
|
|
|
|
function sortBooks(a: Book, b: Book) {
|
|
if (a.updated_at > b.updated_at) {
|
|
return -1;
|
|
} else if (a.updated_at < b.updated_at) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function pushNewBook(book: Book) {
|
|
book.added_at = new Date(book.added_at);
|
|
book.updated_at = new Date(book.updated_at);
|
|
books.value.push(book);
|
|
books.value.sort(sortBooks);
|
|
toastService.success(`Livre créé avec succès"`, {
|
|
position: "bottom-right",
|
|
pauseOnHover: true,
|
|
dismissible: true,
|
|
});
|
|
}
|
|
|
|
function closeBookFormModal() {
|
|
isCreatingBookFormOpened.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
books.value = await bookService.findBooks();
|
|
|
|
books.value.map((book) => {
|
|
book.added_at = new Date(book.added_at);
|
|
book.updated_at = new Date(book.updated_at);
|
|
});
|
|
|
|
books.value.sort(sortBooks);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CreateBookForm
|
|
v-if="isAuthenticated"
|
|
:is-active="isCreatingBookFormOpened"
|
|
@new-book="(book) => pushNewBook(book)"
|
|
@close-book-form-modal="closeBookFormModal"
|
|
/>
|
|
<main class="cards">
|
|
<BookCard v-for="book in books" :book="book" :key="book.id" class="card" />
|
|
</main>
|
|
<div v-if="isAuthenticated" 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>
|