Merge pull request #149 from Item21/grommet

Grommet - `add column to dataTable`

packages/react-lowcode/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "build": "npx tsc",
+    "watch": "npx tsc --watch",
     "tscd": "npx tsc --emitDeclarationOnly",
     "tsc": "npx tsc",
     "etsc": "etsc",

packages/react-lowcode/src/codegen/ast/widgetDeclaration.ts

@@ -30,11 +30,12 @@ export function isDataTableWidget(sourceCode:string, position: SourceLineCol): b
         let identifier = findIdentifier(astCode)
 
         if(identifier){
-            isDataTableDeclaration = identifier.getText() === 'DataGrid'
+            isDataTableDeclaration = identifier.getText() === 'DataGrid' || identifier.getText() === "DataTable"
         }else{
             let dataGridNode = astCode.getChildAt(1) as ts.JsxSelfClosingElement
+            const grommetChild = astCode.getChildAt(0) as ts.JsxSelfClosingElement
 
-            if(dataGridNode && dataGridNode.getChildAt(0)?.getChildAt(1)?.getText() === 'DataGrid')//todo(mch): very very uglu, need to be refactored to be more generic
+            if(dataGridNode && (dataGridNode.getChildAt(0)?.getChildAt(1)?.getText() === 'DataGrid' || grommetChild.tagName.getText()))//todo(mch): very very uglu, need to be refactored to be more generic
                 isDataTableDeclaration = true
         }
     }

packages/react-lowcode/src/codegen/facade/facadeApi.ts

@@ -88,7 +88,7 @@ export async function insertColumnToDataTableGrommet(
 
   let generator = new GrommetDataTableGenerator(
     generationContext,
-    undefined,
+    options.entity,
     widgetContext
   );
 
@@ -143,7 +143,6 @@ export async function insertColumnToBasicTableGrommet(
     options.entity,
     widgetContext
   );
-
   return await generator.insertColumn(tablePosition, options.entityField, options.index);
 }
 

packages/react-lowcode/src/codegen/generation/generators/helper.ts

