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.
This commit is contained in:
2025-11-07 01:57:42 +01:00
parent bd7a0ed9f1
commit 4f5a8e9661
25 changed files with 338 additions and 42 deletions

View File

@@ -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>