UI Improvement: Add visual group separators for sorted event table, for specific columns (e.g. category, tags, plugin, targets).

Author: jhuckaby

htdocs/css/style.css

@@ -1300,6 +1300,17 @@ div.td_big {
 	height: 21px;
 }
 
+.data_grid > ul.grid_row.cat_sep > div {
+	grid-column: 1 / -1; 
+	padding-top: 20px;
+	color: var(--label-color);
+	font-style: italic;
+	cursor: default;
+}
+.data_grid > ul.grid_row.cat_sep:has(div:hover) > div {
+	background: transparent !important;
+}
+
 .data_grid > ul.grid_row > div {
 	background-color: transparent;
 	transition: 0.5s ease background-color;

htdocs/js/pages/Base.class.js

@@ -3582,11 +3582,13 @@ Page.Base = class Base extends Page {
 		for (var idx = 0; idx < len; idx++) {
 			var row = disp_rows[idx];
 			var tds = opts.callback(row, idx);
+			if (tds.insertBefore) html += tds.insertBefore;
 			html += '<ul class="grid_row ' + (tds.className || '') + '">';
 			for (var idy = 0, ley = tds.length; idy < ley; idy++) {
 				html += '<div' + ((bold_idx == idy) ? ' style="font-weight:bold"' : '') + '>' + tds[idy] + '</div>';
 			}
 			html += '</ul>';
+			if (tds.insertAfter) html += tds.insertAfter;
 		} // foreach row
 
 		if (!disp_rows.length) {

htdocs/js/pages/Events.class.js

@@ -317,7 +317,10 @@ Page.Events = class Events extends Page.PageUtils {
 			column_labels: ['Event Title', 'Category', 'Tags', 'Plugin', 'Targets', 'Triggers', 'Status', 'Actions']
 		};
 
-		html += this.getSortableTable( this.events, table_opts, function(item) {
+		var last_item = null;
+		
+		html += this.getSortableTable( this.events, table_opts, function(item, sort_idx) {
+			if (!sort_idx) last_item = null;
 			var classes = [];
 			var cat = cat_map[ item.category ] || { title: item.category };
 
@@ -342,6 +345,36 @@ Page.Events = class Events extends Page.PageUtils {
 			if (!item.enabled) classes.push('disabled');
 			if (cat.color) classes.push( 'clr_' + cat.color );
 			if (classes.length) tds.className = classes.join(' ');
+			
+			// decorate changes for certain columns
+			switch (table_opts.sort_by) {
+				case 'cat_sort':
+					if (!last_item || (last_item.cat_sort != item.cat_sort)) {
+						tds.insertBefore = `<ul class="grid_row cat_sep"><div>${ self.getNiceCategory(item.category, false) }</div></ul>`;
+					}
+				break;
+				
+				case 'tag_sort':
+					if (!last_item || (last_item.tag_sort != item.tag_sort)) {
+						tds.insertBefore = `<ul class="grid_row cat_sep"><div>${ self.getNiceTagList(item.tags || [], false, ', ') }</div></ul>`;
+					}
+				break;
+				
+				case 'plug_sort':
+					if (!last_item || (last_item.plug_sort != item.plug_sort)) {
+						var nice_sep = (item.plugin == '_workflow') ? '(Workflow)' : self.getNicePlugin(item.plugin, false);
+						tds.insertBefore = `<ul class="grid_row cat_sep"><div>${ nice_sep }</div></ul>`;
+					}
+				break;
+				
+				case 'target_sort':
+					if (!last_item || (last_item.target_sort != item.target_sort)) {
+						tds.insertBefore = `<ul class="grid_row cat_sep"><div>${ self.getNiceTargetList(item.targets, false) }</div></ul>`;
+					}
+				break;
+			} // switch table_opts.sort_by
+			
+			last_item = item;
 			return tds;
 		}); // getSortableTable