diff --git a/src/pods/canvas/canvas-put-table-on-top.business.spec.ts b/src/pods/canvas/canvas-put-table-on-top.business.spec.ts new file mode 100644 index 00000000..0d86e673 --- /dev/null +++ b/src/pods/canvas/canvas-put-table-on-top.business.spec.ts @@ -0,0 +1,95 @@ +import { putTableOnTop } from './canvas.business'; +import { TableVm } from './canvas.vm'; + +describe('putTabbleOnTop', () => { + it('should return empty array, if I have a table and the array is empty', () => { + // Arrange + const tables: TableVm[] = []; + const tableId = 'someTableId'; + + // Act + const result = putTableOnTop(tableId, tables); + + // Assert + expect(result).toEqual([]); + }); + + it('should return the same array, if table and array with one element,but it is not the same as table', () => { + // Arrange + const tables: TableVm[] = [ + { id: '1', fields: [], tableName: 'Table 1', x: 0, y: 0 }, + ]; + const tableId = '2'; + + // Act + const result = putTableOnTop(tableId, tables); + + // Assert + expect(result).toEqual(tables); + }); + + it("should return an array with a single table, which is the same table if it's the only one", () => { + // Arrange + const TableId = '1'; + const table: TableVm = { + id: TableId, + fields: [], + tableName: 'Table 1', + x: 0, + y: 0, + }; + const arrayWithOnlyTable: TableVm[] = [table]; + + // Act + const result = putTableOnTop(TableId, arrayWithOnlyTable); + + // Assert + expect(result).toEqual(arrayWithOnlyTable); + }); + + it('Should return and array with the selected table in the last position of the table arrays', () => { + // Arrange + const tableId = '1'; + const tables: TableVm[] = [ + { id: tableId, fields: [], tableName: 'Table 1', x: 0, y: 0 }, + { id: '2', fields: [], tableName: 'Table 2', x: 10, y: 10 }, + ]; + + // Act + const result = putTableOnTop(tableId, tables); + + // Assert + expect(result[0]).toBe(tables[1]); + expect(result[1]).toBe(tables[0]); + }); + + it('should return the same array if the table is already in the last position', () => { + // Arrange + const tableId = '2'; + const tables: TableVm[] = [ + { id: '1', fields: [], tableName: 'Table 1', x: 0, y: 0 }, + { id: tableId, fields: [], tableName: 'Table 2', x: 10, y: 10 }, + ]; + + // Act + const result = putTableOnTop(tableId, tables); + + // Assert + expect(result).toEqual(tables); + }); + + it('should return an array with the selected table in the last position if the selected table is in the middle of the original array', () => { + // Arrange + const tableId = '2'; + const tables: TableVm[] = [ + { id: '1', fields: [], tableName: 'Table 1', x: 0, y: 0 }, + { id: tableId, fields: [], tableName: 'Table 2', x: 10, y: 10 }, + { id: '3', fields: [], tableName: 'Table 3', x: 20, y: 20 }, + ]; + + // Act + const result = putTableOnTop(tableId, tables); + // Assert + expect(result[2]).toBe(tables[1]); + }); +}); diff --git a/src/pods/canvas/canvas.business.ts b/src/pods/canvas/canvas.business.ts index a710cad2..e425691a 100644 --- a/src/pods/canvas/canvas.business.ts +++ b/src/pods/canvas/canvas.business.ts @@ -54,6 +54,28 @@ export const findField = (fields: FieldVm[], id: GUID): FieldVm | undefined => { return undefined; }; +export const putTableOnTop = (tableId: GUID, tables: TableVm[]): TableVm[] => { + let result = tables; + const table = tables.find(table => table.id === tableId); + + if (table) { + result = [...tables.filter(table => table.id !== tableId), table]; + } + + return result; +}; + +export const moveTableToTop = ( + schema: DatabaseSchemaVm, + updateInfo: UpdateInfo, + canvasSize: Size +): DatabaseSchemaVm => { + const updateSchema = calculateTablePosition(schema, updateInfo, canvasSize); + return { + ...updateSchema, + tables: putTableOnTop(updateInfo.id, updateSchema.tables), + }; +}; export const calculateRelationXCoordinateOrigin = ( tableOrigin: TableVm, tableDestination: TableVm diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 77aeec7d..2539622d 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -5,8 +5,8 @@ import { Coords, GUID, Size } from '@/core/model'; import { mockSchema } from './canvas.mock.data'; import { DatabaseTable } from './components/table/database-table.component'; import classes from './canvas.pod.module.css'; -import { calculateTablePosition, findField } from './canvas.business'; import { DatabaseRelationCollectionComponent } from './components/relation'; +import { moveTableToTop, findField } from './canvas.business'; export const CanvasPod: React.FC = () => { const [schema, setSchema] = React.useState(() => mockSchema); @@ -28,11 +28,7 @@ export const CanvasPod: React.FC = () => { canvasSize: Size ) => { setSchema(prevSchema => - calculateTablePosition( - prevSchema, - { id, position, totalHeight }, - canvasSize - ) + moveTableToTop(prevSchema, { id, position, totalHeight }, canvasSize) ); };