feat: add delete functionality for table REST API

Author: ReneSchwarzer

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

@@ -89,7 +89,6 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
                 const endIndex = Math.min(startIndex + pageSize - 1, total); // calculate the index of the last item on the current page
 
                 this._columns = response.columns;
-                this._rows = response.rows;
                 this._titleDiv.text(response.title);
                 this._statusDiv.text(`${startIndex} - ${endIndex} / ${total}`);
 
@@ -102,9 +101,20 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
                 this._paginationCtrl.page = page;
 
                 this._table.removeClass("placeholder-glow");
-                
-                this._hasOptions = Array.isArray(this._rows) && this._rows.some(row => row.options?.length > 0);
-                
+
+                // Bind actions to existing commands
+                this._rows = response.rows.map(row => {
+                    if (Array.isArray(row.options)) {
+                        this._hasOptions = true;
+                        row.options.forEach(option => {
+                            if (option.command === "delete") {
+                                option.action = () => this._deleteRow.call(this, row.id);
+                            }
+                        });
+                    }
+                    return row;
+                });
+
                 if (this._options?.length > 0) {
                     this._hasOptions = true;
                 }
@@ -117,6 +127,26 @@ webexpress.webapp.TableCtrl = class extends webexpress.webui.TableCtrl {
                 console.error("The request could not be completed successfully:", error);
             });
     }
+
+    /**
+     * Function to delete a row from the table and send a DELETE request to the REST API.
+     * @param {number} rowId - The ID of the row to be deleted.
+     */
+    _deleteRow(rowId) {
+        const confirmModal = new webexpress.webui.ModalConfirmDelete();
+
+        confirmModal.confirmation(() => {
+            fetch(`${this._restUri}?id=${rowId}`, { method: "DELETE" })
+                .then(response => {
+                    if (!response.ok) throw new Error("Failed to delete row");
+
+                    this._receiveData();
+                })
+                .catch(error => console.error(`Failed to delete row with ID ${rowId}.`, error));
+        });
+
+        confirmModal.show();
+    }
 }
 
 // Register the class in the controller

src/WebExpress.WebApp/WebRestApi/RestApiCrud.cs

@@ -15,23 +15,15 @@ namespace WebExpress.WebApp.WebRestApi
     /// <summary>
     /// Abstract class providing CRUD operations for REST API.
     /// </summary>
-    /// <typeparam name="T">Type of the index item.</typeparam>
-    public abstract class RestApiCrud<T> : IRestApi
-        where T : IIndexItem
+    /// <typeparam name="TIndexItem">Type of the index item.</typeparam>
+    public abstract class RestApiCrud<TIndexItem> : IRestApi
+        where TIndexItem : IIndexItem
     {
         /// <summary>
         /// Returns the lock object.
         /// </summary>
         protected object Guard { get; } = new object();
 
-        /// <summary>
-        /// Processing of the resource that was called via the get request.
-        /// </summary>
-        /// <param name="wql">The filtering and sorting options.</param>
-        /// <param name="request">The request.</param>
-        /// <returns>An enumeration of which json serializer can be serialized.</returns>
-        public abstract IEnumerable<T> GetData(IWqlStatement<T> wql, Request request);
-
         /// <summary>
         /// Processing of the resource that was called via the get request.
         /// </summary>
@@ -48,8 +40,8 @@ public virtual object GetData(Request request)
             lock (Guard)
             {
                 var wqlStatement = !string.IsNullOrWhiteSpace(search) || !string.IsNullOrWhiteSpace(wql)
-                    ? WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<T>(wql ?? $"{GetDefaultSearchAttribute()}='{search}*'")
-                    : WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<T>("");
+                    ? WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<TIndexItem>(wql ?? $"{GetDefaultSearchAttribute()}='{search}*'")
+                    : WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<TIndexItem>("");
                 var data = GetData(wqlStatement, request);
 
                 var count = data.Count();
@@ -64,11 +56,22 @@ public virtual object GetData(Request request)
             }
         }
 
