From f99a8014b4d070349dad6652fca62ae8b507ef06 Mon Sep 17 00:00:00 2001
From: Masterjun3 <masterjun3@gmail.com>
Date: Sat, 26 Aug 2023 21:09:06 +0200
Subject: [PATCH 1/4] improve select improver

---
 .../TagHelpers/SelectImproverTagHelper.cs     | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/TASVideos/TagHelpers/SelectImproverTagHelper.cs b/TASVideos/TagHelpers/SelectImproverTagHelper.cs
index c13e26308..6d3b88fe7 100644
--- a/TASVideos/TagHelpers/SelectImproverTagHelper.cs
+++ b/TASVideos/TagHelpers/SelectImproverTagHelper.cs
@@ -14,18 +14,19 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 	<div id=""{SelectId}_buttons"" class=""onclick-focusinput px-2 py-2"">
 		<span id=""{SelectId}_noselection"" class=""text-body-tertiary onclick-focusinput px-1"">No selection</span>
 	</div>
-	<input id=""{SelectId}_input"" class=""d-none form-control"" placeholder=""Search"" />
-	<div id=""{SelectId}_list"" class=""list-group mt-1 overflow-auto"" style=""max-height: {ListHeight};""></div>
+	<input id=""{SelectId}_input"" class=""d-none form-control"" placeholder=""Search"" autocomplete=""off"" />
+	<div id=""{SelectId}_list"" class=""list-group mt-1 overflow-auto border"" style=""max-height: {ListHeight};""></div>
 </div>
 <script>
 	function toggle(multiSelect, buttons, list, value) {{
-		let element = [...list.querySelectorAll('a')].find(el => el.dataset.value === value);
+		let element = [...list.querySelectorAll('input')].find(el => el.dataset.value === value);
 		let option = [...multiSelect.options].find(option => option.value === value);
 		let button = [...buttons.querySelectorAll('button')].find(button => button.dataset.value === value);
 		let isSelected = option.selected;
 		if (isSelected) {{
 			option.selected = false;
-			element.classList.remove('active');
+			multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners
+			element.checked = false;
 			button.classList.add('d-none');
 			if (![...multiSelect.options].some(option => option.selected)) {{
 				buttons.querySelector('span').classList.remove('d-none');
@@ -33,7 +34,8 @@ function toggle(multiSelect, buttons, list, value) {{
 		}}
 		else {{
 			option.selected = true;
-			element.classList.add('active');
+			multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners
+			element.checked = true;
 			button.classList.remove('d-none');
 			buttons.querySelector('span').classList.add('d-none');
 		}}
@@ -47,15 +49,21 @@ function initialize(multiSelectId) {{
 		div.classList.remove('d-none');
 		let input = document.getElementById(multiSelectId + '_input');
 		for (var option of multiSelect.options) {{
-			let entry = document.createElement('a');
-			entry.classList.add('list-group-item', 'list-group-item-action', 'py-1');
+			let entry = document.createElement('div');
+			entry.classList.add('list-group-item', 'list-group-item-action', 'px-1');
+			let label = document.createElement('label');
+			label.classList.add('form-check-label', 'stretched-link')
+			let checkbox = document.createElement('input');
+			checkbox.type = 'checkbox';
+			checkbox.classList.add('form-check-input', 'ms-1', 'me-2');
 			if (option.selected) {{
-				entry.classList.add('active');
+				checkbox.checked = true;
 			}}
-			entry.style.cursor = 'pointer';
-			entry.innerText = option.text;
-			entry.dataset.value = option.value;
-			entry.addEventListener('click', (e) => {{ toggle(multiSelect, buttons, list, e.currentTarget.dataset.value); }});
+			checkbox.dataset.value = option.value;
+			checkbox.addEventListener('change', (e) => {{ toggle(multiSelect, buttons, list, e.currentTarget.dataset.value) }});
+			label.appendChild(checkbox)
+			label.append(option.text);
+			entry.appendChild(label);
 			list.appendChild(entry);
 
 			let button = document.createElement('button');
@@ -86,12 +94,12 @@ function initialize(multiSelectId) {{
 		}});
 		input.addEventListener('input', (e) => {{
 			let searchValue = input.value;
-			for (let entry of list.querySelectorAll('a')) {{
+			for (let entry of list.querySelectorAll('label')) {{
 				if (entry.innerText.includes(searchValue)) {{
-					entry.classList.remove('d-none');
+					entry.parentNode.classList.remove('d-none');
 				}}
 				else {{
-					entry.classList.add('d-none');
+					entry.parentNode.classList.add('d-none');
 				}}
 			}}
 		}});

From 7f4a98ae4d2f6e832264a3e6b50892a21e8bac8c Mon Sep 17 00:00:00 2001
From: Masterjun3 <masterjun3@gmail.com>
Date: Sat, 26 Aug 2023 21:09:35 +0200
Subject: [PATCH 2/4] use select improver for publication filter

---
 TASVideos/Pages/Publications/Filter.cshtml | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/TASVideos/Pages/Publications/Filter.cshtml b/TASVideos/Pages/Publications/Filter.cshtml
index 81bced925..fe428824a 100644
--- a/TASVideos/Pages/Publications/Filter.cshtml
+++ b/TASVideos/Pages/Publications/Filter.cshtml
@@ -18,38 +18,46 @@
 			<form-group>
 				<label asp-for="Search.Classes"></label>
 				<select asp-for="Search.Classes" size="@(Math.Min(Model.Tokens.Classes.Count(), 7).ToString())" asp-items="Model.Tokens.Classes.Select(c => new SelectListItem(c, c))" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Classes)"></select-improver>
 			</form-group>
 			<form-group>
 				<label asp-for="Search.Years"></label>
 				<select asp-for="Search.Years" size="@(Math.Min(Model.Tokens.Years.Count(), 7).ToString())" asp-items="Model.Tokens.Years.Select(c => new SelectListItem(c.ToString(), c.ToString()))" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Years)"></select-improver>
 			</form-group>
 			<form-group>
 				<label asp-for="Search.Genres"></label>
 				<select asp-for="Search.Genres" size="@(Math.Min(Model.Tokens.Genres.Count(), 7).ToString())" asp-items="Model.Tokens.Genres.Select(c => new SelectListItem(c.ToString(), c.ToString()))" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Genres)"></select-improver>
 			</form-group>
 		</column>
 		<column md="4">
 			<form-group>
 				<label asp-for="Search.Flags"></label>
 				<select asp-for="Search.Flags" size="@(Math.Min(Model.AvailableFlags.Count(), 7).ToString())" asp-items="Model.AvailableFlags" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Flags)"></select-improver>
 			</form-group>
 			<form-group>
 				<label asp-for="Search.GameGroups"></label>
 				<select asp-for="Search.GameGroups" size="@(Math.Min(Model.AvailableGameGroups.Count(), 7).ToString())" asp-items="Model.AvailableGameGroups" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.GameGroups)"></select-improver>
 			</form-group>
 			<form-group>
 				<label asp-for="Search.Authors"></label>
 				<select asp-for="Search.Authors" asp-items="Model.AvailableAuthors" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Authors)"></select-improver>
 			</form-group>
 		</column>
 		<column md="4">
 			<form-group>
 				<label asp-for="Search.SystemCodes"></label>
 				<select asp-for="Search.SystemCodes" size="@(Math.Min(Model.Tokens.SystemCodes.Count(), 7).ToString())" asp-items="Model.Tokens.SystemCodes.OrderBy(c => c).Select(c => new SelectListItem(c, c))" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.SystemCodes)"></select-improver>
 			</form-group>
 			<form-group>
 				<label asp-for="Search.Tags"></label>
 				<select asp-for="Search.Tags" size="@(Math.Min(Model.AvailableTags.Count(), 7).ToString())" asp-items="Model.AvailableTags" class="form-control"></select>
+				<select-improver select-id="@Html.IdFor(m => m.Search.Tags)"></select-improver>
 			</form-group>
 		</column>
 	</row>
@@ -111,7 +119,7 @@
 			|| flags.selectedIndex >= 0
 			|| gameGroups.selectedIndex >= 0
 			|| authors.selectedIndex >= 0
-			|| systemCodes.selectedIndex > =0
+			|| systemCodes.selectedIndex >= 0
 			|| tags.selectedIndex >= 0
 	}
 </script>
\ No newline at end of file

From 19b775b621aadbaca659ba4663a74f6348f55e90 Mon Sep 17 00:00:00 2001
From: Masterjun3 <masterjun3@gmail.com>
Date: Sat, 26 Aug 2023 21:11:57 +0200
Subject: [PATCH 3/4] add select improver to submission page

---
 TASVideos/Pages/Submissions/Index.cshtml        | 17 ++++++++++-------
 .../Models/SubmissionSearchRequest.cs           |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/TASVideos/Pages/Submissions/Index.cshtml b/TASVideos/Pages/Submissions/Index.cshtml
index 35995858d..d2ed817c8 100644
--- a/TASVideos/Pages/Submissions/Index.cshtml
+++ b/TASVideos/Pages/Submissions/Index.cshtml
@@ -25,19 +25,22 @@
 @await Component.RenderWiki(SystemWiki.SubmissionHeader)
 <hr />
 <form method="get" id="submission-form">
-	<two-column-select available-list="AvailableStatuses" id-list="Search.StatusFilter" />
-	<row class="mt-2 mb-2">
-		<column md="5">
+	<row>
+		<div class="col-12 col-md-6">
+			<label asp-for="Search.StatusFilter" class="form-control-label"></label>
+			<select asp-for="Search.StatusFilter" asp-items="Model.AvailableStatuses" class="form-control"></select>
+			<select-improver select-id="@Html.IdFor(m => m.Search.StatusFilter)"></select-improver>
+		</div>
+		<div class="col-12 col-md-6">
 			<label asp-for="Search.Years" class="form-control-label"></label>
 			<select asp-for="Search.Years" asp-items="selectAvailableYears" multiple class="form-control"></select>
-		</column>
-		<column class="offset-md-2" md="5">
+			<select-improver select-id="@Html.IdFor(m => m.Search.Years)" list-height="188px"></select-improver>
 			<label asp-for="Search.User" class="form-control-label"></label>
 			<input autocomplete="off" asp-for="Search.User" type="text" list="@Html.IdFor(m => m.Search.User)-autocomplete" class="form-control" />
-			
+
 			<label asp-for="Search.System" class="form-control-label"></label>
 			<select asp-for="Search.System" asp-items="Model.SystemList" class="form-control"></select>
-		</column>
+		</div>
 	</row>
 	<button type="submit" class="btn btn-secondary mt-1"><i class="fa fa-filter"></i> Filter</button>
 </form>
diff --git a/TASVideos/Pages/Submissions/Models/SubmissionSearchRequest.cs b/TASVideos/Pages/Submissions/Models/SubmissionSearchRequest.cs
index 9af7a0b6b..1a61b5484 100644
--- a/TASVideos/Pages/Submissions/Models/SubmissionSearchRequest.cs
+++ b/TASVideos/Pages/Submissions/Models/SubmissionSearchRequest.cs
@@ -26,7 +26,7 @@ public SubmissionSearchRequest()
 
 	public int? StartType { get; set; }
 
-	[Display(Name = "Status Filter")]
+	[Display(Name = "Statuses")]
 	public IEnumerable<SubmissionStatus> StatusFilter { get; set; } = new List<SubmissionStatus>();
 
 	public static IEnumerable<SubmissionStatus> Default => new List<SubmissionStatus>

From 5e7c412287a5a86b82550e837e7887001f956961 Mon Sep 17 00:00:00 2001
From: Masterjun3 <masterjun3@gmail.com>
Date: Sat, 26 Aug 2023 21:12:19 +0200
Subject: [PATCH 4/4] readd label for user role edit

---
 TASVideos/Pages/Users/Edit.cshtml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TASVideos/Pages/Users/Edit.cshtml b/TASVideos/Pages/Users/Edit.cshtml
index c67ef7769..d23240dba 100644
--- a/TASVideos/Pages/Users/Edit.cshtml
+++ b/TASVideos/Pages/Users/Edit.cshtml
@@ -186,6 +186,7 @@
 		<textarea asp-for="UserToEdit.ModeratorComments" class="form-control" rows="5"></textarea>
 	</full-row>
 	<hr />
+	<label asp-for="UserToEdit.SelectedRoles"></label>
 	<select asp-for="UserToEdit.SelectedRoles" size="@(Math.Min(Model.AvailableRoles.Count(), 7).ToString())" asp-items="Model.AvailableRoles" class="form-control"></select>
 	<select-improver select-id="@Html.IdFor(m => m.UserToEdit.SelectedRoles)"></select-improver>
 	<hr />