Add datatable step when exist entity datatable checks (#1633)

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

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

@@ -13,7 +13,7 @@ import { ClientsService } from '../../clients.service';
 export class DocumentsTabComponent implements OnInit {
   entityDocuments: any;
   entityId: string;
-  entityType: string = 'clients';
+  entityType = 'clients';
 
   constructor(private route: ActivatedRoute,
     private clientsService: ClientsService,

src/app/clients/clients.component.html

@@ -22,24 +22,24 @@
     </div>
   </div>
 
-  <div *ngIf="existsClientsToFilter">
+  <div [hidden]="!existsClientsToFilter">
     <table mat-table [dataSource]="dataSource" matSort>
 
       <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="entityName"> Name </th>
+      <ng-container matColumnDef="entityName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
         <td mat-cell *matCellDef="let row"> {{row.entityName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
-      <ng-container matColumnDef="clientNo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="entityAccountNo"> Account No. </th>
+      <ng-container matColumnDef="entityAccountNo">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account No. </th>
         <td mat-cell *matCellDef="let row"> {{row.entityAccountNo}} </td>
       </ng-container>
 
       <!-- External ID Column -->
-      <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="entityExternalId"> External Id </th>
+      <ng-container matColumnDef="entityExternalId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> External Id </th>
         <td mat-cell *matCellDef="let row">
           <mifosx-external-identifier externalId="{{row.entityExternalId}}"></mifosx-external-identifier>
         </td>
@@ -47,7 +47,7 @@
 
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="entityStatus.value"> Status </th>
+        <th mat-header-cell *matHeaderCellDef> Status </th>
         <td mat-cell *matCellDef="let row">
           <div [ngClass]="row.entityStatus.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
@@ -59,14 +59,14 @@
       </ng-container>
 
       <!-- Color Column -->
-      <ng-container matColumnDef="office">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="officeName"> Office Name </th>
+      <ng-container matColumnDef="parentName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
         <td mat-cell *matCellDef="let row"> {{row.parentName}} </td>
       </ng-container>
 
       <!-- ID Column -->
-      <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="staffName"> Staff Name </th>
+      <ng-container matColumnDef="staffName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Staff Name </th>
         <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
       </ng-container>
 
@@ -75,11 +75,11 @@
       </tr>
     </table>
 
-    <mat-paginator *ngIf="moreClientsToFilter" [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]"
+    <mat-paginator [hidden]="!moreClientsToFilter" [pageSize]="50" [pageSizeOptions]="[50, 100]"
       showFirstLastButtons></mat-paginator>
   </div>
 
-  <div class="alert" *ngIf="notExistsClientsToFilter">
+  <div class="alert" [hidden]="!notExistsClientsToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
       No client was found

src/app/clients/clients.component.ts

@@ -17,7 +17,7 @@ import { environment } from 'environments/environment';
 export class ClientsComponent implements OnInit {
   @ViewChild('showClosedAccounts', { static: true }) showClosedAccounts: MatCheckbox;
 
-  displayedColumns = ['name', 'clientNo', 'externalId', 'status', 'office', 'staff'];
+  displayedColumns = ['entityName', 'entityAccountNo', 'entityExternalId', 'status', 'parentName', 'staffName'];
   dataSource: MatTableDataSource<any>;
 
   existsClientsToFilter = false;
@@ -55,6 +55,8 @@ export class ClientsComponent implements OnInit {
   private getClients(value: string) {
     this.searchService.getSearchResults(value, 'clients').subscribe((data: any) => {
       this.dataSource = new MatTableDataSource(data);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
       this.existsClientsToFilter = (data.length > 0);
       this.notExistsClientsToFilter = !this.existsClientsToFilter;
       this.moreClientsToFilter = (data.length > 50);

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

@@ -1,39 +1,7 @@
-<div class="tab-container mat-typography">
-
-  <h3>Notes</h3>
-
-  <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="addNote()">
-
-    <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" *mifosxHasPermission="'CREATE_GROUPNOTE'" [disabled]="!noteForm.valid">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
-    </button>
-
-  </form>
-
-  <mat-list>
-
-    <mat-list-item *ngFor="let groupNote of groupNotes; let i=index;">
-      <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{groupNote.note}} </h3>
-      <p matLine>
-        <span>Created by: {{groupNote.createdByUsername}}</span><br />
-        <span>Date: {{groupNote.createdOn  | dateFormat}}</span>
-      </p>
-      <div fxLayout="row" fxLayoutAlign="flex-start">
-        <button mat-button color="primary" (click)="editNote(groupNote.id,groupNote.note,i)">
-          <fa-icon icon="edit"></fa-icon>
-        </button>
-        <button mat-button color="warn" (click)="deleteNote(groupNote.id,i)">
-          <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/groups/groups-view/notes-tab/notes-tab.component.scss

@@ -1,19 +0,0 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-}
-
-h3 {
-  margin-bottom: 0px;
-}
-
-mat-list {
-  padding-top: 0px;
-}
-
-mat-list-item {
-  margin-block: 20px;
-  &:hover{
-    background-color: #f5f5f5;
-  }
-}

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

@@ -1,20 +1,12 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AuthenticationService } from '../../../core/authentication/authentication.service';
 import { GroupsService } from '../../groups.service';
 
 /** Custom Dialogs */
-import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-
-/** Custom Models */
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 
 /**
  * Groups Notes Tab Component.
@@ -26,113 +18,66 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 })
 export class NotesTabComponent implements OnInit {
 
-  /** Group Notes */
-  groupNotes: any;
-  /** Group Id */
-  groupId: string;
-  /** User Name */
+  /** Group ID */
+  entityId: string;
+  /** Username */
   username: string;
-  /** Note form */
-  noteForm: FormGroup;
-
-  /** Note Form Reference */
-  @ViewChild('formRef', { static: true }) formRef: any;
+  /** Client Notes */
+  entityNotes: any;
 
   /**
    * Fetches notes data from `resolve`
    * @param {Activated Route} route Activated Route.
-   * @param {FormBuilder} formBuilder FormBuilder
    * @param {GroupsService} groupsService Groups Service
-   * @param {MatDialog} dialog MatDialog
    * @param {AuthenticationService} authenticationService Authentication Service.
    */
   constructor(private route: ActivatedRoute,
-              private formBuilder: FormBuilder,
               private authenticationService: AuthenticationService,
-              private groupsService: GroupsService,
-              public dialog: MatDialog) {
+              private groupsService: GroupsService) {
     const savedCredentials = this.authenticationService.getCredentials();
     this.username = savedCredentials.username;
-    this.groupId = this.route.parent.snapshot.params['groupId'];
+    this.entityId = this.route.parent.snapshot.params['groupId'];
     this.route.data.subscribe((data: { groupNotes: any }) => {
-      this.groupNotes = data.groupNotes;
+      this.entityNotes = data.groupNotes;
     });
   }
 
   ngOnInit() {
-    this.createNoteForm();
-  }
-
-  /**
-   * Creates the note form.
-   */
-  createNoteForm() {
-    this.noteForm = this.formBuilder.group({
-      'note': ['', Validators.required]
-    });
   }
 
   /**
    * Adds a new note.
    */
-  addNote() {
-    this.groupsService.createGroupNote(this.groupId, this.noteForm.value).subscribe((response: any) => {
-      this.groupNotes.push({
+  addNote(noteContent: any) {
+    this.groupsService.createGroupNote(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();
     });
   }
 
   /**
    * Edits selected note.
    * @param {string} noteId Note Id.
-   * @param {string} noteContent Note's content.
-   * @param {number} index  Index of note.
+   * @param {any} noteContent Note's content.
    */
-  editNote(noteId: string, noteContent: string, index: number) {
-    const formfields: FormfieldBase[] = [
-      new InputBase({
-        controlName: 'note',
-        label: 'Note',
-        value: noteContent,
-        type: 'text',
-        required: true,
-      }),
-    ];
-    const data = {
-      title: 'Edit Note',
-      layout: { addButtonText: 'Confirm' },
-      formfields: formfields
-    };
-    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
-    editNoteDialogRef.afterClosed().subscribe((response: any) => {
-      if (response.data) {
-        this.groupsService.editGroupNote(this.groupId, noteId, response.data.value).subscribe(() => {
-          this.groupNotes[index].note = response.data.value.note;
-        });
-      }
+  editNote(noteId: string, noteContent: any, index: number) {
+    this.groupsService.editGroupNote(this.entityId, noteId, noteContent).subscribe(() => {
+      this.entityNotes[index].note = noteContent.note;
     });
   }
 
   /**
    * Delets the given note.
    * @param {string} noteId Note Id.
-   * @param {number} index Index of Note.
    */
   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.groupsService.deleteGroupNote(this.groupId, noteId).subscribe(() => {
-          this.groupNotes.splice(index, 1);
-        });
-      }
+    this.groupsService.deleteGroupNote(this.entityId, noteId)
+    .subscribe(() => {
+      this.entityNotes.splice(index, 1);
     });
   }
 

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -11,7 +11,6 @@ import { ClientsService } from 'app/clients/clients.service';
 import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
 import { LoansAccountTermsStepComponent } from '../loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
 import { LoansAccountChargesStepComponent } from '../loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
-import { Dates } from 'app/core/utils/dates';
 import { LoansAccountDatatableStepComponent } from '../loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
 
 /**
@@ -29,7 +28,7 @@ export class CreateLoansAccountComponent implements OnInit {
   @ViewChild(LoansAccountTermsStepComponent, { static: true }) loansAccountTermsStep: LoansAccountTermsStepComponent;
   @ViewChild(LoansAccountChargesStepComponent, { static: true }) loansAccountChargesStep: LoansAccountChargesStepComponent;
   /** Get handle on dtloan tags in the template */
-  @ViewChildren('dtloan') clientDatatables: QueryList<LoansAccountDatatableStepComponent>;
+  @ViewChildren('dtloan') loanDatatables: QueryList<LoansAccountDatatableStepComponent>;
 
   /** Loans Account Template */
   loansAccountTemplate: any;
@@ -47,14 +46,12 @@ export class CreateLoansAccountComponent implements OnInit {
    * Sets loans account create form.
    * @param {route} ActivatedRoute Activated Route.
    * @param {router} Router Router.
-   * @param {Dates} dateUtils Date Utils
    * @param {loansService} LoansService Loans Service
    * @param {SettingsService} settingsService Settings Service
    * @param {ClientsService} clientService Client Service
    */
   constructor(private route: ActivatedRoute,
     private router: Router,
-    private dateUtils: Dates,
     private loansService: LoansService,
     private settingsService: SettingsService,
     private clientService: ClientsService
@@ -83,13 +80,14 @@ export class CreateLoansAccountComponent implements OnInit {
     this.loansService.getLoansAccountTemplateResource(entityId, isGroup, productId).subscribe((response: any) => {
       this.multiDisburseLoan = response.multiDisburseLoan;
     });
+    this.setDatatables();
   }
 
   setDatatables(): void {
     this.datatables = [];
 
-    if (this.loansAccountTemplate.datatables) {
-      this.loansAccountTemplate.datatables.forEach((datatable: any) => {
+    if (this.loansAccountProductTemplate.datatables) {
+      this.loansAccountProductTemplate.datatables.forEach((datatable: any) => {
         this.datatables.push(datatable);
       });
     }
@@ -138,9 +136,9 @@ export class CreateLoansAccountComponent implements OnInit {
     const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
       this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
 
-    if (this.loansAccountTemplate.datatables && this.loansAccountTemplate.datatables.length > 0) {
+    if (this.loansAccountProductTemplate.datatables && this.loansAccountProductTemplate.datatables.length > 0) {
       const datatables: any[] = [];
-      this.loansAccountTemplate.forEach((loanDatatable: LoansAccountDatatableStepComponent) => {
+      this.loanDatatables.forEach((loanDatatable: LoansAccountDatatableStepComponent) => {
         datatables.push(loanDatatable.payload);
       });
       payload['datatables'] = datatables;

src/app/loans/loans-view/datatable-tab/single-row/single-row.component.html

@@ -1,31 +1,15 @@
 <div class="tab-container mat-typography">
-
-  <div>
-
-    <div fxLayout="column" fxFlex="50%" class="table-name">
-      <h3>{{datatableName}}</h3>
-    </div>
-
-    <div fxLayout="column" fxFlex="50%">
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <span>
-          <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
-          </button>
-        </span>
-        <span>
-          <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-          </button>
-        </span>
-        <span class="delete-button">
-          <button mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
-          </button>
-        </span>
-      </div>
-    </div>
-
+  <h3>{{datatableName}}</h3>
+  <div fxLayout="row" fxLayoutAlign="flex-end">
+    <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+    </button>
+    <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    </button>
+    <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+    </button>
   </div>
 
   <mat-divider></mat-divider>

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts

@@ -21,7 +21,7 @@ export class LoanDocumentsTabComponent implements OnInit {
   entityDocuments: any;
   /** Loan account Id */
   entityId: string;
-  entityType: string = 'loans';
+  entityType = 'loans';
 
   /**
    * Retrieves the loans data from `resolve`.

src/app/savings/savings-account-view/notes-tab/notes-tab.component.ts

@@ -34,7 +34,7 @@ export class NotesTabComponent implements OnInit {
         id: response.resourceId,
         createdByUsername: this.username,
         createdOn: new Date(),
-        note: noteContent
+        note: noteContent.note
       });
     });
   }

src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.ts

@@ -17,7 +17,7 @@ export class SavingsDocumentsTabComponent implements OnInit {
   entityDocuments: any;
   /** Stores the saving Account Id */
   entityId: string;
-  entityType: string = 'savings';
+  entityType = 'savings';
 
   /**
    * Retrieves the savings data from `resolve`.

src/app/savings/savings-routing.module.ts

@@ -41,7 +41,6 @@ import { SavingsDocumentsTabComponent } from './savings-account-view/savings-doc
 import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.component';
 import { SavingNotesResolver } from './common-resolvers/saving-notes.resolver';
 import { SavingDocumentsResolver } from './common-resolvers/saving-documents.resolver';
-import { DocumentsTabComponent } from 'app/clients/clients-view/documents-tab/documents-tab.component';
 /** Savings Routes */
 const routes: Routes = [
   {
@@ -106,10 +105,10 @@ const routes: Routes = [
               },
               {
                 path: 'documents',
-                component: DocumentsTabComponent,
+                component: SavingsDocumentsTabComponent,
                 data: { title: extract('Savings Account Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
                 resolve: {
-                  savingAccountDocuments: SavingDocumentsResolver
+                  savingsDocuments: SavingDocumentsResolver
                 }
               },
               {

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -45,6 +45,6 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator *ngIf="entityDocuments.length > 10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator *ngIf="entityDocuments && entityDocuments.length > 10" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
 
 </div>

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ClientsService } from 'app/clients/clients.service';
+import { GroupsService } from 'app/groups/groups.service';
 import { LoansService } from 'app/loans/loans.service';
 import { SavingsService } from 'app/savings/savings.service';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
@@ -29,6 +30,7 @@ export class EntityNotesTabComponent implements OnInit {
     private savingsService: SavingsService,
     private loansService: LoansService,
     private clientsService: ClientsService,
+    private groupsService: GroupsService,
     private dialog: MatDialog) { }
 
   ngOnInit() {