+        /// <summary>
+        /// Processing of the resource that was called via the get request.
+        /// </summary>
+        /// <param name="wql">The filtering and sorting options.</param>
+        /// <param name="request">The request.</param>
+        /// <returns>An enumeration of which json serializer can be serialized.</returns>
+        public virtual IEnumerable<TIndexItem> GetData(IWqlStatement<TIndexItem> wql, Request request)
+        {
+            throw new NotImplementedException();
+        }
+
         /// <summary>
         /// Creates data.
         /// </summary>
         /// <param name="request">The request.</param>
-        public void CreateData(Request request)
+        public virtual void CreateData(Request request)
         {
             throw new NotImplementedException();
         }
@@ -77,16 +80,26 @@ public void CreateData(Request request)
         /// Updates data.
         /// </summary>
         /// <param name="request">The request.</param>
-        public void UpdateData(Request request)
+        public virtual void UpdateData(Request request)
+        {
+        }
+
+        /// <summary>
+        /// Deletes data.
+        /// </summary>
+        /// <param name="request">The request.</param>
+        public virtual void DeleteData(Request request)
         {
+            var id = request.GetParameter("id")?.Value;
+            DeleteData(id, request);
         }
 
         /// <summary>
         /// Deletes data.
         /// </summary>
         /// <param name="id">The id of the data to delete.</param>
         /// <param name="request">The request.</param>
-        public void DeleteData(Request request)
+        public virtual void DeleteData(string id, Request request)
         {
             throw new NotImplementedException();
         }
