Polishing and code clean-up

frontend/src/app/components/map-game-dialog/map-game-dialog.component.html

@@ -3,13 +3,28 @@
   <form fxLayout="column" fxLayoutAlign="space-evenly stretch">
 
     <p>Path: {{path}}</p>
+
     <mat-form-field>
-      <input matInput type="text" placeholder="IGDB Slug" [formControl]="newSlugInput" [value]="currentSlug"/>
+      <div fxLayout="row">
+        <input type="text" placeholder="IGDB Slug" matInput [matAutocomplete]="igdbSlugAutocomplete" [(ngModel)]="slug" (ngModelChangeDebounced)="loadSuggestions()" [ngModelOptions]="{standalone: true}">
+        <mat-spinner *ngIf="suggestionsLoading" [diameter]="16"></mat-spinner>
+      </div>
+
+      <mat-autocomplete #igdbSlugAutocomplete="matAutocomplete">
+        <mat-option *ngFor="let suggestion of autocompleteSuggestions" [value]="suggestion.slug">
+          {{suggestion.title}} ({{getFullYearFromTimestamp(suggestion.releaseDate)}})
+        </mat-option>
+      </mat-autocomplete>
     </mat-form-field>
 
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-raised-button [mat-dialog-close]="false" color="accent">Cancel</button>
-  <button mat-raised-button (click)="submit()" [disabled]="newSlugInput?.value?.length < 1" color="primary">OK</button>
+  <button mat-raised-button [mat-dialog-close]="false" color="accent" [disabled]="submitLoading">Cancel</button>
+  <button mat-raised-button (click)="submit()" [disabled]="slug.length < 1 || submitLoading" color="primary">
+    <span *ngIf="!submitLoading">OK</span>
+    <div *ngIf="submitLoading" fxLayout="column" fxLayoutAlign="center center" style="height: 36px;">
+      <mat-spinner [diameter]="24"></mat-spinner>
+    </div>
+  </button>
 </mat-dialog-actions>

frontend/src/app/components/map-game-dialog/map-game-dialog.component.ts

@@ -1,8 +1,10 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {FormBuilder, FormControl} from "@angular/forms";
 import {LibraryManagementService} from "../../services/library-management.service";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {PathToSlugDto} from "../../models/dtos/PathToSlugDto";
+import {DialogService} from "../../services/dialog.service";
+import {ApiErrorResponse} from "../../models/dtos/ApiErrorResponse";
+import {AutocompleteSuggestionDto} from "../../models/dtos/AutocompleteSuggestionDto";
 
 @Component({
   selector: 'app-map-game-dialog',
@@ -12,26 +14,71 @@ import {PathToSlugDto} from "../../models/dtos/PathToSlugDto";
 export class MapGameDialogComponent implements OnInit {
 
   path: string;
-  currentSlug?: string;
-  newSlugInput: FormControl;
+  slug: string;
 
-  constructor(private fb: FormBuilder,
-              private libraryManagementService: LibraryManagementService,
+  autocompleteSuggestions: AutocompleteSuggestionDto[] = [];
+
+  submitLoading: boolean = false;
+  suggestionsLoading: boolean = false;
+
+  constructor(private libraryManagementService: LibraryManagementService,
+              private dialogService: DialogService,
               public dialogRef: MatDialogRef<MapGameDialogComponent>,
               @Inject(MAT_DIALOG_DATA) data: any) {
     this.path = data.path;
-    this.currentSlug = data.slug;
-    this.newSlugInput = new FormControl(this.currentSlug);
+    this.slug = data.slug ?? '';
   }
 
   ngOnInit() {
+    this.loadInitialSuggestions();
   }
 
   submit(): void {
-    this.libraryManagementService.mapGame(new PathToSlugDto(this.newSlugInput.value, this.path)).subscribe({
+    this.submitLoading = true;
+    this.libraryManagementService.mapGame(new PathToSlugDto(this.slug, this.path)).subscribe({
         next: () => this.dialogRef.close(true),
-        error: () => this.dialogRef.close(false)
+        error: (error: ApiErrorResponse) => {
+          this.dialogRef.close(false);
+          this.dialogService.showErrorDialog(error.error.message);
+        }
       }
     )
   }
+
+  loadInitialSuggestions(): void {
+    this.suggestionsLoading = true;
+
+    // Extract the last path element (folder name / file name)
+    let extractedTitleFromPath: string = this.path.match(/([^\\/]*)[\\/]*$/)![1];
+    // Match it until the first special characters
+    extractedTitleFromPath = extractedTitleFromPath.match(/^[a-zA-Z0-9:\- ]+/)![0];
+
+    if(extractedTitleFromPath == null) {
+      this.suggestionsLoading = false;
+      return;
+    }
+
+    this.libraryManagementService.getAutocompleteSuggestions(extractedTitleFromPath, 10).subscribe({
+      next: suggestions => {
+        this.autocompleteSuggestions = suggestions;
+        this.suggestionsLoading = false;
+      },
+      error: () => this.suggestionsLoading = false
+    })
+  }
+
+  loadSuggestions(): void {
+    this.suggestionsLoading = true;
+    this.libraryManagementService.getAutocompleteSuggestions(this.slug, 50).subscribe({
+      next: suggestions => {
+        this.autocompleteSuggestions = suggestions;
+        this.suggestionsLoading = false;
+      },
+      error: () => this.suggestionsLoading = false
+    })
+  }
+
+  getFullYearFromTimestamp(timestamp: number): number {
+    return new Date(timestamp).getFullYear();
+  }
 }