fix exporting models

2024-11-15 05:05:25 -05:00
parent a090d6ffb4
commit e636f4e181
4 changed files with 275 additions and 57 deletions
@@ -1,12 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { X, Plus, Trash } from 'lucide-react';
-import { useFlowStore } from '../store/flowStore';
+import React, { useState, useEffect } from "react";
+import { X, Plus, Trash } from "lucide-react";
+import { useFlowStore } from "../store/flowStore";

 interface Field {
  name: string;
  type: string;
  defaultValue: string;
  validation: string;
+  validationOptions?: {
+    pattern?: string;
+    enum?: string[];
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+  };
  mapping?: string;
 }

@@ -21,35 +29,53 @@ interface ModelModalProps {
 }

 const fieldTypes = [
-  'string',
-  'number',
-  'boolean',
-  'date',
-  'mapping',
-  'array',
-  'object',
+  "primary key",
+  "string",
+  "long text",
+  "integer",
+  "double",
+  "big number",
+  "boolean",
+  "date",
+  "datetime",
+  "uuid",
+  "json",
+  "mapping",
 ];

 const validationRules = [
-  'required',
-  'email',
-  'url',
-  'min',
-  'max',
-  'pattern',
-  'enum',
+  "required",
+  "email",
+  "url",
+  "min",
+  "max",
+  "pattern",
+  "enum",
+  "length",
+  "minLength",
+  "maxLength",
+  "positive",
+  "negative",
+  "integer",
+  "decimal",
+  "alphanumeric",
+  "uuid",
+  "json",
+  "date",
+  "phone",
 ];

