add end read date

front/src/BookForm.vue

@@ -2,15 +2,16 @@
 
   import { ref, computed } from 'vue'
   import { getBook, getImagePathOrDefault, putReadBook, putWantReadBook, putRateBook,
-  putStartReadDate, putStartReadDateUnset } from './api.js'
+  putStartReadDate, putStartReadDateUnset, putEndReadDate, putEndReadDateUnset, putUnreadBook } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import { VRating } from 'vuetify/components/VRating';
   import BigIcon from './BigIcon.vue';
-  import StartReadWidget from './StartReadWidget.vue';
+  import BookDateWidget from './BookDateWidget.vue';
 
   const props = defineProps({
   id: String
 });
+  const today = new Date().toISOString().slice(0, 10);
 
   let data = ref(null);
   let error = ref(null);
@@ -34,8 +35,11 @@
     data.value.read = !data.value.read;
     if (data.value.read) {
       data.value.wantread = false;
+      data.value.endReadDate = today;
+      putEndReadDate(props.id, today);
+    } else {
+      putUnreadBook(props.id);
     }
-    putReadBook(props.id, {read: data.value.read});
   }
 
   function onWantReadIconClick() {
@@ -45,7 +49,7 @@
 
   function onStartReadIconClick() {
     if (!data.value.startReadDate) {
-      data.value.startReadDate = new Date().toISOString().slice(0, 10);
+      data.value.startReadDate = today;
       putStartReadDate(props.id, data.value.startReadDate);
     } else {
       data.value.startReadDate = null;
@@ -55,7 +59,26 @@
 
   function onStartReadDateChange(d) {
     data.value.startReadDate = d;
-    putStartReadDate(props.id, data.value.startReadDate);
+    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 isStartReadExpanded() {
+     let isStartReadDateSet = data.value.startReadDate ? true : false;
+     let isReadUnset = !data.value.read ? true : false;
+     return isStartReadDateSet && isReadUnset;
   }
 
 </script>
@@ -85,20 +108,30 @@
       <p>{{data.summary}}</p>
     </div>
     <div class="column">
-      <div class="iconscontainer">
+      <div class="iconscontainer" :class="data.read ? 'remove-border-bottom' : ''">
         <BigIcon icon="BIconEye"
                  :legend="$t('bookform.wantread')"
                  :isSet="data.wantread"
                  @click="onWantReadIconClick"/>
-        <StartReadWidget
+        <BookDateWidget
+                 icon="BIconBook"
                  :legend="$t('bookform.startread')"
-                 :startReadDate="data.startReadDate"
-                 @onDateChange="onStartReadDateChange"
+                 :start-read-date="data.startReadDate"
+                 :is-expanded="isStartReadExpanded()"
+                 :is-readonly="data.read"
+                 @onStartDateChange="onStartReadDateChange"
                  @onIconClick="onStartReadIconClick"/>
-        <BigIcon icon="BIconCheckCircle"
+        <BookDateWidget
+                 icon="BIconCheckCircle"
                  :legend="$t('bookform.read')"
-                 :isSet="data.read"
-                 @click="onReadIconClick"/>
+                 :start-read-date="data.startReadDate"
+                 use-end-date
+                 last-widget
+                 :endReadDate="data.endReadDate"
+                 :isExpanded="data.read"
+                 @onStartDateChange="onStartReadDateChange"
+                 @onEndDateChange="onEndReadDateChange"
+                 @onIconClick="onReadIconClick"/>
       </div>
     </div>
   </div>
@@ -124,5 +157,9 @@ img {
   width: 250px;
 }
 
+.remove-border-bottom {
+  border-bottom: none;
+}
+
 
 </style>