76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import BookCard from './BookCard.vue';
|
|
import { getMyBooks } from './api.js'
|
|
|
|
|
|
|
|
const FilterStates = Object.freeze({
|
|
READ: "read",
|
|
WANTREAD: "wantread",
|
|
});
|
|
|
|
let currentFilterState = ref(FilterStates.READ);
|
|
|
|
let { data, error } = getMyBooks(currentFilterState.value);
|
|
|
|
|
|
function fetchData() {
|
|
let res = getMyBooks(currentFilterState.value);
|
|
data = res.data;
|
|
error = res.error;
|
|
}
|
|
|
|
function onFilterButtonClick(newstate) {
|
|
currentFilterState.value = newstate;
|
|
fetchData();
|
|
}
|
|
|
|
function computeDynamicClass(state) {
|
|
return currentFilterState.value === state ? 'is-active is-primary' : '';
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-5">
|
|
<button class="button is-medium"
|
|
@click="onFilterButtonClick(FilterStates.READ)"
|
|
:class="computeDynamicClass(FilterStates.READ)">
|
|
{{$t('bookbrowser.read')}}
|
|
</button>
|
|
<button class="button is-medium"
|
|
@click="onFilterButtonClick(FilterStates.WANTREAD)"
|
|
:class="computeDynamicClass(FilterStates.WANTREAD)">
|
|
{{$t('bookbrowser.wantread')}}
|
|
</button>
|
|
</div>
|
|
<div class="books">
|
|
<div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
|
|
<div class="book" v-else-if="data" v-for="book in data" :key="book.id">
|
|
<BookCard v-bind="book" />
|
|
</div>
|
|
<div v-else>{{$t('bookbrowser.loading')}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.books {
|
|
position:relative;
|
|
float:left;
|
|
width:100%; height:auto;
|
|
padding-bottom: 100px;
|
|
line-height: 2.5;
|
|
|
|
column-count: 2;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
#book {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
transition: ease-in-out 0.15s;
|
|
}
|
|
</style>
|