Add IMDb movie importer feature and unify header

Introduces a new movie importer feature allowing admins to search and import movies from IMDb, including new components for search, result display, and error handling. Replaces the schedule header with a reusable menu header component. Updates routing, navigation, and HTTP service to support the new importer. Adds a poster placeholder image and improves poster error handling.

src/app/movie-importer/movie-importer.component.css

@@ -0,0 +1,3 @@
+:host {
+  min-height: 100%;
+}

src/app/movie-importer/movie-importer.component.html

@@ -0,0 +1,52 @@
+<app-menu-header title="Film aus IMDb importieren" icon="cloud_download"></app-menu-header>
+
+<div class="w-6/10 m-auto my-20">
+  <form class="movie-search-form w-full" (ngSubmit)="DoSubmit()">
+    <div class="flex items-center space-x-4">
+      <mat-form-field class="w-full" subscriptSizing="dynamic">
+        <mat-label>Film online suchen</mat-label>
+        <input class="w-full" type="text" matInput [formControl]="formControl">
+        @if (formControl.hasError('noResults')) {
+          <mat-error>Keine Suchergebnisse gefunden</mat-error>
+        }
+      </mat-form-field>
+      <button matFab [disabled]="!formControl.value?.trim()?.length || (loadingService.loading$ | async)" type="submit">
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+    </div>
+  </form>
+
+  @if (search_query.length > 0 && !isSearching) {
+    <div class="search-results my-20">
+
+      @if (movies.length > 0) {
+
+        <!-- 1. Ergebnis -->
+        <app-movie-import-search-info [movie]="movies[0]" class="py-3"></app-movie-import-search-info>
+
+        @if (movies.length > 1 && !showAll) {
+          <div class="text-blue-500 cursor-pointer mt-2 w-fit" (click)="toggleShowAll()">
+            {{ movies.length - 1 }} weitere Suchergebnisse anzeigen
+          </div>
+        }
+
+        <!-- Weitere Ergebnisse -->
+        @if (showAll) {
+          @for (movie of movies.slice(1); track movie.imdbID) {
+            <app-movie-import-search-info [movie]="movie" class="py-3"></app-movie-import-search-info>
+          }
+          <div class="text-blue-500 cursor-pointer mt-20 mb-30 w-fit" (click)="toggleShowAll()">
+            Weitere Suchergebnisse ausblenden
+          </div>
+        }
+      }
+
+      <!-- Keine Ergebnisse -->
+      @else {
+        <app-movie-import-no-search-result [search]="search_query"></app-movie-import-no-search-result>
+      }
+
+    </div>
+  }
+</div>
+

src/app/movie-importer/movie-importer.component.ts

@@ -0,0 +1,58 @@
+import { LoadingService } from './../loading.service';
+import { Component, inject } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { catchError, finalize, of, tap } from 'rxjs';
+import { HttpService } from '../http.service';
+import { OmdbMovie } from '@infinimotion/model-frontend';
+
+@Component({
+  selector: 'app-movie-importer',
+  standalone: false,
+  templateUrl: './movie-importer.component.html',
+  styleUrl: './movie-importer.component.css'
+})
+export class MovieImporterComponent {
+  formControl = new FormControl('')
+
+  movies: OmdbMovie[] = [];
+  search_query: string = '';
+  showAll = false;
+  isSearching = false;
+
+  private httpService = inject(HttpService)
+  public loadingService = inject(LoadingService)
+
+  DoSubmit() {
+    this.showAll = false;
+    this.searchForMovies();
+  }
+
+  searchForMovies() {
+    this.search_query = this.formControl.value?.trim() || '';
+    if (this.search_query?.length == 0) return;
+
+    this.isSearching = true;
+    this.formControl.disable();
+    this.loadingService.show();
+
+    this.httpService.searchMovie(this.search_query).pipe(
+      tap(movies => {
+        this.movies = movies.search || [] ;
+        this.loadingService.hide();
+      }),
+      catchError(err => {
+        this.loadingService.showError(err);
+        console.error('Fehler bei der Suchen', err);
+        return of([]);
+      }),
+      finalize(() => {
+        this.isSearching = false;
+        this.formControl.enable();
+      })
+    ).subscribe();
+  }
+
+  toggleShowAll() {
+    this.showAll = !this.showAll;
+  }
+}