fix(orb-ui): Dataset table adjustments

orb-community · Oct 12, 2023 · 8a83ab6 · 8a83ab6
1 parent 1cb30a8
commit 8a83ab6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 40 deletions.
diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.html b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.html
@@ -9,24 +9,21 @@
         </button>
     </nb-card-header>
     <nb-card-body>
-        <div class="col-12">
-            <div #tableWrapper class="tableWrapper" style="margin-top: 1rem !important;">
-                <ngx-datatable
-                    #table
-                    [columnMode]="'flex'"
-                    [columns]="columns"
-                    [footerHeight]="0"
-                    [headerHeight]="50"
-                    [loadingIndicator]="isLoading"
-                    [rowHeight]="50"
-                    [rows]="datasets"
-                    [scrollbarV]="true"
-                    [sorts]="tableSorts"
-                    class="orb dataset-table"
-                    [style.height]="getTableHeight()">
-                </ngx-datatable>
-            </div>
-
+        <div class="dataset-table-wrapper">
+            <ngx-datatable
+                #table
+                [columnMode]="'force'"
+                [columns]="columns"
+                [footerHeight]="0"
+                [headerHeight]="50"
+                [loadingIndicator]="isLoading"
+                [rowHeight]="50"
+                [rows]="datasets"
+                [scrollbarV]="true"
+                [sorts]="tableSorts"
+                class="orb dataset-table"
+                [style.height]="getTableHeight()">
+            </ngx-datatable>
         </div>
     </nb-card-body>
 </nb-card>
@@ -65,7 +62,7 @@
 </ng-template>
 
 <ng-template #actionsTemplateCell let-i="index" let-row="row" let-value="value">
-  <div class="block">
+  <div class="button-template">
     <button
       (click)="onOpenEdit(row)"
       class="orb-action-hover edit-button"

diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.scss
@@ -28,7 +28,7 @@ nb-card {
   }
 }
 .dataset-table {
-  min-width: 600px;
+  // min-width: 600px;
   height: 200px;
   max-height: 300px;
   min-height: 100px;
@@ -130,3 +130,7 @@ mat-nav-list {
     transform: translateX(-80%);
   }
 }
+.dataset-table-wrapper {
+  min-width: 680px;
+  margin: 1rem 0 0 0;
+}
diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts
@@ -38,7 +38,7 @@ import { OrbService } from 'app/common/services/orb.service';
   styleUrls: ['./policy-datasets.component.scss'],
 })
 export class PolicyDatasetsComponent
-  implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked, OnChanges {
+  implements OnInit, OnDestroy, AfterViewInit, OnChanges {
   @Input()
   datasets: Dataset[];
 
@@ -71,8 +71,6 @@ export class PolicyDatasetsComponent
 
   @ViewChild('sinksTemplateCell') sinksTemplateCell: TemplateRef<any>;
 
-  @ViewChild('tableWrapper') tableWrapper;
-
   @ViewChild(DatatableComponent) table: DatatableComponent;
 
   private currentComponentWidth;
@@ -101,23 +99,23 @@ export class PolicyDatasetsComponent
         name: 'Agent Group',
         resizeable: true,
         canAutoResize: true,
-        flexGrow: 3,
+        width: 30,
         cellTemplate: this.groupTemplateCell,
       },
       {
         prop: 'valid',
         name: 'Valid',
         resizeable: true,
         canAutoResize: true,
-        flexGrow: 1,
+        width: 10,
         cellTemplate: this.validTemplateCell,
       },
       {
         prop: 'sinks',
         name: 'Sinks',
         resizeable: true,
         canAutoResize: true,
-        flexGrow: 3,
+        width: 40,
         cellTemplate: this.sinksTemplateCell,
       },
       {
@@ -126,30 +124,18 @@ export class PolicyDatasetsComponent
         resizeable: true,
         sortable: false,
         canAutoResize: true,
-        flexGrow: 3,
+        width: 20,
         cellTemplate: this.actionsTemplateCell,
       },
     ];
 
     this.cdr.detectChanges();
   }
 
-  ngAfterViewChecked() {
-    if (
-      this.table &&
-      this.table.recalculate &&
-      this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth
-    ) {
-      this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
-      this.table.recalculate();
-      this.cdr.detectChanges();
-      window.dispatchEvent(new Event('resize'));
-    }
-  }
   getTableHeight() {
     const rowHeight = 50;
     const headerHeight = 50;
-    return (this.datasets.length * rowHeight) + headerHeight + 'px';
+    return (this.datasets.length * rowHeight + 15) + headerHeight + 'px';
   }
   onCreateDataset() {
     this.dialogService