From 76dfa5b92dc09ef5550e13955557194542887018 Mon Sep 17 00:00:00 2001 From: Braulio Diez Botella Date: Wed, 17 Jan 2024 17:51:06 +0100 Subject: [PATCH 1/3] Update field types and table width --- src/core/model/index.ts | 26 +++++++++++- .../canvas-findfield.business.spec.ts | 10 ++--- ...nvas-relationycoordinate.bussiness.spec.ts | 38 +++++++++--------- .../canvas-schema.business.spec.ts | 12 +++--- .../canvas-updateposition.business.spec.ts | 40 +++++++++---------- .../canvas.business-toggle-collapse.spec.ts | 4 +- .../providers/canvas-schema/canvas.const.ts | 4 +- src/pods/canvas/canvas.mock.data.ts | 14 +++---- .../components/nested-field-grid.tsx | 10 +++-- src/pods/edit-table/edit-table.vm.ts | 30 ++++++++++++++ 10 files changed, 122 insertions(+), 66 deletions(-) diff --git a/src/core/model/index.ts b/src/core/model/index.ts index ea0f948b..ae77430b 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -1,4 +1,28 @@ -export type FieldType = 'number' | 'string' | 'object' | 'objectId'; +export type FieldType = + | 'any' + | 'array' + | 'binData' + | 'bool' + | 'date' + | 'dbPointer' + | 'decimal' + | 'double' + | 'enum' + | 'int' + | 'javascript' + | 'long' + | 'maxKey' + | 'minKey' + | 'null' + | 'object' + | 'objectId' + | 'regex' + | 'string' + | 'symbol' + | 'timestamp' + | 'undefined'; + +//'number' | 'string' | 'object' | 'objectId'; export type ExportType = 'svg' | 'png' | 'mongo'; export interface Size { diff --git a/src/core/providers/canvas-schema/canvas-findfield.business.spec.ts b/src/core/providers/canvas-schema/canvas-findfield.business.spec.ts index 6ad76e70..f817055f 100644 --- a/src/core/providers/canvas-schema/canvas-findfield.business.spec.ts +++ b/src/core/providers/canvas-schema/canvas-findfield.business.spec.ts @@ -8,7 +8,7 @@ describe('findField', () => { { id: '1', name: 'Hi', - type: 'number', + type: 'int', PK: false, }, { @@ -32,7 +32,7 @@ describe('findField', () => { { id: '1', name: 'Hi', - type: 'number', + type: 'int', PK: false, }, { @@ -50,7 +50,7 @@ describe('findField', () => { const expected: FieldVm = { id: '1', name: 'Hi', - type: 'number', + type: 'int', PK: false, }; @@ -63,7 +63,7 @@ describe('findField', () => { { id: '1', name: 'Hi', - type: 'number', + type: 'int', PK: false, }, { @@ -95,7 +95,7 @@ describe('findField', () => { { id: '1', name: 'Hi', - type: 'number', + type: 'int', PK: false, }, { diff --git a/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts b/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts index 6a7fa957..38855c01 100644 --- a/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts +++ b/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts @@ -281,13 +281,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '4', name: 'childField1', - type: 'number', + type: 'int', PK: false, }, { id: '5', name: 'childField2', - type: 'number', + type: 'int', PK: false, }, { @@ -300,13 +300,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '7', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '8', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -367,7 +367,7 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '4', name: 'childField1', - type: 'number', + type: 'int', PK: false, }, { @@ -380,13 +380,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '7', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '8', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -401,13 +401,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '9', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '10', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -468,7 +468,7 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '4', name: 'childField1', - type: 'number', + type: 'int', PK: false, }, { @@ -481,13 +481,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '7', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '8', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -502,13 +502,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '9', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '10', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -570,7 +570,7 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '4', name: 'childField1', - type: 'number', + type: 'int', PK: false, }, { @@ -583,13 +583,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '7', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '8', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], @@ -604,13 +604,13 @@ describe('canvas.business.calculateRelationYOffset', () => { { id: '9', name: 'subField1', - type: 'number', + type: 'int', PK: false, }, { id: '10', name: 'subField2', - type: 'number', + type: 'int', PK: false, }, ], diff --git a/src/core/providers/canvas-schema/canvas-schema.business.spec.ts b/src/core/providers/canvas-schema/canvas-schema.business.spec.ts index 94006a7f..741cdf9f 100644 --- a/src/core/providers/canvas-schema/canvas-schema.business.spec.ts +++ b/src/core/providers/canvas-schema/canvas-schema.business.spec.ts @@ -100,7 +100,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', @@ -162,7 +162,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', @@ -251,7 +251,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', @@ -325,7 +325,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', @@ -356,7 +356,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', @@ -456,7 +456,7 @@ describe('canvas-schema.business', () => { id: '2', name: 'test update id name 2', PK: false, - type: 'number', + type: 'int', }, ], tableName: 'test update table name', diff --git a/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts b/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts index be9ced26..9d79e0fd 100644 --- a/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts +++ b/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts @@ -20,7 +20,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -40,7 +40,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -89,7 +89,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -109,7 +109,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -144,7 +144,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -164,7 +164,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -213,7 +213,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -233,7 +233,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -269,7 +269,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -289,7 +289,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -338,7 +338,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -358,7 +358,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -394,7 +394,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -414,7 +414,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -463,7 +463,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -483,7 +483,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -519,7 +519,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -539,7 +539,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -588,7 +588,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -608,7 +608,7 @@ describe('calculateTablePosition', () => { { id: '1', name: 'id', - type: 'number', + type: 'int', PK: false, }, { diff --git a/src/core/providers/canvas-schema/canvas.business-toggle-collapse.spec.ts b/src/core/providers/canvas-schema/canvas.business-toggle-collapse.spec.ts index 01a647c5..5ca1ebfe 100644 --- a/src/core/providers/canvas-schema/canvas.business-toggle-collapse.spec.ts +++ b/src/core/providers/canvas-schema/canvas.business-toggle-collapse.spec.ts @@ -23,7 +23,7 @@ describe('doFieldToggleCollapseLogic', () => { id: 'field2', PK: true, name: 'Field 2', - type: 'number', + type: 'int', isCollapsed: false, }, ], @@ -64,7 +64,7 @@ describe('doFieldToggleCollapseLogic', () => { id: 'field2', PK: true, name: 'Field 2', - type: 'number', + type: 'int', isCollapsed: false, }, ], diff --git a/src/core/providers/canvas-schema/canvas.const.ts b/src/core/providers/canvas-schema/canvas.const.ts index bd3ac4f8..f10fe4bf 100644 --- a/src/core/providers/canvas-schema/canvas.const.ts +++ b/src/core/providers/canvas-schema/canvas.const.ts @@ -4,9 +4,9 @@ const LEVEL_INDENTATION = 20; // Indentation per level in nested view const COLLAPSE_ICON_X = 5; // X position of the collapse icon const FIELD_NAME_X_OFFSET = 20; // Initial X offset for the field name const FIELD_TYPE_X = 160; // X position for the field type -const TABLE_WIDTH = 300; // Width of the table rectangle +const TABLE_WIDTH = 320; // Width of the table rectangle const HEADER_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table header -const DEFAULT_TABLE_WIDTH = 300; +const DEFAULT_TABLE_WIDTH = TABLE_WIDTH; const ROW_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table line export const TABLE_CONST = { diff --git a/src/pods/canvas/canvas.mock.data.ts b/src/pods/canvas/canvas.mock.data.ts index bdfb5a38..46cdd357 100644 --- a/src/pods/canvas/canvas.mock.data.ts +++ b/src/pods/canvas/canvas.mock.data.ts @@ -37,7 +37,7 @@ const mockTables: TableVm[] = [ id: tagFieldId, name: 'id', PK: true, - type: 'number', + type: 'int', }, { id: restauranteNameFieldGUID, @@ -56,7 +56,7 @@ const mockTables: TableVm[] = [ { id: restaurantIdField, name: 'id', - type: 'number', + type: 'int', PK: false, }, { @@ -74,7 +74,7 @@ const mockTables: TableVm[] = [ { id: GenerateGUID(), name: 'id', - type: 'number', + type: 'objectId', PK: false, }, { @@ -93,7 +93,7 @@ const mockTables: TableVm[] = [ { id: GenerateGUID(), name: 'id', - type: 'number', + type: 'objectId', PK: false, }, { @@ -105,7 +105,7 @@ const mockTables: TableVm[] = [ { id: GenerateGUID(), name: 'price', - type: 'number', + type: 'decimal', PK: false, }, ], @@ -115,7 +115,7 @@ const mockTables: TableVm[] = [ { id: restaurantTagFieldGUID, name: 'tags', - type: 'number', + type: 'objectId', isArray: true, PK: false, }, @@ -146,7 +146,7 @@ const mockTables: TableVm[] = [ { id: GenerateGUID(), name: 'zip', - type: 'number', + type: 'int', PK: false, }, ], diff --git a/src/pods/edit-table/components/nested-field-grid.tsx b/src/pods/edit-table/components/nested-field-grid.tsx index 7b99c5b9..dd3e22f9 100644 --- a/src/pods/edit-table/components/nested-field-grid.tsx +++ b/src/pods/edit-table/components/nested-field-grid.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classes from '../edit-table.module.css'; import { FieldType, GUID } from '@/core/model'; -import { FieldVm } from '../edit-table.vm'; +import { FieldVm, fieldTypeOptions } from '../edit-table.vm'; import { Commands } from './commands/commands.component'; interface NestedFieldGridProps { @@ -95,9 +95,11 @@ export const NestedFieldGrid: React.FC = ({ updateFieldValue(field, 'type', e.target.value as FieldType) } > - - - + {fieldTypeOptions.map(entry => ( + + ))}
diff --git a/src/pods/edit-table/edit-table.vm.ts b/src/pods/edit-table/edit-table.vm.ts index 4eb2aea3..606aa12b 100644 --- a/src/pods/edit-table/edit-table.vm.ts +++ b/src/pods/edit-table/edit-table.vm.ts @@ -45,3 +45,33 @@ export const createDefaultTable = (): TableVm => ({ x: 0, y: 0, }); + +interface OptionEntry { + label: string; + value: FieldType; +} + +export const fieldTypeOptions: OptionEntry[] = [ + { label: 'Any', value: 'any' }, + { label: 'Array', value: 'array' }, + { label: 'BinData', value: 'binData' }, + { label: 'Boolean', value: 'bool' }, + { label: 'Date', value: 'date' }, + { label: 'DBPointer', value: 'dbPointer' }, + { label: 'Decimal', value: 'decimal' }, + { label: 'Double', value: 'double' }, + { label: 'Enum', value: 'enum' }, + { label: 'Int', value: 'int' }, + { label: 'Javascript', value: 'javascript' }, + { label: 'Long', value: 'long' }, + { label: 'MaxKey', value: 'maxKey' }, + { label: 'MinKey', value: 'minKey' }, + { label: 'Null', value: 'null' }, + { label: 'Object', value: 'object' }, + { label: 'ObjectId', value: 'objectId' }, + { label: 'Regex', value: 'regex' }, + { label: 'String', value: 'string' }, + { label: 'Symbol', value: 'symbol' }, + { label: 'Timestamp', value: 'timestamp' }, + { label: 'Undefined', value: 'undefined' }, +]; From 6cb2303580917b7f659d674d040e2a01eb3e8889 Mon Sep 17 00:00:00 2001 From: Braulio Diez Botella Date: Wed, 17 Jan 2024 17:54:15 +0100 Subject: [PATCH 2/3] Remove commented code for FieldType --- src/core/model/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/model/index.ts b/src/core/model/index.ts index ae77430b..c951ebe4 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -22,7 +22,6 @@ export type FieldType = | 'timestamp' | 'undefined'; -//'number' | 'string' | 'object' | 'objectId'; export type ExportType = 'svg' | 'png' | 'mongo'; export interface Size { From 388bae2324b39ccd7072af156f8c0ad9d848a52d Mon Sep 17 00:00:00 2001 From: Braulio Diez Botella Date: Wed, 17 Jan 2024 18:22:32 +0100 Subject: [PATCH 3/3] Refactor table x-coordinate calculations --- .../canvas-calculaterelationx.business.spec.ts | 13 +++++++------ .../canvas-updateposition.business.spec.ts | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/core/providers/canvas-schema/canvas-calculaterelationx.business.spec.ts b/src/core/providers/canvas-schema/canvas-calculaterelationx.business.spec.ts index 104d2c60..37c0adb0 100644 --- a/src/core/providers/canvas-schema/canvas-calculaterelationx.business.spec.ts +++ b/src/core/providers/canvas-schema/canvas-calculaterelationx.business.spec.ts @@ -26,7 +26,7 @@ describe('calculateRelationXCoordinateOrigin', () => { }, ], tableName: 'table1', - x: TABLE_CONST.DEFAULT_TABLE_WIDTH - 200, + x: 0, y: 0, }; const tableDestination: TableVm = { @@ -46,7 +46,7 @@ describe('calculateRelationXCoordinateOrigin', () => { }, ], tableName: 'table2', - x: TABLE_CONST.DEFAULT_TABLE_WIDTH + 200, + x: 200, y: 0, }; @@ -57,7 +57,7 @@ describe('calculateRelationXCoordinateOrigin', () => { ); // Assert - expect(result).toBe(TABLE_CONST.DEFAULT_TABLE_WIDTH + 100); + expect(result).toBe(TABLE_CONST.DEFAULT_TABLE_WIDTH); }); it('Should returns xCoordinateOrigin, if tableOrigin.x > tableDestination.x', () => { //Arrange @@ -133,7 +133,7 @@ describe('calculateRelationXCoordinateEnd', () => { }, ], tableName: 'table1', - x: TABLE_CONST.DEFAULT_TABLE_WIDTH + 200, + x: 200, y: 0, }; const tableDestination: TableVm = { @@ -153,7 +153,7 @@ describe('calculateRelationXCoordinateEnd', () => { }, ], tableName: 'table2', - x: TABLE_CONST.DEFAULT_TABLE_WIDTH - 200, + x: 190, y: 0, }; @@ -164,7 +164,8 @@ describe('calculateRelationXCoordinateEnd', () => { ); // Assert - expect(result).toBe(TABLE_CONST.DEFAULT_TABLE_WIDTH + 100); + // TODO: REFACTOR THIS TEST IF TABLE WIDTH CHANGE THIS IS NOT VALID + expect(result).toBe(190 + TABLE_CONST.DEFAULT_TABLE_WIDTH); }); it('Should returns xCoordinateEnd, if tableDestination.x > tableOrigin.x', () => { //Arrange diff --git a/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts b/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts index 9d79e0fd..b0b3637c 100644 --- a/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts +++ b/src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts @@ -206,7 +206,7 @@ describe('calculateTablePosition', () => { tables: [ { id: '1', - x: 2100, + x: canvasSize.width - TABLE_CONST.DEFAULT_TABLE_WIDTH, y: 500, tableName: 'tags', fields: [