feat(platform): introduce variant management component (#9051)

* feat(platform): introduce variant management component * fix(platform): export directive * fix(platform): fix failing unit test * fix(platform): add decorator * fix(platform): pr comments * fix(platform): address pr comments * fix(platform): format file * chore: apply migrations * fix(platform): simplify code
SAP · Dec 12, 2022 · 751c55c · 751c55c
1 parent fa7a76d
commit 751c55c
Show file tree

Hide file tree

Showing 128 changed files with 4,483 additions and 115 deletions.
diff --git a/angular.json b/angular.json
@@ -274,6 +274,7 @@
         "docs-platform-thumbnail": "libs/docs/platform/thumbnail",
         "docs-platform-time-picker": "libs/docs/platform/time-picker",
         "docs-platform-upload-collection": "libs/docs/platform/upload-collection",
+        "docs-platform-variant-management": "libs/docs/platform/variant-management",
         "docs-platform-vhd": "libs/docs/platform/vhd",
         "docs-platform-wizard-generator": "libs/docs/platform/wizard-generator",
         "docs-schema": "libs/docs/schema",
@@ -332,6 +333,7 @@
         "platform-thumbnail": "libs/platform/src/lib/thumbnail",
         "platform-upload-collection": "libs/platform/src/lib/upload-collection",
         "platform-value-help-dialog": "libs/platform/src/lib/value-help-dialog",
+        "platform-variant-management": "libs/platform/src/lib/variant-management",
         "platform-wizard-generator": "libs/platform/src/lib/wizard-generator",
         "plugins-wdio": "libs/plugins/wdio",
         "workspace-tools": "tools"

diff --git a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts
@@ -58,6 +58,10 @@ export const components: SectionInterfaceContent[] = [
     {
         url: 'platform/message-popover',
         name: 'Message Popover'
+    },
+    {
+        url: 'platform/variant-management',
+        name: 'Variant Management'
     }
 ];
 

diff --git a/apps/docs/src/app/platform/platform-documentation.routes.ts b/apps/docs/src/app/platform/platform-documentation.routes.ts
@@ -279,6 +279,13 @@ export const ROUTES: Routes = [
                 path: 'message-popover',
                 loadChildren: () =>
                     import('@fundamental-ngx/docs/platform/message-popover').then((m) => m.MessagePopoverDocsModule)
+            },
+            {
+                path: 'variant-management',
+                loadChildren: () =>
+                    import('@fundamental-ngx/docs/platform/variant-management').then(
+                        (m) => m.VariantManagementDocsModule
+                    )
             }
         ]
     }

diff --git a/libs/core/src/lib/checkbox/checkbox/checkbox.component.scss b/libs/core/src/lib/checkbox/checkbox/checkbox.component.scss
@@ -8,4 +8,10 @@ fd-checkbox {
     .fd-checkbox__label {
         user-select: none;
     }
+
+    &.fd-checkbox--standalone {
+        .fd-checkbox__label {
+            margin: 0;
+        }
+    }
 }
diff --git a/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts b/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts
@@ -134,6 +134,11 @@ export class CheckboxComponent implements ControlValueAccessor, AfterViewInit, O
         return this._values;
     }
 
+    /** Whether checkbox should be rendered standalone (without any text). */
+    @HostBinding('class.fd-checkbox--standalone')
+    @Input()
+    standalone = false;
+
     /** @hidden */
     @HostBinding('style.position')
     readonly position = 'relative';

diff --git a/libs/core/src/lib/popover/base/base-popover.class.ts b/libs/core/src/lib/popover/base/base-popover.class.ts
@@ -149,4 +149,5 @@ export interface TriggerConfig {
     trigger: string;
     openAction: boolean;
     closeAction: boolean;
+    stopPropagation?: boolean;
 }
