From 8c0a9fe431328dae5a781fbb735cd02dd0f2cbd3 Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Fri, 21 Nov 2025 18:13:09 +0100
Subject: [PATCH] add end read date

---
 front/src/BigIcon.vue                      |   8 +-
 front/src/BookDateWidget.vue               | 113 +++++++++++++++++++++
 front/src/BookForm.vue                     |  61 ++++++++---
 front/src/BookListElement.vue              |   2 +-
 front/src/StartReadWidget.vue              |  75 --------------
 front/src/api.js                           |  16 ++-
 front/src/locales/en.json                  |   5 +-
 front/src/locales/fr.json                  |   5 +-
 internal/apitest/get_book_test.go          |   1 +
 internal/apitest/put_userbook_read_test.go |  38 +++++++
 internal/model/userbook.go                 |   1 +
 internal/query/query.go                    |   8 +-
 internal/routes/userbookputupdate.go       |  42 ++++++--
 13 files changed, 266 insertions(+), 109 deletions(-)
 create mode 100644 front/src/BookDateWidget.vue
 delete mode 100644 front/src/StartReadWidget.vue

diff --git a/front/src/BigIcon.vue b/front/src/BigIcon.vue
index 301c381..98d7579 100644
--- a/front/src/BigIcon.vue
+++ b/front/src/BigIcon.vue
@@ -4,17 +4,19 @@
   const props = defineProps({
   icon: String,
   legend: String,
-  isSet: Boolean
+  isSet: Boolean,
+  isReadonly: Boolean
 });
 
   const hovered = ref(false)
 
-  const computedIcon = computed(() => props.icon + (hovered.value || props.isSet ? "Fill" : ""));
+  const computedIcon = computed(() => props.icon + (!props.isReadonly && (hovered.value || props.isSet) ? "Fill" : ""));
 
 </script>
 
 <template>
   <div class="bigiconandlegend"
+       :class="props.isReadonly ? '' : 'showcanclick'"
        @mouseover="hovered = true"
        @mouseout="hovered = false">
     <span class="bigicon" :title="props.legend">
@@ -31,7 +33,7 @@
   margin:25px;
 }
 
