Column Moving

onColumnMove(movementData: DikeColumnMoveEvent): void {
    console.log('Column movement: ', movementData);
}

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

import { asapScheduler, Subscription } from 'rxjs';
import { map, observeOn } from 'rxjs/operators';

import { DikeColumnDef, DikeGridComponent, DikeGridDataSourceInput, isDikeGroupColumnDef, DikeGridPanel, DikeColumnMoveEvent } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';

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

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

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

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  gridColumns: DikeColumnDef[];
  gridPanels: DikeGridPanel[];
  destinationColumns: DikeColumnDef[];
  destinationPanels: DikeGridPanel[];

  disableMethods: boolean;
  moveColumnsForm: FormGroup;

  private changeGridColumnsSubscription: Subscription = Subscription.EMPTY;
  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

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

    this.gridPanels = ['groupPanel', 'leftPanel', 'centerPanel', 'rightPanel'];
  }

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

  ngAfterViewInit(): void {
    // We listen the columnsChange observable after the DikeGrid instance is ready:
    this.setChangeGridColumnsSubscription();
  }

  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridColumnsSubscription.unsubscribe();
  }

  onSourceSelectionChange(data: MatSelectChange): void {
    const source = data.value;
    let sourcePanel: DikeGridPanel;

    this.destinationColumns = null;
    this.moveColumnsForm.patchValue({ destination: null, method: '' });
    this.moveColumnsForm.get('method').enable();

    if (source instanceof DikeColumnDef) {
      // We get only those columns in the same group:
      this.destinationColumns = this.gridColumns.filter(column => column !== source &&
        column.belongToGroup === source.belongToGroup);

      sourcePanel = source.panel;

    } else {
      sourcePanel = source as DikeGridPanel;
    }

    // We take the panels different from the source selection:
    this.destinationPanels = this.gridPanels.filter(panel => sourcePanel !== panel);
  }

  onDestinationSelectionChange(data: MatSelectChange): void {
    const destination = data.value;

    if (!(destination instanceof DikeColumnDef)) {
      this.moveColumnsForm.patchValue({ method: '' });
      this.moveColumnsForm.get('method').disable();

    } else {
      this.moveColumnsForm.get('method').enable();
    }
  }

  onMoveColumns(): void {
    if (this.moveColumnsForm.valid) {
      // Take the columns from the form:
      const sourceColumn = this.moveColumnsForm.get('source').value as DikeColumnDef;
      const destinationColumn = this.moveColumnsForm.get('destination').value as DikeColumnDef;
      // Take the method to be invoked:
      const method = this.moveColumnsForm.get('method').value as string;

      switch (method) {
        case 'swap-columns':
          this.dikeGrid.columnDef.swapColumns(sourceColumn, destinationColumn);
          break;

        case 'column-after':
          this.dikeGrid.columnDef.moveColumnAfter(sourceColumn, destinationColumn);
          break;

        case 'column-before':
          this.dikeGrid.columnDef.moveColumnBefore(sourceColumn, destinationColumn);
          break;
      }
    }
  }

  onMoveColumnsToPanel(): void {
    const source = this.moveColumnsForm.get('source').value;
    const destinationPanel = this.moveColumnsForm.get('destination').value as DikeGridPanel;

    if (!!source && !!destinationPanel) {
      if (source instanceof DikeColumnDef) {
        // Move the selected column to the destination panel:
        this.dikeGrid.columnDef.moveColumnIntoPanel(source, destinationPanel);

      } else {
        // Move all columns from the source panel to the destnation panel:
        this.dikeGrid.columnDef.movePanelColumns(source as DikeGridPanel, destinationPanel);
      }
    }
  }

  onColumnMove(movementData: DikeColumnMoveEvent): void {
    console.log('Column movement: ', movementData);
  }

  private createForm(): void {
    this.moveColumnsForm = new FormGroup({
      source: new FormControl(null, Validators.required),
      destination: new FormControl(null, Validators.required),
      method: new FormControl({ value: '', disabled: false }, Validators.required),
    });
  }

  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 setChangeGridColumnsSubscription(): void {
    this.changeGridColumnsSubscription.unsubscribe();
    this.changeGridColumnsSubscription = this.dikeGrid.columnDef.columnsChange.pipe(
      map((columns: DikeColumnDef[]) => this.flatColumns(columns)),
      observeOn(asapScheduler)

    ).subscribe((columns) => {
      this.destinationColumns = null;
      this.destinationPanels = null;
      this.moveColumnsForm.patchValue({ source: null, destination: null, method: '' });
      this.moveColumnsForm.get('method').enable();
      this.gridColumns = columns;
    });
  }

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