fix(stark-ui): change table actions when input changes

ISSUES CLOSED: #1315
NationalBankBelgium · Aug 2, 2019 · 0fdd43e · 0fdd43e
1 parent 14ac620
commit 0fdd43e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -23,8 +23,11 @@ import { StarkTableColumnComponent } from "./column.component";
 import { StarkPaginationComponent } from "../../pagination/components";
 import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "../entities";
 import find from "lodash-es/find";
+import noop from "lodash-es/noop";
 import Spy = jasmine.Spy;
 import createSpy = jasmine.createSpy;
+import { StarkAction, StarkActionBarModule } from "@nationalbankbelgium/stark-ui";
+import { MatIconModule } from "@angular/material/icon";
 
 @Component({
 	selector: `host-component`,
@@ -42,6 +45,7 @@ import createSpy = jasmine.createSpy;
 			[orderProperties]="orderProperties"
 			[tableRowActions]="tableRowActions"
 			[rowClassNameFn]="rowClassNameFn"
+			[customTableActions]="customTableActions"
 			(rowClicked)="rowClickHandler($event)"
 		>
 		</stark-table>
@@ -62,6 +66,7 @@ class TestHostComponent {
 	public tableRowActions?: StarkTableRowActions;
 	public tableFilter?: StarkTableFilter;
 	public orderProperties?: string[];
+	public customTableActions?: StarkAction[];
 	public rowClassNameFn?: (row: object, index: number) => string;
 	public rowClickHandler?: (row: object) => void;
 }
@@ -95,8 +100,13 @@ describe("TableComponent", () => {
 	beforeEach(async(() => {
 		return TestBed.configureTestingModule({
 			imports: [
+				// Common
 				FormsModule,
 				ReactiveFormsModule,
+				NoopAnimationsModule,
+				TranslateModule.forRoot(),
+
+				// Material
 				MatCheckboxModule,
 				MatDialogModule,
 				MatInputModule,
@@ -106,15 +116,17 @@ describe("TableComponent", () => {
 				MatSelectModule,
 				MatTableModule,
 				MatTooltipModule,
-				NoopAnimationsModule,
-				TranslateModule.forRoot()
+				MatIconModule,
+
+				// Stark
+				StarkActionBarModule
 			],
 			declarations: [
+				TestHostComponent,
 				StarkPaginationComponent,
 				StarkTableComponent,
 				StarkTableColumnComponent,
-				StarkTableMultisortDialogComponent,
-				TestHostComponent
+				StarkTableMultisortDialogComponent
 			],
 			providers: [
 				{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() },
@@ -1367,4 +1379,33 @@ describe("TableComponent", () => {
 			expect(component.paginationConfig.totalItems).toBe(DUMMY_DATA.length);
 		});
 	});
+
+	describe("custom table actions", () => {
+		const action1: StarkAction = { id: "action-1", label: "action 1", icon: "question", isEnabled: true, actionCall: noop };
+		const action2: StarkAction = { id: "action-2", label: "action 2", icon: "question", isEnabled: true, actionCall: noop };
+
+		beforeEach(() => {
+			hostComponent.customTableActions = [action1, action2];
+			hostFixture.detectChanges();
+		});
+
+		it("should render when set", () => {
+			const actionElement1 = hostFixture.debugElement.query(By.css("stark-action-bar #-action-1"));
+			expect(actionElement1).toBeTruthy("First action should be rendered.");
+
+			const actionElement2 = hostFixture.debugElement.query(By.css("stark-action-bar #-action-2"));
+			expect(actionElement2).toBeTruthy("Second action should be rendered.");
+		});
+
+		it("should update when changed", () => {
+			hostComponent.customTableActions = [action1];
+			hostFixture.detectChanges();
+
+			const actionElement1 = hostFixture.debugElement.query(By.css("stark-action-bar #-action-1"));
+			expect(actionElement1).toBeTruthy("First action is not rendered.");
+
+			const actionElement2 = hostFixture.debugElement.query(By.css("stark-action-bar #-action-2"));
+			expect(actionElement2).toBeNull("Section action should not be rendered.");
+		});
+	});
 });
diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -429,13 +429,6 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 		this.logger.debug(componentName + ": component initialized");
 
 		this._resetSelection();
-
-		if (this.customTableActionsType === "regular") {
-			this.customTableRegularActions = { actions: this.customTableActions || [] };
-		} else {
-			this.customTableRegularActions = { actions: [] };
-			this.customTableAltActions = this.customTableActions;
-		}
 	}
 
 	/**
@@ -533,6 +526,15 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 		if (changes["multiSelect"]) {
 			this._resetSelection();
 		}
+
+		if (changes["customTableActionsType"] || changes["customTableActions"]) {
+			if (this.customTableActionsType === "regular") {
+				this.customTableRegularActions = { actions: this.customTableActions || [] };
+			} else {
+				this.customTableRegularActions = { actions: [] };
+				this.customTableAltActions = this.customTableActions;
+			}
+		}
 	}
 
 	/**

diff --git a/packages/stark-ui/src/modules/table/table.module.ts b/packages/stark-ui/src/modules/table/table.module.ts
@@ -28,9 +28,13 @@ import { mergeUiTranslations } from "../../common/translations";
 	entryComponents: [StarkTableMultisortDialogComponent],
 	exports: [StarkTableComponent, StarkTableColumnComponent],
 	imports: [
+		// Common
 		CommonModule,
 		FormsModule,
 		ReactiveFormsModule,
+		TranslateModule,
+
+		// Material
 		MatButtonModule,
 		MatCheckboxModule,
 		MatDialogModule,
@@ -41,7 +45,8 @@ import { mergeUiTranslations } from "../../common/translations";
 		MatSortModule,
 		MatTableModule,
 		MatTooltipModule,
-		TranslateModule,
+
+		// Stark
 		StarkActionBarModule,
 		StarkPaginationModule,
 		StarkMinimapModule