Row Sorting

@Component({
  selector: 'row-sorting',
  templateUrl: './row-sorting.component.html',
  styleUrls: ['./row-sorting.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit {
  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;
  
  //...
}

onSelectionChange(data: MatSelectChange): void {
  const column = data.value as DikeColumnDef;

  if (isDikeDataColumnDef(column)) {
    if (!column.sortable) {
      this.rowSortingForm.get('direction').disable();

    } else {
      this.rowSortingForm.get('direction').enable();
    }
  }
}

onSortBy(): void {
  if (this.rowSortingForm.valid) {
    const column = this.rowSortingForm.get('column').value as DikeColumnDef;
    const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';

    // if the DikeGrid instance is sorted, get the current columns and the sort direction:
    const currentSortable = this.dikeGrid.sorting.getCurrentSortable();

    /**
     * We will sort the DikeGrid rows, if only if:
     *
     *    1. The DikeGrid is not sorted.
     *    2. Or, the DikeGrid is sorted but the selected column is different than the current column.
     *    3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
     */
    if (isDikeDataColumnDef(column) &&
      (!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
      this.dikeGrid.sorting.sortBy(column, direction);
    }
  }
}

onSetColumnSortable(): void {
  if (this.columnControl.valid) {
    // Get the selected column:
    const column = this.columnControl.value as DikeColumnDef;

    if (isDikeDataColumnDef(column)) {
      // Toggle the sortable flag for the selected column:
      this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
    }
  }
}

onColumnsChange(columns: DikeColumnDef[]): void {
    this.gridColumns = this.flatColumns(columns);
    // Clear selection:
    this.rowSortingForm.patchValue({ column: null, direction: '' });
}

onSortChange(sortedBy: DikeColumnSortEvent<Employee>): void {
  console.log('Sort change: ', sortedBy);
}

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';

import { Subscription } from 'rxjs';

import { DikeColumnDef, DikeColumnSortEvent, DikeGridComponent, 
  DikeGridDataSourceInput, isDikeDataColumnDef, isDikeGroupColumnDef 
} from '@dikesoft/angular-data-grid';

import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';

import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';

@Component({
  selector: 'row-sorting',
  templateUrl: './row-sorting.component.html',
  styleUrls: ['./row-sorting.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit, OnDestroy {
  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  gridColumns: DikeColumnDef[];
  rowSortingForm: FormGroup;
  columnControl: FormControl;

  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

  constructor(
    private cdr: ChangeDetectorRef,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
    this.createForm();
  }
  
  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }

  onSelectionChange(data: MatSelectChange): void {
    const column = data.value as DikeColumnDef;

    if (isDikeDataColumnDef(column)) {
      if (!column.sortable) {
        this.rowSortingForm.get('direction').disable();

      } else {
        this.rowSortingForm.get('direction').enable();
      }
    }
  }

  onSortBy(): void {
    if (this.rowSortingForm.valid) {
      const column = this.rowSortingForm.get('column').value as DikeColumnDef;
      const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';

      // if the DikeGrid instance is sorted, get the current columns and the sort direction:
      const currentSortable = this.dikeGrid.sorting.getCurrentSortable();

      /**
       * We will sort the DikeGrid rows, if only if:
       *
       *    1. The DikeGrid is not sorted.
       *    2. Or, the DikeGrid is sorted but the selected column is different than the current column.
       *    3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
       */
      if (isDikeDataColumnDef(column) &&
        (!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
        this.dikeGrid.sorting.sortBy(column, direction);
      }
    }
  }

  onSetColumnSortable(): void {
    if (this.columnControl.valid) {
      // Get the selected column:
      const column = this.columnControl.value as DikeColumnDef;

      if (isDikeDataColumnDef(column)) {
        // Toggle the sortable flag for the selected column:
        this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
      }
    }
  }

  onSortChange(sortedBy: DikeColumnSortEvent<Employee>): void {
    console.log('Sort change: ', sortedBy);
  }

  onColumnsChange(columns: DikeColumnDef[]): void {
    this.gridColumns = this.flatColumns(columns);
    // Clear selection:
    this.rowSortingForm.patchValue({ column: null, direction: '' });
  }

  private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
    return columns.reduce((accum, column) => {
      if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
        return [ ...accum, column, ...this.flatColumns(column.children) ];
      }

      return [ ...accum, column ];
    }, [ ]);
  }

  private createForm(): void {
    this.columnControl = new FormControl(null, Validators.required);

    this.rowSortingForm = new FormGroup({
      column: this.columnControl,
      direction: new FormControl({ value: '', disabled: false }, Validators.required),
    });
  }

  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}