Row Edition

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

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowEditionComponent implements OnInit, OnDestroy {
  // ...
  
  editionSettings: DikeGridEditionSettings<Employee>;

  ngOnInit(): void {
    // Disable the ENTER edition trigger:
    this.editionSettings = { rowEditionEnterkey: false };
  }
}

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

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

  //...
}

onEditRow(): void {
  // Take all rows that are not being edited from filtered rows:
  const filteredRows = this.dikeGrid.filter.getFilteredRows().filter(row => !row.isEditing);

  // You can only have one row in edition state:
  if (filteredRows.length > 0 && this.dikeGrid.edition.rowsInEdition.length === 0) {
    // Take the first row and change it to the edition mode:
    this.dikeGrid.edition.editRow(filteredRows[0]);
  }
}

onEmailEditable(): void {
  // Get the Email column:
  const emailColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'email');

  // The column exist and is a data column:
  if (!!emailColumn && isDikeDataColumnDef(emailColumn)) {
    // Toggle the editable value:
    this.dikeGrid.columnDef.setColumnEditable(emailColumn, !emailColumn.editable, { editionSettings: { required: true } });
  }
}

onUpdateRow(): void {
  // Take the row in edition and update it:
  if (this.dikeGrid.edition.rowsInEdition.length === 1) {
    // The DikeGrid intance will not update the given row if the row is pristine and not valid:
    this.dikeGrid.edition.updateRow(this.dikeGrid.edition.rowsInEdition[0]);
  }
}

onRestoreRowModified(): void {
  // Take the row from the modified rows set:
  if (this.dikeGrid.edition.modifiedRows.length === 1) {
    // Restore the row to its immediate previous state:
    this.dikeGrid.edition.restoreRow(this.dikeGrid.edition.modifiedRows[0]);
  }
}

onCancelRowEdition(): void {
  // Take the row that it is being edited:
  if (this.dikeGrid.edition.rowsInEdition.length === 1) {
    this.dikeGrid.edition.cancelRowEdition(this.dikeGrid.edition.rowsInEdition[0]);
  }
}

onRemoveRow(): void {
  // Take all rows that are not being edited from filtered rows:
  const filteredRows = this.dikeGrid.filter.getFilteredRows().filter(row => !row.isEditing);

  // You can only have one row in edition state:
  if (filteredRows.length > 0) {
    // Remove the first row from the final set:
    this.dikeGrid.edition.removeRow(filteredRows[0]);
  }
}

onRestoreRowDeleted(): void {
  // Take the row from the deleted rows set:
  if (this.dikeGrid.edition.removedRows.length > 0) {
    // Restore the row to its immediate previous state:
    this.dikeGrid.edition.restoreRow(this.dikeGrid.edition.removedRows[0]);
  }
}

onRowsInEdition(): void {
  console.log('Rows in edition: ', this.dikeGrid.edition.rowsInEdition);
}

onModifiedRows(): void {
  console.log('Modified rows: ', this.dikeGrid.edition.modifiedRows);
}

onRemovedRows(): void {
  console.log('Removed rows: ', this.dikeGrid.edition.removedRows);
}

onEditionRowChange(value: DikeGridDataRowEntry<Employee>): void {
  console.log('editionRowChange: ', value);
}

onUpdateRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
  console.log('updateRowChange: ', value);
}

onCancelRowEditionChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
  console.log('cancelRowEditionChange: ', value);
}

onRemoveRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
  console.log('removeRowChangeChange: ', value);
}

onRestoreRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
  console.log('restoreRowChange: ', value);
}

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';

