Small cleanup on UX for selecting a match

Kareadita · Feb 5, 2025 · 81f86c8 · 81f86c8
1 parent 587f858
commit 81f86c8
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 170 deletions.
diff --git a/...b/src/app/_single-module/match-series-result-item/match-series-result-item.component.html b/...b/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
@@ -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);
   }