-.bigiconandlegend:hover {
+.showcanclick:hover {
   transform: scale(1.03);
   transition: ease-in-out 0.02s;
   cursor: pointer;
diff --git a/front/src/BookDateWidget.vue b/front/src/BookDateWidget.vue
new file mode 100644
index 0000000..c50e328
--- /dev/null
+++ b/front/src/BookDateWidget.vue
@@ -0,0 +1,113 @@
+<script setup>
+  import { ref } from 'vue'
+  import BigIcon from './BigIcon.vue';
+
+  const props = defineProps({
+  icon: String,
+  legend: String,
+  startReadDate: String,
+  endReadDate: String,
+  isExpanded: Boolean,
+  isReadonly: Boolean,
+  useEndDate: Boolean,
+  lastWidget: Boolean
+});
+  defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])
+
+  const today = new Date().toISOString().slice(0, 10);
+
+  function computeParentClasses() {
+    let classNames = "bookdatewidget";
+    if (props.isExpanded) {
+      classNames += " has-text-dark has-background-text";
+    }
+    if (props.lastWidget) {
+      classNames += " border-radius-right-and-left";
+    } else {
+      classNames += " border-radius-right";
+    }
+    if (props.isReadonly) {
+      classNames += " widget-readonly"
+    }
+    return classNames;
+  }
+
+</script>
+
+<template>
+  <div :class="computeParentClasses()">
+    <BigIcon :icon="props.icon"
+             :is-readonly="props.isReadonly"
+             :legend="props.legend"
+             :isSet="props.isExpanded"
+             @click="props.isReadonly ? null : $emit('onIconClick') "/>
+    <div v-if="props.isExpanded" class="inputdate">
+      <div class="ontopofinput">
+        <label class="datelabel" for="startread">
+          {{$t('bookdatewidget.started')}}
+        </label>
+        <input class="datepicker has-background-dark has-text-light"
+               id="startread"
+               type="date"
+               @change="(e) => $emit('onStartDateChange', e.target.value)"
+               :value="props.startReadDate"
+               :max="today"/>
+       <div v-if="props.useEndDate">
+          <label class="datelabel" for="endread">
+            {{$t('bookdatewidget.finished')}}
+          </label>
+          <input class="datepicker has-background-dark has-text-light"
+                 id="endread"
+                 type="date"
+                 @change="(e) => $emit('onEndDateChange', e.target.value)"
+                 :value="props.endReadDate"
+                 :max="today"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.inputdate {
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  padding: 20px;
+}
+.bookdatewidget {
+  display: flex;
+  width: 500px;
+}
+
+.border-radius-right {
+  border-radius: 0 30px 30px 0;
+}
+
+.border-radius-right-and-left {
+  border-radius: 0 30px 30px 45px;
+}
+
+.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;
+}
+
+.widget-readonly {
+  opacity: 50%;
+}
+</style>
diff --git a/front/src/BookForm.vue b/front/src/BookForm.vue
index e5a1d71..5ab9714 100644
--- a/front/src/BookForm.vue
+++ b/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>
diff --git a/front/src/BookListElement.vue b/front/src/BookListElement.vue
index 3bf41b1..b2cad99 100644
--- a/front/src/BookListElement.vue
+++ b/front/src/BookListElement.vue
@@ -18,7 +18,7 @@
   const error = ref(null)
 
 async function onUserBookRead() {
-  const res = await putReadBook(props.id, {read: true});
+  const res = await putReadBook(props.id);
   if (res.ok) {
     router.push('/books')
   } else {
diff --git a/front/src/StartReadWidget.vue b/front/src/StartReadWidget.vue
deleted file mode 100644
index f84f164..0000000
--- a/front/src/StartReadWidget.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<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) {
-      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 ? true : false"
-             @click="$emit('onIconClick')"/>
-    <div v-if="props.startReadDate" 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>
diff --git a/front/src/api.js b/front/src/api.js
index fd2cd49..a784e7e 100644
--- a/front/src/api.js
+++ b/front/src/api.js
@@ -49,8 +49,20 @@ export function postBook(book) {
   return genericPayloadCall('/book', book.value, 'POST')
 }
 
-export async function putReadBook(bookId, payload) {
-  return genericPayloadCall('/book/' + bookId + "/read", payload, 'PUT')
+export async function putReadBook(bookId) {
+  return genericPayloadCall('/book/' + bookId + "/read", {read: true}, 'PUT')
+}
+
+export async function putUnreadBook(bookId) {
+  return genericPayloadCall('/book/' + bookId + "/read", {read: false}, 'PUT')
+}
+
+export async function putEndReadDate(bookId, enddate) {
+  return genericPayloadCall('/book/' + bookId + "/read", {read: true, endDate: enddate}, 'PUT')
+}
+
+export async function putEndReadDateUnset(bookId) {
+  return genericPayloadCall('/book/' + bookId + "/read", {read: true, endDate: "null"}, 'PUT')
 }
 
 export async function putStartReadDateUnset(bookId) {
diff --git a/front/src/locales/en.json b/front/src/locales/en.json
index c67d1de..0ed180f 100644
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@@ -54,7 +54,8 @@
     "goto":"Goto page {pageNumber}",
     "page":"Page {pageNumber}"
   },
-  "startreadwidget" :{
-    "started": "Started at :"
+  "bookdatewidget" :{
+    "started": "Started at :",
+    "finished": "Finished at :"
   }
 }
diff --git a/front/src/locales/fr.json b/front/src/locales/fr.json
index c6c3363..6fe8fdd 100644
--- a/front/src/locales/fr.json
+++ b/front/src/locales/fr.json
@@ -54,7 +54,8 @@
     "goto":"Aller à la page {pageNumber}",
     "page":"Page {pageNumber}"
   },
-  "startreadwidget" :{
-    "started": "Commencé le :"
+  "bookdatewidget" :{
+    "started": "Commencé le :",
+    "finished": "Fini le :"
   }
 }
diff --git a/internal/apitest/get_book_test.go b/internal/apitest/get_book_test.go
index f243b61..bd3c7fd 100644
--- a/internal/apitest/get_book_test.go
+++ b/internal/apitest/get_book_test.go
@@ -19,6 +19,7 @@ type fetchedBook struct {
 	Read          bool   `json:"read"`
 	WantRead      bool   `json:"wantread"`
 	StartReadDate string `json:"startReadDate"`
+	EndReadDate   string `json:"endReadDate"`
 }
 
 func TestGetBook_Ok(t *testing.T) {
diff --git a/internal/apitest/put_userbook_read_test.go b/internal/apitest/put_userbook_read_test.go
index cf140d5..99f08a4 100644
--- a/internal/apitest/put_userbook_read_test.go
+++ b/internal/apitest/put_userbook_read_test.go
@@ -20,6 +20,44 @@ func TestPutReadUserBooks_NewReadOk(t *testing.T) {
 	assert.Equal(t, false, book.WantRead)
 }
 
+func TestPutReadUserBooks_NewReadDateOk(t *testing.T) {
+	payload :=
+		`{
+			"read": true,
+			"endDate": "2025-10-20"
+		}`
+	bookId := "9"
+	testPutReadUserBooks(t, payload, bookId, http.StatusOK)
+	book := testGetBook(t, bookId, http.StatusOK)
+	assert.Equal(t, true, book.Read)
+	assert.Equal(t, "2025-10-20", book.EndReadDate)
+}
+
+func TestPutReadUserBooks_UnsetEndDate(t *testing.T) {
+	payload :=
+		`{
+			"read": true,
+			"endDate": "null"
+		}`
+	bookId := "9"
+	testPutReadUserBooks(t, payload, bookId, http.StatusOK)
+	book := testGetBook(t, bookId, http.StatusOK)
+	assert.Equal(t, true, book.Read)
+	assert.Equal(t, "", book.EndReadDate)
+}
+
+func TestPutReadUserBooks_UnsetReadOk(t *testing.T) {
+	payload :=
+		`{
+			"read": false
+		}`
+	bookId := "9"
+	testPutReadUserBooks(t, payload, bookId, http.StatusOK)
+	book := testGetBook(t, bookId, http.StatusOK)
+	assert.Equal(t, false, book.Read)
+	assert.Equal(t, "", book.EndReadDate)
+}
+
 func testPutReadUserBooks(t *testing.T, payload string, bookId string, expectedCode int) {
 	testutils.TestBookPutCallWithDemoPayload(t, payload, bookId, expectedCode, "/book/"+bookId+"/read")
 }
diff --git a/internal/model/userbook.go b/internal/model/userbook.go
index 09b3e83..32a0d5e 100644
--- a/internal/model/userbook.go
+++ b/internal/model/userbook.go
@@ -16,4 +16,5 @@ type UserBook struct {
 	Read          bool
 	WantRead      bool
 	StartReadDate *time.Time
+	EndReadDate   *time.Time
 }
diff --git a/internal/query/query.go b/internal/query/query.go
index bdcac93..12eda1a 100644
--- a/internal/query/query.go
+++ b/internal/query/query.go
@@ -16,13 +16,19 @@ type BookGet struct {
 	Read          bool   `json:"read"`
 	WantRead      bool   `json:"wantread"`
 	StartReadDate string `json:"startReadDate"`
+	EndReadDate   string `json:"endReadDate"`
 	CoverPath     string `json:"coverPath"`
 }
 
 func FetchBookGet(db *gorm.DB, userId uint, bookId uint64) (BookGet, error) {
 	var book BookGet
 	query := db.Model(&model.Book{})
-	query = query.Select("books.title, books.author, books.summary, user_books.rating, user_books.read, user_books.want_read, DATE(user_books.start_read_date) as start_read_date, " + selectStaticFilesPath())
+	selectQueryString := "books.title, books.author, books.summary, " +
+		"user_books.rating, user_books.read, user_books.want_read, " +
+		"DATE(user_books.start_read_date) as start_read_date, " +
+		"DATE(user_books.end_read_date) AS end_read_date, " +
+		selectStaticFilesPath()
+	query = query.Select(selectQueryString)
 	query = query.Joins("left join user_books on (user_books.book_id = books.id and user_books.user_id = ?)", userId)
 	query = query.Joins("left join static_files on (static_files.id = books.cover_id)")
 	query = query.Where("books.id = ?", bookId)
diff --git a/internal/routes/userbookputupdate.go b/internal/routes/userbookputupdate.go
index 8a8d9a7..ea0a739 100644
--- a/internal/routes/userbookputupdate.go
+++ b/internal/routes/userbookputupdate.go
@@ -33,11 +33,25 @@ func PutReadUserBookHandler(ac appcontext.AppContext) {
 
 	userbook.Read = read.Read
 
+	if read.EndDate != "" {
+		d, err := parseDate(read.EndDate)
+		if err != nil {
+			myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+			return
+		}
+		userbook.EndReadDate = d
+	}
+
 	//remove the book from "wanted" list when it is marked as read.
 	if userbook.Read {
 		userbook.WantRead = false
 	}
 
+	//clear the date when unread
+	if !userbook.Read {
+		userbook.EndReadDate = nil
+	}
+
 	ac.Db.Save(&userbook)
 	ac.C.String(http.StatusOK, "Success")
 }
@@ -84,17 +98,12 @@ func PutStartReadUserBookHandler(ac appcontext.AppContext) {
 		return
 	}
 
-	//string equal to "null" to unset value
-	if startDateToParse.StartDate == "null" {
-		userbook.StartReadDate = nil
-	} else {
-		startDate, err := time.Parse(time.DateOnly, startDateToParse.StartDate)
-		if err != nil {
-			myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
-			return
-		}
-		userbook.StartReadDate = &startDate
+	d, err := parseDate(startDateToParse.StartDate)
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
 	}
+	userbook.StartReadDate = d
 
 	ac.Db.Save(&userbook)
 	ac.C.String(http.StatusOK, "Success")
@@ -130,7 +139,8 @@ func PutRateUserBookHandler(ac appcontext.AppContext) {
 }
 
 type userbookPutRead struct {
-	Read bool `json:"read"`
+	Read    bool   `json:"read"`
+	EndDate string `json:"endDate"`
 }
 
 type userbookPutWantRead struct {
@@ -150,6 +160,16 @@ type apiCallData struct {
 	User   model.User
 }
 
+func parseDate(dateToParse string) (*time.Time, error) {
+	//string equal to "null" to unset value
+	if dateToParse == "null" {
+		return nil, nil
+	} else {
+		startDate, err := time.Parse(time.DateOnly, dateToParse)
+		return &startDate, err
+	}
+}
+
 func retrieveDataFromContext(ac appcontext.AppContext) (apiCallData, error) {
 	bookId64, err := strconv.ParseUint(ac.C.Param("id"), 10, 64)
 	bookId := uint(bookId64)