Rename vue component for book form

2026-03-31 22:23:42 +02:00
parent 32d39cabcd
commit bcde39d51d
3 changed files with 4 additions and 4 deletions
--- a/front/src/BookFormView.vue
+++ b/front/src/BookFormView.vue
@@ -0,0 +1,163 @@
+<script setup>
+import { ref, computed } from 'vue'
+import {
+  getBook,
+  getImagePathOrDefault,
+  putUpdateBook,
+  putStartReadDate,
+  putStartReadDateUnset,
+  putReadBook,
+  putEndReadDate,
+  putEndReadDateUnset,
+  putUnreadBook,
+} from './api.js'
+import { useRouter, onBeforeRouteUpdate } from 'vue-router'
+import { VRating } from 'vuetify/components/VRating'
+import BookFormIcons from './BookFormIcons.vue'
+import ReviewWidget from './ReviewWidget.vue'
+
+const router = useRouter()
+const props = defineProps({
+  id: String,
+})
+const today = new Date().toISOString().slice(0, 10)
+
+let data = ref(null)
+let error = ref(null)
+getBook(data, error, props.id)
+const imagePathOrDefault = computed(() => getImagePathOrDefault(data.value.coverPath))
+
+onBeforeRouteUpdate(async (to, from) => {
+  getBook(data, error, to.params.id)
+})
+
+function onRatingUpdate(rating) {
+  data.value.rating = rating * 2
+  if (data.value.rating > 0) {
+    data.value.read = true
+    data.value.wantread = false
+  }
+  putUpdateBook(props.id, { rating: data.value.rating })
+}
+
+function onReviewUpdate(review) {
+  data.value.review = review
+  putUpdateBook(props.id, { review: data.value.review })
+}
+
+async function onReadIconClick() {
+  data.value.read = !data.value.read
+  if (data.value.read) {
+    data.value.wantread = false
+    data.value.endReadDate = today
+    putReadBook(props.id)
+  } else {
+    putUnreadBook(props.id)
+  }
+}
+
+function onWantReadIconClick() {
+  data.value.wantread = !data.value.wantread
+  putUpdateBook(props.id, { wantread: data.value.wantread })
+}
+
+async function onStartReadIconClick() {
+  if (!data.value.startReadDate) {
+    data.value.startReadDate = today
+    data.value.wantread = false
+    putStartReadDate(props.id, data.value.startReadDate)
+  } else if (!data.value.read) {
+    data.value.startReadDate = null
+    putStartReadDateUnset(props.id)
+  }
+  if (data.value.read) {
+    data.value.read = false
+  }
+}
+
+function onStartReadDateChange(d) {
+  data.value.startReadDate = d
+  if (d != '') {
+    putStartReadDate(props.id, data.value.startReadDate)
+  } else {
+    putStartReadDateUnset(props.id)
+  }
+}
+
+function onEndReadDateChange(d) {
+  data.value.endReadDate = d
+  if (d != '') {
+    putEndReadDate(props.id, data.value.endReadDate)
+  } else {
+    putEndReadDateUnset(props.id)
+  }
+}
+
+function goToAuthor() {
+  router.push('/author/' + data.value.authorId)
+}
+</script>
+
+<template>
+  <div v-if="error">{{ $t('bookform.error', { error: error.message }) }}</div>
+  <div v-if="data" class="columns">
+    <div class="column is-narrow left-panel">
+      <figure class="image">
+        <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title" />
+      </figure>
+    </div>
+    <div class="column">
+      <h3 class="title">{{ data.title }}</h3>
+      <h3 class="subtitle clickable" @click="goToAuthor">{{ data.author }}</h3>
+      <p>{{ data.summary }}</p>
+      <div class="my-5" v-if="data.isbn">ISBN: {{ data.isbn }}</div>
+      <div class="my-5" v-if="data.inventaireid">Inventaire ID: {{ data.inventaireid }}</div>
+      <div class="my-5" v-if="data.openlibraryid">OLID: {{ data.openlibraryid }}</div>
+      <ReviewWidget
+        :reviewtext="data.review"
+        :rating="data.rating"
+        @on-review-update="onReviewUpdate"
+        @on-rating-update="onRatingUpdate"
+      />
+    </div>
+    <div class="column">
+      <BookFormIcons
+        v-bind="data"
+        @on-want-read-icon-click="onWantReadIconClick"
+        @on-start-read-icon-click="onStartReadIconClick"
+        @on-read-icon-click="onReadIconClick"
+        @on-start-read-date-change="onStartReadDateChange"
+        @on-end-read-date-change="onEndReadDateChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+img {
+  max-height: 500px;
+  max-width: 500px;
+  height: auto;
+  width: auto;
+}
+
+@media (min-width: 1024px) {
+  .left-panel {
+    margin-left: 3rem;
+  }
+}
+
+@media (max-width: 1024px) {
+  img {
+    max-height: 250px;
+    max-width: 250px;
+    padding: 20px;
+  }
+
+  .image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>