From 99656133c9e332d0373f7a06947ae8f3bf98d3cf Mon Sep 17 00:00:00 2001 From: Harrison Deng Date: Mon, 10 May 2021 00:30:40 -0500 Subject: [PATCH] Changed up results configuration layout. Removed dropdown portion. Added buttons to change sort order. Visual indicator for disabling changes to sort order list. Renamed a namespace. --- SimpleLogger | 2 +- .../ProductListingInfo.cs | 2 +- .../ResultCategoryExtensions.cs | 2 +- .../ResultsProfile.cs | 2 +- .../SearchProfile.cs | 2 +- src/MultiShop/Pages/Index.razor | 2 +- src/MultiShop/Pages/Search.razor | 74 +++++++++++-------- src/MultiShop/Shared/CustomDropdown.razor | 45 ----------- src/MultiShop/Shared/DragAndDropList.razor | 40 ++++++++-- src/MultiShop/Shared/ListingTableView.razor | 3 +- src/MultiShop/wwwroot/js/ComponentsSupport.js | 46 ------------ 11 files changed, 84 insertions(+), 136 deletions(-) rename src/MultiShop/{SearchStructures => DataStructures}/ProductListingInfo.cs (96%) rename src/MultiShop/{SearchStructures => DataStructures}/ResultCategoryExtensions.cs (98%) rename src/MultiShop/{SearchStructures => DataStructures}/ResultsProfile.cs (94%) rename src/MultiShop/{SearchStructures => DataStructures}/SearchProfile.cs (98%) delete mode 100644 src/MultiShop/Shared/CustomDropdown.razor diff --git a/SimpleLogger b/SimpleLogger index f275ff3..3049ccc 160000 --- a/SimpleLogger +++ b/SimpleLogger @@ -1 +1 @@ -Subproject commit f275ff330db936d7eabc6dc435952ec0752edbc9 +Subproject commit 3049cccc3efa3323a85f1ae591969b8f5d35be5d diff --git a/src/MultiShop/SearchStructures/ProductListingInfo.cs b/src/MultiShop/DataStructures/ProductListingInfo.cs similarity index 96% rename from src/MultiShop/SearchStructures/ProductListingInfo.cs rename to src/MultiShop/DataStructures/ProductListingInfo.cs index 3fdb0dc..84256f0 100644 --- a/src/MultiShop/SearchStructures/ProductListingInfo.cs +++ b/src/MultiShop/DataStructures/ProductListingInfo.cs @@ -1,7 +1,7 @@ using System.Collections.Generic; using MultiShop.ShopFramework; -namespace MultiShop.SearchStructures +namespace MultiShop.DataStructures { public class ProductListingInfo { diff --git a/src/MultiShop/SearchStructures/ResultCategoryExtensions.cs b/src/MultiShop/DataStructures/ResultCategoryExtensions.cs similarity index 98% rename from src/MultiShop/SearchStructures/ResultCategoryExtensions.cs rename to src/MultiShop/DataStructures/ResultCategoryExtensions.cs index 315f845..126f859 100644 --- a/src/MultiShop/SearchStructures/ResultCategoryExtensions.cs +++ b/src/MultiShop/DataStructures/ResultCategoryExtensions.cs @@ -2,7 +2,7 @@ using System; using System.ComponentModel; using MultiShop.ShopFramework; -namespace MultiShop.SearchStructures +namespace MultiShop.DataStructures { public static class ResultCategoryExtensions { diff --git a/src/MultiShop/SearchStructures/ResultsProfile.cs b/src/MultiShop/DataStructures/ResultsProfile.cs similarity index 94% rename from src/MultiShop/SearchStructures/ResultsProfile.cs rename to src/MultiShop/DataStructures/ResultsProfile.cs index ac428d4..6101fb7 100644 --- a/src/MultiShop/SearchStructures/ResultsProfile.cs +++ b/src/MultiShop/DataStructures/ResultsProfile.cs @@ -2,7 +2,7 @@ using System; using System.Collections.Generic; using System.Linq; -namespace MultiShop.SearchStructures +namespace MultiShop.DataStructures { public class ResultsProfile { diff --git a/src/MultiShop/SearchStructures/SearchProfile.cs b/src/MultiShop/DataStructures/SearchProfile.cs similarity index 98% rename from src/MultiShop/SearchStructures/SearchProfile.cs rename to src/MultiShop/DataStructures/SearchProfile.cs index e306e9b..c5130b6 100644 --- a/src/MultiShop/SearchStructures/SearchProfile.cs +++ b/src/MultiShop/DataStructures/SearchProfile.cs @@ -1,7 +1,7 @@ using System.Collections.Generic; using MultiShop.ShopFramework; -namespace MultiShop.SearchStructures +namespace MultiShop.DataStructures { public class SearchProfile { diff --git a/src/MultiShop/Pages/Index.razor b/src/MultiShop/Pages/Index.razor index e16ad3b..d26f184 100644 --- a/src/MultiShop/Pages/Index.razor +++ b/src/MultiShop/Pages/Index.razor @@ -1,3 +1,3 @@ @page "/" -

Welcome to MultiShop!

+

Welcome to MultiShop!

\ No newline at end of file diff --git a/src/MultiShop/Pages/Search.razor b/src/MultiShop/Pages/Search.razor index e8ddd5d..a504b34 100644 --- a/src/MultiShop/Pages/Search.razor +++ b/src/MultiShop/Pages/Search.razor @@ -2,12 +2,12 @@ @using Microsoft.Extensions.Configuration @using ShopFramework @using SimpleLogger -@using SearchStructures +@using DataStructures @inject HttpClient Http @inject IConfiguration Configuration @inject IJSRuntime js -@* TODO: Finish sorting, move things to individual components where possible, key search results. *@ +@* TODO: Add buttons for the order changing. Add main page. *@
@@ -178,7 +178,28 @@
-
+
+ +
+ @if (showResultsConfiguration) + { +
+
+
+
Results Order
+
What's important to you?
+

The results will be sorted by the top category. If the compared results are equal or don't have a value for that category, the next category on the list will be used and so on.

+ + + @(item.FriendlyName()) + + +
+
+
+ } + +
@if (searching) { @@ -220,19 +241,6 @@ Search for something to see the results! }
- - - - - - - - @(item.FriendlyName()) - - - - -
@@ -251,11 +259,17 @@ private ResultsProfile activeResultsProfile = new ResultsProfile(); private bool showSearchConfiguration = false; + private bool showResultsConfiguration = false; + private string ToggleSearchConfigButtonCss { get => "btn btn-outline-secondary" + (showSearchConfiguration ? " active" : ""); } + private string ToggleResultsConfigurationcss { + get => "btn btn-outline-secondary btn-tab" + (showResultsConfiguration ? " active" : ""); + } + private bool searched = false; private bool searching = false; private bool organizing = false; @@ -306,7 +320,8 @@ await foreach (ProductListing listing in Shops[shopName]) { resultsChecked += 1; - if (resultsChecked % 50 == 0) { + if (resultsChecked % 50 == 0) + { StateHasChanged(); await Task.Yield(); } @@ -355,7 +370,7 @@ } searching = false; searched = true; - + foreach (ResultsProfile.Category c in greatest.Keys) { foreach (ProductListingInfo info in greatest[c]) @@ -373,19 +388,20 @@ organizing = true; StateHasChanged(); - List sortedResults = await Task.Run>(() => { + List sortedResults = await Task.Run>(() => + { List sorted = new List(listings); sorted.Sort((a, b) => - { - foreach (ResultsProfile.Category category in activeResultsProfile.Order) - { - int? compareResult = category.CompareListings(a, b); - if (compareResult.HasValue && compareResult.Value != 0) - { - return -compareResult.Value; - } - } - return 0; + { + foreach (ResultsProfile.Category category in activeResultsProfile.Order) + { + int? compareResult = category.CompareListings(a, b); + if (compareResult.HasValue && compareResult.Value != 0) + { + return -compareResult.Value; + } + } + return 0; }); return sorted; }); diff --git a/src/MultiShop/Shared/CustomDropdown.razor b/src/MultiShop/Shared/CustomDropdown.razor deleted file mode 100644 index 60160e8..0000000 --- a/src/MultiShop/Shared/CustomDropdown.razor +++ /dev/null @@ -1,45 +0,0 @@ -@inject IJSRuntime JS - -
- - -
- -@code { - [Parameter] - public RenderFragment ButtonContent { get; set; } - - [Parameter] - public RenderFragment DropdownContent { get; set; } - - [Parameter] - public string AdditionalButtonClasses { get; set; } - - [Parameter] - public string Justify { get; set; } - - private ElementReference dropdown; - private string ButtonCss - { - get => "btn " + AdditionalButtonClasses; - } - - protected override async Task OnParametersSetAsync() - { - AdditionalButtonClasses = AdditionalButtonClasses ?? ""; - Justify = Justify ?? "center"; - await base.OnParametersSetAsync(); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await JS.InvokeVoidAsync("customDropdown", dropdown, Justify); - } - await base.OnAfterRenderAsync(firstRender); - } - -} diff --git a/src/MultiShop/Shared/DragAndDropList.razor b/src/MultiShop/Shared/DragAndDropList.razor index 74f6bd9..94b4456 100644 --- a/src/MultiShop/Shared/DragAndDropList.razor +++ b/src/MultiShop/Shared/DragAndDropList.razor @@ -5,9 +5,16 @@
    @foreach (TItem item in Items) { -
  • - - @DraggableItem(item) +
  • +
    +
    + + +
    +
    + @DraggableItem(item) +
    +
    • }
@@ -29,6 +36,7 @@ private ElementReference dragAndDrop; private int itemDraggedIndex = -1; + private bool processingDropChange = false; private string ListGroupCss @@ -54,12 +62,28 @@ private async Task OnDrop(TItem dropped) { - TItem item = Items[itemDraggedIndex]; - if (item.Equals(dropped)) return; - int indexOfDrop = Items.IndexOf(dropped); - Items.RemoveAt(itemDraggedIndex); - Items.Insert(indexOfDrop, item); + int dragIndex = itemDraggedIndex; itemDraggedIndex = -1; + await MoveOrder(dragIndex, Items.IndexOf(dropped)); + } + + private async Task OnButtonClickMove(int index, bool up) { + if (up) { + await MoveOrder(index, index - 1); + } else { + await MoveOrder(index, index + 1); + } + } + + private async Task MoveOrder(int from, int to) + { + Logger.Log($"Attempting to move from {from} to {to}.", LogLevel.Debug); + if (from == to || from >= Items.Count || from < 0 || to > Items.Count || to < 0) return; + TItem item = Items[from]; + Items.RemoveAt(from); + Items.Insert(to, item); + processingDropChange = true; await OnOrderChange.InvokeAsync(); + processingDropChange = false; } } diff --git a/src/MultiShop/Shared/ListingTableView.razor b/src/MultiShop/Shared/ListingTableView.razor index 60e6462..ea47ad7 100644 --- a/src/MultiShop/Shared/ListingTableView.razor +++ b/src/MultiShop/Shared/ListingTableView.razor @@ -1,5 +1,4 @@ -@using ShopFramework -@using SearchStructures +@using DataStructures
diff --git a/src/MultiShop/wwwroot/js/ComponentsSupport.js b/src/MultiShop/wwwroot/js/ComponentsSupport.js index c4e2472..2122ce1 100644 --- a/src/MultiShop/wwwroot/js/ComponentsSupport.js +++ b/src/MultiShop/wwwroot/js/ComponentsSupport.js @@ -1,44 +1,3 @@ -function customDropdown(elem, justify) { - let btn = elem.querySelector("button"); - let dropdown = elem.querySelector("div"); - if (justify.toLowerCase() == "left") { - dropdown.style.left = "0px"; - } else if (justify.toLowerCase() == "center") { - dropdown.style.left = "50%"; - } else if (justify.toLowerCase() == "right") { - dropdown.style.right = "0px"; - } - - let openFunc = () => { - btn.classList.add("active"); - dropdown.classList.remove("invisible"); - dropdown.focus(); - } - - let closeFunc = () => { - btn.classList.remove("active"); - dropdown.classList.add("invisible"); - } - - btn.addEventListener("click", () => { - if (!btn.classList.contains("active")) { - openFunc(); - } else { - closeFunc(); - } - }); - dropdown.addEventListener("focusout", (e) => { - if (e.relatedTarget != btn) { - closeFunc(); - } - }); - dropdown.addEventListener("keyup", (e) => { - if (e.code == "Escape") { - dropdown.blur(); - } - }); -} - function dragAndDropList(elem) { elem.addEventListener("dragover", (e) => { e.preventDefault(); @@ -49,21 +8,16 @@ function dragAndDropList(elem) { e.addEventListener("dragstart", () => { itemDragged = e; e.classList.add("list-group-item-secondary"); - e.classList.remove("list-group-item-hover"); }); e.addEventListener("dragenter", () => { e.classList.add("list-group-item-primary"); - e.classList.remove("list-group-item-hover"); }); e.addEventListener("dragleave", () => { e.classList.remove("list-group-item-primary"); - e.classList.add("list-group-item-hover"); }); e.addEventListener("drop", () => { - e.classList.add("list-group-item-hover"); e.classList.remove("list-group-item-primary"); itemDragged.classList.remove("list-group-item-secondary"); - itemDragged.classList.add("list-group-item-hover"); }); } } \ No newline at end of file