journal-notes.component.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <div class="entries-list">
  2. <div class="title t-0">{{ "notes.sessions" | translate }}</div>
  3. <divider appearance="gold-2" style="padding: 0 1rem"></divider>
  4. <!-- Add Button or temporary unsaved new entry -->
  5. @if (isNewEntry) {
  6. <div class="entry active">
  7. <div class="entry-title">
  8. @if (currentEntry.title !== "") {
  9. {{ currentEntry.title }}
  10. } @else {
  11. {{ "notes.noTitle" | translate }}
  12. }
  13. </div>
  14. <div class="entry-date">
  15. {{ currentEntry.created | date: "shortDate" : "" : "de" }}
  16. </div>
  17. <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
  18. </div>
  19. } @else {
  20. <div class="entry add-button" (click)="addEntry()">
  21. <img src="assets/icons/UIIcons/add.svg" />
  22. </div>
  23. }
  24. <!-- List of entries -->
  25. @for (entry of entries; let index = $index; track entry) {
  26. <div
  27. class="entry-wrapper"
  28. [ngClass]="{
  29. active: currentIndex === index,
  30. 'edit-mode': isInEditMode
  31. }"
  32. >
  33. <div (click)="selectEntry(index)" class="entry">
  34. <div class="entry-title">
  35. @if (entries[index].title !== "") {
  36. <!-- {{ entries[index].title }} -->
  37. @if (isInEditMode && index === currentIndex) {
  38. {{ currentEntry.title }}
  39. } @else {
  40. {{ entries[index].title }}
  41. }
  42. } @else {
  43. {{ "notes.noTitle" | translate }}
  44. }
  45. </div>
  46. <div class="entry-date">
  47. {{ entries[index].created | date: "shortDate" : "" : "de" }}
  48. </div>
  49. @if (isInEditMode && currentIndex === index) {
  50. <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
  51. }
  52. </div>
  53. <div class="control-button-wrapper">
  54. <icon-button [icon]="'edit-large'" (click)="editEntry()"></icon-button>
  55. <icon-button [icon]="'delete'" (click)="deleteEntry()"></icon-button>
  56. </div>
  57. </div>
  58. }
  59. </div>
  60. <!-- Entry container, shows the currentEntry -->
  61. @if (currentIndex !== -1 || isNewEntry) {
  62. <div class="entry-container">
  63. @if (isInEditMode) {
  64. <!-- Title -->
  65. <mat-form-field class="title-write" appearance="outline">
  66. <input
  67. matInput
  68. name="name"
  69. placeholder="Titel des Eintrags"
  70. [(ngModel)]="currentEntry.title"
  71. />
  72. </mat-form-field>
  73. <!-- Datepicker -->
  74. <mat-form-field class="date-write" appearance="outline">
  75. <input
  76. matInput
  77. [matDatepicker]="picker"
  78. placeholder="TT.MM.JJJJ"
  79. [(ngModel)]="currentEntry.created"
  80. />
  81. <mat-datepicker-toggle
  82. matIconSuffix
  83. [for]="picker"
  84. ></mat-datepicker-toggle>
  85. <mat-datepicker #picker></mat-datepicker>
  86. </mat-form-field>
  87. <div class="NgxEditor__Wrapper">
  88. <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
  89. </ngx-editor-menu>
  90. <ngx-editor
  91. [editor]="editor"
  92. [placeholder]="'notes.placeholder' | translate"
  93. [(ngModel)]="currentEntry.content"
  94. ></ngx-editor>
  95. </div>
  96. } @else {
  97. <div class="read-container">
  98. <div class="title-row">
  99. <div class="title-read">{{ currentEntry.title }}</div>
  100. <div class="date-read">
  101. {{ currentEntry.created | date: "longDate" : "" : "de" }}
  102. </div>
  103. </div>
  104. <divider appearance="gold-2"></divider>
  105. <div class="content-read" [innerHTML]="tooltipifiedEntry.content"></div>
  106. </div>
  107. }
  108. <div class="button-row">
  109. @if (isInEditMode) {
  110. <ui-button width="w16" (click)="saveEntry()">{{
  111. "notes.save" | translate
  112. }}</ui-button>
  113. <ui-button width="w16" (click)="discardEntry()">{{
  114. "notes.discard" | translate
  115. }}</ui-button>
  116. }
  117. </div>
  118. </div>
  119. } @else {
  120. <div
  121. style="
  122. margin: 28rem auto;
  123. text-align: center;
  124. font-size: 1.5rem;
  125. font-weight: 600;
  126. padding-left: 15rem;
  127. "
  128. >
  129. {{ "notes.empty" | translate }}
  130. </div>
  131. }
  132. <ng-template #tooltip
  133. ><div class="tooltip-content" [innerHTML]="tooltipText"></div
  134. ></ng-template>
  135. <div #creationAnchor></div>