From 2ca5192b8a295d7926a832fc7884e9d66c3feff8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 23 Oct 2023 10:14:36 -0400
Subject: [PATCH] feat: show # of widgets on templates

ability to hide drafts
---
 .../language/en-GB/admin/extend/widgets.json  |  4 ++-
 public/openapi/read/admin/extend/widgets.yaml |  3 +++
 public/src/admin/extend/widgets.js            | 12 +++++++++
 src/views/admin/extend/widgets.tpl            | 26 ++++++++++++-------
 src/widgets/admin.js                          |  2 ++
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/public/language/en-GB/admin/extend/widgets.json b/public/language/en-GB/admin/extend/widgets.json
index 17be611887..5d2832feed 100644
--- a/public/language/en-GB/admin/extend/widgets.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/public/openapi/read/admin/extend/widgets.yaml b/public/openapi/read/admin/extend/widgets.yaml
index 90527bf8f0..eb4d568ded 100644
--- a/public/openapi/read/admin/extend/widgets.yaml
+++ b/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:
diff --git a/public/src/admin/extend/widgets.js b/public/src/admin/extend/widgets.js
index 62865097ce..ab8c41a1ae 100644
--- a/public/src/admin/extend/widgets.js
+++ b/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() {
diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl
index c75f12cfad..680416aa74 100644
--- a/src/views/admin/extend/widgets.tpl
+++ b/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="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>
-					{{{ end }}}
-				</ul>
+			<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 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}">
diff --git a/src/widgets/admin.js b/src/widgets/admin.js
index eed216efad..751b540818 100644
--- a/src/widgets/admin.js
+++ b/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;
 }