TASK-1786159: add support for add/remove/reorder rows

Author: marekpelc-pega

core/src/commonMain/kotlin/com/pega/constellation/sdk/kmp/core/components/containers/SimpleTableManual.kt

@@ -6,9 +6,9 @@ import androidx.compose.runtime.setValue
 import com.pega.constellation.sdk.kmp.core.api.BaseComponent
 import com.pega.constellation.sdk.kmp.core.api.Component
 import com.pega.constellation.sdk.kmp.core.api.ComponentContext
+import com.pega.constellation.sdk.kmp.core.api.ComponentEvent
 import com.pega.constellation.sdk.kmp.core.api.ComponentId
 import com.pega.constellation.sdk.kmp.core.components.getBoolean
-import com.pega.constellation.sdk.kmp.core.components.getInt
 import com.pega.constellation.sdk.kmp.core.components.getJSONArray
 import com.pega.constellation.sdk.kmp.core.components.getString
 import kotlinx.serialization.json.JsonObject
@@ -21,6 +21,12 @@ class SimpleTableManualComponent(context: ComponentContext) : BaseComponent(cont
         private set
     var displayMode by mutableStateOf(DisplayMode.DISPLAY_ONLY)
         private set
+    var allowAddRows by mutableStateOf(true)
+        private set
+    var allowReorderRows by mutableStateOf(true)
+        private set
+    var addButtonLabel by mutableStateOf("")
+        private set
     var columnNames by mutableStateOf(emptyList<String>())
         private set
     var rows by mutableStateOf(emptyList<Row>())
@@ -30,6 +36,9 @@ class SimpleTableManualComponent(context: ComponentContext) : BaseComponent(cont
         visible = props.getBoolean("visible")
         label = props.getString("label")
         displayMode = DisplayMode.valueOf(props.getString("displayMode"))
+        allowAddRows = props.getBoolean("allowAddRows")
+        allowReorderRows = props.getBoolean("allowReorderRows")
+        addButtonLabel = props.getString("addButtonLabel")
         columnNames = getColumnNames(props)
         rows = getRows(props)
     }
@@ -46,10 +55,43 @@ class SimpleTableManualComponent(context: ComponentContext) : BaseComponent(cont
             val componentIds = rowJsonObject.getJSONArray("cellComponentIds")
             val ids = componentIds.mapWithIndex { getString(it).toInt() }
             val cellComponents = context.componentManager.getComponents(ids.map { ComponentId(it) })
-            Row(rowJsonObject.getInt("id"), cellComponents.map { Cell(it) })
+            Row(
+                cells = cellComponents.map { Cell(it) },
+                showEditButton = rowJsonObject.getBoolean("showEditButton"),
+                showDeleteButton = rowJsonObject.getBoolean("showDeleteButton")
+            )
         }
 
-    data class Row(val id: Int, val cells: List<Cell>)
+    fun addRow() = context.sendComponentEvent(ComponentEvent.simpleTableManualAddRow())
+
+    fun deleteRow(rowId: Int) =
+        context.sendComponentEvent(ComponentEvent.simpleTableManualDeleteRow(rowId))
+
+    fun reorderRow(fromIndex: Int, toIndex: Int) =
+        context.sendComponentEvent(ComponentEvent.simpleTableManualReorderRow(fromIndex, toIndex))
+
+    private fun ComponentEvent.Companion.simpleTableManualAddRow() =
+        ComponentEvent("SimpleTableManualEvent", eventData = mapOf("type" to "addRow"))
+
+    private fun ComponentEvent.Companion.simpleTableManualDeleteRow(itemId: Int) =
+        ComponentEvent(
+            "SimpleTableManualEvent",
+            eventData = mapOf("type" to "deleteRow", "rowId" to itemId.toString())
+        )
+
+    private fun ComponentEvent.Companion.simpleTableManualReorderRow(fromIndex: Int, toIndex: Int) =
+        ComponentEvent(
+            "SimpleTableManualEvent", eventData = mapOf(
+                "type" to "reorderRow",
+                "fromIndex" to fromIndex.toString(), "toIndex" to toIndex.toString()
+            )
+        )
+
+    data class Row(
+        val cells: List<Cell>,
+        val showEditButton: Boolean,
+        val showDeleteButton: Boolean
+    )
 
     data class Cell(val component: Component)
 

scripts/dxcomponents/components/containers/templates/field-group-template.component.js

@@ -1,6 +1,6 @@
 import { Utils } from "../../../helpers/utils.js";
 import { BaseComponent } from "../../base.component.js";
-import { getReferenceList } from "./template-utils.js";
+import {evaluateAllowRowAction, getReferenceList} from "./template-utils.js";
 
 export class FieldGroupTemplateComponent extends BaseComponent {
     jsComponentPConnectData = {};
@@ -97,7 +97,7 @@ export class FieldGroupTemplateComponent extends BaseComponent {
                     this.pConn,
                     index,
                     lookForChildInConfig,
-                    this.evaluateAllowRowAction(allowRowEdit, item)
+                    evaluateAllowRowAction(allowRowEdit, item)
                 ).getPConnect();
                 const newComponent = this.componentsManager.upsert(oldComponent, newPConn.meta.type, [newPConn]);
                 updatedItems.push({
@@ -107,7 +107,7 @@ export class FieldGroupTemplateComponent extends BaseComponent {
                             ? this.getDynamicHeader(item, index)
                             : this.getStaticHeader(this.heading, index),
                     component: newComponent,
-                    allowDelete: this.allowedActions.delete && this.evaluateAllowRowAction(allowRowDelete, item),
+                    allowDelete: this.allowedActions.delete && evaluateAllowRowAction(allowRowDelete, item),
                 });
             });
             this.items = updatedItems;
@@ -144,7 +144,7 @@ export class FieldGroupTemplateComponent extends BaseComponent {
             return; // no-op
         }
 
-        if (event.type == "FieldGroupTemplateEvent") {
+        if (event.type === "FieldGroupTemplateEvent") {
             switch (event.eventData?.type) {
                 case "addItem":
                     this.addFieldGroupItem();
@@ -236,15 +236,6 @@ export class FieldGroupTemplateComponent extends BaseComponent {
         return pConnect;
     }
 
-    evaluateAllowRowAction(rawExpression, rowData) {
-        if (rawExpression === undefined || rawExpression === true) return true;
-        if (rawExpression.startsWith?.("@E ")) {
-            const expression = rawExpression.replace("@E ", "");
-            return PCore.getExpressionEngine().evaluate(expression, rowData);
-        }
-        return false;
-    }
-
     destroyItems() {
         this.items.forEach((item) => {
             item.component.destroy?.();