File

src/app/core/entity-details/entity-archived-info/entity-archived-info.component.ts

Description

Informs users that the entity is inactive (or anonymized) and provides options to change the status.

Metadata

Index

Properties
Inputs

Constructor

constructor()

Inputs

entity
Type : Entity

Properties

Protected Readonly displayEntity
Type : unknown
Default value : linkedSignal(() => this.entity())
Protected entityActionsService
Type : unknown
Default value : inject(EntityActionsService)
import {
  ChangeDetectionStrategy,
  Component,
  effect,
  inject,
  input,
  linkedSignal,
} from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatCardModule } from "@angular/material/card";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { EntityActionsService } from "../../entity/entity-actions/entity-actions.service";
import { EntityMapperService } from "../../entity/entity-mapper/entity-mapper.service";
import { Entity } from "../../entity/model/entity";

/**
 * 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 {
  protected entityActionsService = inject(EntityActionsService);
  private entityMapper = inject(EntityMapperService);
  entity = input<Entity>();
  protected readonly displayEntity = linkedSignal(() => this.entity());

  constructor() {
    effect((onCleanup) => {
      const entity = this.entity();
      if (!entity) {
        return;
      }
      const sub = this.entityMapper
        .receiveUpdates(entity.getType())
        .subscribe((update) => {
          if (update.entity.getId() === entity.getId()) {
            this.displayEntity.set(update.entity);
          }
        });
      onCleanup(() => sub.unsubscribe());
    });
  }
}
@if (displayEntity() && !displayEntity()?.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 (!displayEntity()?.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 (displayEntity()?.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 (!displayEntity()?.anonymized) {
      <mat-card-actions>
        <button
          mat-stroked-button
          color="accent"
          (click)="entityActionsService.undoArchive(displayEntity())"
        >
          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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""