@@ -97,7 +110,7 @@ public void DeleteData(Request request)
         /// <returns>The name of the default attribute.</returns>
         protected virtual string GetDefaultSearchAttribute()
         {
-            return typeof(T).GetProperties()
+            return typeof(TIndexItem).GetProperties()
                 .Where(x => x.GetCustomAttribute<IndexDefaultSearchAttribute>() != null)
                 .Where(x => x.GetCustomAttribute<IndexIgnoreAttribute>() == null)
                 .Select(x => x.Name)

src/WebExpress.WebApp/WebRestApi/RestApiCrudTable.cs

@@ -14,9 +14,9 @@ namespace WebExpress.WebApp.WebRestApi
     /// <summary>
     /// Abstract class providing CRUD operations for REST API.
     /// </summary>
-    /// <typeparam name="T">Type of the index item.</typeparam>
-    public abstract class RestApiCrudTable<T> : RestApiCrud<T>
-        where T : IIndexItem
+    /// <typeparam name="TIndexItem">Type of the index item.</typeparam>
+    public abstract class RestApiCrudTable<TIndexItem> : RestApiCrud<TIndexItem>
+        where TIndexItem : IIndexItem
     {
         private readonly Dictionary<PropertyInfo, RestApiCrudTableColumn> _cachedColumns;
 
@@ -36,7 +36,7 @@ public RestApiCrudTable()
                 .Select(x => x.ConstructorArguments.FirstOrDefault().Value?.ToString())
                 .FirstOrDefault();
 
-            _cachedColumns = typeof(T)
+            _cachedColumns = typeof(TIndexItem)
                 .GetProperties()
                 .Where(prop => Attribute.IsDefined(prop, typeof(RestTableColumnNameAttribute)))
                 .ToDictionary(
@@ -59,7 +59,7 @@ public RestApiCrudTable()
         /// </summary>
         /// <param name="request">The request object containing the criteria for retrieving options. Cannot be null.</param>
         /// <param name="row">The row object for which options are being retrieved. Cannot be null.</param>
-        public virtual IEnumerable<RestApiCrudTableRowOption> GetOptions(Request request, T row)
+        public virtual IEnumerable<RestApiCrudTableRowOption> GetOptions(Request request, TIndexItem row)
         {
             return [];
         }
@@ -78,8 +78,8 @@ public override object GetData(Request request)
             lock (Guard)
             {
                 var wqlStatement = !string.IsNullOrWhiteSpace(wql)
-                    ? WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<T>(wql)
-                    : WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<T>("");
+                    ? WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<TIndexItem>(wql)
+                    : WebEx.ComponentHub.GetComponentManager<WebIndex.IndexManager>()?.Retrieve<TIndexItem>("");
                 var columns = _cachedColumns
                     .Where(x => x.Value.Visible)
                     .Select(x => x.Value);
@@ -92,6 +92,7 @@ public override object GetData(Request request)
                     columns = columns,
                     rows = data.Skip(page * pageSize).Take(pageSize).Select(row => new RestApiCrudTableRow
                     {
+                        Id = row.Id.ToString(),
                         Cells = _cachedColumns
                             .Where(x => x.Value.Visible)
                             .Select(x => new RestApiCrudTableCell

src/WebExpress.WebApp/WebRestApi/RestApiCrudTableRow.cs

@@ -12,6 +12,12 @@ public class RestApiCrudTableRow
         /// <summary>
         /// Returns or sets the id.
         /// </summary>
+        [JsonPropertyName("id")]
+        public object Id { get; set; }
+
+        /// <summary>
+        /// Returns or sets the cells.
+        /// </summary>
         [JsonPropertyName("cells")]
         public IEnumerable<RestApiCrudTableCell> Cells { get; set; } = [];
 

src/WebExpress.WebApp/WebRestApi/RestApiCrudTableRowOption.cs

@@ -1,4 +1,5 @@
 using System.Text.Json.Serialization;
+using WebExpress.WebCore.WebMessage;
 
 namespace WebExpress.WebApp.WebRestApi
 {
@@ -13,17 +14,29 @@ public class RestApiCrudTableRowOption
         [JsonPropertyName("id")]
         public string Id { get; set; }
 
+        /// <summary>
+        /// Returns the command.
+        /// </summary>
+        [JsonPropertyName("command")]
+        public virtual string Command => "custom";
+
         /// <summary>
         /// Returns or sets the label.
         /// </summary>
         [JsonPropertyName("content")]
-        public string Label { get; set; }
+        public virtual string Label { get; set; }
 
         /// <summary>
         /// Returns or sets the icon.
         /// </summary>
         [JsonPropertyName("icon")]
-        public string Icon { get; set; }
+        public virtual string Icon { get; set; }
+
+        /// <summary>
+        /// Returns or sets the text color.
+        /// </summary>
+        [JsonPropertyName("color")]
+        public virtual string Color { get; set; }
 
         /// <summary>
         /// Returns or sets the width of the table column in percentage, null for auto.
@@ -37,11 +50,19 @@ public class RestApiCrudTableRowOption
         [JsonPropertyName("render")]
         public string Render { get; set; }
 
+        /// <summary>
+        /// Returns the request object associated with the current operation.
+        /// </summary>
+        [JsonIgnore]
+        protected Request Request { get; }
+
         /// <summary>
         /// Initializes a new instance of the class.
         /// </summary>
-        public RestApiCrudTableRowOption()
+        /// <param name="request">The request object associated with the current operation.</param>
+        public RestApiCrudTableRowOption(Request request)
         {
+            Request = request;
         }
     }
 }

src/WebExpress.WebApp/WebRestApi/RestApiCrudTableRowOptionDelete.cs

@@ -0,0 +1,45 @@
+using System.Text.Json.Serialization;
+using WebExpress.WebCore.Internationalization;
+using WebExpress.WebCore.WebMessage;
+
+namespace WebExpress.WebApp.WebRestApi
+{
+    /// <summary>
+    /// Represents a configuration option for a row in a REST API-based CRUD table.
+    /// </summary>
+    public class RestApiCrudTableRowOptionDelete : RestApiCrudTableRowOption
+    {
+        /// <summary>
+        /// Returns or sets the command.
+        /// </summary>
+        [JsonPropertyName("command")]
+        public override string Command => "delete";
+
+        /// <summary>
+        /// Returns the label.
+        /// </summary>
+        [JsonPropertyName("content")]
+        public override string Label => I18N.Translate(Request, "webexpress.webapp:delete.label");
+
+        /// <summary>
+        /// Returns the icon.
+        /// </summary>
+        [JsonPropertyName("icon")]
+        public override string Icon => "fa fa-trash";
+
+        /// <summary>
+        /// Returns or sets the text color.
+        /// </summary>
+        [JsonPropertyName("color")]
+        public override string Color => "text-danger";
+
+        /// <summary>
+        /// Initializes a new instance of the class.
+        /// </summary>
+        /// <param name="request">The request object associated with the current operation.</param>
+        public RestApiCrudTableRowOptionDelete(Request request)
+            : base(request)
+        {
+        }
+    }
+}