Merge pull request #145 from netgrif/NAE-1758

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

Author: machacjozef

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

@@ -1,9 +1,8 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 import { AbstractViewWithHeadersComponent } from '../abstract/view-with-headers';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable, ReplaySubject, 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';
 import { ActivatedRoute } from '@angular/router';
 
 export class TaskConst {
@@ -18,22 +17,25 @@ export abstract class AbstractSingleTaskViewComponent extends AbstractViewWithHe
 
     @Input() initiallyExpanded: boolean = true;
     @Input() preventCollapse: boolean = true;
-    public task$: Observable<TaskPanelData>;
+    public taskPanelData: ReplaySubject<TaskPanelData>;
     public loading$: Observable<boolean>;
     private transitionId: string;
-    private subRoute: Subscription;
-    protected unsubscribe$: Subject<void>;
+    private subRoute: Subscription | undefined;
+    protected subPanelData: Subscription;
 
     protected constructor(protected taskViewService: TaskViewService,
                           activatedRoute: ActivatedRoute) {
         super(taskViewService, activatedRoute);
-        this.unsubscribe$ = new Subject<void>();
+        this.taskPanelData = new ReplaySubject<TaskPanelData>(1);
         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.unsubscribe();
+                this.subPanelData = this.taskViewService.tasks$.subscribe(tasks =>  {
+                    if (!!tasks && tasks.length > 0) {
+                        this.taskPanelData.next(this.resolveTransitionTask(tasks));
+                    }
+                });
             }
         });
         this.loading$ = this.taskViewService.loading$;
@@ -42,8 +44,13 @@ export abstract class AbstractSingleTaskViewComponent extends AbstractViewWithHe
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subRoute.unsubscribe();
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+        if (!!this.subPanelData) {
+            this.subPanelData.unsubscribe();
+        }
+    }
+
+    get task$(): Observable<TaskPanelData> {
+        return this.taskPanelData.asObservable();
     }
 
     private resolveTransitionTask(tasks: Array<TaskPanelData>): TaskPanelData {

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

@@ -7,11 +7,12 @@
             <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>
         </div>
 
-        <div class='full-width full-heigh task-tab-background' fxFlex='100'>
+        <cdk-virtual-scroll-viewport itemSize="1" class="task-panel-scroll-container full-width full-height">
             <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>
             <nc-task-panel
                 [textEllipsis]='textEllipsis'
-                [taskPanelData]='task' [selectedHeaders$]='selectedHeaders$'
+                [taskPanelData]='task'
+                [selectedHeaders$]='selectedHeaders$'
                 [forceLoadDataOnOpen]='forceLoadDataOnOpen'
                 [responsiveBody]='responsiveBody'
                 (taskEvent)='emitTaskEvent($event)'
@@ -27,7 +28,7 @@
                 <mat-spinner color='primary' diameter='52'></mat-spinner>
             </div>
             <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>
-        </div>
+        </cdk-virtual-scroll-viewport>
 
         <ng-template #defaultPageHeader>
             <mat-card class="top-card">
@@ -36,7 +37,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>