fix table sticky & Folder is not cleared

.gitlab-ci.yml

@@ -8,7 +8,7 @@ before_script:
   - echo "starting build for $PROJECT_NAME"
 stages:
   - build
-  - test
+  # - test
   - deploy
 build:
   stage: build
@@ -25,18 +25,18 @@ build:
     - '& dotnet publish'
   artifacts:
     untracked: true
-test:
-  stage: test
-  tags: 
-    - release
-  only: 
-    - master
-    - tags
-  script:
-    - '& echo "Starting tests"'
-    # - '& "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\MSTest.exe" /testcontainer:"$env:PROJECT_NAME"Tests.dll'
-  dependencies:
-    - build
+# test:
+#   stage: test
+#   tags: 
+#     - release
+#   only: 
+#     - master
+#     - tags
+#   script:
+#     - '& echo "Starting tests"'
+#     # - '& "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\MSTest.exe" /testcontainer:"$env:PROJECT_NAME"Tests.dll'
+#   dependencies:
+#     - build
 deploy:
   stage: deploy
   tags: 

PMS/ClientApp/src/app/components/shared/auto-table-hl/auto-table-hl.component.html

@@ -2,10 +2,14 @@
     <div class="table-container" [ngStyle]="{'max-height': maxHeight}">
 
         <table mat-table #table [dataSource]="dataList" matSort>
-            <ng-container [matColumnDef]="header.FIELD_NAME" *ngFor="let header of headerList"
-                [sticky]="stickyCol === header.FIELD_NAME" [stickyEnd]="stickyEndCol === header.FIELD_NAME">
+            <ng-container [matColumnDef]="header.FIELD_NAME" *ngFor="let header of headerList; let hIdx = index"
+                [sticky]="checkSticky(stickyCol, header.FIELD_NAME)"
+                [stickyEnd]="checkSticky(stickyEndCol, header.FIELD_NAME)">
                 <th mat-header-cell *matHeaderCellDef [ngClass]="{'tblHeader': true}"
-                    [ngStyle]="{'flex-basis': header.WIDTH, 'min-width': header.WIDTH}">
+                    [ngStyle]="{'min-width': header.WIDTH, 
+                                'max-width': header.WIDTH,
+                                'width': header.WIDTH,
+                                'flex-basis': header.WIDTH}">
                     <ng-template [ngIf]="isCustomHeader">
                         <ng-template
                             *ngTemplateOutlet="templateHeader; context: {header: header, pageData: dataList._renderData._value}">
@@ -15,8 +19,9 @@
                         {{header.TITLE}}
                     </ng-template>
                     <ng-container *ngIf="sortTable && header.SORTABLE">
-                        <button mat-icon-button [ngClass]="{'header-button': true, 'filter-active': _filter[header.FIELD_NAME]}" [disableRipple]="true"
-                            [matMenuTriggerFor]="filter">
+                        <button mat-icon-button
+                            [ngClass]="{'header-button': true, 'filter-active': _filter[header.FIELD_NAME]}"
+                            [disableRipple]="true" [matMenuTriggerFor]="filter">
                             <i class="material-icons">
                                 arrow_drop_down
                             </i>
@@ -38,9 +43,11 @@
                                 </button>
                                 Sort Down
                             </button>
-                            <button mat-menu-item (click)="$event.stopPropagation();" class="filter-input-container" [disableRipple]="true">
+                            <button mat-menu-item (click)="$event.stopPropagation();" class="filter-input-container"
+                                [disableRipple]="true">
                                 <mat-form-field appearance="outline" class="filter-form-field">
-                                    <input matInput (keyup)="applyFilter(header.FIELD_NAME, false)" [(ngModel)]="_filter[header.FIELD_NAME]" />
+                                    <input matInput (keyup)="applyFilter(header.FIELD_NAME, false)"
+                                        [(ngModel)]="_filter[header.FIELD_NAME]" />
                                     <button mat-icon-button matSuffix (click)="applyFilter(header.FIELD_NAME, true)">
                                         <i class="material-icons">
                                             clear
@@ -52,12 +59,14 @@
                     </ng-container>
                 </th>
                 <td mat-cell *matCellDef="let row; let i = index;" [ngStyle]="{
-                  'text-align': header.ALIGN,
-                  'justify-content': (header.ALIGN.toUpperCase() === 'RIGHT' ? 'flex-end' : 
+                    'text-align': header.ALIGN,
+                    'justify-content': (header.ALIGN.toUpperCase() === 'RIGHT' ? 'flex-end' : 
                                       header.ALIGN.toUpperCase() === 'LEFT' ? 'flex-start' : header.ALIGN),
-                  'flex-basis': header.WIDTH,
-                  'min-width': header.WIDTH
-                }">
+                    'min-width': header.WIDTH, 
+                    'max-width': header.WIDTH,
+                    'width': header.WIDTH,
+                    'flex-basis': header.WIDTH
+                    }">
                     <ng-template [ngIf]="isCustomContent">
                         <ng-template *ngTemplateOutlet="templateBody; context: {header: header, data: row, index: i}">
                         </ng-template>

