Merge pull request #90 from netgrif/NAE-1690

Kovy95 · web-flow · commit bc4912b9fb0e · 2022-08-09T09:38:50.000+02:00
[NAE-1690] Fix header responsive  overflow mode
diff --git a/projects/nae-example-app/src/app/doc/case-view/case-view.component.ts b/projects/nae-example-app/src/app/doc/case-view/case-view.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, Optional, ViewChild} from '@angular/core';
 import {
     AbstractCaseViewComponent,
     Case,
@@ -34,8 +34,8 @@ const baseFilterFactory = () => {
     providers: [
         CategoryFactory,
         CaseViewService,
-        OverflowService,
         SearchService,
+        OverflowService,
         {   provide: NAE_BASE_FILTER,
             useFactory: baseFilterFactory},
         {   provide: AllowedNetsService,
@@ -52,7 +52,7 @@ export class CaseViewComponent extends AbstractCaseViewComponent implements Afte
 
     additionalFilterData: TaskSetDataRequestFields;
 
-    constructor(caseViewService: CaseViewService, protected overflowService: OverflowService) {
+    constructor(caseViewService: CaseViewService, @Optional() overflowService: OverflowService) {
         super(caseViewService, overflowService, undefined, {
             enableCaseTitle: true,
             isCaseTitleRequired: false
diff --git a/projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts b/projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, Inject, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, Inject, Optional, ViewChild} from '@angular/core';
 import {
     CaseViewService,
     CategoryFactory,
@@ -75,7 +75,7 @@ export class TabbedCaseViewComponent extends AbstractTabbedCaseViewComponent imp
 
     constructor(caseViewService: CaseViewService,
                 loggerService: LoggerService,
-                overflowService: OverflowService,
+                @Optional() overflowService: OverflowService,
                 @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedCaseViewData) {
         super(caseViewService, loggerService, injectedTabData, overflowService, undefined, undefined, {
             enableCaseTitle: true,
diff --git a/projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.ts b/projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.ts
@@ -11,6 +11,7 @@ import {
     TaskViewService,
     ViewIdService,
     NAE_BASE_FILTER,
+    OverflowService,
     AllowedNetsService,
     AllowedNetsServiceFactory,
     tabbedAllowedNetsServiceFactory,
@@ -35,6 +36,7 @@ const baseFilterFactory = (injectedTabData: InjectedTabbedTaskViewData) => {
         TaskViewService,
         SearchService,
         ChangedFieldsService,
+        OverflowService,
         {
             provide: NAE_BASE_FILTER,
             useFactory: baseFilterFactory,
diff --git a/projects/nae-example-app/src/app/doc/task-view/task-view.component.ts b/projects/nae-example-app/src/app/doc/task-view/task-view.component.ts
@@ -11,6 +11,7 @@ import {
     NAE_VIEW_ID_SEGMENT,
     ViewIdService,
     CategoryFactory,
+    OverflowService,
     NAE_SEARCH_CATEGORIES,
     defaultTaskSearchCategoriesFactory,
     NAE_ASYNC_RENDERING_CONFIGURATION,
diff --git a/projects/netgrif-components-core/src/lib/header/abstract-header-service.ts b/projects/netgrif-components-core/src/lib/header/abstract-header-service.ts
@@ -16,7 +16,7 @@ import {SortDirection} from '@angular/material/sort';
 import {HeaderChangeType} from './models/user-changes/header-change-type';
 import {ViewIdService} from '../user/services/view-id.service';
 import {Net} from '../process/net';
-import { OverflowService } from './services/overflow.service';
+import {OverflowService} from './services/overflow.service';
 
 @Injectable()
 export abstract class AbstractHeaderService implements OnDestroy {
@@ -81,7 +81,11 @@ export abstract class AbstractHeaderService implements OnDestroy {
     }
 
     get overflowMode(): boolean {
-        return this._overflowService.overflowMode;
+        if (!!this._overflowService) {
+            return this._overflowService.overflowMode;
+        } else {
+            return false;
+        }
     }
 
     get headerColumnCount(): number {
@@ -304,7 +308,11 @@ export abstract class AbstractHeaderService implements OnDestroy {
                 header.sortDirection = '';
             }
         });
-        this._headerChange$.next({headerType: this.headerType, changeType: HeaderChangeType.SORT, description: sortChangeDescription});
+        this._headerChange$.next({
+            headerType: this.headerType,
+            changeType: HeaderChangeType.SORT,
+            description: sortChangeDescription
+        });
     }
 
     /**
diff --git a/projects/netgrif-components-core/src/lib/header/abstract-header.component.ts b/projects/netgrif-components-core/src/lib/header/abstract-header.component.ts
@@ -1,4 +1,4 @@
-import {Component, Injector, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, Injector, Input, OnDestroy, OnInit, Optional} from '@angular/core';
 import {AbstractHeaderService} from './abstract-header-service';
 import {CaseHeaderService} from './case-header/case-header.service';
 import {TaskHeaderService} from './task-header/task-header.service';
@@ -40,7 +40,7 @@ export abstract class AbstractHeaderComponent implements OnInit, OnDestroy {
 
     constructor(protected _injector: Injector,
                 protected _translate: TranslateService,
-                protected _overflowService: OverflowService) {
+                @Optional() protected _overflowService: OverflowService) {
         (this._overflowService !== null) ?
             this.initializeFormControls(true) :
             this.initializeFormControls(false);
diff --git a/projects/netgrif-components-core/src/lib/header/services/overflow.service.ts b/projects/netgrif-components-core/src/lib/header/services/overflow.service.ts
@@ -10,7 +10,7 @@ interface OverflowState {
 @Injectable()
 export class OverflowService {
 
-    protected readonly DEFAULT_COLUMN_WIDTH = 190;
+    protected readonly DEFAULT_COLUMN_WIDTH = 200;
     protected readonly DEFAULT_COLUMN_COUNT = 6;
     private _overflowMode: boolean;
     private _columnWidth: number;
diff --git a/projects/netgrif-components-core/src/lib/panel/abstract/panel-with-header-binding.ts b/projects/netgrif-components-core/src/lib/panel/abstract/panel-with-header-binding.ts
@@ -1,7 +1,8 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit, Optional} from '@angular/core';
 import {Observable, Subscription} from 'rxjs';
 import {HeaderColumn, HeaderColumnType} from '../../header/models/header-column';
 import {FeaturedValue} from './featured-value';
+import {OverflowService} from '../../header/services/overflow.service';
 
 @Component({
     selector: 'ncc-abstract-panel-with-header-binding',
@@ -14,7 +15,15 @@ export abstract class AbstractPanelWithHeaderBindingComponent implements OnInit,
     protected _lastSelectedHeaders: Array<HeaderColumn>;
     protected sub: Subscription;
 
-    protected constructor() {
+    protected constructor(@Optional() protected _overflowService: OverflowService) {
+    }
+
+    get overflowMode(): boolean {
+        if(!!this._overflowService){
+            return this._overflowService.overflowMode;
+        } else {
+            return false;
+        }
     }
 
     ngOnInit(): void {
diff --git a/projects/netgrif-components-core/src/lib/panel/abstract/panel-with-immediate-data.ts b/projects/netgrif-components-core/src/lib/panel/abstract/panel-with-immediate-data.ts
@@ -2,7 +2,7 @@ import {AbstractPanelWithHeaderBindingComponent} from './panel-with-header-bindi
 import {NaeDate, toMoment} from '../../resources/types/nae-date-type';
 import {DATE_FORMAT_STRING, DATE_TIME_FORMAT_STRING} from '../../moment/time-formats';
 import {TranslateService} from '@ngx-translate/core';
-import {Component, OnDestroy} from '@angular/core';
+import {Component, OnDestroy, Optional} from '@angular/core';
 import {FeaturedValue} from './featured-value';
 import {CurrencyPipe} from '@angular/common';
 import {ImmediateData} from '../../resources/interface/immediate-data';
@@ -15,12 +15,8 @@ import {OverflowService} from '../../header/services/overflow.service';
 export abstract class AbstractPanelWithImmediateDataComponent extends AbstractPanelWithHeaderBindingComponent implements OnDestroy {
     protected constructor(protected _translate: TranslateService,
                           protected _currencyPipe: CurrencyPipe,
-                          protected _overflowService: OverflowService) {
-        super();
-    }
-
-    get overflowMode(): boolean {
-        return this._overflowService.overflowMode;
+                          @Optional() protected _overflowService: OverflowService) {
+        super(_overflowService);
     }
 
     ngOnDestroy(): void {
diff --git a/projects/netgrif-components-core/src/lib/panel/case-panel/abstract-case-panel.component.spec.ts b/projects/netgrif-components-core/src/lib/panel/case-panel/abstract-case-panel.component.spec.ts
@@ -63,7 +63,11 @@ describe('AbstractCasePanelComponent', () => {
                 {provide: AuthenticationMethodService, useClass: MockAuthenticationMethodService},
                 {provide: AuthenticationService, useClass: MockAuthenticationService},
                 SignUpService,
-                {provide: AllowedNetsService, useFactory: TestCaseViewAllowedNetsFactory, deps: [AllowedNetsServiceFactory]}
+                {
+                    provide: AllowedNetsService,
+                    useFactory: TestCaseViewAllowedNetsFactory,
+                    deps: [AllowedNetsServiceFactory]
+                }
             ],
             declarations: [
                 TestCasePanelComponent,
@@ -101,13 +105,17 @@ describe('AbstractCasePanelComponent', () => {
     template: ''
 })
 class TestCasePanelComponent extends AbstractCasePanelComponent {
-    constructor(protected _caseResourceService: CaseResourceService, protected _caseViewService: CaseViewService,
-                protected _snackBarService: SnackBarService, protected _translateService: TranslateService,
-                protected _log: LoggerService, @Optional() protected overflowService: OverflowService,
-                protected _userService: UserService, protected _currencyPipe: CurrencyPipe,
-                protected _permissionService: PermissionService) {
-        super(_caseResourceService, _caseViewService, _snackBarService, _translateService, _log, overflowService,
-            _userService, _currencyPipe, _permissionService);
+    constructor(protected _caseResourceService: CaseResourceService,
+                protected _caseViewService: CaseViewService,
+                protected _snackBarService: SnackBarService,
+                protected _translateService: TranslateService,
+                protected _log: LoggerService,
+                protected _userService: UserService,
+                protected _currencyPipe: CurrencyPipe,
+                protected _permissionService: PermissionService,
+                @Optional() protected overflowService: OverflowService) {
+        super(_caseResourceService, _caseViewService, _snackBarService, _translateService, _log,
+            _userService, _currencyPipe, _permissionService, overflowService,);
     }
 }
 
@@ -116,7 +124,7 @@ class TestCasePanelComponent extends AbstractCasePanelComponent {
     template: '<ncc-test-case-panel [selectedHeaders$]="selectedHeaders" [case_]="case_"> </ncc-test-case-panel>'
 })
 class TestWrapperComponent {
-    selectedHeaders =  of([
+    selectedHeaders = of([
         new HeaderColumn(HeaderColumnType.META, CaseMetaField.VISUAL_ID, 'string', 'string'),
         new HeaderColumn(HeaderColumnType.META, CaseMetaField.AUTHOR, 'string', 'string'),
         new HeaderColumn(HeaderColumnType.META, CaseMetaField.TITLE, 'string', 'string'),
@@ -155,7 +163,7 @@ class TestWrapperComponent {
             {stringId: 'date', title: 'string', type: 'date', value: [2020, 1, 1, 10, 10]},
             {stringId: 'string', title: 'string', type: 'string', value: 'dasdsadsad'},
             {stringId: 'dateTime', title: 'string', type: 'dateTime', value: [2020, 1, 1, 10, 10]},
-            {stringId: 'enum', title: 'string', type: 'enumeration', value: { defaultValue: 'dasd'}},
+            {stringId: 'enum', title: 'string', type: 'enumeration', value: {defaultValue: 'dasd'}},
         ]
     };
 }
diff --git a/projects/netgrif-components-core/src/lib/panel/case-panel/abstract-case-panel.component.ts b/projects/netgrif-components-core/src/lib/panel/case-panel/abstract-case-panel.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, Optional} from '@angular/core';
 import {Observable} from 'rxjs';
 import {Case} from '../../resources/interface/case';
 import {toMoment} from '../../resources/types/nae-date-type';
@@ -41,10 +41,10 @@ export abstract class AbstractCasePanelComponent extends AbstractPanelWithImmedi
                           protected _snackBarService: SnackBarService,
                           protected _translateService: TranslateService,
                           protected _log: LoggerService,
-                          protected _overflowService: OverflowService,
                           protected _userService: UserService,
                           protected _currencyPipe: CurrencyPipe,
-                          protected _permissionService: PermissionService) {
+                          protected _permissionService: PermissionService,
+                          @Optional() protected _overflowService: OverflowService,) {
         super(_translateService, _currencyPipe, _overflowService);
     }
 
diff --git a/projects/netgrif-components-core/src/lib/panel/task-panel/abstract-task-panel.component.ts b/projects/netgrif-components-core/src/lib/panel/task-panel/abstract-task-panel.component.ts
@@ -132,7 +132,7 @@ export abstract class AbstractTaskPanelComponent extends AbstractPanelWithImmedi
                           protected _currencyPipe: CurrencyPipe,
                           protected _changedFieldsService: ChangedFieldsService,
                           protected _permissionService: PermissionService,
-                          overflowService: OverflowService) {
+                          @Optional() overflowService: OverflowService) {
         super(_translate, _currencyPipe, overflowService);
         this.taskEvent = new EventEmitter<TaskEventNotification>();
         this.panelRefOutput = new EventEmitter<MatExpansionPanel>();
diff --git a/projects/netgrif-components-core/src/lib/panel/workflow-panel/abstract-workflow-panel.component.ts b/projects/netgrif-components-core/src/lib/panel/workflow-panel/abstract-workflow-panel.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit, Optional} from '@angular/core';
 import {MatExpansionPanel} from '@angular/material/expansion';
 import {AbstractPanelWithHeaderBindingComponent} from '../abstract/panel-with-header-binding';
 import {HeaderColumn} from '../../header/models/header-column';
@@ -49,8 +49,8 @@ export abstract class AbstractWorkflowPanelComponent extends AbstractPanelWithHe
     protected constructor(protected _log: LoggerService,
                           protected _translate: TranslateService,
                           protected _workflowService: WorkflowViewService,
-                          protected _overflowService: OverflowService) {
-        super();
+                          @Optional() protected _overflowService: OverflowService) {
+        super(_overflowService);
 
         this._subscription = _translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
             this.panelContent.netIdentifier.title = this._translate.instant(this.TRANSLATION_NET);
@@ -83,10 +83,6 @@ export abstract class AbstractWorkflowPanelComponent extends AbstractPanelWithHe
         this.panelRef = panelRef;
     }
 
-    get overflowMode(): boolean {
-        return this._overflowService.overflowMode;
-    }
-
     /**
      * Handles the logic that should be executed when the "delete workflow" button is clicked.
      *
diff --git a/projects/netgrif-components/src/lib/panel/case-panel/case-panel.component.ts b/projects/netgrif-components/src/lib/panel/case-panel/case-panel.component.ts
@@ -1,5 +1,11 @@
 import {Component, Optional} from '@angular/core';
-import {AbstractCasePanelComponent, CaseViewService, LoggerService, OverflowService, UserService} from '@netgrif/components-core';
+import {
+    AbstractCasePanelComponent,
+    CaseViewService,
+    LoggerService,
+    OverflowService,
+    UserService
+} from '@netgrif/components-core';
 import {CaseResourceService, PermissionService} from '@netgrif/components-core';
 import {SnackBarService} from '@netgrif/components-core';
 import {TranslateService} from '@ngx-translate/core';
@@ -11,12 +17,16 @@ import {CurrencyPipe} from '@angular/common';
     styleUrls: ['./case-panel.component.scss']
 })
 export class CasePanelComponent extends AbstractCasePanelComponent {
-    constructor(protected _caseResourceService: CaseResourceService, protected _caseViewService: CaseViewService,
-                protected _snackBarService: SnackBarService, protected _translateService: TranslateService,
-                protected _log: LoggerService, @Optional() protected _overflowService: OverflowService,
-                protected _userService: UserService, protected _currencyPipe: CurrencyPipe,
-                public _permissionService: PermissionService) {
+    constructor(protected _caseResourceService: CaseResourceService,
+                protected _caseViewService: CaseViewService,
+                protected _snackBarService: SnackBarService,
+                protected _translateService: TranslateService,
+                protected _log: LoggerService,
+                protected _userService: UserService,
+                protected _currencyPipe: CurrencyPipe,
+                public _permissionService: PermissionService,
+                @Optional() protected _overflowService: OverflowService) {
         super(_caseResourceService, _caseViewService, _snackBarService,
-            _translateService, _log, _overflowService, _userService, _currencyPipe, _permissionService);
+            _translateService, _log, _userService, _currencyPipe, _permissionService, _overflowService);
     }
 }
diff --git a/projects/netgrif-components/src/lib/panel/public-workflow-panel/public-workflow-panel.component.ts b/projects/netgrif-components/src/lib/panel/public-workflow-panel/public-workflow-panel.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Optional} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {
     AbstractWorkflowPanelComponent,
@@ -13,7 +13,7 @@ import {
   styleUrls: ['./public-workflow-panel.component.scss']
 })
 export class PublicWorkflowPanelComponent extends AbstractWorkflowPanelComponent {
-    constructor(log: LoggerService, translate: TranslateService, workflowService: WorkflowViewService, overflowService: OverflowService) {
+    constructor(log: LoggerService, translate: TranslateService, workflowService: WorkflowViewService, @Optional() overflowService: OverflowService) {
         super(log, translate, workflowService, overflowService);
     }
 }
diff --git a/projects/netgrif-components/src/lib/panel/task-panel/task-panel.component.ts b/projects/netgrif-components/src/lib/panel/task-panel/task-panel.component.ts
@@ -24,7 +24,8 @@ import {
     TaskRequestStateService,
     TaskViewService,
     PermissionService,
-    ChangedFieldsService, OverflowService
+    ChangedFieldsService,
+    OverflowService
 } from '@netgrif/components-core';
 import {TaskContentComponent} from '../../task-content/task-content/task-content.component';
 import {TranslateService} from '@ngx-translate/core';
@@ -73,7 +74,7 @@ export class TaskPanelComponent extends AbstractTaskPanelComponent {
                 protected _currencyPipe: CurrencyPipe,
                 protected _changedFieldsService: ChangedFieldsService,
                 protected _permissionService: PermissionService,
-                overflowService: OverflowService) {
+                @Optional() overflowService: OverflowService) {
         super(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService,
             _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService,
             _assignPolicyService, _callChain, _taskOperations, _disableFunctions, _translate, _currencyPipe, _changedFieldsService,
diff --git a/projects/netgrif-components/src/lib/panel/workflow-panel/workflow-panel.component.ts b/projects/netgrif-components/src/lib/panel/workflow-panel/workflow-panel.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Optional} from '@angular/core';
 import {AbstractWorkflowPanelComponent, LoggerService, OverflowService, WorkflowViewService} from '@netgrif/components-core';
 import {TranslateService} from '@ngx-translate/core';
 
@@ -8,7 +8,7 @@ import {TranslateService} from '@ngx-translate/core';
     styleUrls: ['./workflow-panel.component.scss']
 })
 export class WorkflowPanelComponent extends AbstractWorkflowPanelComponent {
-    constructor(log: LoggerService, translate: TranslateService, workflowService: WorkflowViewService, overflowService: OverflowService) {
+    constructor(log: LoggerService, translate: TranslateService, workflowService: WorkflowViewService, @Optional() overflowService: OverflowService) {
         super(log, translate, workflowService, overflowService);
     }
 }
