diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html index 8c83179..6c677c9 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html @@ -3,7 +3,7 @@ + (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);" [tagsLoading]="this.tagsLoading"> diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts index ff3a8d9..d052a88 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts @@ -42,6 +42,7 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges { public allTags: Tag[] = []; public files: File[] = []; public tagsOfSelection: Tag[] = []; + public tagsLoading = false; constructor(private repoService: RepositoryService, private tagService: TagService) { this.repoService.selectedRepository.subscribe( @@ -75,18 +76,22 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges { } async loadTagsForDisplayedFiles() { + this.tagsLoading = true; this.tagsOfFiles = await this.tagService.getTagsForFiles( this.files.map(f => f.cd)); this.showAllTagsFallback(); + this.tagsLoading = false; } async showFileDetails(files: File[]) { + this.tagsLoading = true; this.tagsOfSelection = await this.tagService.getTagsForFiles( files.map(f => f.cd)); this.tagsOfSelection = this.tagsOfSelection.sort( (a, b) => a.getNormalizedOutput() .localeCompare(b.getNormalizedOutput())); this.tags = this.tagsOfSelection; + this.tagsLoading = false; } private async refreshFileSelection() { diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html index b058cac..be372c1 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html @@ -5,7 +5,7 @@ [selectedFiles]="this.selectedFiles"> - + diff --git a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss b/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss index e5b12de..b5bef4e 100644 --- a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss +++ b/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss @@ -15,12 +15,11 @@ } .busy-indicator-overlay.blur { - background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); } .busy-indicator-overlay.darken { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, 0.5); } ::ng-deep app-busy-indicator { diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html index 743d47d..0644be9 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html @@ -3,16 +3,16 @@

File Metadata

-
- +
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts index c5175ce..733385d 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts @@ -18,24 +18,31 @@ export class FileMetadataComponent implements OnInit, OnChanges { @Input() file!: File; public fileMetadata: FileMetadata | undefined; + public loading = false; constructor(private fileService: FileService) { } public async ngOnInit() { + this.loading = true; this.fileMetadata = await this.fileService.getFileMetadata(this.file.id); + this.loading = false; } public async ngOnChanges(changes:SimpleChanges) { if (changes["file"] && (!this.fileMetadata || this.fileMetadata.file_id != this.file.id)) { + this.loading = true; this.fileMetadata = await this.fileService.getFileMetadata(this.file.id); + this.loading = false; } } public async saveFileName(name: string) { + this.loading = true; const newFile = await this.fileService.updateFileName(this.file.id, name); if (this.fileMetadata) { this.fileMetadata.name = newFile.name; } + this.loading = false; } } diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html index 7847689..8183620 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html @@ -39,6 +39,7 @@ + diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss index fc69ec7..3d055e9 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss @@ -119,3 +119,16 @@ mat-divider { margin: auto; } } + +.file-tag-list { + position: relative; +} + +app-busy-indicator { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 99; +} diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts index 8da1fc1..4a496d5 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts @@ -37,6 +37,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit { @Input() availableTags: Tag[] = []; @Input() contextTags: Tag[] = []; @Input() state!: TabState; + @Input() tagsLoading = false; @Output() searchStartEvent = new EventEmitter(); @Output() searchEndEvent = new EventEmitter(); diff --git a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html index 5c77125..c72c883 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html +++ b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html @@ -33,5 +33,5 @@ - + diff --git a/mediarepo-ui/src/polyfills.ts b/mediarepo-ui/src/polyfills.ts index 9295036..48d7f58 100644 --- a/mediarepo-ui/src/polyfills.ts +++ b/mediarepo-ui/src/polyfills.ts @@ -3,7 +3,7 @@ * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 1. Browser polyfills. These are applied before tagsLoading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. *