diff --git a/libs/core/src/lib/popover/popover-service/popover.service.ts b/libs/core/src/lib/popover/popover-service/popover.service.ts
@@ -249,10 +249,14 @@ export class PopoverService extends BasePopoverClass {
             this.triggers.forEach((trigger) => {
                 const triggerName = typeof trigger === 'string' ? trigger : trigger.trigger;
                 this._eventRef.push(
-                    this._renderer.listen(this._triggerElement.nativeElement, triggerName, () => {
+                    this._renderer.listen(this._triggerElement.nativeElement, triggerName, (event: Event) => {
                         const closeAction = typeof trigger !== 'object' || !!trigger.closeAction;
                         const openAction = typeof trigger !== 'object' || !!trigger.openAction;
                         this.toggle(openAction, closeAction);
+
+                        if (typeof trigger === 'object' && trigger.stopPropagation) {
+                            event.stopImmediatePropagation();
+                        }
                     })
                 );
             });

diff --git a/libs/core/src/lib/table/table.component.ts b/libs/core/src/lib/table/table.component.ts
@@ -131,8 +131,6 @@ export class TableComponent implements AfterViewInit, OnDestroy, FdTable {
     /** @hidden */
     _onRowKeydown(event: KeyboardEvent, tableRow: TableRowDirective): void {
         if (!event.defaultPrevented && KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW])) {
-            event.preventDefault();
-
             const dir = KeyUtil.isKeyCode(event, DOWN_ARROW) ? 1 : -1;
             const rows = dir === 1 ? this._rows.toArray() : this._rows.toArray().reverse();
             const currentRowIndex = rows.findIndex((row) => row === tableRow);

diff --git a/libs/core/src/lib/utils/pipes/filter-strings.pipe.ts b/libs/core/src/lib/utils/pipes/filter-strings.pipe.ts
@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Nullable } from '@fundamental-ngx/core/shared';
+
+@Pipe({
+    name: 'fdFilterStrings'
+})
+export class FilterStringsPipe implements PipeTransform {
+    /**
+     * Performs filtering.
+     * @param values Array of items.
+     * @param params Search parameters.
+     */
+    transform(values: any[] = [], params: { searchTerm: Nullable<string>; key: string }): any[] {
+        if (!params.searchTerm) {
+            return values;
+        }
+        if (params.key) {
+            values = values.filter((item) =>
+                item[params.key].toLocaleLowerCase().includes(params.searchTerm?.toLocaleLowerCase())
+            );
+        } else {
+            values = values.filter((item) => item.toLocaleLowerCase().includes(params.searchTerm?.toLocaleLowerCase()));
+        }
+        return values;
+    }
+}
diff --git a/libs/core/src/lib/utils/pipes/pipe.module.ts b/libs/core/src/lib/utils/pipes/pipe.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import { DisplayFnPipe } from './displayFn.pipe';
+import { FilterStringsPipe } from './filter-strings.pipe';
 import { SearchHighlightPipe } from './search-highlight.pipe';
 import { TwoDigitsPipe } from './two-digits.pipe';
 import { SafePipe } from './safe.pipe';
@@ -16,7 +17,8 @@ import { TruncatePipe } from './truncate.pipe';
         SafePipe,
         ValueByPathPipe,
         IsCompactDensityPipe,
-        TruncatePipe
+        TruncatePipe,
+        FilterStringsPipe
     ],
     exports: [
         DisplayFnPipe,
@@ -25,7 +27,8 @@ import { TruncatePipe } from './truncate.pipe';
         SafePipe,
         ValueByPathPipe,
         IsCompactDensityPipe,
-        TruncatePipe
+        TruncatePipe,
+        FilterStringsPipe
     ]
 })
 export class PipeModule {}
diff --git a/libs/core/src/lib/utils/public_api.ts b/libs/core/src/lib/utils/public_api.ts
@@ -30,6 +30,7 @@ export * from './pipes/safe.pipe';
 export * from './pipes/is-compact.pipe';
 export * from './pipes/value-by-path.pipe';
 export * from './pipes/truncate.pipe';
+export * from './pipes/filter-strings.pipe';
 
 export * from './drag-and-drop/drag-and-drop.module';
 export * from './drag-and-drop/dnd-list/dnd-list.directive';