import { DikeFilterable, DikeGridComponent, DikeGridDataRowEntry,
    DikeGridDataSourceInput, DikeGridEditionSettings, isDikeDataColumnDef
} 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 { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';

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

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

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  editionSettings: DikeGridEditionSettings<Employee>;
  isFiltered: boolean;

  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

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

    this.isFiltered = false;
  }

  ngOnInit(): void {
    // Get 1000 entries from the REST API:
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
    // Disable the ENTER edition trigger:
    this.editionSettings = { rowEditionEnterkey: false };
  }

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

  onEditRow(): void {
    // Take all rows that are not being edited from filtered rows:
    const filteredRows = this.dikeGrid.filter.getFilteredRows().filter(row => !row.isEditing);

    // You can only have one row in edition state:
    if (filteredRows.length > 0 && this.dikeGrid.edition.rowsInEdition.length === 0) {
      // Take the first row and change it to the edition mode:
      this.dikeGrid.edition.editRow(filteredRows[0]);
    }
  }

  onEmailEditable(): void {
    // Get the Email column:
    const emailColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'email');

    // The column exist and is a data column:
    if (!!emailColumn && isDikeDataColumnDef(emailColumn)) {
      // Toggle the editable value:
      this.dikeGrid.columnDef.setColumnEditable(emailColumn, !emailColumn.editable, { editionSettings: { required: true } });
    }
  }

  onUpdateRow(): void {
    // Take the row in edition and update it:
    if (this.dikeGrid.edition.rowsInEdition.length === 1) {
      // The DikeGrid intance will not update the given row if the row is pristine and not valid:
      this.dikeGrid.edition.updateRow(this.dikeGrid.edition.rowsInEdition[0]);
    }
  }

  onRestoreRowModified(): void {
    // Take the row from the modified rows set:
    if (this.dikeGrid.edition.modifiedRows.length === 1) {
      // Restore the row to its immediate previous state:
      this.dikeGrid.edition.restoreRow(this.dikeGrid.edition.modifiedRows[0]);
    }
  }

  onCancelRowEdition(): void {
    // Take the row that it is being edited:
    if (this.dikeGrid.edition.rowsInEdition.length === 1) {
      this.dikeGrid.edition.cancelRowEdition(this.dikeGrid.edition.rowsInEdition[0]);
    }
  }

  onRemoveRow(): void {
    // Take all rows that are not being edited from filtered rows:
    const filteredRows = this.dikeGrid.filter.getFilteredRows().filter(row => !row.isEditing);

    // You can only have one row in edition state:
    if (filteredRows.length > 0) {
      // Remove the first row from the final set:
      this.dikeGrid.edition.removeRow(filteredRows[0]);
    }
  }

  onRestoreRowDeleted(): void {
    // Take the row from the deleted rows set:
    if (this.dikeGrid.edition.removedRows.length > 0) {
      // Restore the row to its immediate previous state:
      this.dikeGrid.edition.restoreRow(this.dikeGrid.edition.removedRows[0]);
    }
  }

  onRowsInEdition(): void {
    console.log('Rows in edition: ', this.dikeGrid.edition.rowsInEdition);
  }

  onModifiedRows(): void {
    console.log('Modified rows: ', this.dikeGrid.edition.modifiedRows);
  }

  onRemovedRows(): void {
    console.log('Removed rows: ', this.dikeGrid.edition.removedRows);
  }

  onEditionRowChange(value: DikeGridDataRowEntry<Employee>): void {
    console.log('editionRowChange: ', value);
  }

  onUpdateRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
    console.log('updateRowChange: ', value);
  }

  onCancelRowEditionChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
    console.log('cancelRowEditionChange: ', value);
  }

  onRemoveRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
    console.log('removeRowChangeChange: ', value);
  }

  onRestoreRowChange(value: DikeGridDataRowEntry<Employee> | DikeGridDataRowEntry<Employee>[]): void {
    console.log('restoreRowChange: ', value);
  }

  onFilterChange(filterable: DikeFilterable<Employee>): void {
    // We ignore the argument filterable because we are only interested in the action.
    this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
  }

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { CustomErrorMessage, CUSTOM_EDITION_ERROR_MESSAGES, DikeDataGridModule,
    ErrorType, MAX_ROWS_IN_EDITION, ROW_EDITION_ESC_KEY,
    WAIT_FOR_MULTIPLE_ROWS_CANCELATION
} from '@dikesoft/angular-data-grid';

import { SharedModule } from 'app/shared/shared.module';
import { editingRoutes } from 'app/modules/admin/editing/editing.routing';

import { RowEditionComponent } from './row-edition/row-edition.component';
import { EditionTemplatesComponent } from './edition-templates/edition-templates.component';
import { EditionValidationComponent } from './edition-validation/edition-validation.component';
import { MultipleRowsEditionComponent } from './multiple-rows-edition/multiple-rows-edition.component';

@NgModule({
  declarations: [
    RowEditionComponent,
    EditionTemplatesComponent,
    EditionValidationComponent,
    MultipleRowsEditionComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(editingRoutes),

    SharedModule,
    DikeDataGridModule
  ],
  providers: [
    { provide: ROW_EDITION_ESC_KEY, useValue: false },
    { provide: CUSTOM_EDITION_ERROR_MESSAGES,
      useFactory: (): CustomErrorMessage =>
        new CustomErrorMessage()
            .addMessage(ErrorType.REQUIRED, 'You can not leave the field empty.')
    },
    { provide: MAX_ROWS_IN_EDITION, useValue: 5 },
    { provide: WAIT_FOR_MULTIPLE_ROWS_CANCELATION, useValue: false }
  ]
})
export class EditingModule { }