Added the badge to some components for coherence

This commit is contained in:
nibou230
2022-04-21 12:32:11 -04:00
parent 550eb6c7ab
commit a2a241b906
7 changed files with 36 additions and 9 deletions

View File

@@ -18,6 +18,7 @@
</span> </span>
<div class="card-body"> <div class="card-body">
<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge> <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
<ds-access-status-badge *ngIf="showAccessStatus" [uuid]="dso.uuid"></ds-access-status-badge>
<ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4"> <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
<h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4> <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
</ds-truncatable-part> </ds-truncatable-part>

View File

@@ -6,6 +6,7 @@ import { SearchResultGridElementComponent } from '../../search-result-grid-eleme
import { Item } from '../../../../../core/shared/item.model'; import { Item } from '../../../../../core/shared/item.model';
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model'; import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
import { getItemPageRoute } from '../../../../../item-page/item-page-routing-paths'; import { getItemPageRoute } from '../../../../../item-page/item-page-routing-paths';
import { environment } from 'src/environments/environment';
@listableObjectComponent('PublicationSearchResult', ViewMode.GridElement) @listableObjectComponent('PublicationSearchResult', ViewMode.GridElement)
@listableObjectComponent(ItemSearchResult, ViewMode.GridElement) @listableObjectComponent(ItemSearchResult, ViewMode.GridElement)
@@ -23,9 +24,14 @@ export class ItemSearchResultGridElementComponent extends SearchResultGridElemen
* Route to the item's page * Route to the item's page
*/ */
itemPageRoute: string; itemPageRoute: string;
/**
* Whether to show the access status badge or not
*/
showAccessStatus: boolean;
ngOnInit(): void { ngOnInit(): void {
super.ngOnInit(); super.ngOnInit();
this.itemPageRoute = getItemPageRoute(this.dso); this.itemPageRoute = getItemPageRoute(this.dso);
this.showAccessStatus = environment.ui.showAccessStatuses;
} }
} }

View File

@@ -1,3 +1,3 @@
<div *ngIf="accessStatus$ | async as status" class="pl-1"> <div *ngIf="accessStatus$ | async as accessStatus">
<span class="badge badge-secondary">{{ status | translate }}</span> <span class="badge badge-secondary">{{ accessStatus | translate }}</span>
</div> </div>

View File

@@ -1,7 +1,7 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { map } from 'rxjs/operators'; import { catchError, map } from 'rxjs/operators';
import { Observable } from 'rxjs'; import { Observable, of as observableOf } from 'rxjs';
import { getFirstSucceededRemoteDataPayload } from 'src/app/core/shared/operators'; import { getFirstCompletedRemoteData } from 'src/app/core/shared/operators';
import { ItemDataService } from 'src/app/core/data/item-data.service'; import { ItemDataService } from 'src/app/core/data/item-data.service';
import { AccessStatusObject } from './access-status.model'; import { AccessStatusObject } from './access-status.model';
import { hasValue } from '../../empty.util'; import { hasValue } from '../../empty.util';
@@ -29,9 +29,17 @@ export class AccessStatusBadgeComponent {
this._accessStatus$ = this.itemDataService this._accessStatus$ = this.itemDataService
.getAccessStatus(this._uuid) .getAccessStatus(this._uuid)
.pipe( .pipe(
getFirstSucceededRemoteDataPayload(), getFirstCompletedRemoteData(),
map((accessStatusRD) => {
if (accessStatusRD.statusCode !== 401 && hasValue(accessStatusRD.payload)) {
return accessStatusRD.payload;
} else {
return [];
}
}),
map((accessStatus: AccessStatusObject) => hasValue(accessStatus.status) ? accessStatus.status : 'unknown'), map((accessStatus: AccessStatusObject) => hasValue(accessStatus.status) ? accessStatus.status : 'unknown'),
map((status: string) => `access-status.${status.toLowerCase()}.listelement.badge`) map((status: string) => `access-status.${status.toLowerCase()}.listelement.badge`),
catchError(() => observableOf('access-status.unknown.listelement.badge'))
); );
} }

View File

@@ -2,7 +2,10 @@
<ng-container *ngIf="status"> <ng-container *ngIf="status">
<ds-mydspace-item-status [status]="status"></ds-mydspace-item-status> <ds-mydspace-item-status [status]="status"></ds-mydspace-item-status>
</ng-container> </ng-container>
<ds-type-badge [object]="item"></ds-type-badge> <div class="d-flex">
<ds-type-badge [object]="item"></ds-type-badge>
<ds-access-status-badge *ngIf="showAccessStatus" [uuid]="item.uuid" class="pl-1"></ds-access-status-badge>
</div>
<ds-truncatable [id]="item.id"> <ds-truncatable [id]="item.id">
<h3 [innerHTML]="item.firstMetadataValue('dc.title') || ('mydspace.results.no-title' | translate)" [ngClass]="{'lead': true,'text-muted': !item.firstMetadataValue('dc.title')}"></h3> <h3 [innerHTML]="item.firstMetadataValue('dc.title') || ('mydspace.results.no-title' | translate)" [ngClass]="{'lead': true,'text-muted': !item.firstMetadataValue('dc.title')}"></h3>
<div> <div>

View File

@@ -1,4 +1,5 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Item } from '../../../../core/shared/item.model'; import { Item } from '../../../../core/shared/item.model';
import { fadeInOut } from '../../../animations/fade'; import { fadeInOut } from '../../../animations/fade';
@@ -36,4 +37,12 @@ export class ItemListPreviewComponent {
*/ */
@Input() showSubmitter = false; @Input() showSubmitter = false;
/**
* Whether to show the access status badge or not
*/
showAccessStatus: boolean;
ngOnInit(): void {
this.showAccessStatus = environment.ui.showAccessStatuses;
}
} }

View File

@@ -1,6 +1,6 @@
<div class="d-flex"> <div class="d-flex">
<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge> <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
<ds-access-status-badge *ngIf="showAccessStatus" [uuid]="dso.uuid"></ds-access-status-badge> <ds-access-status-badge *ngIf="showAccessStatus" [uuid]="dso.uuid" class="pl-1"></ds-access-status-badge>
</div> </div>
<ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null"> <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">