From 81f86c8ba475e5a6dd544fd01fb91276778838d4 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Wed, 5 Feb 2025 15:40:50 -0600
Subject: [PATCH] Small cleanup on UX for selecting a match

---
 .../match-series-result-item.component.html   |  36 +-
 .../match-series-result-item.component.ts     |  10 +-
 .../app/admin/license/license.component.html  | 314 +++++++++---------
 UI/Web/src/assets/langs/en.json               |   3 +-
 4 files changed, 193 insertions(+), 170 deletions(-)

diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html
index 6d0e47e9c..977e4e548 100644
--- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html
+++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html
@@ -1,4 +1,5 @@
 <ng-container *transloco="let t; read:'match-series-result-item'">
+
   <div class="d-flex p-1 clickable" (click)="selectItem()">
     <div style="width: 32px" class="me-1">
       @if (item.series.coverUrl) {
@@ -11,7 +12,7 @@
         @for(synm of item.series.synonyms; track synm; let last = $last) {
           {{synm}}
           @if (!last) {
-           <span>, </span>
+            <span>, </span>
           }
         }
       </div>
@@ -23,16 +24,27 @@
     </div>
   </div>
 
-  <div class="d-flex p-1 justify-content-between">
-    <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
-    @if ((item.series.volumeCount || 0) > 0 || (item.series.chapterCount || 0) > 0) {
-      <span class="me-1">{{t('volume-count', {num: item.series.volumeCount})}}</span>
-      <span class="me-1">{{t('chapter-count', {num: item.series.chapterCount})}}</span>
-    } @else {
-      <span class="me-1">{{t('releasing')}}</span>
-    }
+  @if (isSelected) {
+    <div class="d-flex p-1 justify-content-center">
+      <app-loading [absolute]="false" [loading]="true"></app-loading>
+      <span class="ms-2">{{t('updating-metadata-status')}}</span>
+    </div>
+  } @else {
+    <div class="d-flex p-1 justify-content-between">
+      <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
+      @if ((item.series.volumeCount || 0) > 0 || (item.series.chapterCount || 0) > 0) {
+        <span class="me-1">{{t('volume-count', {num: item.series.volumeCount})}}</span>
+        <span class="me-1">{{t('chapter-count', {num: item.series.chapterCount})}}</span>
+      } @else {
+        <span class="me-1">{{t('releasing')}}</span>
+      }
+
+      <span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
+      <span class="me-1">({{item.matchRating | translocoPercent}})</span>
+    </div>
+  }
+
+
+
 
-    <span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
-    <span class="me-1">({{item.matchRating | translocoPercent}})</span>
-  </div>
 </ng-container>
diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts
index fe482824b..4bb02f72e 100644
--- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts
+++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts
@@ -15,6 +15,7 @@ import {TranslocoPercentPipe} from "@jsverse/transloco-locale";
 import {ReadMoreComponent} from "../../shared/read-more/read-more.component";
 import {TranslocoDirective} from "@jsverse/transloco";
 import {PlusMediaFormatPipe} from "../../_pipes/plus-media-format.pipe";
+import {LoadingComponent} from "../../shared/loading/loading.component";
 
 @Component({
   selector: 'app-match-series-result-item',
@@ -24,7 +25,8 @@ import {PlusMediaFormatPipe} from "../../_pipes/plus-media-format.pipe";
     TranslocoPercentPipe,
     ReadMoreComponent,
     TranslocoDirective,
-    PlusMediaFormatPipe
+    PlusMediaFormatPipe,
+    LoadingComponent
   ],
   templateUrl: './match-series-result-item.component.html',
   styleUrl: './match-series-result-item.component.scss',
@@ -37,7 +39,13 @@ export class MatchSeriesResultItemComponent {
   @Input({required: true}) item!: ExternalSeriesMatch;
   @Output() selected: EventEmitter<ExternalSeriesMatch> = new EventEmitter();
 
+  isSelected = false;
+
   selectItem() {
+    if (this.isSelected) return;
+
+    this.isSelected = true;
+    this.cdRef.markForCheck();
     this.selected.emit(this.item);
   }
 
diff --git a/UI/Web/src/app/admin/license/license.component.html b/UI/Web/src/app/admin/license/license.component.html
index 9cfb5a27a..34a4ac196 100644
--- a/UI/Web/src/app/admin/license/license.component.html
+++ b/UI/Web/src/app/admin/license/license.component.html
@@ -6,166 +6,165 @@
 
   <div class="container-fluid">
     <p>{{t('kavita+-desc-part-1')}} <a [href]="WikiLink.KavitaPlus" target="_blank" rel="noreferrer nofollow">{{t('kavita+-desc-part-2')}}</a> {{t('kavita+-desc-part-3')}}</p>
-  </div>
 
-  <form [formGroup]="formGroup">
-    <div class="mt-2">
-      <app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode" [showEdit]="hasLicense">
-        <ng-template #titleExtra>
-          <button class="btn btn-icon btn-sm" (click)="loadLicenseInfo(true)">
-            @if (isChecking) {
-              <app-loading [loading]="isChecking" size="spinner-border-sm"></app-loading>
-            } @else if (hasLicense) {
-              <span>
+    <form [formGroup]="formGroup">
+      <div class="mt-2">
+        <app-setting-item [title]="t('title')" (editMode)="updateEditMode($event)" [isEditMode]="!isViewMode" [showEdit]="hasLicense">
+          <ng-template #titleExtra>
+            <button class="btn btn-icon btn-sm" (click)="loadLicenseInfo(true)">
+              @if (isChecking) {
+                <app-loading [loading]="isChecking" size="spinner-border-sm"></app-loading>
+              } @else if (hasLicense) {
+                <span>
                 <i class="fa-solid fa-refresh" tabindex="0" [ngbTooltip]="t('check')"></i>
               </span>
-            }
-          </button>
-        </ng-template>
-        <ng-template #view>
-          @if (hasLicense) {
-            <span class="me-1">*********</span>
-
-            @if (isChecking) {
-              <div class="spinner-border spinner-border-sm text-primary" role="status">
-                <span class="visually-hidden">{{t('loading')}}</span>
-              </div>
-            } @else {
-              @if (licenseInfo?.isActive) {
-                <i [ngbTooltip]="t('license-valid')" class="fa-solid fa-check-circle successful-validation ms-1">
-                  <span class="visually-hidden">{{t('license-valid')}}</span>
-                </i>
-              } @else {
-                <i class="error fa-solid fa-exclamation-circle ms-1" [ngbTooltip]="t('license-not-valid')">
-                  <span class="visually-hidden">{{t('license-not-valid')}}</span>
-                </i>
               }
-            }
-            @if (!isChecking && hasLicense && !licenseInfo) {
-              <div><span class="error">{{t('license-mismatch')}}</span></div>
-            }
+            </button>
+          </ng-template>
+          <ng-template #view>
+            @if (hasLicense) {
+              <span class="me-1">*********</span>
 
-          } @else {
-            {{t('no-license-key')}}
-          }
-        </ng-template>
-
-        <ng-template #edit>
-          <div class="form-group mb-3">
-            <label for="license-key">{{t('activate-license-label')}}</label>
-            <input id="license-key" type="text" class="form-control" formControlName="licenseKey" autocomplete="off"/>
-          </div>
-          <div class="form-group mb-3">
-            <label for="email">{{t('activate-email-label')}}</label>
-            <input id="email" type="email" class="form-control" formControlName="email" autocomplete="off"/>
-          </div>
-          <div class="form-group mb-3">
-            <label for="discordId">{{t('activate-discordId-label')}}</label>
-            <i class="fa fa-circle-info ms-1" aria-hidden="true" [ngbTooltip]="t('activate-discordId-tooltip')"></i>
-            <a class="ms-1" [href]="WikiLink.KavitaPlusDiscordId" target="_blank" rel="noopener noreferrer">{{t('help-label')}}</a>
-            <input id="discordId" type="text" class="form-control" formControlName="discordId" autocomplete="off" [class.is-invalid]="formGroup.get('discordId')?.invalid && formGroup.get('discordId')?.touched"/>
-            @if (formGroup.dirty || !formGroup.untouched) {
-              <div id="inviteForm-validations" class="invalid-feedback">
-                @if (formGroup.get('discordId')?.errors?.pattern) {
-                  <div>
-                    {{t('discord-validation')}}
-                  </div>
+              @if (isChecking) {
+                <div class="spinner-border spinner-border-sm text-primary" role="status">
+                  <span class="visually-hidden">{{t('loading')}}</span>
+                </div>
+              } @else {
+                @if (licenseInfo?.isActive) {
+                  <i [ngbTooltip]="t('license-valid')" class="fa-solid fa-check-circle successful-validation ms-1">
+                    <span class="visually-hidden">{{t('license-valid')}}</span>
+                  </i>
+                } @else {
+                  <i class="error fa-solid fa-exclamation-circle ms-1" [ngbTooltip]="t('license-not-valid')">
+                    <span class="visually-hidden">{{t('license-not-valid')}}</span>
+                  </i>
                 }
-              </div>
-            }
-          </div>
-
-          <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
-<!--            <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"-->
-<!--                    (click)="deleteLicense()">-->
-<!--              {{t('activate-delete')}}-->
-<!--            </button>-->
-            <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"
-                    [ngbTooltip]="t('activate-reset-tooltip')"
-                    [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="resetLicense()">
-              {{t('activate-reset')}}
-            </button>
-            <button type="submit" class="flex-fill btn btn-primary" aria-describedby="license-key-header"
-                    [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="saveForm()">
-              @if (!isSaving) {
-                <span>{{t('activate-save')}}</span>
+              }
+              @if (!isChecking && hasLicense && !licenseInfo) {
+                <div><span class="error">{{t('license-mismatch')}}</span></div>
               }
 
-              <app-loading [loading]="isSaving" size="spinner-border-sm"></app-loading>
-            </button>
-          </div>
-
-        </ng-template>
-
-        <ng-template #titleActions>
-          @if (hasLicense) {
-            @if (licenseInfo?.isActive) {
-              <a class="btn btn-primary-outline btn-sm me-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
             } @else {
-              <a class="btn btn-primary-outline btn-sm me-1"
-                 [ngbTooltip]="t('invalid-license-tooltip')"
-                 href="mailto:kavitareader@gmail.com?subject=Kavita+Subscription+Renewal&body=Description%3A%0D%0A%0D%0ALicense%20Key%3A%0D%0A%0D%0AYour%20Email%3A"
-              >{{t('renew')}}</a>
+              {{t('no-license-key')}}
             }
-          } @else {
-            <a class="btn btn-secondary btn-sm me-1" [href]="buyLink" target="_blank" rel="noreferrer nofollow">{{t('buy')}}</a>
-            <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? t('activate') : t('cancel')}}</button>
-          }
-        </ng-template>
-      </app-setting-item>
-    </div>
-  </form>
+          </ng-template>
 
+          <ng-template #edit>
+            <div class="form-group mb-3">
+              <label for="license-key">{{t('activate-license-label')}}</label>
+              <input id="license-key" type="text" class="form-control" formControlName="licenseKey" autocomplete="off"/>
+            </div>
+            <div class="form-group mb-3">
+              <label for="email">{{t('activate-email-label')}}</label>
+              <input id="email" type="email" class="form-control" formControlName="email" autocomplete="off"/>
+            </div>
+            <div class="form-group mb-3">
+              <label for="discordId">{{t('activate-discordId-label')}}</label>
+              <i class="fa fa-circle-info ms-1" aria-hidden="true" [ngbTooltip]="t('activate-discordId-tooltip')"></i>
+              <a class="ms-1" [href]="WikiLink.KavitaPlusDiscordId" target="_blank" rel="noopener noreferrer">{{t('help-label')}}</a>
+              <input id="discordId" type="text" class="form-control" formControlName="discordId" autocomplete="off" [class.is-invalid]="formGroup.get('discordId')?.invalid && formGroup.get('discordId')?.touched"/>
+              @if (formGroup.dirty || !formGroup.untouched) {
+                <div id="inviteForm-validations" class="invalid-feedback">
+                  @if (formGroup.get('discordId')?.errors?.pattern) {
+                    <div>
+                      {{t('discord-validation')}}
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+
+            <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
+              <!--            <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"-->
+              <!--                    (click)="deleteLicense()">-->
+              <!--              {{t('activate-delete')}}-->
+              <!--            </button>-->
+              <button type="button" class="flex-fill btn btn-danger me-1" aria-describedby="license-key-header"
+                      [ngbTooltip]="t('activate-reset-tooltip')"
+                      [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="resetLicense()">
+                {{t('activate-reset')}}
+              </button>
+              <button type="submit" class="flex-fill btn btn-primary" aria-describedby="license-key-header"
+                      [disabled]="!formGroup.get('email')?.value || !formGroup.get('licenseKey')?.value" (click)="saveForm()">
+                @if (!isSaving) {
+                  <span>{{t('activate-save')}}</span>
+                }
 
+                <app-loading [loading]="isSaving" size="spinner-border-sm"></app-loading>
+              </button>
+            </div>
 
-  @if (hasLicense && licenseInfo) {
-    <div class="setting-section-break"></div>
+          </ng-template>
 
-    <div class="row g-0 mt-3">
-      <h3 class="container-fluid">{{t('info-title')}}</h3>
-      <div class="mb-2 col-md-6 col-sm-12">
-        <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('license-active-label')">
-          <ng-template #view>
-            @if (isChecking) {
-              {{null | defaultValue}}
+          <ng-template #titleActions>
+            @if (hasLicense) {
+              @if (licenseInfo?.isActive) {
+                <a class="btn btn-primary-outline btn-sm me-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
+              } @else {
+                <a class="btn btn-primary-outline btn-sm me-1"
+                   [ngbTooltip]="t('invalid-license-tooltip')"
+                   href="mailto:kavitareader@gmail.com?subject=Kavita+Subscription+Renewal&body=Description%3A%0D%0A%0D%0ALicense%20Key%3A%0D%0A%0D%0AYour%20Email%3A"
+                >{{t('renew')}}</a>
+              }
             } @else {
-              <i class="fas {{licenseInfo.isActive ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
-                <span class="visually-hidden">{{licenseInfo.isActive ? t('valid') : t('invalid')}]</span>
-              </i>
+              <a class="btn btn-secondary btn-sm me-1" [href]="buyLink" target="_blank" rel="noreferrer nofollow">{{t('buy')}}</a>
+              <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? t('activate') : t('cancel')}}</button>
             }
           </ng-template>
         </app-setting-item>
       </div>
+    </form>
 
-      <div class="mb-2 col-md-6 col-sm-12">
-        <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('supported-version-label')">
-          <ng-template #view>
-            <i class="fas {{licenseInfo.isValidVersion ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
-              <span class="visually-hidden">{{isValidVersion ? t('valid') : t('invalid')}]</span>
-            </i>
-          </ng-template>
-        </app-setting-item>
-      </div>
 
-      <div class="mb-2 col-md-6 col-sm-12">
-        <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('expiration-label')">
-          <ng-template #view>
-            {{licenseInfo.expirationDate | utcToLocalTime | defaultValue}}
-          </ng-template>
-        </app-setting-item>
-      </div>
 
-      <div class="mb-2 col-md-6 col-sm-12">
-        <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('total-subbed-months-label')">
-          <ng-template #view>
-            {{licenseInfo.totalMonthsSubbed | number}}
-          </ng-template>
-        </app-setting-item>
-      </div>
+    @if (hasLicense && licenseInfo) {
+      <div class="setting-section-break"></div>
 
-      <div class="col-md-6 col-sm-12">
-        <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('email-label')">
-          <ng-template #view>
+      <div class="row g-0 mt-3">
+        <h3>{{t('info-title')}}</h3>
+        <div class="mb-2 col-md-6 col-sm-12">
+          <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('license-active-label')">
+            <ng-template #view>
+              @if (isChecking) {
+                {{null | defaultValue}}
+              } @else {
+                <i class="fas {{licenseInfo.isActive ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
+                  <span class="visually-hidden">{{licenseInfo.isActive ? t('valid') : t('invalid')}]</span>
+                </i>
+              }
+            </ng-template>
+          </app-setting-item>
+        </div>
+
+        <div class="mb-2 col-md-6 col-sm-12">
+          <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('supported-version-label')">
+            <ng-template #view>
+              <i class="fas {{licenseInfo.isValidVersion ? 'fa-check-circle' : 'fa-circle-xmark error'}}">
+                <span class="visually-hidden">{{isValidVersion ? t('valid') : t('invalid')}]</span>
+              </i>
+            </ng-template>
+          </app-setting-item>
+        </div>
+
+        <div class="mb-2 col-md-6 col-sm-12">
+          <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('expiration-label')">
+            <ng-template #view>
+              {{licenseInfo.expirationDate | utcToLocalTime | defaultValue}}
+            </ng-template>
+          </app-setting-item>
+        </div>
+
+        <div class="mb-2 col-md-6 col-sm-12">
+          <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('total-subbed-months-label')">
+            <ng-template #view>
+              {{licenseInfo.totalMonthsSubbed | number}}
+            </ng-template>
+          </app-setting-item>
+        </div>
+
+        <div class="col-md-6 col-sm-12">
+          <app-setting-item [canEdit]="false" [showEdit]="false" [title]="t('email-label')">
+            <ng-template #view>
             <span (click)="toggleEmailShow()" class="col-12 clickable">
               @if (showEmail) {
                 {{licenseInfo.registeredEmail}}
@@ -173,28 +172,31 @@ <h3 class="container-fluid">{{t('info-title')}}</h3>
                 ***************
               }
             </span>
-          </ng-template>
-        </app-setting-item>
-      </div>
+            </ng-template>
+          </app-setting-item>
+        </div>
 
-      <div class="setting-section-break"></div>
+        <div class="setting-section-break"></div>
 
-      <!-- Actions around license -->
-      <h3 class="container-fluid">{{t('actions-title')}}</h3>
+        <!-- Actions around license -->
+        <h3>{{t('actions-title')}}</h3>
 
-      <div class="mt-2 mb-2">
-        <app-setting-button [subtitle]="t('delete-tooltip')">
-          <button type="button" class="flex-fill btn btn-danger mt-1" aria-describedby="license-key-header" (click)="deleteLicense()">
-            {{t('activate-delete')}}
-          </button>
-        </app-setting-button>
+        <div class="mt-2 mb-2">
+          <app-setting-button [subtitle]="t('delete-tooltip')">
+            <button type="button" class="flex-fill btn btn-danger mt-1" aria-describedby="license-key-header" (click)="deleteLicense()">
+              {{t('activate-delete')}}
+            </button>
+          </app-setting-button>
+        </div>
+
+        <div class="mt-2 mb-2">
+          <app-setting-button [subtitle]="t('manage-tooltip')">
+            <a class="btn btn-primary btn-sm mt-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
+          </app-setting-button>
+        </div>
       </div>
+    }
+  </div>
+
 
-      <div class="mt-2 mb-2">
-        <app-setting-button [subtitle]="t('manage-tooltip')">
-          <a class="btn btn-primary btn-sm mt-1" [href]="manageLink" target="_blank" rel="noreferrer nofollow">{{t('manage')}}</a>
-        </app-setting-button>
-      </div>
-    </div>
-  }
 </ng-container>
diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json
index d9dbc76a5..cf2feec71 100644
--- a/UI/Web/src/assets/langs/en.json
+++ b/UI/Web/src/assets/langs/en.json
@@ -981,7 +981,8 @@
         "volume-count": "{{server-stats.volume-count}}",
         "chapter-count": "{{common.chapter-count}}",
         "releasing": "Releasing",
-        "details": "View page"
+        "details": "View page",
+        "updating-metadata-status": "Updating Metadata"
     },
 
     "metadata-fields": {