Added start read date

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"