Merge pull request #764 from GSA/remove-ng-onchange-on-layout

Remove ngOnChange in layout
GSA · Jul 28, 2021 · e526ed2 · e526ed2
2 parents 170a9c6 + 0363225
commit e526ed2
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 468 deletions.
diff --git a/libs/documentation/src/lib/pages/layout/layout-responsive/layout-responsive.component.ts b/libs/documentation/src/lib/pages/layout/layout-responsive/layout-responsive.component.ts
@@ -102,6 +102,8 @@ export class LayoutResponsiveComponent {
     } else {
       this.listConfig = { ...this.defaultListConfig };
     }
+    const newSortValue = this.listConfig.defaultSortValue;
+    this.resultList.updateSearchResultsModel({sort: newSortValue, filterModel: this.filterModel});
   }
 
   onDialogOpen($event) {

diff --git a/libs/documentation/src/lib/pages/layout/layout.component.ts b/libs/documentation/src/lib/pages/layout/layout.component.ts
@@ -3,14 +3,14 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Subject } from 'rxjs';
 import { DataService } from './data.service';
 import { navigationConfig } from './navigate.config';
-import { SearchListConfiguration, ResultsModel } from '@gsa-sam/layouts';
+import { SearchListConfiguration, ResultsModel, SearchListLayoutComponent } from '@gsa-sam/layouts';
 import { FilterService } from './filter.service';
 import { SideNavigationModel } from '@gsa-sam/components';
 @Component({
   templateUrl: './layout.component.html',
 })
 export class ResultsLayoutComponent implements AfterViewInit, OnInit {
-  @ViewChild('resultList') resultList;
+  @ViewChild('resultList') resultList: SearchListLayoutComponent;
 
   fields: FormlyFieldConfig[] = [];
   form;
@@ -72,6 +72,8 @@ export class ResultsLayoutComponent implements AfterViewInit, OnInit {
     } else {
       this.listConfig = { ...this.defaultListConfig };
     }
+    const newSortValue = this.listConfig.defaultSortValue;
+    this.resultList.updateSearchResultsModel({sort: newSortValue, filterModel: this.filterModel});
   }
 
   onSearchModelUpdate() {

diff --git a/.../packages/layouts/src/lib/feature/search-list-layout/search-list-layout.component.spec.ts b/.../packages/layouts/src/lib/feature/search-list-layout/search-list-layout.component.spec.ts
@@ -15,6 +15,7 @@ import {
   SearchParameters,
   SearchResult,
   SearchListInterface,
+  ResultsModel,
 } from './model/search-list-layout.model';
 import { of, Observable } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -93,16 +94,21 @@ describe('SearchListLayoutComponent', () => {
     expect(service.updateModel).toHaveBeenCalled();
   });
 
-  it('should set configuration & sortField on ngOnChanges', () => {
-    component.ngOnChanges({
-      configuration: new SimpleChange(
-        null,
-        { defaultSortValue: 'testValue' },
-        null
-      ),
-    });
+  it('should update sortvalue through updateSearchResultsModel', () => {
+    component.configuration =  {
+      defaultSortValue: 'legalBusinessName',
+      pageSize: 25,
+      sortList: [
+        { text: 'Entity Name', value: 'legalBusinessName' },
+        { text: 'Status', value: 'registrationStatus' },
+      ],
+    };
+    fixture.detectChanges();
+
+    const config: ResultsModel = { sort: 'registrationStatus', filterModel: {} };
+    component.updateSearchResultsModel(config);
     fixture.detectChanges();
-    expect(component.sortField).toBe('testValue');
+    expect(component.sortField).toBe('registrationStatus');
   });
 });
 

diff --git a/libs/packages/layouts/src/lib/feature/search-list-layout/search-list-layout.component.ts b/libs/packages/layouts/src/lib/feature/search-list-layout/search-list-layout.component.ts
@@ -21,7 +21,7 @@ import {
   SDSFormlyUpdateComunicationService,
   SDSFormlyUpdateModelService,
 } from '@gsa-sam/sam-formly';
-import { Router, ActivatedRoute, UrlTree } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import * as _ from 'lodash-es';
 import { Location } from '@angular/common';
 
@@ -30,7 +30,7 @@ import { Location } from '@angular/common';
   templateUrl: './search-list-layout.component.html',
   styleUrls: ['./search-list-layout.component.scss'],
 })
-export class SearchListLayoutComponent implements OnChanges, OnInit {
+export class SearchListLayoutComponent implements OnInit {
   /**
    * Child Template to be used to display the data for each item in the list of items
    */
@@ -140,14 +140,6 @@ export class SearchListLayoutComponent implements OnChanges, OnInit {
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.configuration && changes.configuration.currentValue) {
-      this.configuration = changes.configuration.currentValue;
-      this.sortField = this.configuration.defaultSortValue;
-      this.onSelectChange();
-    }
-  }
-
   ngOnInit() {
     if (this.isHistoryEnabled) {
       this.getHistoryModel();

diff --git a/libs/packages/sam-formly/src/lib/formly-stepper/sds-stepper.component.spec.ts b/libs/packages/sam-formly/src/lib/formly-stepper/sds-stepper.component.spec.ts
@@ -20,7 +20,7 @@ import { FormlyFieldConfig } from "@ngx-formly/core";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { By } from "@angular/platform-browser";
 import { SdsStepper } from "./sds-stepper";
-
+import { IconModule } from "@gsa-sam/ngx-uswds-icons";
 @Component({
   selector: `custom-test-stepper`,
   template: `<div class="grid-row">
@@ -177,10 +177,10 @@ describe('SdsStepperComponent', () => {
         CommonModule,
         SdsFormlyModule,
         NgxBootstrapIconsModule.pick({ chevronLeft, chevronRight, circle, slashCircleFill, checkCircleFill, question, save, x }),
-        SdsIconModule,
         RouterTestingModule,
         SdsStepperModule,
         NoopAnimationsModule,
+        IconModule,
       ],
       declarations: [
         StepperTestComponent,