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.

Implements

OnDestroy

Metadata

Index

Properties
Inputs
Accessors

Inputs

entity
Type : Entity

Properties

Protected entityActionsService
Type : unknown
Default value : inject(EntityActionsService)

Accessors

entity
getentity()
setentity(value: Entity)
Parameters :
Name Type Optional
value Entity No
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""