Merge pull request #268 from ZACHSTRIVES/dev

Dev
ZACHSTRIVES · Mar 11, 2024 · ef0e18b · ef0e18b
2 parents 8b88094 + 522b22e
commit ef0e18b
Show file tree

Hide file tree

Showing 22 changed files with 429 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dummyi",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/public/images/exportFormats/dark/sql.svg → public/images/exportFormats/dark/SQL.svg b/public/images/exportFormats/dark/sql.svg → public/images/exportFormats/dark/SQL.svg
diff --git a/public/images/exportFormats/light/sql.svg → public/images/exportFormats/light/SQL.svg b/public/images/exportFormats/light/sql.svg → public/images/exportFormats/light/SQL.svg
diff --git a/scripts/addNewFormatter.ts b/scripts/addNewFormatter.ts
@@ -25,7 +25,7 @@ const createFormatter = (formatterName: string, fileExtension: string) => {
             const path = `./src/core/formatters/${formatterName}`;
 
             // add formatter enum option
-            enumUtils('./src/constants/enums.ts', 'ExportFormat', formatterName.toUpperCase(), formatterName.toLowerCase());
+            enumUtils('./src/constants/enums.ts', 'ExportFormat', formatterName.toUpperCase(), formatterName);
 
             // create directory
             fs.mkdirSync(path, {recursive: true});

diff --git a/src/components/Navbar/src/NavBar.tsx b/src/components/Navbar/src/NavBar.tsx
@@ -101,11 +101,12 @@ export const NavBar: FunctionComponent<NavBarProps> = () => {
                     <GithubButton size={isMenuOpen ? "large" : 'extra-large'}/>
                     <ColorModeSwitchButton size={isMenuOpen ? "large" : 'extra-large'}/>
                     <LocaleSwitchButton size={isMenuOpen ? "large" : 'extra-large'}/>
-                    {
-                        isLoggedIn
-                            ? <UserLogin user={user} className={styles.loginButton} onLogout={handleLogout}/>
-                            : <LoginButton className={styles.loginButton} onLogin={handleLogin}/>
-                    }
+
+                    {/*{*/}
+                    {/*    isLoggedIn*/}
+                    {/*        ? <UserLogin user={user} className={styles.loginButton} onLogout={handleLogout}/>*/}
+                    {/*        : <LoginButton className={styles.loginButton} onLogin={handleLogin}/>*/}
+                    {/*}*/}
                 </Nav.Footer>
             </Nav>
         </div>

diff --git a/src/components/Utils/src/OptionsInput.tsx b/src/components/Utils/src/OptionsInput.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {ErrorTooltip, InfoTooltip} from "@/components/Utils";
 import {Input} from "@douyinfe/semi-ui";
 import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {useIntl} from "@/locale";
 
 export interface OptionsInputProps {
     label: string | React.ReactNode;
@@ -11,10 +12,24 @@ export interface OptionsInputProps {
     value: string;
     onChange: (value: any) => void;
     style?: React.CSSProperties;
+    required?: boolean; // Add this line for the new required prop
 }
 
 export const OptionsInput: React.FunctionComponent<OptionsInputProps> = ({...props}) => {
-    const {label, infoTooltip, errorMessage, value, style, suffix, onChange} = props;
+    const {label, infoTooltip, errorMessage, value, style, suffix, onChange, required} = props;
+    const intl = useIntl();
+
+    // Add a new useState to manage the validation error message
+    const [validationError, setValidationError] = React.useState<string | undefined>();
+
+    // Add effect to validate value when it changes or when required status changes
+    React.useEffect(() => {
+        if (required && isNullOrWhiteSpace(value)) {
+            setValidationError(intl.formatMessage({id: 'error.input.isRequired'})); // Set default required error message or use props.errorMessage
+        } else {
+            setValidationError(undefined); // Clear error message when input is valid
+        }
+    }, [value, required]);
 
     return (
         <div className="generatorConfig_column">
@@ -24,15 +39,15 @@ export const OptionsInput: React.FunctionComponent<OptionsInputProps> = ({...pro
                     {infoTooltip}
                 </InfoTooltip>}
             </div>
-            <ErrorTooltip message={errorMessage}>
+            <ErrorTooltip message={validationError || errorMessage}>
                 <Input
                     onChange={(value) => onChange(value)}
                     value={value}
                     style={style}
                     suffix={suffix}
-                    validateStatus={!isNullOrWhiteSpace(errorMessage) ? 'error' : 'default'}
+                    validateStatus={!isNullOrWhiteSpace(validationError || errorMessage) ? 'error' : 'default'}
                 />
             </ErrorTooltip>
         </div>
     )
-}
+}
diff --git a/src/constants/enums.ts b/src/constants/enums.ts
@@ -1,12 +1,13 @@
 
 // export format
 export enum ExportFormatCategory {
-    FILE_TYPES = "fileTypes",
+    FILE_TYPES = "file_types",
     DATABASES = "databases",
-    PROGRAMMING_LANGUAGES = "programmingLanguages",
+    PROGRAMMING_LANGUAGES = "programming_languages",
 }
 
 export enum ExportFormat {
+    TYPESCRIPT = "Typescript",
     CSHARP = "C#",
     SQL = "SQL",
     CSV = "CSV",
@@ -43,6 +44,7 @@ export enum DataTypeCategory {
 }
 
 export enum DataType {
+    URL = "url",
     DOMAINSUFFIX = "domainsuffix",
     DOMAINNAME = "domainname",
     ACCOUNTNUMBER = "accountnumber",

diff --git a/src/core/formatters/CSharp/CSharp.tsx b/src/core/formatters/CSharp/CSharp.tsx
@@ -4,8 +4,6 @@ import {OptionsInput, OptionsSelect, SelectOption} from "@/components/Utils";
 import {FormattedMessage} from "@/locale";
 import {OptionsSwitch} from "@/components/Utils/src/OptionsSwitch";
 import {ValueType} from "@/constants/enums";
-import {GenerateResult} from "@/types/generator";
-import {hasValue} from "@/utils/typeUtils";
 import {formatValueForCSharp} from "@/core/formatters/CSharp/CSharpFormatterUtils";
 
 // -------------------------------------------------------------------------------------------------------------
@@ -66,13 +64,13 @@ export const format = (request: FormatRequest): string => {
                     fieldType = `long${field.emptyRate !== 0 ? "?" : ""}`;
                     break;
                 case ValueType.INT_LIST:
-                    fieldType = 'List<int>'
+                    fieldType = 'List<int>';
                     break;
                 case ValueType.STRING_LIST:
-                    fieldType = 'List<string>'
+                    fieldType = 'List<string>';
                     break;
                 case ValueType.ONE_BIT:
-                    fieldType = `int${field.emptyRate !== 0 ? "?" : ""}`
+                    fieldType = `int${field.emptyRate !== 0 ? "?" : ""}`;
                     break;
                 // Add more cases as necessary
             }
@@ -110,20 +108,16 @@ export const format = (request: FormatRequest): string => {
 
     // Populate collection with values
     values.forEach((value, index) => {
+        let fieldAssignments = sortedFieldIds.map(id => {
+            return `    ${fields[id].fieldName} = ${formatValueForCSharp(value[id], fields[id].valueType)}`;
+        }).join(',\n'); // Ensure each field assignment is on a new line
+
         if (config.collectionType === CSharpCollectionType.ARRAY) {
             // Array value assignment
-            csharpCode += `${config.collectionName}[${index}] = new ${itemType} { `;
+            csharpCode += `${config.collectionName}[${index}] = new ${itemType} {\n${fieldAssignments}\n    };\n`;
         } else {
             // Other collections value addition
-            csharpCode += `${config.collectionName}.Add(new ${itemType} { `;
-        }
-
-        csharpCode += sortedFieldIds.map(id => `${fields[id].fieldName} = ${formatValueForCSharp(value[id], fields[id].valueType)}`).join(', ');
-
-        if (config.collectionType === CSharpCollectionType.ARRAY) {
-            csharpCode += ' };\n';
-        } else {
-            csharpCode += ' });\n';
+            csharpCode += `${config.collectionName}.Add(new ${itemType}\n{\n${fieldAssignments}\n});\n`;
         }
     });
 
@@ -156,6 +150,7 @@ export const CSharpConfigComponent: React.FC<FormatterConfigComponentInterface>
             />
 
             <OptionsInput
+                required
                 label={<FormattedMessage id="export.configurator.csharp.collectionName"/>}
                 value={config.collectionName}
                 onChange={(v) => handleValueChange("collectionName", v)}
@@ -170,6 +165,7 @@ export const CSharpConfigComponent: React.FC<FormatterConfigComponentInterface>
 
             {
                 config.dtoClass && <OptionsInput
+                    required
                     label={<FormattedMessage id="export.configurator.csharp.dtoClassName"/>}
                     value={config.dtoClassName}
                     onChange={(v) => handleValueChange("dtoClassName", v)}

diff --git a/src/core/formatters/JavaScript/Javascript.tsx b/src/core/formatters/JavaScript/Javascript.tsx
@@ -3,6 +3,7 @@ import {FormatRequest, FormatterConfigComponentInterface} from "@/types/formatte
 import {FormattedMessage, useIntl} from "@/locale";
 import {OptionsInput, OptionsSelect, SelectOption} from "@/components/Utils";
 import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {toJsonListStringWithoutQuotes} from "@/utils/formatterUtils";
 
 // -------------------------------------------------------------------------------------------------------------
 // types
@@ -38,30 +39,12 @@ export const format = (request: FormatRequest): string => {
         return '';
     }
 
-    const jsonData = values.map(item => {
-        const row: Record<string, string | null> = {};
-        for (const column of sortedFieldIds) {
-            const field = fields[column];
-            const {isDraft, fieldName} = field;
-            const itemValue = item[column];
-            let {value} = itemValue;
-
-            if (!isDraft && value !== null) {
-                if (typeof value === 'bigint') {
-                    value = value.toString();
-                }
-                row[fieldName] = value;
-            }
-        }
-        return row;
-    });
-
-    let output = JSON.stringify(jsonData, null, 3);
+    let output = toJsonListStringWithoutQuotes(fields, sortedFieldIds, values);
 
     return formatOutput(formatType, module, declarationKeyword, variableName, output);
 };
 
-function formatOutput(formatType, module, declarationKeyword, variableName, output) {
+function formatOutput(formatType: JavascriptFormatterFormat, module: JavascriptModuleType, declarationKeyword: JavascriptDeclarationKeyword, variableName: string, output: string) {
     switch (formatType) {
         case JavascriptFormatterFormat.VARIABLE:
             return formatVariableOutput(declarationKeyword, variableName, output);
@@ -72,14 +55,14 @@ function formatOutput(formatType, module, declarationKeyword, variableName, outp
     }
 }
 
-function formatVariableOutput(declarationKeyword, variableName, output) {
+function formatVariableOutput(declarationKeyword: JavascriptDeclarationKeyword, variableName: string, output: string) {
     if (isNullOrWhiteSpace(variableName)) {
         return '';
     }
     return `${declarationKeyword} ${variableName} = ${output};`;
 }
 
-function formatExportOutput(module, output) {
+function formatExportOutput(module: JavascriptModuleType, output: string) {
     switch (module) {
         case JavascriptModuleType.ES6:
             return `export default ${output};`;

diff --git a/src/core/formatters/Sql/Sql.tsx b/src/core/formatters/Sql/Sql.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import {FormatRequest, FormatterConfigComponentInterface} from "@/types/formatter";
 import {OptionsInput, OptionsNumberInput, OptionsSelect, SelectOption} from "@/components/Utils";
-import {FormattedMessage, useIntl} from "@/locale";
-import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {FormattedMessage} from "@/locale";
 import {OptionsSwitch} from "@/components/Utils/src/OptionsSwitch";
 import {Divider} from "@douyinfe/semi-ui";
 import {DataField} from "@/types/generator";
@@ -149,8 +148,6 @@ const generateInsertStatements = (sqlType: SqlType, tableName: string, sortedFie
 
 // Modify the format function to adapt to different SQL dialects
 export const format = (request: FormatRequest): string => {
-    console.log(request)
-
     const {fields, values, config, sortedFieldIds} = request;
     const {type, tableName, batchSize, dropTable, createTable, primaryKey, primaryKeyColumnName} = config;
 
@@ -201,24 +198,12 @@ export const format = (request: FormatRequest): string => {
 
 export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = ({...props}) => {
     const {config, onConfigChange} = props;
-    const intl = useIntl();
 
     // action
     const handleValueChange = (field: string, value: any) => {
         onConfigChange({...config, [field]: value})
     }
 
-    const [errorMessages, setErrorMessages] = React.useState({tableName: ''});
-    React.useEffect(() => {
-        const newErrorMessages = {...errorMessages};
-        if (isNullOrWhiteSpace(config.tableName)) {
-            newErrorMessages.tableName = intl.formatMessage({id: 'export.configurator.sql.tableName.required'});
-        } else {
-            newErrorMessages.tableName = '';
-        }
-        setErrorMessages(newErrorMessages);
-    }, [config.tableName]);
-
     return (
         <div>
             <OptionsSelect
@@ -239,7 +224,7 @@ export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = (
                         handleValueChange('tableName', value)
                     }}
                     style={{width: '150px'}}
-                    errorMessage={errorMessages.tableName}
+                    required
                 />
 
                 <OptionsNumberInput
@@ -287,7 +272,7 @@ export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = (
                             handleValueChange('primaryKeyColumnName', value)
                         }}
                         style={{width: '80px'}}
-                        errorMessage={errorMessages.tableName}
+                        required
                     />}
                 </div>
             }