-const initialNewField = {
-  name: '',
-  type: 'string',
-  defaultValue: '',
-  validation: '',
+const initialNewField: Field = {
+  name: "",
+  type: "string",
+  defaultValue: "",
+  validation: "",
+  validationOptions: {},
 };

 const createInitialModelData = () => ({
  id: `model_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-  name: '',
+  name: "",
  fields: [],
 });

@@ -108,12 +134,9 @@ export function ModelModal({ isOpen, onClose, model }: ModelModalProps) {
      <div className="bg-white rounded-lg w-full max-w-2xl max-h-[80vh] overflow-hidden">
        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
          <h2 className="text-lg font-semibold">
-            {model ? 'Edit Model' : 'Add New Model'}
+            {model ? "Edit Model" : "Add New Model"}
          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-100 rounded"
-          >
+          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded">
            <X className="w-5 h-5" />
          </button>
        </div>
@@ -124,7 +147,9 @@ export function ModelModal({ isOpen, onClose, model }: ModelModalProps) {
            <input
              type="text"
              value={modelData.name}
-              onChange={(e) => setModelData({ ...modelData, name: e.target.value })}
+              onChange={(e) =>
+                setModelData({ ...modelData, name: e.target.value })
+              }
              className="w-full p-2 border rounded"
              placeholder="Enter model name"
            />
@@ -211,10 +236,10 @@ export function ModelModal({ isOpen, onClose, model }: ModelModalProps) {
                </select>
              </div>

-              {newField.type === 'mapping' && (
+              {newField.type === "mapping" && (
                <input
                  type="text"
-                  value={newField.mapping || ''}
+                  value={newField.mapping || ""}
                  onChange={(e) =>
                    setNewField({ ...newField, mapping: e.target.value })
                  }
@@ -223,6 +248,78 @@ export function ModelModal({ isOpen, onClose, model }: ModelModalProps) {
                />
              )}

+              {newField.validation &&
+                [
+                  "pattern",
+                  "enum",
+                  "min",
+                  "max",
+                  "minLength",
+                  "maxLength",
+                ].includes(newField.validation) && (
+                  <div className="flex gap-2">
+                    {newField.validation === "pattern" && (
+                      <input
+                        type="text"
+                        value={newField.validationOptions?.pattern || ""}
+                        onChange={(e) =>
+                          setNewField({
+                            ...newField,
+                            validationOptions: {
+                              ...newField.validationOptions,
+                              pattern: e.target.value,
+                            },
+                          })
+                        }
+                        className="flex-1 p-2 border rounded"
+                        placeholder="Regular expression pattern"
+                      />
+                    )}
+                    {newField.validation === "enum" && (
+                      <input
+                        type="text"
+                        value={
+                          newField.validationOptions?.enum?.join(",") || ""
+                        }
+                        onChange={(e) =>
+                          setNewField({
+                            ...newField,
+                            validationOptions: {
+                              ...newField.validationOptions,
+                              enum: e.target.value.split(","),
+                            },
+                          })
+                        }
+                        className="flex-1 p-2 border rounded"
+                        placeholder="Comma-separated values"
+                      />
+                    )}
+                    {["min", "max", "minLength", "maxLength"].includes(
+                      newField.validation
+                    ) && (
+                      <input
+                        type="number"
+                        value={
+                          newField.validationOptions?.[
+                            newField.validation as keyof typeof newField.validationOptions
+                          ] || ""
+                        }
+                        onChange={(e) =>
+                          setNewField({
+                            ...newField,
+                            validationOptions: {
+                              ...newField.validationOptions,
+                              [newField.validation]: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="flex-1 p-2 border rounded"
+                        placeholder={`Enter ${newField.validation} value`}
+                      />
+                    )}
+                  </div>
+                )}
+
              <button
                onClick={handleAddField}
                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@@ -245,7 +342,7 @@ export function ModelModal({ isOpen, onClose, model }: ModelModalProps) {
            onClick={handleSave}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
-            {model ? 'Update' : 'Save'} Model
+            {model ? "Update" : "Save"} Model
          </button>
        </div>
      </div>
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { Plus, Edit2 } from 'lucide-react';
-import { useFlowStore } from '../store/flowStore';
-import { ModelModal } from './ModelModal';
+import React, { useState } from "react";
+import { Plus, Edit2 } from "lucide-react";
+import { useFlowStore } from "../store/flowStore";
+import { ModelModal } from "./ModelModal";

 export function ModelPanel() {
  const [isModalOpen, setIsModalOpen] = useState(false);
@@ -36,7 +36,8 @@ export function ModelPanel() {
              <div>
                <h3 className="font-medium">{model.name}</h3>
                <p className="text-sm text-gray-500">
-                  {model.fields.length} field{model.fields.length !== 1 ? 's' : ''}
+                  {model.fields.length} field
+                  {model.fields.length !== 1 ? "s" : ""}
                </p>
              </div>
              <button
@@ -1,11 +1,14 @@
-import React from 'react';
-import { Save } from 'lucide-react';
-import { useFlowStore } from '../store/flowStore';
+import React from "react";
+import { Save } from "lucide-react";
+import { useFlowStore } from "../store/flowStore";
+import { TranslationService } from "../services/TranslationService";

 export function SettingsForm() {
  const { settings, updateSettings } = useFlowStore();

-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
    updateSettings({
      ...settings,
      [e.target.name]: e.target.value,
@@ -16,6 +19,25 @@ export function SettingsForm() {
    updateSettings(settings);
  };

+  const handleExportConfiguration = () => {
+    const models = useFlowStore.getState().models;
+    const configuration = {
+      models: models.map((model) => TranslationService.translateModel(model)),
+    };
+
+    const blob = new Blob([JSON.stringify(configuration, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "model-configuration.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
  return (
    <div className="space-y-4">
      <div>
@@ -23,7 +45,7 @@ export function SettingsForm() {
        <input
          type="text"
          name="globalKey"
-          value={settings?.globalKey || ''}
+          value={settings?.globalKey || ""}
          onChange={handleChange}
          className="w-full p-2 border rounded"
          placeholder="Enter global key"
@@ -34,7 +56,7 @@ export function SettingsForm() {
        <label className="block text-sm font-medium mb-1">Database Type</label>
        <select
          name="databaseType"
-          value={settings?.databaseType || ''}
+          value={settings?.databaseType || ""}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        >
@@ -47,10 +69,12 @@ export function SettingsForm() {
      </div>

      <div>
-        <label className="block text-sm font-medium mb-1">Authentication Type</label>
+        <label className="block text-sm font-medium mb-1">
+          Authentication Type
+        </label>
        <select
          name="authType"
-          value={settings?.authType || ''}
+          value={settings?.authType || ""}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        >
@@ -63,7 +87,7 @@ export function SettingsForm() {
        <label className="block text-sm font-medium mb-1">Timezone</label>
        <select
          name="timezone"
-          value={settings?.timezone || ''}
+          value={settings?.timezone || ""}
          onChange={handleChange}
          className="w-full p-2 border rounded"
        >
@@ -75,13 +99,15 @@ export function SettingsForm() {
      </div>

      <div className="space-y-2">
-        <label className="block text-sm font-medium">Database Credentials</label>
+        <label className="block text-sm font-medium">
+          Database Credentials
+        </label>

        <div>
          <input
            type="text"
            name="dbHost"
-            value={settings?.dbHost || ''}
+            value={settings?.dbHost || ""}
            onChange={handleChange}
            className="w-full p-2 border rounded mb-2"
            placeholder="Host"
@@ -92,7 +118,7 @@ export function SettingsForm() {
          <input
            type="text"
            name="dbPort"
-            value={settings?.dbPort || ''}
+            value={settings?.dbPort || ""}
            onChange={handleChange}
            className="w-full p-2 border rounded mb-2"
            placeholder="Port"
@@ -103,7 +129,7 @@ export function SettingsForm() {
          <input
            type="text"
            name="dbUser"
-            value={settings?.dbUser || ''}
+            value={settings?.dbUser || ""}
            onChange={handleChange}
            className="w-full p-2 border rounded mb-2"
            placeholder="Username"
@@ -114,7 +140,7 @@ export function SettingsForm() {
          <input
            type="password"
            name="dbPassword"
-            value={settings?.dbPassword || ''}
+            value={settings?.dbPassword || ""}
            onChange={handleChange}
            className="w-full p-2 border rounded mb-2"
            placeholder="Password"
@@ -125,7 +151,7 @@ export function SettingsForm() {
          <input
            type="text"
            name="dbName"
-            value={settings?.dbName || ''}
+            value={settings?.dbName || ""}
            onChange={handleChange}
            className="w-full p-2 border rounded"
            placeholder="Database Name"
@@ -140,6 +166,15 @@ export function SettingsForm() {
        <Save className="w-4 h-4" />
        Save Settings
      </button>
+
+      <div className="mt-6">
+        <button
+          onClick={handleExportConfiguration}
+          className="w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+        >
+          Export Configuration
+        </button>
+      </div>
    </div>
  );
 }
@@ -0,0 +1,85 @@
+interface ModelData {
+  id: string;
+  name: string;
+  fields: Field[];
+}
+
+interface Field {
+  name: string;
+  type: string;
+  defaultValue: string;
+  validation: string;
+  validationOptions?: {
+    pattern?: string;
+    enum?: string[];
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+  };
+  mapping?: string;
+}
+
+export class TranslationService {
+  static translateModel(model: ModelData): any {
+    return {
+      name: model.name,
+      fields: model.fields.map((field) => ({
+        name: field.name,
+        type: this.translateFieldType(field.type),
+        isPrimaryKey: field.type === "primary key",
+        validation: this.translateValidation(field),
+        defaultValue: field.defaultValue || null,
+        ...(field.mapping ? { mapping: this.parseMapping(field.mapping) } : {}),
+      })),
+    };
+  }
+
+  private static translateFieldType(type: string): string {
+    if (type === "primary key") {
+      return "INTEGER";
+    }
+
+    const typeMap: { [key: string]: string } = {
+      string: "STRING",
+      "long text": "TEXT",
+      integer: "INTEGER",
+      double: "DOUBLE",
+      "big number": "BIGINT",
+      boolean: "BOOLEAN",
+      date: "DATE",
+      datetime: "DATETIME",
+      uuid: "UUID",
+      json: "JSON",
+      mapping: "MAPPING",
+    };
+    return typeMap[type] || type.toUpperCase();
+  }
+
+  private static translateValidation(field: Field): any {
+    if (!field.validation) return null;
+
+    const validation: any = {
+      type: field.validation,
+    };
+
+    if (field.validationOptions) {
+      Object.assign(validation, field.validationOptions);
+    }
+
+    return validation;
+  }
+
+  private static parseMapping(mapping: string): Record<string, string> {
+    try {
+      return Object.fromEntries(
+        mapping.split(",").map((pair) => {
+          const [key, value] = pair.split(":");
+          return [key.trim(), value.trim()];
+        })
+      );
+    } catch (e) {
+      return {};
+    }
+  }
+}