Merge pull request NationalBankBelgium#1000 from SuperITMan/feature/i…

…mplement-generic-search

feat(stark-ui): implement generic search component in generic-search module

packages/rollup.config.common-data.js

@@ -8,6 +8,7 @@ const sourcemaps = require("rollup-plugin-sourcemaps");
 
 const globals = {
 	"@angularclass/hmr": "angularclass.hmr",
+	"@angular/animations": "ng.animations",
 	"@angular/cdk": "ng.cdk",
 	"@angular/cdk/collections": "ng.cdk.collections",
 	"@angular/cdk/layout": "ng.cdk.layout",

packages/stark-ui/assets/stark-ui-bundle.scss

@@ -25,6 +25,7 @@
 @import "../src/modules/collapsible/components/collapsible.component";
 @import "../src/modules/collapsible/components/collapsible-theme";
 @import "../src/modules/date-range-picker/components/date-range-picker.component";
+@import "../src/modules/generic-search/components/generic-search/generic-search.component";
 @import "../src/modules/language-selector/components/language-selector.component";
 @import "../src/modules/message-pane/components/message-pane.component";
 @import "../src/modules/message-pane/components/message-pane-theme";

packages/stark-ui/src/modules.ts

@@ -10,6 +10,7 @@ export * from "./modules/collapsible";
 export * from "./modules/date-picker";
 export * from "./modules/date-range-picker";
 export * from "./modules/dropdown";
+export * from "./modules/generic-search";
 export * from "./modules/keyboard-directives";
 export * from "./modules/language-selector";
 export * from "./modules/message-pane";

packages/stark-ui/src/modules/action-bar/components/action-bar.component.html

@@ -18,6 +18,7 @@
 					[matTooltip]="action.labelSwitchFunction ? (action.labelActivated | translate) : (action.label | translate)"
 					[disabled]="!action.isEnabled"
 					mat-icon-button
+					type="button"
 				>
 					<mat-icon
 						starkSvgViewBox
@@ -30,17 +31,31 @@
 					[ngClass]="{ disabled: !action.isEnabled }"
 					*ngIf="isExtended"
 				>
-					<span translate>{{ action.label }}</span></label
-				>
+					{{ action.label | translate }}
+				</label>
 			</ng-container>
 		</div>
 	</div>
 
 	<div *ngIf="mode === 'full' || alternativeActions" class="alt-actions">
-		<button class="extend-action-bar" color="primary" mat-icon-button *ngIf="mode === 'full'" (click)="toggleExtendedActionBar()">
+		<button
+			class="extend-action-bar"
+			color="primary"
+			mat-icon-button
+			*ngIf="mode === 'full'"
+			(click)="toggleExtendedActionBar()"
+			type="button"
+		>
 			<mat-icon starkSvgViewBox svgIcon="dots-horizontal" class="stark-small-icon"></mat-icon>
 		</button>
-		<button class="open-alt-actions" color="primary" mat-icon-button *ngIf="alternativeActions" [matMenuTriggerFor]="menu">
+		<button
+			class="open-alt-actions"
+			color="primary"
+			mat-icon-button
+			*ngIf="alternativeActions"
+			[matMenuTriggerFor]="menu"
+			type="button"
+		>
 			<mat-icon starkSvgViewBox svgIcon="dots-vertical" class="stark-small-icon"></mat-icon>
 		</button>
 		<mat-menu #menu="matMenu" xPosition="before">

packages/stark-ui/src/modules/dropdown/components/dropdown.component.spec.ts

@@ -26,7 +26,7 @@ import Spy = jasmine.Spy;
 			[options]="options"
 			[placeholder]="placeholder"
 			[required]="required"
-			(selectionChanged)="(selectionChanged)"
+			(selectionChanged)="selectionChanged($event)"
 			[value]="value"
 		>
 		</stark-dropdown>

packages/stark-ui/src/modules/generic-search.ts

@@ -0,0 +1,4 @@
+export * from "./generic-search/components";
+export * from "./generic-search/classes";
+export * from "./generic-search/entities";
+export * from "./generic-search/generic-search.module";

packages/stark-ui/src/modules/generic-search/classes.ts

@@ -0,0 +1,4 @@
+export * from "./classes/abstract-form-component";
+export * from "./classes/abstract-search-component";
+export * from "./classes/generic-search.service.intf";
+export * from "./classes/search-form-component.intf";

packages/stark-ui/src/modules/generic-search/classes/abstract-form-component.ts

@@ -0,0 +1,42 @@
+import { StarkLoggingService } from "@nationalbankbelgium/stark-core";
+
+/**
+ * @ignore
+ */
+const _cloneDeep: Function = require("lodash/cloneDeep");
+
+/**
+ * @ignore
+ */
+const _isEqual: Function = require("lodash/isEqual");
+
+export abstract class AbstractStarkFormComponent<CriteriaType> {
+	public originalCopy: CriteriaType;
+	public workingCopy: CriteriaType;
+
+	protected constructor(public logger: StarkLoggingService) {}
+
+	/**
+	 * Set the form's original copy to the object passed as parameter (a deep cloned copy). Default: empty object ({})
+	 * @param originalCopy - The object to be set as the form's original copy
+	 */
+	protected setOriginalCopy(originalCopy: CriteriaType = <any>{}): void {
+		this.originalCopy = originalCopy;
+		this.workingCopy = _cloneDeep(this.originalCopy);
+	}
+
+	/**
+	 * Revert the form's working copy back to the original copy (a deep clone copy)
+	 */
+	protected reset(): void {
+		this.workingCopy = _cloneDeep(this.originalCopy);
+	}
+
+	/**
+	 * Check whether the working copy is exactly the same as the original copy.
+	 * Performs a deep comparison between the two objects to determine if they are equivalent.
+	 */
+	protected isDirty(): boolean {
+		return !_isEqual(this.workingCopy, this.originalCopy);
+	}
+}