feat: general improvements

Author: ReneSchwarzer

src/WebExpress.WebApp.Test/WebControl/UnitTestControlWebAppContent.cs

@@ -30,6 +30,7 @@ public void Id(string id, string expected)
             // test execution
             var html = control.Render(context, visualTree);
 
+            // validation
             AssertExtensions.EqualWithPlaceholders(expected, html);
         }
     }

src/WebExpress.WebApp/Assets/js/webexpress.webapp.modalform.js

@@ -8,13 +8,10 @@ webexpress.webapp.ModalFormCtrl = class extends webexpress.webui.ModalFormCtrl {
 
     /**
      * Constructor
-     * @param {HTMLElement} element - The DOM element associated with the modal control.
      */
-    constructor(form) {
+    constructor() {
         super(document.createElement("div"));
 
         document.body.appendChild(this._element);
-
-        this._selector = form;
     }
 };

src/WebExpress.WebApp/Assets/js/webexpress.webapp.table.js

@@ -168,7 +168,7 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
                         this._hasOptions = true;
                         row.options.forEach(option => {
                             if (option.command === "edit") {
-                                option.action = () => this._editRow(row.id, option.uri);
+                                option.action = () => this._editRow(row.id, this._columns, row.cells, option.uri);
                             }
                             if (option.command === "delete") {
                                 option.action = () => this._deleteRow(row.id);
@@ -194,9 +194,11 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
     /**
      * Edit a row and send a PUT request to the REST API.
      * @param {number} rowId - The ID of the row to be edited.
+     * @param {Array} columns - The column of the table.
+     * @param {Array} cells - The cells of the row to be edited.
      * @param {string} uri - The uri for the form to be used for editing.
      */
-    _editRow(rowId, uri) {
+    _editRow(rowId, columns, cells, uri) {
         const editModal = new webexpress.webapp.ModalFormCtrl();
         editModal._uri = uri;
         editModal._selector = uri?.includes("#") ? "#" + uri.split("#")[1] : "form";
@@ -211,6 +213,40 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
                 .catch(error => console.error(`Failed to edit row with ID ${rowId}.`, error));
         });
 
+        // Fill the form fields with the row's values after the form is rendered
+        editModal._element.addEventListener(webexpress.webui.Event.UPDATED_EVENT, (event) => {
+            const form = event.detail.form;
+            if (form === editModal._form) {
+                columns.forEach((column, index) => {
+                    const value = cells[index]?.text || "";
+                    // try standard form field
+                    let field = editModal._form.elements.namedItem(column.name);
+                    if (field) {
+                        field.value = value;
+                    } else {
+                        const editorContainer = form.querySelector(`[name="${column.name}"]`);
+                        if (editorContainer) {
+                            // check which editor type is present
+                            let editorType = "default";
+                            if (editorContainer.classList.contains("wx-webui-editor")) {
+                                editorType = "wx-webui-editor";
+                            } 
+
+                            // handle various editors
+                            switch (editorType) {
+                                case "wx-webui-editor":
+                                    editorContainer.innerHTML = value;
+                                    break;
+                                default:
+                                    // fallback: set innerHTML directly
+                                    editorContainer.innerHTML = value;
+                            }
+                        }
+                    }
+                });
+            }
+        });
+
         editModal.show();
     }
 

src/WebExpress.WebApp/WebRestApi/RestApiCrudTable.cs

@@ -43,11 +43,14 @@ public RestApiCrudTable()
                     prop => prop,
                     prop =>
                     {
-                        var name = (RestTableColumnNameAttribute)Attribute.GetCustomAttribute(prop, typeof(RestTableColumnNameAttribute));
+                        var name = prop.Name;
+                        var label = (RestTableColumnNameAttribute)Attribute.GetCustomAttribute(prop, typeof(RestTableColumnNameAttribute));
                         var isHidden = Attribute.IsDefined(prop, typeof(RestTableColumnHiddenAttribute));
 
-                        return new RestApiCrudTableColumn(name.Name)
+                        return new RestApiCrudTableColumn()
                         {
+                            Name = name,
+                            Label = label?.Name ?? name,
                             Visible = !isHidden
                         };
                     }

src/WebExpress.WebApp/WebRestApi/RestApiCrudTableColumn.cs

@@ -7,6 +7,12 @@ namespace WebExpress.WebApp.WebRestApi
     /// </summary>
     public class RestApiCrudTableColumn
     {
+        /// <summary>
+        /// Returns or sets the name of the associated property of the item that corresponds to the column.
+        /// </summary>
+        [JsonPropertyName("name")]
+        public string Name { get; set; }
+
         /// <summary>
         /// Returns or sets a value indicating whether the element is visible.
         /// </summary>
@@ -40,10 +46,8 @@ public class RestApiCrudTableColumn
         /// <summary>
         /// Initializes a new instance of the class.
         /// </summary>
-        /// <param name="label">The label of the column.</param>
-        public RestApiCrudTableColumn(string label)
+        public RestApiCrudTableColumn()
         {
-            Label = label;
         }
     }
 }