diff --git a/src/app/components/actionbar/actionbar.component.html b/src/app/components/actionbar/actionbar.component.html index 270637a4..1c86cd19 100644 --- a/src/app/components/actionbar/actionbar.component.html +++ b/src/app/components/actionbar/actionbar.component.html @@ -133,6 +133,16 @@ share + + @if (isCompilation()) { + + } } @@ -233,3 +243,27 @@ } } + + + @if (element(); as element) { + @if (isCompilation()) { +
+
+

{{ element.name }}

+ +
+

{{ compilationDescription() }}

+

+ {{ entityCount() }} + {{ 'objects' | translate }} +

+

+ {{ 'Creator: ' }} + {{ element.creator.fullname }} +

+
+ } + } +
diff --git a/src/app/components/actionbar/actionbar.component.scss b/src/app/components/actionbar/actionbar.component.scss index 6958b923..5c79b24b 100644 --- a/src/app/components/actionbar/actionbar.component.scss +++ b/src/app/components/actionbar/actionbar.component.scss @@ -62,3 +62,22 @@ .container { padding-top: 10px; } + +.actionbar-info { + padding: 30px; + + .info-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .info-headline { + font-size: 16px !important; + font-weight: bold; + } + + .info-bold { + font-weight: bold; + } +} diff --git a/src/app/components/actionbar/actionbar.component.ts b/src/app/components/actionbar/actionbar.component.ts index e7a6b777..cad3a5f2 100644 --- a/src/app/components/actionbar/actionbar.component.ts +++ b/src/app/components/actionbar/actionbar.component.ts @@ -1,6 +1,6 @@ import { filter, firstValueFrom, map, of, shareReplay, switchMap, tap } from 'rxjs'; -import { Component, computed, input, signal } from '@angular/core'; +import { Component, computed, input, signal, viewChild } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatSelectModule } from '@angular/material/select'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; @@ -14,7 +14,7 @@ import { MatInputModule } from '@angular/material/input'; import { toObservable, toSignal } from '@angular/core/rxjs-interop'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; -import { MatMenuModule } from '@angular/material/menu'; +import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { @@ -32,7 +32,6 @@ import { AccountService, AllowAnnotatingService, BackendService, - DetailPageHelperService, DialogHelperService, SelectHistoryService, SnackbarService, @@ -40,6 +39,7 @@ import { import { IsUserOfRolePipe } from '../../pipes/is-user-of-role.pipe'; import { TranslatePipe } from '../../pipes/translate.pipe'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { OverlayModule } from '@angular/cdk/overlay'; @Component({ selector: 'app-actionbar', @@ -58,6 +58,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; MatProgressSpinnerModule, ReactiveFormsModule, MatOptionModule, + OverlayModule, RouterLink, MatMenuModule, TranslatePipe, @@ -91,6 +92,16 @@ export class ActionbarComponent { showUsesInCollection = computed(() => this.isEntity() && this.isDetailPage()); + compilationDescription = computed(() => { + const element = this.element(); + return isCompilation(element) ? element.description : ''; + }); + + entityCount = computed(() => { + const element = this.element(); + return isCompilation(element) && element.entities ? Object.keys(element.entities).length : 0; + }); + metadataDownload = computed(() => { const element = this.element(); if (!isEntity(element) && !isCompilation(element)) return; @@ -134,6 +145,8 @@ export class ActionbarComponent { return !!element.options?.allowDownload; }); + readonly infoMenuTrigger = viewChild('infoMenuTrigger'); + constructor( private account: AccountService, private allowAnnotatingHelper: AllowAnnotatingService, @@ -335,6 +348,10 @@ export class ActionbarComponent { this.isUpdatingPublishState.set(false); } + public closeInfoMenu() { + this.infoMenuTrigger()?.closeMenu(); + } + public async openDownloadDialog() { const options = await firstValueFrom(this.entityDownloadOptions$); if (!options) {