Update codeowners

.github/CODEOWNERS

@@ -1 +1 @@
-* @fateeand @korel-san @TerranceKhumalo-absa @AtlegangMolokwane @victorgvargas
+* @fateeand @korel-san @TerranceKhumalo-absa @AtlegangMolokwane @lukasmatta

projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html

@@ -1,11 +1,12 @@
 <cps-tree-table
-  [data]="dataVirtual"
+  [data]="data"
   toolbarTitle="Tree table alpha version"
   [columns]="cols"
   [virtualScroll]="true"
   [showColumnsToggle]="true"
   [showRowMenu]="true"
   [selectable]="true"
+  [showGlobalFilter]="true"
   (columnsSelected)="onColumnsSelected($event)"
   scrollHeight="500px"
   sortMode="multiple">
@@ -34,7 +35,11 @@
   </ng-template> -->
 
   <ng-template #header>
-    <th *ngFor="let scol of selCols" [cpsTTColSortable]="scol.field">
+    <th
+      *ngFor="let scol of selCols"
+      [cpsTTColSortable]="scol.field"
+      [cpsTTColFilter]="scol.field"
+      filterType="text">
       {{ scol.header }}
     </th>
   </ng-template>
@@ -48,3 +53,9 @@
     </ng-container>
   </ng-template>
 </cps-tree-table>
+
+<!-- <th cpsTColSortable="a" cpsTColFilter="a" filterType="text">A</th>
+<th cpsTColSortable="b" cpsTColFilter="b" filterType="date">B</th>
+<th cpsTColSortable="c" cpsTColFilter="c" filterType="number">C</th>
+<th cpsTColSortable="d" cpsTColFilter="d" filterType="boolean">D</th>
+<th cpsTColSortable="e" cpsTColFilter="e" filterType="category">E</th> -->

projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
 import {
   CpsTreeTableComponent,
   CpsTreetableRowTogglerDirective,
-  CpsTreeTableColumnSortableDirective
+  CpsTreeTableColumnSortableDirective,
+  CpsTreeTableColumnFilterDirective
 } from 'cps-ui-kit';
 
 @Component({
@@ -13,7 +14,8 @@ import {
     CommonModule,
     CpsTreeTableComponent,
     CpsTreetableRowTogglerDirective,
-    CpsTreeTableColumnSortableDirective
+    CpsTreeTableColumnSortableDirective,
+    CpsTreeTableColumnFilterDirective
   ],
   templateUrl: './tree-table-page.component.html',
   styleUrls: ['./tree-table-page.component.scss'],
@@ -317,21 +319,21 @@ export class TreeTablePageComponent implements OnInit {
       data: {
         name: 'Videos',
         size: '1500mb',
-        type: 'Folder'
+        type: 'Directory'
       },
       children: [
         {
           data: {
             name: 'primefaces.mkv',
             size: '1000mb',
-            type: 'Video'
+            type: 'Directory'
           }
         },
         {
           data: {
             name: 'intro.avi',
             size: '500mb',
-            type: 'Video'
+            type: 'Directory'
           }
         }
       ]

projects/cps-ui-kit/src/lib/base_components/cps-tree-dropdown-base.component.ts → projects/cps-ui-kit/src/lib/base_components/base-tree-dropdown.component.ts

@@ -28,7 +28,7 @@ import { CpsMenuComponent } from '../components/cps-menu/cps-menu.component';
 @Component({
   template: ''
 })
-export class CpsTreeDropdownBaseComponent
+export class BaseTreeDropdownComponent
   implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy
 {
   @Input() label = '';

projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts

@@ -87,6 +87,7 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy {
   @Input() withArrow = true;
   @Input() compressed = false; // prepared-colored, without header and items description
   @Input() focusOnShow = true;
+  @Input() persistent = false;
   @Input() containerClass = '';
   @Input() showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
   @Input() hideTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
@@ -241,6 +242,7 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy {
             documentEvent,
             (event) => {
               if (
+                !this.persistent &&
                 !this.container?.contains(event.target) &&
                 this.target !== event.target &&
                 !this.target.contains(event.target) &&

projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html

@@ -37,6 +37,7 @@
   (onLazyLoad)="onLazyLoaded($event)"
   (sortFunction)="onSortFunction($event)"
   (onSort)="onSort($event)"
+  (onFilter)="onFilter($event)"
   (onRowReorder)="onRowReorder($event)">
   <ng-template pTemplate="caption" *ngIf="hasToolbar">
     <ng-container *ngIf="toolbarTemplate">

projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss

@@ -687,10 +687,6 @@ $tbar-normal-height: 72px;
       }
     }
 
-    .p-sortable-column.cps-table-col-filter-menu-open {
-      cursor: default;
-    }
-
     .cps-table-col-filter-menu-open {
       .cps-table-col-filter-menu-button {
         color: $body-text-color;

projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts

@@ -85,6 +85,7 @@ export class CpsTableComponent implements OnInit, AfterViewChecked {
   @Input() reorderableRows = false;
   @Input() showColumnsToggle = false; // if external body template is provided, use columnsSelected event emitter
   @Input() loading = false;
+
   @Input() tableStyle = undefined;
   @Input() tableStyleClass = '';
 
@@ -133,6 +134,7 @@ export class CpsTableComponent implements OnInit, AfterViewChecked {
   @Output() rowsRemoved = new EventEmitter<any[]>();
   @Output() pageChanged = new EventEmitter<any>();
   @Output() sorted = new EventEmitter<any>();
+  @Output() filtered = new EventEmitter<any>();
   @Output() rowsReordered = new EventEmitter<any>();
   @Output() columnsSelected = new EventEmitter<{ [key: string]: any }[]>();
   @Output() lazyLoaded = new EventEmitter<any>();
@@ -393,6 +395,10 @@ export class CpsTableComponent implements OnInit, AfterViewChecked {
     this.sorted.emit(event);
   }
 
+  onFilter(event: any) {
+    this.filtered.emit(event);
+  }
+
   onRowReorder(event: any) {
     this.rowsReordered.emit(event);
   }

projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-sortable.directive.ts

@@ -42,14 +42,4 @@ export class CpsTableColumnSortableDirective
     this.sortIconRef.destroy();
     this.viewContainerRef.clear();
   }
-
-  override onClick(event: MouseEvent): void {
-    if (
-      !this.elementRef?.nativeElement?.classList?.contains(
-        'cps-table-col-filter-menu-open'
-      )
-    ) {
-      super.onClick(event);
-    }
-  }
 }

projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-row-selectable.directive.ts

@@ -0,0 +1,39 @@
+import {
+  ComponentRef,
+  Directive,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewContainerRef
+} from '@angular/core';
+import { TableCheckbox } from 'primeng/table';
+
+@Directive({
+  standalone: true,
+  selector: '[cpsTRowSelectable]'
+})
+export class CpsTableRowSelectableDirective implements OnInit, OnDestroy {
+  @Input('cpsTRowSelectable') value: any;
+  checkboxCompRef: ComponentRef<TableCheckbox>;
+
+  constructor(
+    private elementRef: ElementRef,
+    private viewContainerRef: ViewContainerRef
+  ) {
+    this.checkboxCompRef = this.viewContainerRef.createComponent(TableCheckbox);
+  }
+
+  ngOnInit(): void {
+    this.checkboxCompRef.setInput('value', this.value);
+
+    this.elementRef.nativeElement.appendChild(
+      this.checkboxCompRef.location.nativeElement
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.checkboxCompRef.destroy();
+    this.viewContainerRef.clear();
+  }
+}

projects/cps-ui-kit/src/lib/components/cps-table/table-column-filter/table-column-filter-constraint/table-column-filter-constraint.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Optional } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { FilterMetadata } from 'primeng/api';
@@ -10,6 +10,7 @@ import {
   BtnToggleOption,
   CpsButtonToggleComponent
 } from '../../../cps-button-toggle/cps-button-toggle.component';
+import { TreeTable } from 'primeng/treetable';
 
 @Component({
   selector: 'table-column-filter-constraint',
@@ -40,8 +41,11 @@ export class TableColumnFilterConstraintComponent implements OnInit {
 
   categories: { label: string; value: string }[] = [];
 
-  // eslint-disable-next-line no-useless-constructor
-  constructor(public dt: Table) {}
+  _tableInstance: Table | TreeTable;
+
+  constructor(@Optional() public dt: Table, @Optional() public tt: TreeTable) {
+    this._tableInstance = dt || tt;
+  }
 
   ngOnInit(): void {
     if (this.type === 'category') {
@@ -53,7 +57,10 @@ export class TableColumnFilterConstraintComponent implements OnInit {
       } else {
         this.categories =
           Array.from(
-            new Set(this.dt.value?.map((v) => v[this.field as string]) || [])
+            new Set(
+              this._tableInstance.value?.map((v) => v[this.field as string]) ||
+                []
+            )
           )?.map((c) => ({
             label: c,
             value: c
@@ -66,12 +73,12 @@ export class TableColumnFilterConstraintComponent implements OnInit {
     (<any>this.filterConstraint).value = value;
 
     if (value === '' || !this.hasApplyButton) {
-      this.dt._filter();
+      this._tableInstance._filter();
     }
   }
 
   onEnterKeyDown(event: any) {
-    this.dt._filter();
+    this._tableInstance._filter();
     event.preventDefault();
   }
 }

projects/cps-ui-kit/src/lib/components/cps-table/table-column-filter/table-column-filter.component.html

@@ -2,6 +2,7 @@
   <cps-menu
     #columnFilterMenu
     [withArrow]="false"
+    [persistent]="true"
     (menuShown)="onMenuShown()"
     (menuHidden)="onMenuHidden()">
     <div class="cps-table-col-filter-menu-content">