Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable multiselect in more places #1663

Merged
merged 4 commits into from
Aug 26, 2023
Merged

Enable multiselect in more places #1663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f99a801
improve select improver
Masterjun3 Aug 26, 2023
7f4a98a
use select improver for publication filter
Masterjun3 Aug 26, 2023
19b775b
add select improver to submission page
Masterjun3 Aug 26, 2023
5e7c412
readd label for user role edit
Masterjun3 Aug 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion TASVideos/Pages/Publications/Filter.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -111,7 +119,7 @@
|| flags.selectedIndex >= 0
|| gameGroups.selectedIndex >= 0
|| authors.selectedIndex >= 0
|| systemCodes.selectedIndex > =0
|| systemCodes.selectedIndex >= 0
|| tags.selectedIndex >= 0
}
</script>
17 changes: 10 additions & 7 deletions TASVideos/Pages/Submissions/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion TASVideos/Pages/Submissions/Models/SubmissionSearchRequest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ public SubmissionSearchRequest()

public int? StartType { get; set; }

[Display(Name = "Status Filter")]
[Display(Name = "Statuses")]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Underrated change, very nice

public IEnumerable<SubmissionStatus> StatusFilter { get; set; } = new List<SubmissionStatus>();

public static IEnumerable<SubmissionStatus> Default => new List<SubmissionStatus>
Expand Down
1 change: 1 addition & 0 deletions TASVideos/Pages/Users/Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
38 changes: 23 additions & 15 deletions TASVideos/TagHelpers/SelectImproverTagHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,28 @@ 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');
}}
}}
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');
}}
Expand All @@ -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');
Expand Down Expand Up @@ -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');
}}
}}
}});
Expand Down