diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock index f823db1..e91d1dd 100644 --- a/mediarepo-ui/src-tauri/Cargo.lock +++ b/mediarepo-ui/src-tauri/Cargo.lock @@ -1581,7 +1581,7 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f" [[package]] name = "mediarepo-api" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=476b9d152457f78c73f6f6a36c2421cbce9c9194#476b9d152457f78c73f6f6a36c2421cbce9c9194" +source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=c944cf5d770ac895bd01464c92d41005055c0580#c944cf5d770ac895bd01464c92d41005055c0580" dependencies = [ "async-trait", "chrono", diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml index 2ce7fe9..167e9c3 100644 --- a/mediarepo-ui/src-tauri/Cargo.toml +++ b/mediarepo-ui/src-tauri/Cargo.toml @@ -30,7 +30,7 @@ features = ["env-filter"] [dependencies.mediarepo-api] git = "https://github.com/Trivernis/mediarepo-api.git" -rev = "476b9d152457f78c73f6f6a36c2421cbce9c9194" +rev = "c944cf5d770ac895bd01464c92d41005055c0580" features = ["tauri-plugin"] [features] diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index f048369..a59062f 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -37,6 +37,9 @@ import {MatDialogModule} from "@angular/material/dialog"; import {MatSelectModule} from "@angular/material/select"; import { FileGalleryComponent } from './components/file-gallery/file-gallery.component'; import { FileGalleryEntryComponent } from './components/file-gallery/file-gallery-entry/file-gallery-entry.component'; +import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; +import {BlockUIModule} from "primeng/blockui"; +import {PanelModule} from "primeng/panel"; @NgModule({ declarations: [ @@ -80,6 +83,9 @@ import { FileGalleryEntryComponent } from './components/file-gallery/file-galler MatRippleModule, MatDialogModule, MatSelectModule, + MatProgressSpinnerModule, + BlockUIModule, + PanelModule, ], providers: [], bootstrap: [AppComponent] diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html index 1d28185..cf26cee 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html @@ -1,3 +1,4 @@
+
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss index 8c1208b..3cf660c 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss @@ -1,5 +1,6 @@ img { max-height: 100%; + max-width: 100%; width: auto; margin: auto; } diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html index e83642b..d119e9d 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html @@ -2,13 +2,16 @@ -
+
+
- +
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts index 5a433c4..a3f13f8 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts @@ -67,10 +67,13 @@ export class FileGalleryComponent implements OnChanges, OnInit { } public async ngOnChanges(changes: SimpleChanges): Promise { - this.entries = this.files.map(f => new Selectable(f, f == this.selectedFile?.data)); + this.entries = this.files.map(f => new Selectable(f, f.hash == this.selectedFile?.data.hash)); + const selectedIndex = this.files.findIndex(f => f.hash === this.selectedFile?.data.hash); - if (!this.selectedFile || this.files.indexOf(this.selectedFile.data) < 0) { + if (!this.selectedFile || selectedIndex < 0) { await this.onEntrySelect(this.getPreselectedEntry() ?? this.entries[0]) + } else { + await this.onEntrySelect(this.entries[selectedIndex]) } } diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.html b/mediarepo-ui/src/app/components/file-search/file-search.component.html index fbb4360..4e52520 100644 --- a/mediarepo-ui/src/app/components/file-search/file-search.component.html +++ b/mediarepo-ui/src/app/components/file-search/file-search.component.html @@ -5,7 +5,7 @@ (click)="removeSearchTag(tag)">{{tag.getNormalizedTag()}}
- diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/file-search/file-search.component.ts index 04a56a6..418167c 100644 --- a/mediarepo-ui/src/app/components/file-search/file-search.component.ts +++ b/mediarepo-ui/src/app/components/file-search/file-search.component.ts @@ -1,7 +1,7 @@ import { AfterViewChecked, Component, - ElementRef, + ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; import {TagService} from "../../services/tag/tag.service"; @@ -14,6 +14,7 @@ import {TagQuery} from "../../models/TagQuery"; import {SortKey} from "../../models/SortKey"; import {MatDialog} from "@angular/material/dialog"; import {FilterDialogComponent} from "./filter-dialog/filter-dialog.component"; +import {ErrorBrokerService} from "../../services/error-broker/error-broker.service"; @Component({ selector: 'app-file-search', @@ -30,12 +31,16 @@ export class FileSearchComponent implements AfterViewChecked { public formControl = new FormControl(); public searchTags: TagQuery[] = []; public suggestionTags: Observable; + + @Output() searchStartEvent = new EventEmitter(); + @Output() searchEndEvent = new EventEmitter(); + private allTags: string[] = []; @ViewChild("tagInput") tagInput!: ElementRef; @ViewChild("tagInputList") inputList!: ElementRef; - constructor(private tagService: TagService, private fileService: FileService, public dialog: MatDialog) { + constructor(private errorBroker: ErrorBrokerService, private tagService: TagService, private fileService: FileService, public dialog: MatDialog) { this.tagService.tags.subscribe( (tag) => this.allTags = tag.map(t => t.getNormalizedOutput())); @@ -48,7 +53,13 @@ export class FileSearchComponent implements AfterViewChecked { } public async searchForFiles() { - await this.fileService.findFiles(this.searchTags, this.sortExpression); + this.searchStartEvent.emit(); + try { + await this.fileService.findFiles(this.searchTags, this.sortExpression); + } catch (err) { + this.errorBroker.showError(err); + } + this.searchEndEvent.emit(); } public addSearchTag(tag: string) { diff --git a/mediarepo-ui/src/app/models/SortKey.ts b/mediarepo-ui/src/app/models/SortKey.ts index 0616dbd..6d8c9da 100644 --- a/mediarepo-ui/src/app/models/SortKey.ts +++ b/mediarepo-ui/src/app/models/SortKey.ts @@ -18,7 +18,7 @@ export class SortKey { public toBackendType(): any { if (this.sortType == "Namespace") { - return {"Namespace": {direction: this.sortDirection, tag: this.namespaceName}} + return {"Namespace": {direction: this.sortDirection, name: this.namespaceName}} } else { let returnObj: any = {}; returnObj[this.sortType] = this.sortDirection; diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html index f24ef21..ed3f260 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html +++ b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html @@ -2,7 +2,8 @@
- +

Selection Tags

@@ -16,13 +17,15 @@
- - - +
+ +
+ +
diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss index 1e0f5c4..fc6b9c1 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss +++ b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss @@ -53,3 +53,21 @@ app-file-gallery { height: 100%; width: 100%; } + +.spinner-overlay { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 998; + overflow: hidden; + display: flex; + backdrop-filter: blur(5px); + + mat-progress-spinner { + z-index: 999; + margin: auto; + } +} diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts index 4c746e8..3154c85 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts +++ b/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts @@ -21,6 +21,7 @@ export class SearchPageComponent implements OnInit { private openingLightbox = false; showGallery = false; preselectedFile: File | undefined; + contentLoading = false; @ViewChild('filesearch') fileSearch!: FileSearchComponent; @@ -34,7 +35,9 @@ export class SearchPageComponent implements OnInit { async ngOnInit() { this.fileService.displayedFiles.subscribe((files) => this.files = files); + this.contentLoading = true; await this.fileService.findFiles([], [new SortKey("FileImportedTime", "Ascending", undefined)]) + this.contentLoading = false; } async onFileMultiSelect(files: File[]) {