diff --git a/libs/docs/platform/shared/api-files.ts b/libs/docs/platform/shared/api-files.ts
@@ -115,5 +115,6 @@ export const API_FILES = {
         'MessagePopoverFormWrapperComponent',
         'MessageViewComponent',
         'MessagePopoverFormItemDirective'
-    ]
+    ],
+    variantManagement: ['VariantManagementComponent', 'VariantManagementWrapperComponent']
 };
diff --git a/...rm/smart-filter-bar/examples/platform-smart-filter-bar-custom-filter-example.component.ts b/...rm/smart-filter-bar/examples/platform-smart-filter-bar-custom-filter-example.component.ts
@@ -77,8 +77,13 @@ export class PlatformSmartFilterBarSliderComponent extends BaseDynamicFormGenera
     viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider, smartFilterBarProvider]
 })
 export class PlatformSmartFilterBarDateRendererComponent extends BaseSmartFilterBarConditionField {
-    constructor(dialogService: DialogService, smartFilterBar: SmartFilterBar, injector: Injector) {
-        super(dialogService, smartFilterBar, injector);
+    constructor(
+        dialogService: DialogService,
+        smartFilterBar: SmartFilterBar,
+        smartFilterBarService: SmartFilterBarService,
+        injector: Injector
+    ) {
+        super(dialogService, smartFilterBar, smartFilterBarService, injector);
     }
 }
 

diff --git a/libs/docs/platform/variant-management/e2e/tsconfig.json b/libs/docs/platform/variant-management/e2e/tsconfig.json
@@ -0,0 +1,4 @@
+{
+    "extends": "../../../../../e2e/tsconfig.json",
+    "include": ["./**/*.e2e-spec.ts"]
+}
diff --git a/libs/docs/platform/variant-management/e2e/variant-management.e2e-spec.ts b/libs/docs/platform/variant-management/e2e/variant-management.e2e-spec.ts
@@ -0,0 +1,3 @@
+describe('VariantManagement test', () => {
+    // Placeholder for writing helpful e2e tests
+});
diff --git a/...orm/variant-management/examples/default/variant-management-default-example.component.html b/...orm/variant-management/examples/default/variant-management-default-example.component.html
@@ -0,0 +1,88 @@
+<fdp-variant-management-wrapper>
+    <fdp-smart-filter-bar [liveUpdate]="true" [subject]="subject">
+        <fdp-variant-management *fdpSmartFilterBarToolbarItem [variants]="variants" userName="John Doe" #variantManager>
+            <span *fdpVariantManagementDirtyLabel>changed</span>
+        </fdp-variant-management>
+    </fdp-smart-filter-bar>
+    <br />
+    <h4 fd-title>Line Items</h4>
+    <br />
+    <fdp-table
+        fdp-smart-filter-bar-subject
+        #subject="fdp-smart-filter-bar-subject"
+        [dataSource]="source"
+        [trackBy]="trackBy"
+        emptyTableMessage="No data found"
+    >
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [smartFilterBarFilterable]="false"
+            name="name"
+            key="name"
+            label="Name"
+            defaultSelected="true"
+            align="start"
+        >
+        </fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            name="description"
+            key="description"
+            defaultSelected="true"
+            label="Description"
+        >
+        </fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [dataType]="dataTypeEnum.NUMBER"
+            name="price"
+            key="price.value"
+            label="Price"
+            align="end"
+        >
+        </fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [filterType]="filterTypeEnum.MULTI"
+            name="status"
+            key="status"
+            label="Status"
+            required="true"
+            align="center"
+            hasOptions="true"
+        >
+        </fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [filterType]="filterTypeEnum.SINGLE"
+            name="statusColor"
+            key="statusColor"
+            label="Status color"
+            align="center"
+            hasOptions="true"
+        >
+        </fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [dataType]="dataTypeEnum.DATE"
+            name="date"
+            key="date"
+            label="Date"
+        ></fdp-column>
+
+        <fdp-column
+            fdp-smart-filter-bar-field-definition
+            [filterType]="filterTypeEnum.SINGLE"
+            [dataType]="dataTypeEnum.BOOLEAN"
+            name="verified"
+            key="verified"
+            label="Verified"
+            hasOptions="true"
+        ></fdp-column>
+    </fdp-table>
+</fdp-variant-management-wrapper>