adityachandelgit · adityachandelgit · Apr 20, 2025 · Apr 20, 2025
diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/settings/AppSettings.java b/booklore-api/src/main/java/com/adityachandel/booklore/model/dto/settings/AppSettings.java
@@ -14,6 +14,7 @@ public class AppSettings {
     private CoverSettings coverSettings;
     private MetadataRefreshOptions metadataRefreshOptions;
     private boolean autoBookSearch;
+    private boolean similarBookRecommendation;
 
     @Data
     @Builder

diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/service/AppSettingService.java b/booklore-api/src/main/java/com/adityachandel/booklore/service/AppSettingService.java
@@ -25,6 +25,7 @@ public class AppSettingService {
     public static final String QUICK_BOOK_MATCH = "quick_book_match";
     public static final String AUTO_BOOK_SEARCH = "auto_book_search";
     public static final String COVER_IMAGE_RESOLUTION = "cover_image_resolution";
+    public static final String SIMILAR_BOOK_RECOMMENDATION = "similar_book_recommendation";
 
     private volatile AppSettings appSettings;
     private final ReentrantLock lock = new ReentrantLock();
@@ -87,8 +88,25 @@ private AppSettings buildAppSettings() {
                     .resolution(settingsMap.get(COVER_IMAGE_RESOLUTION))
                     .build());
         }
-        if(settingsMap.containsKey(AUTO_BOOK_SEARCH)) {
+
+        if (settingsMap.containsKey(AUTO_BOOK_SEARCH)) {
             builder.autoBookSearch(Boolean.parseBoolean(settingsMap.get(AUTO_BOOK_SEARCH)));
+        } else {
+            AppSettingEntity setting = new AppSettingEntity();
+            setting.setName(AUTO_BOOK_SEARCH);
+            setting.setVal("true");
+            appSettingsRepository.save(setting);
+            builder.autoBookSearch(true);
+        }
+
+        if (settingsMap.containsKey(SIMILAR_BOOK_RECOMMENDATION)) {
+            builder.similarBookRecommendation(Boolean.parseBoolean(settingsMap.get(SIMILAR_BOOK_RECOMMENDATION)));
+        } else {
+            AppSettingEntity setting = new AppSettingEntity();
+            setting.setName(SIMILAR_BOOK_RECOMMENDATION);
+            setting.setVal("true");
+            appSettingsRepository.save(setting);
+            builder.similarBookRecommendation(true);
         }
 
         return builder.build();

diff --git a/booklore-ui/src/app/core/model/app-settings.model.ts b/booklore-ui/src/app/core/model/app-settings.model.ts
@@ -6,6 +6,7 @@ export interface CoverSettings {
 
 export interface AppSettings {
   autoBookSearch: boolean;
+  similarBookRecommendation: boolean;
   metadataRefreshOptions: MetadataRefreshOptions;
   coverSettings?: CoverSettings
 }
diff --git a/...e-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.html b/...e-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.html
@@ -93,7 +93,7 @@
 
     <p-divider></p-divider>
 
-    <ng-container *ngIf="recommendedBooks.length > 0">
+    <ng-container *ngIf="similarBookRecommendation && recommendedBooks.length > 0">
       <div>
         <h3 class="text-xl font-semibold">Similar Books</h3>
         <div class="dashboard-scroller-infinite"

diff --git a/...ore-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.ts b/...ore-ui/src/app/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.ts
@@ -21,6 +21,9 @@ import {Tooltip} from 'primeng/tooltip';
 import {InfiniteScrollDirective} from 'ngx-infinite-scroll';
 import {BookCardComponent} from '../../../book/components/book-browser/book-card/book-card.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {AppSettingsService} from '../../../core/service/app-settings.service';
+import {AppSettings} from '../../../core/model/app-settings.model';
+import {filter, take} from 'rxjs/operators';
 
 @Component({
   selector: 'app-metadata-viewer',
@@ -41,13 +44,15 @@ export class MetadataViewerComponent implements OnInit {
   protected urlHelper = inject(UrlHelperService);
   protected userService = inject(UserService);
   private destroyRef = inject(DestroyRef);
+  private appSettingsService = inject(AppSettingsService);
 
+  appSettings$: Observable<AppSettings | null> = this.appSettingsService.appSettings$;
   metadata$: Observable<BookMetadata | null> = this.metadataCenterService.currentMetadata$;
   items: MenuItem[] | undefined;
   recommendedBooks: BookRecommendation[] = [];
   bookInSeries: Book[] = [];
   isExpanded = false;
-
+  similarBookRecommendation = false;
 
   ngOnInit(): void {
     this.items = [
@@ -74,11 +79,22 @@ export class MetadataViewerComponent implements OnInit {
       }
     ];
 
-    this.metadata$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((metadata) => {
-        if (metadata) {
-          this.getBookRecommendations(metadata.bookId);
+    this.appSettings$
+      .pipe(
+        filter(settings => settings != null),
+        take(1)
+      )
+      .subscribe(settings => {
+        this.similarBookRecommendation = settings!.similarBookRecommendation ?? false;
+        if (this.similarBookRecommendation) {
+          this.metadata$
+            .pipe(
+              filter((metadata): metadata is BookMetadata => metadata !== null),
+              take(1)
+            )
+            .subscribe(metadata => {
+              this.getBookRecommendations(metadata.bookId);
+            });
         }
       });
 

diff --git a/booklore-ui/src/app/settings/global-preferences/global-preferences.component.html b/booklore-ui/src/app/settings/global-preferences/global-preferences.component.html
@@ -30,20 +30,42 @@
 
   <p-divider></p-divider>
 
-  <p class="text-xl pb-4 pt-8">Auto Book Search
-    <i class="pi pi-info-circle text-sky-600"
-       pTooltip="If enabled, Booklore will automatically perform a metadata match/search when the book information tab is opened."
-       tooltipPosition="right"
-       style="cursor: pointer;">
-    </i>
-  </p>
-  <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
-    <p class="text-lg py-1">Enable:</p>
-    <div class="flex gap-4 justify-start">
-      <p-toggleswitch
-        [(ngModel)]="autoMetadataChecked"
-        (onChange)="onAutoMetaChange($event)"
-      />
+  <div class="flex flex-row gap-11">
+    <div>
+      <p class="text-xl pb-4 pt-8">Auto Book Search
+        <i class="pi pi-info-circle text-sky-600"
+           pTooltip="If enabled, Booklore will automatically perform a metadata match/search when the book information tab is opened."
+           tooltipPosition="right"
+           style="cursor: pointer;">
+        </i>
+      </p>
+      <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
+        <p class="text-lg py-1">Enable:</p>
+        <div class="flex gap-4 justify-start">
+          <p-toggleswitch
+            [(ngModel)]="autoMetadataChecked"
+            (onChange)="onAutoMetaChange($event)"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <p class="text-xl pb-4 pt-8">Similar Book Recommendation
+        <i class="pi pi-info-circle text-sky-600"
+           pTooltip="Enable or disable similar book recommendations entirely."
+           tooltipPosition="right"
+           style="cursor: pointer;">
+        </i>
+      </p>
+      <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
+        <p class="text-lg py-1">Enable:</p>
+        <div class="flex gap-4 justify-start">
+          <p-toggleswitch
+            [(ngModel)]="recommendationEnabled"
+            (onChange)="onToggleRecommendation($event)"
+          />
+        </div>
+      </div>
     </div>
   </div>
 

diff --git a/booklore-ui/src/app/settings/global-preferences/global-preferences.component.ts b/booklore-ui/src/app/settings/global-preferences/global-preferences.component.ts
@@ -15,6 +15,7 @@ import {BookService} from '../../book/service/book.service';
 import {AppSettings} from '../../core/model/app-settings.model';
 import {MetadataRefreshOptions} from '../../metadata/model/request/metadata-refresh-options.model';
 import {MetadataAdvancedFetchOptionsComponent} from '../../metadata/metadata-options-dialog/metadata-advanced-fetch-options/metadata-advanced-fetch-options.component';
+import {filter, take} from 'rxjs/operators';
 
 @Component({
   selector: 'app-global-preferences',
@@ -43,22 +44,28 @@ export class GlobalPreferencesComponent implements OnInit {
   selectedResolution = '250x350';
   currentMetadataOptions!: MetadataRefreshOptions;
   autoMetadataChecked = false;
+  recommendationEnabled = false;
 
   private appSettingsService = inject(AppSettingsService);
   private bookService = inject(BookService);
   private messageService = inject(MessageService);
 
   appSettings$: Observable<AppSettings | null> = this.appSettingsService.appSettings$;
 
+
   ngOnInit(): void {
-    this.appSettings$.subscribe(settings => {
-      if (settings?.coverSettings) {
+    this.appSettings$.pipe(
+      filter(settings => settings != null),
+      take(1)
+    ).subscribe(settings => {
+      if (settings.coverSettings) {
         this.selectedResolution = settings.coverSettings.resolution;
       }
-      if (settings?.metadataRefreshOptions) {
+      if (settings.metadataRefreshOptions) {
         this.currentMetadataOptions = settings.metadataRefreshOptions;
       }
-      this.autoMetadataChecked = settings?.autoBookSearch ?? false;
+      this.autoMetadataChecked = settings.autoBookSearch ?? false;
+      this.recommendationEnabled = settings.similarBookRecommendation ?? false;
     });
   }
 
@@ -72,6 +79,10 @@ export class GlobalPreferencesComponent implements OnInit {
     this.saveSetting('auto_book_search', event.checked);
   }
 
+  onToggleRecommendation(event: { checked: boolean }) {
+    this.saveSetting('similar_book_recommendation', event.checked);
+  }
+
   onMetadataSubmit(metadataRefreshOptions: MetadataRefreshOptions): void {
     this.saveSetting('quick_book_match', metadataRefreshOptions);
   }

diff --git a/booklore-ui/src/app/settings/settings.component.html b/booklore-ui/src/app/settings/settings.component.html
@@ -1,34 +1,26 @@
 <div class="card" *ngIf="userService.userData$ | async as userData">
-  <p-tabs value="0">
+  <p-tabs [(value)]="activeTab">
     <p-tablist>
-      <p-tab value="0">Book Preferences</p-tab>
+      <p-tab [value]="SettingsTab.BookReader">Book Reader</p-tab>
       <ng-container *ngIf="userData.permissions.admin">
-        <p-tab value="1">User Management</p-tab>
-      </ng-container>
-      <ng-container *ngIf="userData.permissions.admin">
-        <p-tab value="2">Email</p-tab>
-      </ng-container>
-      <ng-container *ngIf="userData.permissions.admin">
-        <p-tab value="3">Global Preferences</p-tab>
+        <p-tab [value]="SettingsTab.UserManagement">User Management</p-tab>
+        <p-tab [value]="SettingsTab.Email">Email</p-tab>
+        <p-tab [value]="SettingsTab.GlobalSettings">Global Settings</p-tab>
       </ng-container>
     </p-tablist>
 
     <p-tabpanels>
-      <p-tabpanel value="0">
+      <p-tabpanel [value]="SettingsTab.BookReader">
         <app-book-preferences></app-book-preferences>
       </p-tabpanel>
       <ng-container *ngIf="userData.permissions.admin">
-        <p-tabpanel value="1">
+        <p-tabpanel [value]="SettingsTab.UserManagement">
           <app-admin></app-admin>
         </p-tabpanel>
-      </ng-container>
-      <ng-container *ngIf="userData.permissions.admin">
-        <p-tabpanel value="2">
+        <p-tabpanel [value]="SettingsTab.Email">
           <app-email></app-email>
         </p-tabpanel>
-      </ng-container>
-      <ng-container *ngIf="userData.permissions.admin">
-        <p-tabpanel value="3">
+        <p-tabpanel [value]="SettingsTab.GlobalSettings">
           <app-global-preferences></app-global-preferences>
         </p-tabpanel>
       </ng-container>

diff --git a/booklore-ui/src/app/settings/settings.component.ts b/booklore-ui/src/app/settings/settings.component.ts
@@ -1,11 +1,20 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, OnDestroy, OnInit} from '@angular/core';
 import {Tab, TabList, TabPanel, TabPanels, Tabs} from 'primeng/tabs';
 import {BookPreferences} from './book-preferences/book-preferences.component';
 import {AdminComponent} from './admin/admin.component';
 import {UserService} from '../user.service';
 import {AsyncPipe, NgIf} from '@angular/common';
 import {EmailComponent} from './email/email.component';
 import {GlobalPreferencesComponent} from './global-preferences/global-preferences.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+
+export enum SettingsTab {
+  BookReader = 'book-reader',
+  UserManagement = 'user-management',
+  Email = 'email',
+  GlobalSettings = 'global-settings'
+}
 
 @Component({
   selector: 'app-settings',
@@ -25,8 +34,50 @@ import {GlobalPreferencesComponent} from './global-preferences/global-preference
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss'
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit, OnDestroy {
 
   protected userService = inject(UserService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  private routeSub!: Subscription;
+
+  SettingsTab = SettingsTab;
+
+  private validTabs = Object.values(SettingsTab);
+  private _activeTab: SettingsTab = SettingsTab.BookReader;
+
+  get activeTab(): SettingsTab {
+    return this._activeTab;
+  }
+
+  set activeTab(value: SettingsTab) {
+    this._activeTab = value;
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { tab: value },
+      queryParamsHandling: 'merge'
+    });
+  }
+
+  ngOnInit(): void {
+    this.routeSub = this.route.queryParams.subscribe(params => {
+      const tabParam = params['tab'];
+      if (this.validTabs.includes(tabParam)) {
+        this._activeTab = tabParam as SettingsTab;
+      } else {
+        this._activeTab = SettingsTab.BookReader;
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: { tab: this._activeTab },
+          queryParamsHandling: 'merge',
+          replaceUrl: true
+        });
+      }
+    });
+  }
 
+  ngOnDestroy(): void {
+    this.routeSub.unsubscribe();
+  }
 }