DNDTools/src/app/journal/journal-npcs/journal-npcs.component.html

<div class="npcs-container">
  <div class="title t-0">{{ "npcs.characters" | translate }}</div>
  <divider appearance="gold-2" style="width: 15rem"></divider>
  <mat-accordion class="t-1" multi>
    @for (group of ["companions", "allies", "enemies", "others"]; track group) {
      <mat-expansion-panel [expanded]="true" class="b-1">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <div class="npc-list-title">{{ "npcs." + group | translate }}</div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <divider [appearance]="'gold-2'" class="b-1"></divider>
        <!-- Add-Button -->
        @if (isNewNpc && currentType === group) {
          <div class="npc active">
            <div class="npc-title">
              @if (currentNpc.name !== "") {
                {{ currentNpc.name }}
              } @else {
                {{ "notes.noName" | translate }}
              }
            </div>
            <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
          </div>
        } @else {
          <div class="npc-wrapper" (click)="addNpc(group)">
            <div
              class="npc add-button"
              [ngClass]="
                currentType === group && isInEditMode && currentIndex === -1
                  ? 'active'
                  : ''
              "
            >
              <img src="assets/icons/UIIcons/add.svg" />
            </div>
          </div>
        }
        <div class="column gap-05 t-1">
          @for (npc of npcs[group]; let index = $index; track npc) {
            <div
              class="npc-wrapper"
              [ngClass]="{
                active: currentIndex === index && currentType === group,
                'edit-mode': isInEditMode
              }"
            >
              <div class="npc" (click)="selectNpc(index, group)">
                <div class="npc-title">{{ npc.name }}</div>
              </div>
              <div class="control-button-wrapper">
                <icon-button
                  [icon]="'edit-large'"
                  (click)="editNpc()"
                ></icon-button>
                <icon-button
                  [icon]="'delete'"
                  (click)="deleteNpc()"
                ></icon-button>
              </div>
            </div>
          }
        </div>
      </mat-expansion-panel>
    }
  </mat-accordion>
</div>
@if (!npcsIsEmpty) {
  @if (isInEditMode) {
    <div class="write-container">
      <div>
        <label class="write-label">{{
          "npcs.namePlaceholder" | translate
        }}</label>
        <div>
          <mat-form-field class="name-write" appearance="outline">
            <input
              matInput
              [(ngModel)]="currentNpc.name"
              [placeholder]="'npcs.namePlaceholder' | translate"
            />
          </mat-form-field>
        </div>
      </div>
      <div class="t-2">
        <label class="write-label">{{ "npcs.short" | translate }}</label>
        <div class="NgxEditor__Wrapper">
          <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
          </ngx-editor-menu>
          <ngx-editor
            class="short-editor"
            [editor]="shortEditor"
            [placeholder]="'npcs.shortPlaceholder' | translate"
            [(ngModel)]="currentNpc.shortDescription"
          ></ngx-editor>
        </div>
      </div>
      <div class="t-2">
        <label class="write-label">{{ "npcs.long" | translate }}</label>
        <div class="NgxEditor__Wrapper">
          <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
          </ngx-editor-menu>
          <ngx-editor
            class="long-editor"
            [editor]="longEditor"
            [placeholder]="'npcs.longPlaceholder' | translate"
            [(ngModel)]="currentNpc.longDescription"
          ></ngx-editor>
        </div>
      </div>
      <div class="button-row">
        <ui-button width="w16" (click)="saveNpc()">{{
          "npcs.save" | translate
        }}</ui-button>
        <ui-button width="w16" (click)="discardNpc()">{{
          "npcs.discard" | translate
        }}</ui-button>
      </div>
    </div>
  } @else {
    <div class="read-container">
      <div class="title-row">
        <div class="name-read">{{ currentNpc.name }}</div>
        <icon-button
          [icon]="'flip'"
          (click)="showShortDescription = !showShortDescription"
        ></icon-button>
      </div>
      <divider [appearance]="'gold-2'" class="b-1 t-1"></divider>
      <div class="short-read">
        <div
          class="description"
          [innerHTML]="
            showShortDescription
              ? currentNpc.shortDescription
              : currentNpc.longDescription
          "
        ></div>
      </div>
    </div>
  }
} @else {
  <div class="empty-container">
    {{ "npcs.empty" | translate }}
  </div>
}