[NAE-1758] Task on single task view is not rendering

- added virtual scroll viewport to wrap expansion panel

Author: renczesstefan

projects/netgrif-components-core/src/lib/view/task-view/abstract-single-task-view.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 import { AbstractViewWithHeadersComponent } from '../abstract/view-with-headers';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { TaskPanelData } from '../../panel/task-panel-list/task-panel-data/task-panel-data';
 import { TaskViewService } from './service/task-view.service';
 import { map, takeUntil } from 'rxjs/operators';
@@ -18,22 +18,26 @@ export abstract class AbstractSingleTaskViewComponent extends AbstractViewWithHe
 
     @Input() initiallyExpanded: boolean = true;
     @Input() preventCollapse: boolean = true;
-    public task$: Observable<TaskPanelData>;
+    public taskPanelData: BehaviorSubject<TaskPanelData>;
     public loading$: Observable<boolean>;
     private transitionId: string;
     private subRoute: Subscription;
-    protected unsubscribe$: Subject<void>;
+    protected subPanelData: Subscription;
 
     protected constructor(protected taskViewService: TaskViewService,
                           activatedRoute: ActivatedRoute) {
         super(taskViewService, activatedRoute);
-        this.unsubscribe$ = new Subject<void>();
+        this.subPanelData = new Subscription();
+        this.taskPanelData = new BehaviorSubject<TaskPanelData>(undefined);
         this.subRoute = this._activatedRoute.paramMap.subscribe(paramMap => {
             if (!!(paramMap?.['params']?.[TaskConst.TRANSITION_ID])) {
                 this.transitionId = paramMap['params'][TaskConst.TRANSITION_ID];
-                this.task$ = this.taskViewService.tasks$.pipe(map<Array<TaskPanelData>, TaskPanelData>(tasks => {
-                    return this.resolveTransitionTask(tasks);
-                }), takeUntil(this.unsubscribe$));
+                this.subPanelData = this.taskViewService.tasks$.subscribe(tasks =>  {
+                    if (!!tasks && tasks.length > 0) {
+                        this.taskPanelData.next(this.resolveTransitionTask(tasks));
+                    }
+                });
+                console.log('resolveTransition: ' + this.transitionId);
             }
         });
         this.loading$ = this.taskViewService.loading$;
@@ -42,15 +46,19 @@ export abstract class AbstractSingleTaskViewComponent extends AbstractViewWithHe
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subRoute.unsubscribe();
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+        this.subPanelData.unsubscribe();
+    }
+
+    get task$(): Observable<TaskPanelData> {
+        return this.taskPanelData.asObservable();
     }
 
     private resolveTransitionTask(tasks: Array<TaskPanelData>): TaskPanelData {
         const transitionTask = tasks.find(t => t.task.transitionId === this.transitionId);
         if (!!transitionTask) {
             transitionTask.initiallyExpanded = transitionTask.task.finishDate === undefined;
         }
+        console.log('resolveTransitionTask: ' + transitionTask)
         return transitionTask;
     }
 }

projects/netgrif-components/src/lib/panel/task-panel-single/single-task.component.html

@@ -7,27 +7,30 @@
             <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>
         </div>
 
-        <div class='full-width full-heigh task-tab-background' fxFlex='100'>
-            <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>
-            <nc-task-panel
-                [textEllipsis]='textEllipsis'
-                [taskPanelData]='task' [selectedHeaders$]='selectedHeaders$'
-                [forceLoadDataOnOpen]='forceLoadDataOnOpen'
-                [responsiveBody]='responsiveBody'
-                (taskEvent)='emitTaskEvent($event)'
-                (panelRefOutput)='setPanelRef($event)'
-                [preventCollapse]='preventCollapse'
-                [hidePanelHeader]='hidePanelHeader'
-                [actionButtonTemplates]='actionButtonTemplates'
-                [actionRowJustifyContent]='actionRowJustifyContent'
-                class='panel-expanded-spacing'>
-            </nc-task-panel>
+        <mat-accordion [multi]="false" class="full-width" fxFlex="100">
+            <cdk-virtual-scroll-viewport itemSize="52" class="task-panel-scroll-container full-width full-height">
+                <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>
+                <nc-task-panel
+                    [textEllipsis]='textEllipsis'
+                    [taskPanelData]='task'
+                    [selectedHeaders$]='selectedHeaders$'
+                    [forceLoadDataOnOpen]='forceLoadDataOnOpen'
+                    [responsiveBody]='responsiveBody'
+                    (taskEvent)='emitTaskEvent($event)'
+                    (panelRefOutput)='setPanelRef($event)'
+                    [preventCollapse]='preventCollapse'
+                    [hidePanelHeader]='hidePanelHeader'
+                    [actionButtonTemplates]='actionButtonTemplates'
+                    [actionRowJustifyContent]='actionRowJustifyContent'
+                    class='panel-expanded-spacing'>
+                </nc-task-panel>
 
-            <div *ngIf='loading$ | async' fxLayout='column' fxLayoutAlign='center center'>
-                <mat-spinner color='primary' diameter='52'></mat-spinner>
-            </div>
-            <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>
-        </div>
+                <div *ngIf='loading$ | async' fxLayout='column' fxLayoutAlign='center center'>
+                    <mat-spinner color='primary' diameter='52'></mat-spinner>
+                </div>
+                <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>
+            </cdk-virtual-scroll-viewport>
+        </mat-accordion>
 
         <ng-template #defaultPageHeader>
             <mat-card class="top-card">
@@ -36,7 +39,7 @@
         </ng-template>
 
         <ng-template #defaultPageFooter>
-            <mat-card class='bootom-card footer'>
+            <mat-card class='bottom-card footer'>
                 <span class="bottom-card-title footer-font"><strong>{{footerText ?? 'tasks.footer.defaultText' | translate}}</strong></span>
             </mat-card>
         </ng-template>