feat: show # of widgets on templates

ability to hide drafts

public/language/en-GB/admin/extend/widgets.json

@@ -29,5 +29,7 @@
 	"hide-from-groups": "Hide from groups",
 	"start-date": "Start date",
 	"end-date": "End date",
-	"hide-on-mobile": "Hide on mobile"
+	"hide-on-mobile": "Hide on mobile",
+	"hide-drafts": "Hide drafts",
+	"show-drafts": "Show drafts"
 }

public/openapi/read/admin/extend/widgets.yaml

@@ -27,6 +27,9 @@ get:
                                 type: string
                               location:
                                 type: string
+                        widgetCount:
+                          type: number
+                          description: Number of widgets on this template
                   areas:
                     type: array
                     items:

public/src/admin/extend/widgets.js

@@ -32,6 +32,18 @@ define('admin/extend/widgets', [
 
 		loadWidgetData();
 		setupCloneButton();
+		$('#hide-drafts').on('click', function () {
+			$(this).addClass('hidden');
+			$('#show-drafts').removeClass('hidden');
+			$('[component="drafts-container"]').addClass('hidden');
+			$('[component="widgets-container"]').addClass('col-12').removeClass('col-6');
+		});
+		$('#show-drafts').on('click', function () {
+			$(this).addClass('hidden');
+			$('#hide-drafts').removeClass('hidden');
+			$('[component="drafts-container"]').removeClass('hidden');
+			$('[component="widgets-container"]').addClass('col-6').removeClass('col-12');
+		});
 	};
 
 	function prepareWidgets() {

src/views/admin/extend/widgets.tpl

@@ -9,19 +9,25 @@
 	</div>
 	<div id="widgets" class="row px-2">
 		<div class="col-9" id="active-widgets">
+			<div class="d-flex justify-content-between">
 				<div class="dropdown mb-3">
 					<button class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 					<span class="selected-template">{templates.0.template}</span> <span class="caret"></span>
 					</button>
 					<ul class="dropdown-menu {{{ if config.isRTL }}}dropdown-menu-end{{{ end }}} p-1">
 						{{{ each templates }}}
-					<li><a class="dropdown-item rounded-1" href="#" data-template="{./template}" data-toggle="pill">{./template}</a></li>
+						<li><a class="dropdown-item rounded-1 d-flex justify-content-between align-items-center gap-3" href="#" data-template="{./template}" data-toggle="pill">{./template} <span class="badge text-bg-light border" style="min-width: 2.15em;">{./widgetCount}</span></a></li>
 						{{{ end }}}
 					</ul>
 				</div>
+				<div>
+					<button id="hide-drafts" class="btn btn-light btn-sm">[[admin/extend/widgets:hide-drafts]]</button>
+					<button id="show-drafts" class="btn btn-light btn-sm hidden">[[admin/extend/widgets:show-drafts]]</button>
+				</div>
+			</div>
 
 			<div class="row">
-				<div class="col-6">
+				<div class="col-6" component="widgets-container">
 					<div class="tab-content">
 					{{{ each templates }}}
 						<div class="tab-pane {{{ if @first }}}active{{{ end }}}" data-template="{./template}">

src/widgets/admin.js

@@ -61,6 +61,7 @@ function buildTemplatesFromAreas(areas) {
 			templates.push({
 				template: area.template,
 				areas: [],
+				widgetCount: area.data.length,
 			});
 
 			index += 1;
@@ -70,6 +71,7 @@ function buildTemplatesFromAreas(areas) {
 			name: area.name,
 			location: area.location,
 		});
+		templates[list[area.template]].widgetCount += area.data.length;
 	});
 	return templates;
 }