src/app/core/entity-details/entity-archived-info/entity-archived-info.component.ts
Informs users that the entity is inactive (or anonymized) and provides options to change the status.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-entity-archived-info |
| imports |
MatCardModule
MatButtonModule
FontAwesomeModule
|
| styleUrls | ./entity-archived-info.component.scss |
| templateUrl | ./entity-archived-info.component.html |
Properties |
|
Inputs |
Accessors |
| entity | |
Type : Entity
|
|
| Protected entityActionsService |
Type : unknown
|
Default value : inject(EntityActionsService)
|
| entity | ||||||
getentity()
|
||||||
setentity(value: Entity)
|
||||||
|
Parameters :
Returns :
void
|
import {
ChangeDetectorRef,
Component,
Input,
OnDestroy,
inject,
ChangeDetectionStrategy,
} from "@angular/core";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { Entity } from "../../entity/model/entity";
import { EntityActionsService } from "../../entity/entity-actions/entity-actions.service";
import { EntityMapperService } from "../../entity/entity-mapper/entity-mapper.service";
import { Subscription } from "rxjs";
/**
* Informs users that the entity is inactive (or anonymized) and provides options to change the status.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-entity-archived-info",
imports: [MatCardModule, MatButtonModule, FontAwesomeModule],
templateUrl: "./entity-archived-info.component.html",
styleUrls: ["./entity-archived-info.component.scss"],
})
export class EntityArchivedInfoComponent implements OnDestroy {
protected entityActionsService = inject(EntityActionsService);
private entityMapper = inject(EntityMapperService);
private readonly cdr = inject(ChangeDetectorRef);
private updatesSubscription?: Subscription;
@Input() set entity(value: Entity) {
this._entity = value;
this.subscribeToEntityUpdates();
}
get entity(): Entity {
return this._entity;
}
private _entity!: Entity;
ngOnDestroy(): void {
this.updatesSubscription?.unsubscribe();
}
private subscribeToEntityUpdates() {
this.updatesSubscription?.unsubscribe();
if (!this._entity) {
return;
}
this.updatesSubscription = this.entityMapper
.receiveUpdates(this._entity.getType())
.subscribe((update) => {
if (update.entity.getId() === this._entity.getId()) {
this._entity = update.entity;
this.cdr.markForCheck();
}
});
}
}
@if (entity && !entity.isActive) {
<mat-card appearance="outlined" class="card">
<mat-card-header class="card-header">
<div mat-card-avatar class="card-icon">
<fa-icon icon="info-circle" size="lg"></fa-icon>
</div>
@if (!entity.anonymized) {
<mat-card-title i18n>Archived</mat-card-title>
} @else {
<mat-card-title i18n>Anonymized & Archived</mat-card-title>
}
</mat-card-header>
<mat-card-content>
@if (entity.anonymized) {
<p i18n>
This record has been anonymized. Details containing personal
information have been deleted and cannot be restored. For statistical
reporting, this basic record has been kept.
</p>
}
<p i18n>
This record is archived and will be hidden from lists and select options
by default.
</p>
</mat-card-content>
@if (!entity.anonymized) {
<mat-card-actions>
<button
mat-stroked-button
color="accent"
(click)="entityActionsService.undoArchive(entity)"
>
Reactivate
</button>
</mat-card-actions>
}
</mat-card>
}
./entity-archived-info.component.scss
@use "variables/colors";
.card {
background-color: colors.$grey-transparent;
}
.card-header {
display: flex;
align-items: center;
}
.card-icon {
justify-content: center;
align-items: center;
display: flex;
margin: 0;
}