fix: centers notes tab not displaying notes content (#2877)

src/app/centers/centers-view/notes-tab/notes-tab.component.html

@@ -1,49 +1,10 @@
-<div class="tab-container mat-typography">
+<mifosx-entity-notes-tab
-  <h3>{{ 'labels.heading.Notes' | translate }}</h3>
+  [entityId]="entityId"
-  <div>
+  [entityNotes]="entityNotes"
-    <form
+  [username]="username"
-      #formRef="ngForm"
+  [notePermission]="'GROUPNOTE'"
-      [formGroup]="noteForm"
+  [addNoteCallback]="addNote"
-      class="layout-row align-start-baseline gap-20px"
+  [editNoteCallback]="editNote"
-      (ngSubmit)="submit()"
+  [deleteNoteCallback]="deleteNote"
-    >
+>
-      <mat-form-field class="flex-90-minus-20px">
+</mifosx-entity-notes-tab>
-        <textarea
-          formControlName="note"
-          matInput
-          placeholder="{{ 'labels.text.Write a note' | translate }} ...."
-        ></textarea>
-      </mat-form-field>
-      <button
-        mat-raised-button
-        class="flex-fill"
-        color="primary"
-        [disabled]="!noteForm.valid"
-        *mifosxHasPermission="'CREATE_GROUPNOTE'"
-      >
-        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Add' | translate }}
-      </button>
-    </form>
-  </div>
-  <mat-list>
-    @for (centerNote of centerNotes; track centerNote; let i = $index) {
-      <mat-list-item>
-        <fa-icon icon="sticky-note" matListIcon></fa-icon>
-        <h3 matLine>{{ centerNote.note }}</h3>
-        <p matLine>
-          <span>{{ 'labels.inputs.Created By' | translate }}: {{ centerNote.createdByUsername }}</span
-          ><br />
-          <span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
-        </p>
-        <div class="layout-row align-start">
-          <button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
-            <fa-icon icon="edit"></fa-icon>
-          </button>
-          <button mat-button color="warn" (click)="deleteNote(centerNote.id, i)">
-            <fa-icon icon="trash"></fa-icon>
-          </button>
-        </div>
-      </mat-list-item>
-    }
-  </mat-list>
-</div>

src/app/centers/centers-view/notes-tab/notes-tab.component.ts

@@ -1,20 +1,9 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 
-/** Custom Components */
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
-
-/** Custom Services */
-import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from '../../../core/authentication/authentication.service';
 import { CentersService } from '../../centers.service';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { EntityNotesTabComponent } from '../../../shared/tabs/entity-notes-tab/entity-notes-tab.component';
-import { MatList, MatListItem } from '@angular/material/list';
-import { MatLine } from '@angular/material/grid-list';
-import { DateFormatPipe } from '../../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -23,101 +12,53 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./notes-tab.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    FaIconComponent,
+    EntityNotesTabComponent
-    MatList,
-    MatListItem,
-    MatLine,
-    DateFormatPipe
   ]
 })
 export class NotesTabComponent implements OnInit {
   private route = inject(ActivatedRoute);
-  private formBuilder = inject(UntypedFormBuilder);
-  private centersService = inject(CentersService);
   private authenticationService = inject(AuthenticationService);
-  private dialog = inject(MatDialog);
+  private centersService = inject(CentersService);
-  private translateService = inject(TranslateService);
 
-  centerId: string;
+  entityId: string;
   username: string;
-  centerNotes: any;
+  entityNotes: any;
-  noteForm: UntypedFormGroup;
-  @ViewChild('formRef', { static: true }) formRef: any;
 
   constructor() {
-    const savedCredentials = this.authenticationService.getCredentials();
+    this.entityId = this.route.parent.parent.snapshot.params['centerId'];
-    this.username = savedCredentials.username;
+    this.addNote = this.addNote.bind(this);
-    this.centerId = this.route.parent.snapshot.params['centerId'];
+    this.editNote = this.editNote.bind(this);
-    this.route.data.subscribe((data: { centerNotes: any }) => {
+    this.deleteNote = this.deleteNote.bind(this);
-      this.centerNotes = data.centerNotes;
-    });
   }
 
   ngOnInit() {
-    this.createNoteForm();
+    const savedCredentials = this.authenticationService.getCredentials();
-  }
+    this.username = savedCredentials.username;
-
+    this.route.data.subscribe((data: { centerNotes: any }) => {
-  createNoteForm() {
+      this.entityNotes = data.centerNotes;
-    this.noteForm = this.formBuilder.group({
-      note: [
-        '',
-        Validators.required
-      ]
     });
   }
 
-  submit() {
+  addNote(noteContent: any) {
-    this.centersService.createCenterNote(this.centerId, this.noteForm.value).subscribe((response: any) => {
+    this.centersService.createCenterNote(this.entityId, noteContent).subscribe((response: any) => {
-      this.centerNotes.push({
+      this.entityNotes.push({
         id: response.resourceId,
         createdByUsername: this.username,
         createdOn: new Date(),
-        note: this.noteForm.value.note
+        note: noteContent.note
       });
-      this.formRef.resetForm();
     });
   }
 
-  editNote(noteId: string, noteContent: string, index: number) {
+  editNote(noteId: string, noteContent: any, index: number) {
-    const editNoteDialogRef = this.dialog.open(FormDialogComponent, {
+    this.centersService.editCenterNote(this.entityId, noteId, noteContent).subscribe(() => {
-      data: {
+      this.entityNotes[index].note = noteContent.note;
-        formfields: [
-          {
-            controlName: 'note',
-            required: true,
-            value: noteContent,
-            controlType: 'input',
-            label: this.translateService.instant('labels.inputs.Note')
-          }
-        ],
-        layout: {
-          columns: 1,
-          addButtonText: 'Confirm'
-        },
-        title: this.translateService.instant('labels.heading.Edit Note')
-      }
-    });
-    editNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        this.centersService.editCenterNote(this.centerId, noteId, response.data.value).subscribe(() => {
-          this.centerNotes[index].note = response.data.value.note;
-        });
-      }
     });
   }
 
   deleteNote(noteId: string, index: number) {
-    const deleteNoteDialogRef = this.dialog.open(DeleteDialogComponent, {
+    this.centersService.deleteCenterNote(this.entityId, noteId).subscribe(() => {
-      data: {
+      this.entityNotes.splice(index, 1);
-        deleteContext: `${this.translateService.instant('labels.inputs.Note')} ${this.translateService.instant('labels.inputs.Id')}:${noteId}`
-      }
-    });
-    deleteNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.centersService.deleteCenterNote(this.centerId, noteId).subscribe(() => {
-          this.centerNotes.splice(index, 1);
-        });
-      }
     });
   }
 }

src/app/centers/common-resolvers/center-notes.resolver.ts

@@ -20,7 +20,7 @@ export class CenterNotesResolver {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const centerId = route.parent.paramMap.get('centerId');
+    const centerId = route.parent.parent.paramMap.get('centerId');
     return this.centersService.getCenterNotes(centerId);
   }
 }