101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, type Ref, ref, watch} from "vue";
|
|
import {getBookRecommandations} from "@/services/bookApi";
|
|
import type {Book} from "@/services/models/book";
|
|
import BookLightCard from "@/components/book/BookLightCard.vue";
|
|
import type {BookSimilarParams} from "@/services/models/filter";
|
|
|
|
const model = ref(null);
|
|
const books: Ref<Book[]> = ref([]);
|
|
|
|
const {book} = defineProps<{ book: Book }>()
|
|
onMounted(getSimilarBooks);
|
|
|
|
async function getSimilarBooks() {
|
|
const params : BookSimilarParams= {
|
|
author: undefined,
|
|
fast: undefined,
|
|
collection: undefined
|
|
};
|
|
if(selectedOption.value === 0){
|
|
params.fast = true;
|
|
}
|
|
else if(selectedOption.value === 1){
|
|
params.author = true;
|
|
} else if(selectedOption.value === 2){
|
|
params.collection = true;
|
|
}
|
|
|
|
return getBookRecommandations(book.id, params)
|
|
.then(result => {
|
|
books.value = result;
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
|
|
const suggestionOptions = [
|
|
{label: 'Vous aimeriez aussi', key:0},
|
|
{label: 'Du même auteur', key:1},
|
|
{label: 'Dans la même collection', key:2}
|
|
]
|
|
|
|
const selectedOption = ref(0)
|
|
|
|
watch(selectedOption, getSimilarBooks)
|
|
</script>
|
|
|
|
<template>
|
|
<v-sheet>
|
|
<span class="d-flex ga-1 bg-white pa-2">
|
|
<v-select
|
|
v-model="selectedOption"
|
|
class="font-weight-medium font-italic"
|
|
hide-details
|
|
item-title="label"
|
|
item-value="key"
|
|
:items="suggestionOptions"
|
|
>
|
|
<template #prepend-inner>
|
|
<v-icon
|
|
icon="mdi-heart"
|
|
color="pink"
|
|
/>
|
|
</template>
|
|
</v-select>
|
|
</span>
|
|
<v-slide-group
|
|
v-model="model"
|
|
class="pa-0"
|
|
center-active
|
|
show-arrows
|
|
>
|
|
<v-slide-group-item
|
|
v-for="book in books"
|
|
:key="book.id"
|
|
v-slot="{ toggle }"
|
|
>
|
|
<v-card
|
|
color="primary"
|
|
class="ma-2"
|
|
height="118"
|
|
width="118"
|
|
@click="toggle"
|
|
>
|
|
<div class="d-flex fill-height align-center justify-center">
|
|
<BookLightCard :book />
|
|
</div>
|
|
</v-card>
|
|
</v-slide-group-item>
|
|
</v-slide-group>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<style>
|
|
.v-slide-group__prev, .v-slide-group__next {
|
|
flex-basis: 24px;
|
|
min-width: 24px;
|
|
}
|
|
</style>
|