feat: add new management view for modules and level-based permissions

resources/views/admin/new/types2.blade.php

@@ -180,9 +180,9 @@
                 dataSource: typesData,
                 keyExpr: "id",
                 showBorders: true,
+                showColumnLines: true,
+                showRowLines: true,
                 columnAutoWidth: true,
-                allowColumnResizing: true,
-                filterRow: { visible: true },
                 headerFilter: { visible: true },
                 searchPanel: { visible: true, width: 240, placeholder: "{{e2('Search Module...')}}" },
                 editing: {
@@ -203,6 +203,14 @@
                         });
                     });
                 },
+                onCellValueChanged: function(e) {
+                    if (e.column.dataField === "title" && e.value) {
+                        $.get('{{url("admin-ajax/slug?title=")}}' + encodeURIComponent(e.value), function(d) {
+                            e.component.cellValue(e.rowIndex, "slug", d);
+                            // The cell mode will automatically trigger update when we leave the cell or call saveEditData
+                        });
+                    }
+                },
                 columns: [
                     {
                         dataField: "enabled",
@@ -253,30 +261,7 @@
                     },
                     {
                         dataField: "slug",
-                        caption: "{{__('Slug')}}",
+                        caption: "{{__('Slug')}}"
-                        cellTemplate: function(container, options) {
-                            const $group = $("<div>").addClass("input-group input-group-sm");
-                            const $btn = $("<button>")
-                                .addClass("btn btn-alt-primary")
-                                .append($("<i>").addClass("si si-refresh"))
-                                .on("click", function() {
-                                    $.get('{{url("admin-ajax/slug?title=")}}' + options.data.title, function(d) {
-                                        grid.dxDataGrid("instance").cellValue(options.rowIndex, "slug", d);
-                                        grid.dxDataGrid("instance").saveEditData();
-                                    });
-                                });
-                            
-                            $("<div>").addClass("input-group-prepend").append($btn).appendTo($group);
-                            $("<input>")
-                                .addClass("form-control form-control-sm")
-                                .val(options.value)
-                                .on("change", function() {
-                                    grid.dxDataGrid("instance").cellValue(options.rowIndex, "slug", $(this).val());
-                                    grid.dxDataGrid("instance").saveEditData();
-                                })
-                                .appendTo($group);
-                            $group.appendTo(container);
-                        }
                     },
                     {
                         dataField: "kid",
@@ -286,16 +271,17 @@
                     {
                         dataField: "s",
                         caption: "{{__('Order')}}",
-                        width: 60,
+                        width: 80,
                         alignment: "center"
                     },
                     {
                         caption: "{{__('Permissions')}}",
+                        cssClass: "permissions-band",
                         columns: [
-                            { dataField: "full_control", caption: "Full", width: 100, cellTemplate: renderPermissionCell },
+                            { dataField: "full_control", caption: "Full", width: 100, cellTemplate: renderPermissionCell, cssClass: "perm-full" },
-                            { dataField: "write", caption: "Write", width: 100, cellTemplate: renderPermissionCell },
+                            { dataField: "write", caption: "Write", width: 100, cellTemplate: renderPermissionCell, cssClass: "perm-write" },
-                            { dataField: "read", caption: "Read", width: 100, cellTemplate: renderPermissionCell },
+                            { dataField: "read", caption: "Read", width: 100, cellTemplate: renderPermissionCell, cssClass: "perm-read" },
-                            { dataField: "modify", caption: "Mod", width: 100, cellTemplate: renderPermissionCell }
+                            { dataField: "modify", caption: "Mod", width: 100, cellTemplate: renderPermissionCell, cssClass: "perm-modify" }
                         ]
                     },
                     {
@@ -686,6 +672,23 @@
         .dropdown-menu {
             z-index: 1060 !important; /* Higher than grid fixed columns */
         }
+
+        /* Permissions coloring */
+        .perm-full { background-color: rgba(248, 113, 113, 0.05) !important; }
+        .perm-write { background-color: rgba(251, 191, 36, 0.05) !important; }
+        .perm-read { background-color: rgba(59, 130, 246, 0.05) !important; }
+        .perm-modify { background-color: rgba(34, 197, 94, 0.05) !important; }
+        
+        .permissions-band {
+            background-color: #f1f5f9 !important;
+            font-weight: 800 !important;
+            color: #334155 !important;
+            text-align: center !important;
+        }
+
+        .dx-header-row .permissions-band {
+            border-bottom: 2px solid #cbd5e1 !important;
+        }
     </style>
 @endsection