#513-first-prototype-json-import

Author: oleojake

src/pods/import-collection/edit-table.business.ts

@@ -0,0 +1,109 @@
+import { GenerateGUID } from '@/core/model';
+
+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';
+
+export interface FieldVm {
+	id: string;
+	PK: boolean;
+	FK: boolean;
+	name: string;
+	type: FieldType;
+	children?: FieldVm[];
+	isCollapsed?: boolean;
+	isArray?: boolean;
+	isNN?: boolean;
+}
+
+function inferMongoType(value: object | string | number | boolean | null | undefined): FieldType {
+	if (value === null) return 'null';
+	if (value === undefined) return 'undefined';
+	if (Array.isArray(value)) return 'array';
+
+	if (typeof value === 'object') {
+		if ('$oid' in value) return 'objectId';
+		if ('$date' in value) return 'date';
+		if ('$numberInt' in value) return 'int';
+		if ('$numberLong' in value) return 'long';
+		if ('$numberDouble' in value) return 'double';
+		if ('$numberDecimal' in value) return 'decimal';
+		if ('$regex' in value) return 'regex';
+		if ('$timestamp' in value) return 'timestamp';
+		return 'object';
+	}
+
+	switch (typeof value) {
+		case 'string': return 'string';
+		case 'number': return 'double';
+		case 'boolean': return 'bool';
+		case 'symbol': return 'symbol';
+		case 'function': return 'javascript';
+		default: return 'any';
+	}
+}
+
+export function parseJsonToFieldVm(obj: Record<string, unknown>): FieldVm[] {
+	const result: FieldVm[] = [];
+
+	for (const key of Object.keys(obj)) {
+		const value = obj[key];
+		const isArray = Array.isArray(value);
+		const baseValue = isArray ? value[0] : value;
+
+		const type = inferMongoType(baseValue);
+
+		// Check if the field has isNN in the value or if it is _id
+		const isNN = isObjectWithIsNN(value) ? value.isNN === true : key === '_id';
+
+		const field: FieldVm = {
+			id: GenerateGUID(),
+			PK: key === '_id',
+			FK: false,
+			name: key,
+			type,
+			isArray,
+			isNN,
+		};
+
+		const isPlainObject = (
+			type === 'object' &&
+			baseValue &&
+			typeof baseValue === 'object' &&
+			!('$oid' in baseValue || '$date' in baseValue || '$numberInt' in baseValue)
+		);
+
+		if (isPlainObject) {
+			field.children = parseJsonToFieldVm(baseValue);
+		}
+
+		result.push(field);
+	}
+
+	return result;
+}
+
+// Function to check if an object has the isNN property
+function isObjectWithIsNN(value: unknown): value is { isNN: boolean } {
+	return typeof value === 'object' && value !== null && 'isNN' in value;
+}

src/pods/import-collection/import-panel.pod.tsx

@@ -4,6 +4,7 @@ import * as canvasVm from '@/core/providers/canvas-schema';
 import * as editTableVm from '../edit-table/edit-table.vm';
 import { doMapOrCreateTable } from '../edit-table/edit-table.business';
 import { mapEditTableVmToTableVm } from '../edit-table/edit-table.mapper';
+import { parseJsonToFieldVm } from './edit-table.business';
 
 interface ImportPanelProps {
   table?: canvasVm.TableVm;
@@ -14,9 +15,14 @@ interface ImportPanelProps {
 
 const defaultJson = JSON.stringify(
   {
-    _id: { $oid: '5f5f9b3b4b4b1f001f1b1f1b' },
-    age: '30',
-    name: 'John Doe',
+    _id: { $oid: '67bdea3c01572368ed0b2d81' },
+    room: 'ada-36567',
+    content: '\nHello\n\nworld\n',
+    expireAt: {
+      $date: { $numberLong: '1740499516555' },
+      isNN: true,
+    },
+    __v: { $numberInt: '0' },
   },
   null,
   2
@@ -31,9 +37,18 @@ export const ImportPanel: React.FC<ImportPanelProps> = props => {
     doMapOrCreateTable(relations, table)
   );
 
-  const handleSubmit = (table: editTableVm.TableVm) => {
-    console.log(jsonContent);
-    onSave(mapEditTableVmToTableVm(table));
+  const handleSubmit = () => {
+    try {
+      const parsedJson = JSON.parse(jsonContent);
+      const parsedFields = parseJsonToFieldVm(parsedJson);
+      const newTable: editTableVm.TableVm = {
+        ...editTable,
+        fields: parsedFields,
+      };
+      onSave(mapEditTableVmToTableVm(newTable));
+    } catch (error) {
+      setJsonError('El JSON no es válido');
+    }
   };
 
   const handleJsonContentChange = (
@@ -62,7 +77,7 @@ export const ImportPanel: React.FC<ImportPanelProps> = props => {
           Collection:
           <input
             type="text"
-            value={table?.tableName}
+            value={editTable.tableName}
             onChange={handleChangeTableName}
             onFocus={e => e.currentTarget.select()}
           />
@@ -84,7 +99,7 @@ export const ImportPanel: React.FC<ImportPanelProps> = props => {
       <div className="two-buttons">
         <button
           className="button-secondary"
-          onClick={() => handleSubmit(editTable)}
+          onClick={handleSubmit}
           disabled={jsonError !== null}
         >
           Apply