Adjust movedRows and dropIndex in beforeRowMove

Tags: #<Tag:0x00007efc657178f8> #<Tag:0x00007efc65717678>
#1

We have a table where user data is represented in rows of 3 (eg. [0,1,2] for 1st user, [3,4,5] for 2nd user and so on). And we need to implement user reordering, where is seems that the most intuitive way to do it would be to use manualRowMove.

When trying to manually move rows, is there a way to change the movedRows array and dropIndex values, since the user could try to drag incorrect amount of rows to the incorrect position?

Requirement:

  • dropIndex % 3 === 0
  • movedRows should always have all 3 rows for each user:
    + movedRows = [1] => [0,1,2]
    + movedRows = [5,6,7,8,9] => [3,4,5,6,7,8,9,10,11]
#2

I would say to use the beforeRowMove hook in a way to cut the array of row indexes like this

if (movedRows.length > 3) {
      movedRows.length = 3;
}

but it seems that the position of the drop also has to be recalculated. In this case, I would rather go with return false (block the action via hook) and then run your own instance.getPlugin('manualRowMove').moveRows() function based on the parameters from the hook.

#3

Thanks, the solution:

beforeRowMove: (movedRows: number[], finalIndex: number, dropIndex: number, movePossible: boolean) =>
    context.validateRowMove(movedRows, finalIndex, movePossible)


private validateRowMove(movedRows: number[], finalIndex: number, movePossible: boolean): boolean {
	if (finalIndex % 3 !== 0 || (movedRows.length % 3 !== 0 && movedRows[0] % 3 !== 0)) {
		const movePlugin = this.getHotPlugin('manualRowMove')
		movePlugin.moveRows(this.adjustMovedRows(movedRows), this.adjustIndex(finalIndex))
		movePossible = false
	}
	return movePossible
}
1 Like