Small Bugfixes (#2414)

UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.html

@@ -99,13 +99,9 @@
         <li [ngbNavItem]="tabs[TabID.Cover]" [disabled]="(isAdmin$ | async) === false">
           <a ngbNavLink>{{t(tabs[TabID.Cover].title)}}</a>
           <ng-template ngbNavContent>
-            <app-cover-image-chooser [(imageUrls)]="imageUrls"
-                                     [showReset]="chapter.coverImageLocked"
-                                     [showApplyButton]="true"
-                                     (applyCover)="applyCoverImage($event)"
-                                     (resetCover)="resetCoverImage()"
-            >
-            </app-cover-image-chooser>
+            <app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateCoverImageIndex($event)"
+                                     (selectedBase64Url)="applyCoverImage($event)" [showReset]="chapter.coverImageLocked"
+                                     (resetClicked)="resetCoverImage()"></app-cover-image-chooser>
           </ng-template>
         </li>
 

UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts

@@ -206,6 +206,11 @@ export class CardDetailDrawerComponent implements OnInit {
     this.uploadService.updateChapterCoverImage(this.chapter.id, coverUrl).subscribe(() => {});
   }
 
+  updateCoverImageIndex(selectedIndex: number) {
+    if (selectedIndex <= 0) return;
+    this.applyCoverImage(this.imageUrls[selectedIndex]);
+  }
+
   resetCoverImage() {
     this.uploadService.resetChapterCoverLock(this.chapter.id).subscribe(() => {
       this.toastr.info(translate('toasts.regen-cover'));

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html

@@ -31,7 +31,7 @@
               <div class="input-group col-auto me-md-2" style="width: 83%">
                 <label class="input-group-text" for="load-image">{{t('url-label')}}</label>
                 <input type="text" autofocus autocomplete="off" class="form-control" formControlName="coverImageUrl" placeholder="https://" id="load-image" class="form-control">
-                <button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImage(); mode='all';" [disabled]="(form.get('coverImageUrl')?.value).length === 0">
+                <button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImageFromUrl(); mode='all';" [disabled]="(form.get('coverImageUrl')?.value).length === 0">
                   {{t('load')}}
                 </button>
               </div>

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts

@@ -1,7 +1,7 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, DestroyRef,
+  Component,
   EventEmitter,
   inject,
   Inject,
@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {NgxFileDropEntry, FileSystemFileEntry, NgxFileDropModule} from 'ngx-file-drop';
-import { fromEvent, Subject } from 'rxjs';
+import { fromEvent } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { ToastrService } from 'ngx-toastr';
 import { ImageService } from 'src/app/_services/image.service';
@@ -37,7 +37,6 @@ import {translate, TranslocoModule} from "@ngneat/transloco";
 })
 export class CoverImageChooserComponent implements OnInit {
 
-  private readonly destroyRef = inject(DestroyRef);
   private readonly cdRef = inject(ChangeDetectorRef);
   public readonly imageService = inject(ImageService);
   public readonly fb = inject(FormBuilder);
@@ -84,8 +83,7 @@ export class CoverImageChooserComponent implements OnInit {
   appliedIndex: number = 0;
   form!: FormGroup;
   files: NgxFileDropEntry[] = [];
-  acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp'].join(',');
-
+  acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif'].join(',');
   mode: 'file' | 'url' | 'all' = 'all';
 
   constructor(@Inject(DOCUMENT) private document: Document) { }
@@ -182,6 +180,25 @@ export class CoverImageChooserComponent implements OnInit {
     });
   }
 
+  loadImageFromUrl(url?: string) {
+    url = url || this.form.get('coverImageUrl')?.value.trim();
+    if (!url || url === '') return;
+
+    this.uploadService.uploadByUrl(url).subscribe(filename => {
+      const img = new Image();
+      img.crossOrigin = 'Anonymous';
+      img.src = this.imageService.getCoverUploadImage(filename);
+      img.onload = (e) => this.handleUrlImageAdd(img);
+      img.onerror = (e) => {
+        this.toastr.error(translate('errors.rejected-cover-upload'));
+        this.form.get('coverImageUrl')?.setValue('');
+        this.cdRef.markForCheck();
+      };
+      this.form.get('coverImageUrl')?.setValue('');
+      this.cdRef.markForCheck();
+    });
+  }
+
 
 
   changeMode(mode: 'url') {
@@ -239,12 +256,6 @@ export class CoverImageChooserComponent implements OnInit {
     });
   }
 
-  public fileOver(event: any){
-  }
-
-  public fileLeave(event: any){
-  }
-
   reset() {
     this.resetClicked.emit();
     this.selectedIndex = -1;
@@ -275,4 +286,6 @@ export class CoverImageChooserComponent implements OnInit {
     });
   }
 
+  protected fileOver(event: any){}
+  protected fileLeave(event: any){}
 }