[NAE-2496] Custom Component Registry for Case Views

projects/nae-example-app/src/app/app.module.ts

@@ -5,6 +5,7 @@ import {AppComponent} from './app.component';
 import {
     AuthenticationModule,
     ConfigurationService,
+    PanelItemComponentRegistryService,
     CovalentModule,
     ComponentRegistryService,
     DialogModule,
@@ -49,6 +50,7 @@ import {PasswordFormComponent} from './doc/forms/email-form/password-form.compon
 import {RegisterFormComponent} from './doc/forms/register-form/register-form.component';
 import {HeadersComponent} from './doc/headers/headers.component';
 import {PanelsComponent} from './doc/panels/panels.component';
+import {EnumerationValuePanelItemComponent} from './doc/panels/test-enum/enumeration-value-panel-item.component';
 import {DashboardExampleComponent} from './doc/dashboard-example/dashboard-example.component';
 import {FilterRepositoryExampleComponent} from './doc/filter-repository-example/filter-repository-example.component';
 import {ProfileComponent} from './doc/profile/profile.component';
@@ -164,6 +166,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         RegisterFormComponent,
         HeadersComponent,
         PanelsComponent,
+        EnumerationValuePanelItemComponent,
         DashboardExampleComponent,
         FilterRepositoryExampleComponent,
         ProfileComponent,
@@ -285,7 +288,8 @@ export function HttpLoaderFactory(http: HttpClient) {
 })
 export class AppModule {
 
-    constructor(registry: ComponentRegistryService) {
+    constructor(registry: ComponentRegistryService,
+                panelItemRegistry: PanelItemComponentRegistryService) {
         registry.register('email', (injector: Injector) => new ComponentPortal(EmailSubmissionFormComponent, null, injector));
         registry.register('workflow-view', (injector: Injector) => new ComponentPortal(WorkflowViewExampleComponent, null, injector));
         registry.register('task-view', (injector: Injector) => new ComponentPortal(TaskViewComponent, null, injector));
@@ -294,5 +298,11 @@ export class AppModule {
         registry.register(Dashboard.FILTER_TAB_VIEW_ID, (injector: Injector) => new ComponentPortal(FilterFieldTabViewComponent, null, injector));
         registry.registerType(Dashboard.FILTER_CASE_VIEW_ID, FilterFieldTabbedCaseViewComponent);
         registry.registerType(Dashboard.FILTER_TASK_VIEW_ID, FilterFieldTabbedTaskViewComponent);
+
+
+        panelItemRegistry.registerIfAbsent('enumeration', "totok", injector =>
+            new ComponentPortal(EnumerationValuePanelItemComponent, null, injector));
+        panelItemRegistry.registerIfAbsent('enumeration_map', "totok", injector =>
+            new ComponentPortal(EnumerationValuePanelItemComponent, null, injector));
     }
 }

projects/nae-example-app/src/app/doc/panels/panels.component.ts

@@ -57,13 +57,41 @@ export class PanelsComponent implements OnInit {
             processIdentifier: 'net',
             title: 'Case title',
             icon: 'nature',
-            immediateData: [],
             color: 'purple',
             creationDate: [2020, 4, 6, 13, 37],
             author: {
                 email: 'example@example.com',
                 fullName: 'Net Grif',
             },
+            immediateData: [
+                {
+                    stringId: 'enum_status',
+                    title: 'Enum value',
+                    type: 'enumeration',
+                    value: {defaultValue: 'Approved', translations: {}},
+                    component: {
+                        name: 'value',
+                        properties: {
+                            'Approved-background': '#bde3fb',
+                            'Approved-color': '#0790FF',
+                        }
+                    }
+                },
+                {
+                    stringId: 'icon_status',
+                    title: 'Icon',
+                    type: 'enumeration',
+                    value: {defaultValue: 'Approval', translations: {}},
+                    component: {
+                        name: 'icon',
+                        optionIcons: [
+                            {key: 'Preparation', type: 'material', value: 'schedule'},
+                            {key: 'Approved', type: 'material', value: 'check_circle'},
+                            {key: 'Approval', type: 'material', value: 'verified'}
+                        ]
+                    }
+                }
+            ],
             resetArcTokens: null,
             stringId: null,
             petriNetId: null,
@@ -88,8 +116,9 @@ export class PanelsComponent implements OnInit {
         this.featuredFields$ = new BehaviorSubject<Array<HeaderColumn>>([
             new HeaderColumn(HeaderColumnType.META, 'visualId', 'Visual ID', 'text'),
             new HeaderColumn(HeaderColumnType.META, 'title', 'Title', 'text'),
+            new HeaderColumn(HeaderColumnType.IMMEDIATE, 'enum_status', 'Enum value', 'enumeration', true, 'net'),
+            new HeaderColumn(HeaderColumnType.IMMEDIATE, 'icon_status', 'Icon', 'enumeration', true, 'net'),
             new HeaderColumn(HeaderColumnType.META, 'author', 'Author', 'text'),
-            new HeaderColumn(HeaderColumnType.META, 'creationDate', 'Creation date', 'text'),
         ]);
         this.workflowFields$ = new BehaviorSubject<Array<HeaderColumn>>([
             new HeaderColumn(HeaderColumnType.META, WorkflowMetaField.INITIALS, 'Initials', 'text'),

projects/nae-example-app/src/app/doc/panels/test-enum/enumeration-value-panel-item.component.html

@@ -0,0 +1,7 @@
+<span class="panel-text enumeration-value-panel-item"
+      [ngClass]="{'text-column-ellipsis': data.textEllipsis, 'text-column-word-wrap': !data.textEllipsis}"
+      [style.backgroundColor]="backgroundColor"
+      [style.color]="color"
+      [matTooltip]="data.featuredValue.value"
+      [matTooltipDisabled]="!data.textEllipsis"
+      [matTooltipClass]="'pre-line-dialog'">{{data.featuredValue.value}}</span>

projects/nae-example-app/src/app/doc/panels/test-enum/enumeration-value-panel-item.component.scss

@@ -0,0 +1,7 @@
+.enumeration-value-panel-item {
+    display: inline-block;
+    min-width: 0;
+    padding: 4px 12px;
+    font-weight: 600;
+    line-height: 24px;
+}

projects/nae-example-app/src/app/doc/panels/test-enum/enumeration-value-panel-item.component.ts

@@ -0,0 +1,34 @@
+import {Component, Inject} from '@angular/core';
+import {NAE_PANEL_ITEM_DATA, PanelItemPortalData} from 'netgrif-components-core';
+
+@Component({
+    selector: 'nae-enumeration-value-panel-item',
+    templateUrl: './enumeration-value-panel-item.component.html',
+    styleUrls: ['./enumeration-value-panel-item.component.scss']
+})
+export class EnumerationValuePanelItemComponent {
+    public readonly backgroundColor: string | undefined;
+    public readonly color: string | undefined;
+
+    constructor(@Inject(NAE_PANEL_ITEM_DATA) public readonly data: PanelItemPortalData) {
+        const optionKey = this.resolveOptionKey(data.featuredValue.rawValue);
+        this.backgroundColor = this.resolveStyleProperty(optionKey, 'background');
+        this.color = this.resolveStyleProperty(optionKey, 'color');
+    }
+
+    private resolveOptionKey(rawValue: unknown): string | undefined {
+        if (typeof rawValue === 'string') {
+            return rawValue;
+        }
+        if (rawValue && typeof rawValue === 'object' && 'defaultValue' in rawValue
+            && typeof rawValue.defaultValue === 'string') {
+            return rawValue.defaultValue;
+        }
+        return undefined;
+    }
+
+    private resolveStyleProperty(optionKey: string | undefined, property: string): string | undefined {
+        const properties = this.data.featuredValue.component?.properties;
+        return optionKey ? properties?.[`${optionKey}-${property}`] ?? properties?.[property] : properties?.[property];
+    }
+}

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts

@@ -15,14 +15,15 @@ import {
     Filter,
     NAE_NEW_CASE_CONFIGURATION,
     NAE_BASE_FILTER, AllowedNetsServiceFactory, AllowedNetsService, SavedFilterMetadata, OverflowService,
-    HeaderSortingMode, NAE_HEADER_SORTING_MODE, Case
+    HeaderSortingMode, NAE_HEADER_SORTING_MODE, Case, CasePanelConfiguration, NAE_CASE_PANEL_CONFIGURATION
 } from '@netgrif/components-core';
 import {HeaderComponent} from '@netgrif/components';
 import {Subject} from 'rxjs';
 
 interface ExampleInjectedData extends InjectedTabbedCaseViewData {
     exampleUseCache: boolean;
     headerSortingMode: HeaderSortingMode;
+    showCasePanelIcon?: boolean;
 }
 
 const localAllowedNetsFactory = (factory: AllowedNetsServiceFactory) => {
@@ -54,6 +55,10 @@ const headerSortingModeFactory = (injectedTabData: ExampleInjectedData): HeaderS
     return injectedTabData.headerSortingMode;
 };
 
+const casePanelConfigurationFactory = (injectedTabData: ExampleInjectedData): CasePanelConfiguration => {
+    return {showCasePanelIcon: injectedTabData.showCasePanelIcon ?? true};
+};
+
 @Component({
     selector: 'nae-app-tabbed-case-view',
     templateUrl: './tabbed-case-view.component.html',
@@ -72,7 +77,8 @@ const headerSortingModeFactory = (injectedTabData: ExampleInjectedData): HeaderS
             deps: [AllowedNetsServiceFactory]},
         {provide: NAE_SEARCH_CATEGORIES, useFactory: defaultCaseSearchCategoriesFactory, deps: [CategoryFactory]},
         {provide: NAE_NEW_CASE_CONFIGURATION, useFactory: newCaseConfigFactory, deps: [NAE_TAB_DATA]},
-        {provide: NAE_HEADER_SORTING_MODE, useFactory: headerSortingModeFactory, deps: [NAE_TAB_DATA]}
+        {provide: NAE_HEADER_SORTING_MODE, useFactory: headerSortingModeFactory, deps: [NAE_TAB_DATA]},
+        {provide: NAE_CASE_PANEL_CONFIGURATION, useFactory: casePanelConfigurationFactory, deps: [NAE_TAB_DATA]}
     ]
 })
 export class TabbedCaseViewComponent extends AbstractTabbedCaseViewComponent implements AfterViewInit {

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-views-example.component.spec.ts

@@ -34,7 +34,8 @@ describe('TabViewExampleComponent', () => {
         }));
         expect(component.tabs[1].injectedObject).toEqual(jasmine.objectContaining({
             exampleUseCache: false,
-            headerSortingMode: HeaderSortingMode.MULTI
+            headerSortingMode: HeaderSortingMode.MULTI,
+            showCasePanelIcon: false
         }));
         expect(component.tabs[2].injectedObject).toEqual(jasmine.objectContaining({
             exampleUseCache: true,

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-views-example.component.ts

@@ -58,7 +58,8 @@ export class TabbedViewsExampleComponent {
                     tabViewComponent: TabbedTaskViewComponent,
                     tabViewOrder: 0,
                     exampleUseCache: false,
-                    headerSortingMode: HeaderSortingMode.MULTI
+                    headerSortingMode: HeaderSortingMode.MULTI,
+                    showCasePanelIcon: false
                 }
             },
             {

projects/netgrif-components-core/src/lib/data-fields/data-field-template/abstract-data-field-template.component.spec.ts

@@ -11,6 +11,8 @@ import {ConfigurationService} from '../../configuration/configuration.service';
 import {MaterialModule} from '../../material/material.module';
 import {PaperViewService} from '../../navigation/quick-panel/components/paper-view.service';
 import {ComponentRegistryService} from "../../registry/component-registry.service";
+import {ComponentPortal} from '@angular/cdk/portal';
+import {EnumerationField} from '../enumeration-field/models/enumeration-field';
 
 describe('AbstractDataFieldTemplateComponent', () => {
     let component: TestDatafieldTemplateComponent;
@@ -19,7 +21,8 @@ describe('AbstractDataFieldTemplateComponent', () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [MaterialModule, AngularResizeEventModule, NoopAnimationsModule],
-            declarations: [TestDatafieldTemplateComponent, TestWrapperComponent],
+            declarations: [TestDatafieldTemplateComponent, TestWrapperComponent, TestDataFieldComponent,
+                TestExactDataFieldComponent],
             providers: [
                 {provide: ConfigurationService, useClass: TestConfigurationService},
                 {provide: ViewService, useClass: TestViewService},
@@ -38,6 +41,28 @@ describe('AbstractDataFieldTemplateComponent', () => {
         expect(component).toBeTruthy();
     });
 
+    it('should use the default data field component when the requested component is not registered', () => {
+        const registry = TestBed.inject(ComponentRegistryService);
+        registry.register('enumeration-default', injector => new ComponentPortal(TestDataFieldComponent, null, injector));
+
+        component.dataField = new EnumerationField('', '', 'Approved', [], {}, undefined, undefined,
+            undefined, undefined, [], {name: 'totok'});
+
+        expect(component.componentPortal).toBeTruthy();
+        expect(component.componentPortal.component).toBe(TestDataFieldComponent);
+    });
+
+    it('should prefer the requested data field component over the default component', () => {
+        const registry = TestBed.inject(ComponentRegistryService);
+        registry.register('enumeration-default', injector => new ComponentPortal(TestDataFieldComponent, null, injector));
+        registry.register('enumeration-totok', injector => new ComponentPortal(TestExactDataFieldComponent, null, injector));
+
+        component.dataField = new EnumerationField('', '', 'Approved', [], {}, undefined, undefined,
+            undefined, undefined, [], {name: 'totok'});
+
+        expect(component.componentPortal.component).toBe(TestExactDataFieldComponent);
+    });
+
     afterEach(() => {
         TestBed.resetTestingModule();
     });
@@ -56,6 +81,20 @@ class TestDatafieldTemplateComponent extends AbstractDataFieldTemplateComponent
     }
 }
 
+@Component({
+    selector: 'ncc-test-data-field',
+    template: ''
+})
+class TestDataFieldComponent {
+}
+
+@Component({
+    selector: 'ncc-test-exact-data-field',
+    template: ''
+})
+class TestExactDataFieldComponent {
+}
+
 @Component({
     selector: 'ncc-test-wrapper',
     template: '<ncc-test-datafield-template [dataField]="field"></ncc-test-datafield-template>'

projects/netgrif-components-core/src/lib/data-fields/data-field-template/abstract-data-field-template.component.ts

@@ -8,7 +8,6 @@ import {FormControl} from "@angular/forms";
 import {ComponentPortal} from "@angular/cdk/portal";
 import {ComponentRegistryService} from "../../registry/component-registry.service";
 import {DATA_FIELD_PORTAL_DATA, DataFieldPortalData} from "../models/data-field-portal-data-injection-token";
-import {ButtonField} from '../button-field/models/button-field';
 
 /**
  * Provides a responsive layout to data fields where their appearance can change based on the width of space they have available.
@@ -128,11 +127,12 @@ export abstract class AbstractDataFieldTemplateComponent implements OnInit {
 
 
     public hasComponent(): boolean {
-        return this._componentRegistry.contains(this.dataField.getTypedComponentType());
+        return this.resolveRegisteredComponentType(this.dataField) !== undefined;
     }
 
     public resolveComponentPortal(dataField: DataField<any>, showLargeLayout: WrappedBoolean, formControlRef: FormControl, additionalFieldProperties?: {[k:string]: string | number}): ComponentPortal<any> {
-        if (this.hasComponent()) {
+        const componentType = this.resolveRegisteredComponentType(dataField);
+        if (componentType) {
             const portalInjector = Injector.create({
                 providers: [
                     {
@@ -146,11 +146,20 @@ export abstract class AbstractDataFieldTemplateComponent implements OnInit {
                     }],
                 parent: this.injector
             });
-            return this._componentRegistry.get(this.dataField.getTypedComponentType(), portalInjector);
+            return this._componentRegistry.get(componentType, portalInjector);
         }
         return undefined;
     }
 
+    protected resolveRegisteredComponentType(dataField: DataField<any>): string | undefined {
+        const componentType = dataField.getTypedComponentType();
+        if (this._componentRegistry.contains(componentType)) {
+            return componentType;
+        }
+        const defaultComponentType = dataField.getTypedDefaultComponentType();
+        return this._componentRegistry.contains(defaultComponentType) ? defaultComponentType : undefined;
+    }
+
     /**
      * @returns `false` if the data field uses the `TemplateAppearance.MATERIAL` and `true` otherwise.
      */

projects/netgrif-components-core/src/lib/data-fields/models/abstract-data-field.ts

@@ -388,6 +388,15 @@ export abstract class DataField<T> {
         return this.component?.name ?? DEFAULT;
     }
 
+    public getTypedDefaultComponentType(): string {
+        const componentType = this.getComponentType();
+        const typedComponentType = this.getTypedComponentType();
+        if (componentType === DEFAULT || !typedComponentType.endsWith(componentType)) {
+            return typedComponentType;
+        }
+        return `${typedComponentType.slice(0, -componentType.length)}${DEFAULT}`;
+    }
+
     public abstract getTypedComponentType(): string;
 
     public destroy(): void {

projects/netgrif-components-core/src/lib/panel/abstract/featured-value.ts

@@ -1,12 +1,15 @@
 import {FilterMetadataAllowedNets} from '../../search/models/persistance/filter-metadata-allowed-nets';
+import {Component} from '../../data-fields/models/component';
 
 /**
  * Represents a value featured on a panel
  */
 export interface FeaturedValue {
     value: string;
+    rawValue?: unknown;
     icon: string;
     type: string;
+    component?: Component;
     /**
      * Only for immediate filter fields
      */