Documents and Notes for Clients, Loans and Clients (#1632)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -1,43 +1,7 @@
-<div class="tab-container mat-typography">
-
-  <h3>Notes</h3>
-
-  <div>
-    
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="submit()">
-
-      <mat-form-field fxFlex="calc(90%-20px)">
-        <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
-      </mat-form-field>
-
-      <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_CLIENTNOTE'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
-      </button>
-
-    </form>
-
-  </div>
-
-  <mat-list>
-
-    <mat-list-item *ngFor="let clientNote of clientNotes; let i=index;">
-      <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{clientNote.note}} </h3>
-      <p matLine>
-        <span>Created by: {{clientNote.createdByUsername}}</span><br />
-        <span>Date: {{clientNote.createdOn  | dateFormat}}</span>
-      </p>
-      <div fxLayout="row" fxLayoutAlign="flex-start">
-        <button mat-button color="primary" (click)="editNote(clientNote.id,clientNote.note,i)" *mifosxHasPermission="'CREATE_CLIENTNOTE'">
-          <fa-icon icon="edit"></fa-icon>
-        </button>
-        <button mat-button color="warn" (click)="deleteNote(clientNote.id,i)" *mifosxHasPermission="'DELETE_CLIENTNOTE'">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-    </mat-list-item>
-
-  </mat-list>
-
-</div>
+<mifosx-entity-notes-tab [entityId]="entityId"
+  [entityNotes]="entityNotes"
+  [callbackAdd]="addNote"
+  [callbackEdit]="editNote"
+  [callbackDelete]="deleteNote"
+>
+</mifosx-entity-notes-tab>

src/app/clients/clients-view/notes-tab/notes-tab.component.scss

@@ -1,5 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-
-}

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

@@ -1,12 +1,8 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MatDialog } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Components */
-import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
-import { EditNotesDialogComponent } from '../custom-dialogs/edit-notes-dialog/edit-notes-dialog.component';
 
 /** Custom Services */
 import { ClientsService } from '../../clients.service';
@@ -23,66 +19,39 @@ import { AuthenticationService } from 'app/core/authentication/authentication.se
 export class NotesTabComponent implements OnInit {
 
   /** Client ID */
-  clientId: string;
+  entityId: string;
   /** Username */
   username: string;
   /** Client Notes */
-  clientNotes: any;
-  /** Note Form */
-  noteForm: FormGroup;
-
-  /** Notes Form Reference */
-  @ViewChild('formRef', { static: true }) formRef: any;
+  entityNotes: any;
 
   /**
    * @param {ActivatedRoute} route Activated Route
-   * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
    * @param {AuthenticationService} authenticationService Authentication Service
-   * @param {MatDialog} dialog Mat Dialog
    */
   constructor(private route: ActivatedRoute,
-              private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private authenticationService: AuthenticationService,
-              public dialog: MatDialog) {
+              private authenticationService: AuthenticationService) {
     const credentials = this.authenticationService.getCredentials();
     this.username = credentials.username;
-    this.clientId = this.route.parent.snapshot.params['clientId'];
+    this.entityId = this.route.parent.snapshot.params['clientId'];
     this.route.data.subscribe((data: { clientNotes: any }) => {
-      this.clientNotes = data.clientNotes;
+      this.entityNotes = data.clientNotes;
     });
   }
 
-  ngOnInit() {
-    this.createNoteForm();
-  }
-
-  /**
-   * Creates the note form
-   */
-  createNoteForm() {
-    this.noteForm = this.formBuilder.group({
-      'note': ['', Validators.required]
-    });
-  }
+  ngOnInit() { }
 
   /**
    * Edits a client note.
    * @param {string} noteId Note Id
-   * @param {string} noteContent Note Content
+   * @param {any} noteContent Note Content
    * @param {number} index Index
    */
-  editNote(noteId: string, noteContent: string, index: number) {
-    const editNoteDialogRef = this.dialog.open(EditNotesDialogComponent, {
-      data: { noteContent: noteContent }
-    });
-    editNoteDialogRef.afterClosed().subscribe((response: { editForm: any }) => {
-      if (response.editForm) {
-        this.clientsService.editClientNote(this.clientId, noteId, response.editForm.value).subscribe(() => {
-          this.clientNotes[index].note = response.editForm.value.note;
-        });
-      }
+  editNote(noteId: string, noteContent: any, index: number) {
+    this.clientsService.editClientNote(this.entityId, noteId, noteContent).subscribe(() => {
+      this.entityNotes[index].note = noteContent.note;
     });
   }
 
@@ -92,31 +61,23 @@ export class NotesTabComponent implements OnInit {
    * @param {number} index Index
    */
   deleteNote(noteId: string, index: number) {
-    const deleteNoteDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `Note id:${noteId}` }
-    });
-    deleteNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.delete) {
-        this.clientsService.deleteClientNote(this.clientId, noteId)
-          .subscribe(() => {
-            this.clientNotes.splice(index, 1);
-          });
-      }
-    });
+    this.clientsService.deleteClientNote(this.entityId, noteId)
+      .subscribe(() => {
+        this.entityNotes.splice(index, 1);
+      });
   }
 
   /**
    * Creates a client note.
    */
-  submit() {
-    this.clientsService.createClientNote(this.clientId, this.noteForm.value).subscribe((response: any) => {
-      this.clientNotes.push({
+  addNote(noteContent: any) {
+    this.clientsService.createClientNote(this.entityId, noteContent).subscribe((response: any) => {
+      this.entityNotes.push({
         id: response.resourceId,
         createdByUsername: this.username,
         createdOn: new Date(),
-        note: this.noteForm.value.note
+        note: noteContent.note
       });
-      this.formRef.resetForm();
     });
   }