Added start read date

front/src/BigIcon.vue

@@ -34,7 +34,6 @@
 .bigiconandlegend:hover {
   transform: scale(1.03);
   transition: ease-in-out 0.02s;
-  background-color: bulma-primary;
   cursor: pointer;
 }
 

front/src/BookForm.vue

@@ -1,10 +1,12 @@
 <script setup>
 
   import { ref, computed } from 'vue'
-  import { getBook, getImagePathOrDefault, putReadBook, putWantReadBook, putRateBook } from './api.js'
+  import { getBook, getImagePathOrDefault, putReadBook, putWantReadBook, putRateBook,
+  putStartReadDate, putStartReadDateUnset } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import { VRating } from 'vuetify/components/VRating';
   import BigIcon from './BigIcon.vue';
+  import StartReadWidget from './StartReadWidget.vue';
 
   const props = defineProps({
   id: String
@@ -14,6 +16,7 @@
   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);
   })
@@ -40,6 +43,21 @@
     putWantReadBook(props.id, {wantread: data.value.wantread});
   }
 
+  function onStartReadIconClick() {
+    if (data.value.startReadDate == null) {
+      data.value.startReadDate = new Date().toISOString().slice(0, 10);
+      putStartReadDate(props.id, data.value.startReadDate);
+    } else {
+      data.value.startReadDate = null;
+      putStartReadDateUnset(props.id);
+    }
+  }
+
+  function onStartReadDateChange(d) {
+    data.value.startReadDate = d;
+    putStartReadDate(props.id, data.value.startReadDate);
+  }
+
 </script>
 
 <template>
@@ -72,9 +90,11 @@
                  :legend="$t('bookform.wantread')"
                  :isSet="data.wantread"
                  @click="onWantReadIconClick"/>
-        <BigIcon icon="BIconBook"
+        <StartReadWidget
                  :legend="$t('bookform.startread')"
-                 :isSet="false"/>
+                 :startReadDate="data.startReadDate"
+                 @onDateChange="onStartReadDateChange"
+                 @onIconClick="onStartReadIconClick"/>
         <BigIcon icon="BIconCheckCircle"
                  :legend="$t('bookform.read')"
                  :isSet="data.read"

front/src/StartReadWidget.vue

@@ -0,0 +1,75 @@
+<script setup>
+  import { ref } from 'vue'
+  import BigIcon from './BigIcon.vue';
+
+  const props = defineProps({
+  legend: String,
+  startReadDate: String
+});
+  defineEmits(['onIconClick', 'onDateChange'])
+
+  const today = new Date().toISOString().slice(0, 10);
+
+  function computeParentClasses() {
+    if (props.startReadDate != null) {
+      return "startdatewidget has-text-dark has-background-text"
+    } else {
+      return "startdatewidget"
+    }
+  }
+
+</script>
+
+<template>
+  <div :class="computeParentClasses()">
+    <BigIcon icon="BIconBook"
+             :legend="props.legend"
+             :isSet="props.startReadDate != null"
+             @click="$emit('onIconClick')"/>
+    <div v-if="props.startReadDate != null" class="inputdate">
+      <div class="ontopofinput">
+        <label class="datelabel" for="startread">
+          {{$t('startreadwidget.started')}}
+        </label>
+        <input class="datepicker has-background-dark has-text-light"
+               id="startread"
+               type="date"
+               @change="(e) => $emit('onDateChange', e.target.value)"
+               :value="props.startReadDate"
+               :max="today"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.inputdate {
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  padding: 20px;
+}
+.startdatewidget {
+  display: flex;
+  width: 500px;
+  border-radius: 0 30px 30px 0;
+}
+.ontopofinput {
+  display: block;
+}
+
+.datelabel {
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  font-size: 26px;
+  border: none;
+  padding-bottom: 15px;
+}
+
+.datepicker {
+  font-size: 26px;
+  border-radius: 5px;
+}
+</style>

front/src/api.js

@@ -53,6 +53,14 @@ export async function putReadBook(bookId, payload) {
   return genericPayloadCall('/book/' + bookId + "/read", payload, 'PUT')
 }
 
+export async function putStartReadDateUnset(bookId) {
+  return genericPayloadCall('/book/' + bookId + "/startread", {startDate: "null"}, 'PUT')
+}
+
+export async function putStartReadDate(bookId, startdate) {
+  return genericPayloadCall('/book/' + bookId + "/startread", {startDate: startdate}, 'PUT')
+}
+
 export async function putWantReadBook(bookId, payload) {
   return genericPayloadCall('/book/' + bookId + "/wantread", payload, 'PUT')
 }

front/src/locales/en.json

@@ -53,5 +53,8 @@
     "next":"Next",
     "goto":"Goto page {pageNumber}",
     "page":"Page {pageNumber}"
+  },
+  "startreadwidget" :{
+    "started": "Started at :"
   }
 }

front/src/locales/fr.json

@@ -53,5 +53,8 @@
     "next":"Suivant",
     "goto":"Aller à la page {pageNumber}",
     "page":"Page {pageNumber}"
+  },
+  "startreadwidget" :{
+    "started": "Commencé le :"
   }
 }