PMS/ClientApp/src/app/components/shared/auto-table-hl/auto-table-hl.component.ts

-import { Component, OnInit, Input, OnChanges, ContentChild, TemplateRef, Output, EventEmitter, ViewChild, SimpleChanges, ContentChildren } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ContentChild, TemplateRef, Output, EventEmitter, ViewChild, SimpleChanges, ContentChildren, NgZone } from '@angular/core';
 import { HttpService } from 'src/app/core/http.service';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, Sort } from '@angular/material/sort';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Globals } from 'src/app/core/global';
+import { take } from 'rxjs/operators';
 
 /**
  * How to use the table?
@@ -67,16 +68,18 @@ export class AutoTableHighlightComponent implements OnChanges {
   @Input("setHighlight") setHighlight: boolean = false;
   @Output("editClick") editClick = new EventEmitter<any>();
   @Output("rowClick") rowClick = new EventEmitter<any>();
-  @Input("stickyCol") stickyCol: string;
-  @Input("stickyEndCol") stickyEndCol: string;
+  @Input("stickyCol") stickyCol: string | Array<string>;
+  @Input("stickyEndCol") stickyEndCol: string | Array<string>;
 
   @ContentChildren(TemplateRef) templateRef;
+  @ViewChild("table") table: any;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(
     private http: HttpService,
-    public global: Globals
+    public global: Globals,
+    private ngZone: NgZone
   ) { }
 
   ngOnInit(): void {
@@ -115,10 +118,12 @@ export class AutoTableHighlightComponent implements OnChanges {
       this.dataList.paginator = this.paginator;
     }
     this.dataList.sort = this.sort;
-    
+
     if (this.tableFooter && this.tableFooter.length > 0) {
       this.setFooterItems(this.tableFooter)
     }
+
+    this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
   }
 
   ngAfterContentInit(): void {
@@ -147,6 +152,7 @@ export class AutoTableHighlightComponent implements OnChanges {
         this.headerList = result.filter(v => v.VISIBILITY === true);
 
         this.displayedColumns = this.headerList.map(v => v.FIELD_NAME);
+        this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
       })
   }
 
@@ -220,10 +226,10 @@ export class AutoTableHighlightComponent implements OnChanges {
   compareRow(row1: any, row2: any) {
     return JSON.stringify(row1) === JSON.stringify(row2);
   }
-  
+
   applyFilter(column, isClear: boolean) {
     if (isClear || this._filter[column] === '') delete this._filter[column];
-    
+
     this.dataList.filter = JSON.stringify(this._filter);
   }
 
@@ -250,4 +256,17 @@ export class AutoTableHighlightComponent implements OnChanges {
     this.sort.direction = sortState.direction;
     this.sort.sortChange.emit(sortState);
   }
+
+  checkSticky(cols: string | Array<string>, fieldName: string) {
+
+    if (cols) {
+      if (typeof cols === 'string') {
+        return cols === fieldName;
+      } else {
+        return cols.indexOf(fieldName) >= 0;
+      }
+    }
+
+    return false;
+  }
 }

PMS/ClientApp/src/app/components/shared/auto-table/auto-table.component.html

@@ -2,10 +2,12 @@
     <div class="table-container" [ngStyle]="{'max-height': maxHeight}">
 
         <table mat-table #table [dataSource]="dataList" matSort>
-            <ng-container [matColumnDef]="header.FIELD_NAME" *ngFor="let header of headerList"
-                [sticky]="stickyCol === header.FIELD_NAME" [stickyEnd]="stickyEndCol === header.FIELD_NAME">
+            <ng-container [matColumnDef]="header.FIELD_NAME" *ngFor="let header of headerList; let hIdx = index"
+                [sticky]="checkSticky(stickyCol, header.FIELD_NAME)"
+                [stickyEnd]="checkSticky(stickyEndCol, header.FIELD_NAME)">
                 <th mat-header-cell *matHeaderCellDef [ngClass]="{'tblHeader': true}" style="line-height:normal"
-                    [ngStyle]="{'flex-basis': header.WIDTH, 'min-width': header.WIDTH}">
+                    [ngStyle]="{'min-width': header.WIDTH, 
+                                'flex-basis': header.WIDTH}">
                     <ng-template [ngIf]="isCustomHeader">
                         <ng-template
                             *ngTemplateOutlet="templateHeader; context: {header: header, pageData: dataList._renderData._value}">
@@ -52,11 +54,11 @@
                     </ng-container>
                 </th>
                 <td mat-cell *matCellDef="let row; let i = index;" [ngStyle]="{
-                      'text-align': header.ALIGN,
-                      'justify-content': (header.ALIGN.toUpperCase() === 'RIGHT' ? 'flex-end' : 
+                        'text-align': header.ALIGN,
+                        'justify-content': (header.ALIGN.toUpperCase() === 'RIGHT' ? 'flex-end' : 
                                           header.ALIGN.toUpperCase() === 'LEFT' ? 'flex-start' : header.ALIGN),
-                      'flex-basis': header.WIDTH,
-                      'min-width': header.WIDTH
+                        'min-width': header.WIDTH, 
+                        'flex-basis': header.WIDTH
                     }">
                     <ng-template [ngIf]="isCustomContent">
                         <ng-template *ngTemplateOutlet="templateBody; context: {header: header, data: row, index: i}">

PMS/ClientApp/src/app/components/shared/auto-table/auto-table.component.ts

-import { Component, OnInit, Input, OnChanges, ContentChild, TemplateRef, Output, EventEmitter, ViewChild, SimpleChanges, ContentChildren } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ContentChild, TemplateRef, Output, EventEmitter, ViewChild, SimpleChanges, ContentChildren, NgZone } from '@angular/core';
 import { HttpService } from 'src/app/core/http.service';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, Sort } from '@angular/material/sort';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Globals } from 'src/app/core/global';
+import { take } from 'rxjs/operators';
 
 /**
  * How to use the table?
@@ -62,17 +63,19 @@ export class AutoTableComponent implements OnChanges {
   @Input("showPagination") showPagination: boolean = true;
   @Input("sortTable") sortTable: boolean = true;
   @Input("maxHeight") maxHeight: string = "82vh";
-  @Input("stickyCol") stickyCol: string;
-  @Input("stickyEndCol") stickyEndCol: string;
+  @Input("stickyCol") stickyCol: string | Array<string>;
+  @Input("stickyEndCol") stickyEndCol: string | Array<string>;
   @Output("editClick") editClick = new EventEmitter<any>();
 
   @ContentChildren(TemplateRef) templateRef;
+  @ViewChild("table") table: any;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(
     private http: HttpService,
-    public global: Globals
+    public global: Globals,
+    private ngZone: NgZone
   ) { }
 
   ngOnInit(): void {
@@ -115,6 +118,7 @@ export class AutoTableComponent implements OnChanges {
     if (this.tableFooter && this.tableFooter.length > 0) {
       this.setFooterItems(this.tableFooter)
     }
+    this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
   }
 
   ngAfterContentInit(): void {
@@ -143,6 +147,7 @@ export class AutoTableComponent implements OnChanges {
         this.headerList = result.filter(v => v.VISIBILITY === true);
 
         this.displayedColumns = this.headerList.map(v => v.FIELD_NAME);
+        this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
       })
   }
 
@@ -237,4 +242,17 @@ export class AutoTableComponent implements OnChanges {
     this.sort.direction = sortState.direction;
     this.sort.sortChange.emit(sortState);
   }
+
+  checkSticky(cols: string | Array<string>, fieldName: string) {
+    
+    if (cols) {
+      if (typeof cols === 'string') {
+        return cols === fieldName;
+      } else {
+        return cols.indexOf(fieldName) >= 0;
+      }
+    }
+
+    return false;
+  }
 }

PMS/ClientApp/src/app/components/shared/mega-menu/mega-menu.component.ts

@@ -97,6 +97,7 @@ export class MegaMenuComponent implements OnInit {
         };
         this.dialog.title = "Add folder";
         this.dialog.OpenDialog();
+        this.selectMenuDetail = [];
     }
 
     SaveMenuHeader() {

PMS/ClientApp/src/app/pages/saleorder/SNSP005_M/SNSP005_M.component.html

@@ -37,7 +37,8 @@
     <div class="col-md-12">
       <div class="form-box">
         <auto-table-hl [tableName]="'SNSP005_M'" [tableData]="dataList" (rowClick)="MainRowClick($event)"
-          [setHighlight]="true" stickyCol="DELETE_ITEM">
+          [setHighlight]="true" 
+          [stickyCol]="['DELETE_ITEM','PO_DATE','PO_NO','ITEM_NO','SUB_ITEM_NO']">
           <ng-template let-header="header" let-data="data">
             <div *ngIf="header.FIELD_NAME == 'ACCEPT_QTY'
                       || header.FIELD_NAME == 'STATUS_CODE'