@@ -23,7 +23,7 @@ export class GeneratorHelper {
     }
 
     getEntityName(entity: Entity): string{
-        return camalizeString(entity.getName())
+      return camalizeString(entity.getName())
     }
 
     addImportDeclaration(specifier: string, module: string, isNameSpaceImport: boolean = false): ts.ImportDeclaration{
@@ -65,7 +65,7 @@ export class GeneratorHelper {
         if(this._context.formatter === Formatter.ReactIntl){
           localizedName = this.intlFormatter.localizePropertyNameUsingTag(property, entity)
         }else{
-          localizedName = jsxText(property.getName())
+          localizedName = this.intlFormatter.localizePropertyNameUsingTag(property, entity) //jsxText(property.getName())
         }
 
         return localizedName;

packages/react-lowcode/src/codegen/generation/generators/list/basic-table-generator.ts

@@ -34,15 +34,12 @@ export class BasicTableGenerator implements TableGenerator
     async insertColumn(position: SourceLineCol,
         property: Property,
         columnIndex?: number): Promise<string> {
-
         let alteredSource = ''
         if (this._widgetContext) {
             let sourceCode = await this._widgetContext.getSourceCodeString(position);
             let ast = createAst(sourceCode);
-
             if (ast) {
                 let widgetParentNode = findWidgetParentNode(sourceCode, position);
-
                 if (widgetParentNode) {
                     const tableDefinition = this.getTableDefinition();
 
@@ -54,10 +51,10 @@ export class BasicTableGenerator implements TableGenerator
                         if (tableHead && tableBody) {
                             const tableHeadRow = this.findElementByName(tableHead, tableDefinition.row.tagName.text);
                             const tableBodyRow = this.findElementByName(tableBody, tableDefinition.row.tagName.text);
-
+                            // to be able insert into iteration with right iterator
+                            const prefixIterator = (tableBodyRow?.parent as any)?.parameters[0]?.getText()
                             if (tableHeadRow && tableBodyRow) {
                                 this._context.formatter = this.findUsedFormatter(ast);
-
                                 let headColumns: ts.JsxElement[] = [];
                                 let bodyColumns: ts.JsxElement[] = [];
 
@@ -66,11 +63,13 @@ export class BasicTableGenerator implements TableGenerator
 
                                 if (!this.tableBodyColumnExists(bodyColumns, property)) {
                                     const addHeaderColumn = this.propertyHead(property, this._entity!);
-                                    const addBodyColumn = this.propertyCell(property, this._entity!);
-
+                                    const addBodyColumn = this.propertyCell(property, this._entity!, prefixIterator);                                    
                                     if (columnIndex && columnIndex > 0 && columnIndex < headColumns.length + 1) {
                                         headColumns = [...headColumns.slice(0, columnIndex - 1), ...[addHeaderColumn], ...headColumns.slice(columnIndex - 1)];
                                         bodyColumns = [...bodyColumns.slice(0, columnIndex - 1), ...[addBodyColumn], ...bodyColumns.slice(columnIndex - 1)];
+                                    } else if (columnIndex !== undefined && columnIndex == 0) {
+                                        headColumns = [...[addHeaderColumn], ...headColumns]
+                                        bodyColumns = [...[addBodyColumn], ...bodyColumns]
                                     } else {
                                         headColumns.push(addHeaderColumn);
                                         bodyColumns.push(addBodyColumn);
@@ -143,7 +142,7 @@ export class BasicTableGenerator implements TableGenerator
 
     private createBodyRow(): ts.JsxElement {
       const rowComponent = this._helper.prepareComponent(this.getTableDefinition().row, this._imports)
-
+      
       let bodyRow = createJsxElement(rowComponent.tagName, [],getProperties(this._entity!)
                        ?.map(prop => this.propertyCell(prop, this._entity!)))
 
@@ -170,7 +169,7 @@ export class BasicTableGenerator implements TableGenerator
         )
     }
 
-    private propertyCell(prop: Property, entity: Entity) {
+    private propertyCell(prop: Property, entity: Entity, prefixIterator?: string ) {
         let child: ts.JsxChild;
 
         if(this._context.formatter === Formatter.ReactIntl) {
@@ -179,8 +178,8 @@ export class BasicTableGenerator implements TableGenerator
             child = factory.createJsxExpression(
                 undefined,
                 factory.createPropertyAccessExpression(
-                  this.getRowIdentifier(),
-                  factory.createIdentifier(prop.getName())
+                    prefixIterator !== undefined ? factory.createIdentifier(prefixIterator ?? entity.getName().toLowerCase()) : this.getRowIdentifier(),
+                    factory.createIdentifier(prop.getName())
                 )
               )
         }

packages/react-lowcode/src/codegen/generation/generators/list/grommet-dt-generator.ts

@@ -36,17 +36,14 @@ export default class GrommetDataTableGenerator implements TableGenerator
         if(this._widgetContext){
           let sourceCode = await this._widgetContext.getSourceCodeString(position)
           let ast = createAst(sourceCode)
-
           if(ast){
             let widgetParentNode = findWidgetParentNode(sourceCode, position)
-  
+
             if(widgetParentNode)
             {
               let columnsDeclarationNode = this.findColumnsDeclaration(widgetParentNode)
-
               if(columnsDeclarationNode){
-                let columnDeclarationArray = columnsDeclarationNode.getChildAt(2) as ts.ArrayLiteralExpression
-
+                let columnDeclarationArray = columnsDeclarationNode.getChildAt(2) as ts.ArrayLiteralExpression  
                 if(columnDeclarationArray){
                   ast = this.addNewColumn(columnDeclarationArray, 
                                           property, 
@@ -85,12 +82,10 @@ export default class GrommetDataTableGenerator implements TableGenerator
     private findColumnsDeclaration(widgetParent: ts.Node): ts.VariableDeclaration | undefined{
         let array: ts.VariableDeclaration[] = []
         findVariableDeclarations(widgetParent, array)
-
          if(array.length > 0){
            let columnDeclaration = array.filter((def: ts.VariableDeclaration) => {
              return def.getChildAt(0).getFullText().trim() === 'columns'
            });
-
            if(columnDeclaration && columnDeclaration.length > 0){
              return columnDeclaration[0] as ts.VariableDeclaration
            }
@@ -108,11 +103,15 @@ export default class GrommetDataTableGenerator implements TableGenerator
         let newColumnDefinition = this.createColumnDefinition(property, this.getUsedFormatter(columnDeclarationParent))
 
         if(columnIndex && columnIndex > 0 && columnIndex < oldElements.length + 1){
-        newElements = [...oldElements.slice(0, columnIndex-1), 
+        newElements = [...oldElements.slice(0, columnIndex - 1), 
                         newColumnDefinition, 
-                        ...oldElements.slice(columnIndex-1)]
-        }else{
-        newElements = [...oldElements, newColumnDefinition]
+                        ...oldElements.slice(columnIndex - 1)]
+        }
+        else if (columnIndex === 0) {
+          newElements = [newColumnDefinition, ...oldElements]
+        }
+        else{
+          newElements = [...oldElements, newColumnDefinition]
         }
 
         return newElements

packages/react-lowcode/src/codegen/generation/react-components/react-intl/intl-formatter.ts

@@ -89,7 +89,7 @@ export default class ReactIntlFormatter {
   }
 
   localizePropertyNameUsingTag(prop: Property, entity?: Entity): ts.JsxSelfClosingElement {
-    let messageId: ts.StringLiteral = factory.createStringLiteral((entity ? entity.getName() : '') + "." + prop.getName())
+    let messageId: ts.StringLiteral = factory.createStringLiteral((entity ? entity.getName().toLowerCase() : '') + "." + prop.getName())
     let messageDefaultValue: ts.StringLiteral = factory.createStringLiteral(prop.getName())
 
     return this.localizeMessage(messageId, messageDefaultValue, undefined)

packages/react-lowcode/src/codegen/list.ts

@@ -1,12 +1,13 @@
-import { SourceLineCol } from "../ast"
+import { createAst, SourceLineCol } from "../ast"
 import { CodeRW } from "../io"
 import { isDataTableWidget } from "./ast/widgetDeclaration"
 import { ColumnSourcePositionOptions, ColumnSourcePositionResult, DeleteOptions, InsertOptions } from "./interfaces"
-import { getEntityProperty } from "./tests/helper"
+import { getEntityProperty, parseGraphqlTypes, sourceFileEntity } from "./tests/helper"
 import { 
     insertColumn, 
     deleteColumn as fDeleteColumn, 
     getColumnSourcePosition as fGetColumnSourcePosition,
+    insertColumnToDataTableGrommet
 } from './facade/facadeApi'
 import { Property } from "./generation/entity"
 
@@ -20,12 +21,38 @@ export async function addColumn(typesSourceCode: string,
                       options: InsertOptions): Promise<string | undefined>{
 
     const property: Property = getEntityProperty(typesSourceCode, options.property, options.entityName)[0]
+    const code = await io.readFile(sourceCode.fileName)
     let generatedSource = undefined
+    let isGrommet = false
+    if (code)
+        isGrommet = isGrommetRepository(code)
 
     if(property){
-        generatedSource = await insertColumn(sourceCode, 
-        {entityField: property, index: options.index}, 
-        io)
+        if (!isGrommet) {
+            generatedSource = await insertColumn(
+                sourceCode, 
+                {
+                    entityField: property, index: options.index
+                }, 
+                io
+            )
+        } else {
+            const myClassFile = parseGraphqlTypes(typesSourceCode)
+            const entity = sourceFileEntity(myClassFile, options.entityName)
+
+            let ent : any = {};
+            ent.properties = [property]
+            ent.getName = entity?.getName
+            generatedSource = await insertColumnToDataTableGrommet(
+                sourceCode,
+                {
+                    entityField: property,
+                    index: options.index,
+                    entity: ent
+                },
+                io
+            )
+        }    
     }
 
     return generatedSource
@@ -34,15 +61,28 @@ export async function addColumn(typesSourceCode: string,
 export async function deleteColumn(io: CodeRW, 
     sourceCode:SourceLineCol, 
     options: DeleteOptions): Promise<string | undefined> {
-
-let generatedSource = await fDeleteColumn(sourceCode, options, io);
-
-return generatedSource
+    const generatedSource = await fDeleteColumn(sourceCode, options, io);
+    return generatedSource
 }
 
 export async function getColumnSourcePosition(io: CodeRW, 
     sourceCode:SourceLineCol,
     options: ColumnSourcePositionOptions): Promise<ColumnSourcePositionResult | undefined> {
 
 return await fGetColumnSourcePosition(sourceCode, options, io);
-}
+}
+
+const isGrommetRepository = (code: string) => {
+    const ast = createAst(code) as any
+    const imports = ast.imports
+    if (imports) {
+        for(let item in imports) {
+            const el = imports[item]
+            if (el.text == "grommet") {
+                return true
+            }
+        }
+        return false
+    }
+    return false
+}

packages/react-lowcode/src/codegen/tests/api/api.test.ts

@@ -62,6 +62,7 @@ describe(".api tests", () => {
         test(".add column (MUI DataTable)", async () => {
             const filePath = 'src/codegen/tests/list/files/is-datatable-test-file.txt';
             const source : SourceLineCol = {lineNumber: 12, columnNumber:17, fileName:filePath};
+
             const result = await addColumn(graphqlGenTs1, new CodegenRw(), source, {property: 'testdate', entityName: 'Customer'});
 
             expect(result).not.toBe(undefined);

packages/react-lowcode/src/codegen/tests/helper.ts

@@ -35,12 +35,12 @@ export function createAst(
     }
   }
 
-  export function getEntityProperty(typesSourceCode: string,  name: string, typeName = "Customer"): Property[] {
+  export function getEntityProperty(typesSourceCode: string,  name: string, typeName = "Utilization"): Property[] {
     const myClassFile = parseGraphqlTypes(typesSourceCode)
     const testEntity = sourceFileEntity(myClassFile, typeName)
-    
-    let property = testEntity?.properties.filter(((prop: { getName: () => string })=> { 
-      return prop.getName().toLowerCase() === name 
+
+    let property = testEntity?.properties.filter(((prop: { getName: () => string })=> {
+      return prop.getName().toLowerCase() === name.toLowerCase()
     }))
 
     return property ?? []