From c3b2940f36bb6f3155c7982cf30d2a4f85089c8d Mon Sep 17 00:00:00 2001
From: "aditya.chandel" <8075870+adityachandelgit@users.noreply.github.com>
Date: Mon, 11 Aug 2025 22:23:07 -0600
Subject: [PATCH] Enhanced book "Finished On" functionality

---
 .../dto/request/ReadProgressRequest.java      |  2 +-
 .../booklore/service/BookService.java         |  5 +-
 .../metadata-viewer.component.html            | 88 ++++++++++---------
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/request/ReadProgressRequest.java b/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/request/ReadProgressRequest.java
index fb49141ba..e367b1179 100644
--- a/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/request/ReadProgressRequest.java
+++ b/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/request/ReadProgressRequest.java
@@ -19,6 +19,6 @@ public class ReadProgressRequest {
 
     @AssertTrue(message = "At least one progress field must be provided")
     public boolean isProgressValid() {
-        return epubProgress != null || pdfProgress != null || cbxProgress != null || dateFinished != null;
+        return epubProgress != null || pdfProgress != null || cbxProgress != null;
     }
 }
diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/service/BookService.java b/booklore-api/src/main/java/com/adityachandel/booklore/service/BookService.java
index 541dde2df..4215d7e4d 100644
--- a/booklore-api/src/main/java/com/adityachandel/booklore/service/BookService.java
+++ b/booklore-api/src/main/java/com/adityachandel/booklore/service/BookService.java
@@ -312,12 +312,9 @@ public class BookService {
             userBookProgress.setCbxProgress(request.getCbxProgress().getPage());
             userBookProgress.setCbxProgressPercent(request.getCbxProgress().getPercentage());
         }
-        
-        // Update dateFinished if provided
         if (request.getDateFinished() != null) {
             userBookProgress.setDateFinished(request.getDateFinished());
         }
-        
         userBookProgressRepository.save(userBookProgress);
     }
 
@@ -340,7 +337,7 @@ public class BookService {
             progress.setUser(userEntity);
             progress.setBook(book);
             progress.setReadStatus(readStatus);
-            
+
             // Set dateFinished when status is READ, clear it otherwise
             if (readStatus == ReadStatus.READ) {
                 progress.setDateFinished(Instant.now());
diff --git a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
index 4159e3e06..93863f3cb 100644
--- a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
+++ b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
@@ -303,47 +303,6 @@
                   {{ getStatusLabel(selectedReadStatus) }}
               </span>
                 <p-menu #menu [popup]="true" [model]="readStatusMenuItems"></p-menu>
-                @if (selectedReadStatus === ReadStatus.READ) {
-                  @if (!isEditingDateFinished) {
-                    <span class="text-xs text-gray-400 ml-2 cursor-pointer hover:text-gray-300" 
-                          (click)="toggleDateFinishedEdit(book)"
-                          pTooltip="Click to edit finish date"
-                          tooltipPosition="bottom">
-                      @if (book?.dateFinished) {
-                        Finished on {{ formatDate(book.dateFinished) }}
-                      } @else {
-                        Click to set finish date
-                      }
-                    </span>
-                  } @else {
-                    <div class="flex items-center gap-2 ml-2">
-                      <p-datepicker 
-                        [(ngModel)]="editDateFinished"
-                        dateFormat="dd-M-yy"
-                        [showIcon]="true"
-                        iconDisplay="input"
-                        [style]="{ 'width': '140px', 'font-size': '12px' }"
-                        class="text-xs">
-                      </p-datepicker>
-                      <p-button 
-                        icon="pi pi-check" 
-                        size="small" 
-                        severity="success"
-                        text
-                        (onClick)="saveDateFinished(book)"
-                        pTooltip="Save date">
-                      </p-button>
-                      <p-button 
-                        icon="pi pi-times" 
-                        size="small" 
-                        severity="danger"
-                        text
-                        (onClick)="cancelDateFinishedEdit()"
-                        pTooltip="Cancel">
-                      </p-button>
-                    </div>
-                  }
-                }
               </p>
               @if (book?.koreaderProgress && book.koreaderProgress?.percentage != null) {
                 <p class="whitespace-nowrap flex items-center">
@@ -369,6 +328,53 @@
                 </span>
                 </p>
               }
+              @if (selectedReadStatus === ReadStatus.READ) {
+                <div>
+                  @if (book?.dateFinished) {
+                    <div class="flex items-center gap-2">
+                      <p><strong>Finished On: </strong></p>
+                      @if (!isEditingDateFinished) {
+                        <div class="flex items-center gap-2">
+                          <p>{{ formatDate(book.dateFinished) }}</p>
+                          <i class="pi pi-pencil text-[cornflowerblue] hover:text-[darkturquoise] cursor-pointer"
+                             (click)="toggleDateFinishedEdit(book)">
+                          </i>
+                        </div>
+                      } @else {
+                        <div class="flex items-center">
+                          <p-datepicker
+                            [(ngModel)]="editDateFinished"
+                            dateFormat="dd-M-yy"
+                            size="small"
+                            [showIcon]="true"
+                            iconDisplay="input"
+                            [style]="{ 'width': '125px', 'font-size': '12px' }"
+                            class="text-xs">
+                          </p-datepicker>
+                          <p-button
+                            rounded
+                            icon="pi pi-check"
+                            size="small"
+                            severity="success"
+                            text
+                            (onClick)="saveDateFinished(book)"
+                            pTooltip="Save date">
+                          </p-button>
+                          <p-button
+                            rounded
+                            icon="pi pi-times"
+                            size="small"
+                            severity="danger"
+                            text
+                            (onClick)="cancelDateFinishedEdit()"
+                            pTooltip="Cancel">
+                          </p-button>
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              }
               <p><strong>Page Count:</strong> {{ book?.metadata!.pageCount || '-' }}</p>
             </div>