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

<div class="entries-list">
  <div class="title t-0">{{ "notes.sessions" | translate }}</div>
  <divider appearance="gold-2" style="padding: 0 1rem"></divider>
  <!-- Add Button or temporary unsaved new entry -->
  @if (isNewEntry) {
    <div class="entry active">
      <div class="entry-title">
        @if (currentEntry.title !== "") {
          {{ currentEntry.title }}
        } @else {
          {{ "notes.noTitle" | translate }}
        }
      </div>
      <div class="entry-date">
        {{ currentEntry.created | date: "shortDate" : "" : "de" }}
      </div>
      <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
    </div>
  } @else {
    <div class="entry add-button" (click)="addEntry()">
      <img src="assets/icons/UIIcons/add.svg" />
    </div>
  }
  <!-- List of entries -->
  @for (entry of entries; let index = $index; track entry) {
    <div
      class="entry-wrapper"
      [ngClass]="{
        active: currentIndex === index,
        'edit-mode': isInEditMode
      }"
    >
      <div (click)="selectEntry(index)" class="entry">
        <div class="entry-title">
          @if (entries[index].title !== "") {
            <!-- {{ entries[index].title }} -->
            @if (isInEditMode && index === currentIndex) {
              {{ currentEntry.title }}
            } @else {
              {{ entries[index].title }}
            }
          } @else {
            {{ "notes.noTitle" | translate }}
          }
        </div>
        <div class="entry-date">
          {{ entries[index].created | date: "shortDate" : "" : "de" }}
        </div>
        @if (isInEditMode && currentIndex === index) {
          <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
        }
      </div>
      <div class="control-button-wrapper">
        <icon-button [icon]="'edit-large'" (click)="editEntry()"></icon-button>
        <icon-button [icon]="'delete'" (click)="deleteEntry()"></icon-button>
      </div>
    </div>
  }
</div>

<!-- Entry container, shows the currentEntry -->
@if (currentIndex !== -1 || isNewEntry) {
  <div class="entry-container">
    @if (isInEditMode) {
      <!-- Title -->
      <mat-form-field class="title-write" appearance="outline">
        <input
          matInput
          name="name"
          placeholder="Titel des Eintrags"
          [(ngModel)]="currentEntry.title"
        />
      </mat-form-field>

      <!-- Datepicker -->
      <mat-form-field class="date-write" appearance="outline">
        <input
          matInput
          [matDatepicker]="picker"
          placeholder="TT.MM.JJJJ"
          [(ngModel)]="currentEntry.created"
        />
        <mat-datepicker-toggle
          matIconSuffix
          [for]="picker"
        ></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <div class="NgxEditor__Wrapper">
        <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
        </ngx-editor-menu>
        <ngx-editor
          [editor]="editor"
          [placeholder]="'notes.placeholder' | translate"
          [(ngModel)]="currentEntry.content"
        ></ngx-editor>
      </div>
    } @else {
      <div class="read-container">
        <div class="title-row">
          <div class="title-read">{{ currentEntry.title }}</div>
          <div class="date-read">
            {{ currentEntry.created | date: "longDate" : "" : "de" }}
          </div>
        </div>
        <divider appearance="gold-2"></divider>
        <div class="content-read" [innerHTML]="tooltipifiedEntry.content"></div>
      </div>
    }
    <div class="button-row">
      @if (isInEditMode) {
        <ui-button width="w16" (click)="saveEntry()">{{
          "notes.save" | translate
        }}</ui-button>
        <ui-button width="w16" (click)="discardEntry()">{{
          "notes.discard" | translate
        }}</ui-button>
      }
    </div>
  </div>
} @else {
  <div
    style="
      margin: 28rem auto;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 600;
      padding-left: 15rem;
    "
  >
    {{ "notes.empty" | translate }}
  </div>
}
<ng-template #tooltip
  ><div class="tooltip-content" [innerHTML]="tooltipText"></div
></ng-template>
<div #creationAnchor></div>