From de2e804b8408e932a6f3407293956c8f5fa03058 Mon Sep 17 00:00:00 2001
From: RaidMax <raidmax@live.com>
Date: Fri, 25 Feb 2022 21:09:57 -0600
Subject: [PATCH] improve meta filter menu on profile

---
 SharedLibraryCore/Interfaces/IClientMeta.cs   |  1 +
 .../ProfileMetaListViewComponent.cs           |  5 ++--
 .../Views/Client/Profile/Index.cshtml         | 29 +++++++++----------
 WebfrontCore/wwwroot/js/profile.js            | 10 ++-----
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/SharedLibraryCore/Interfaces/IClientMeta.cs b/SharedLibraryCore/Interfaces/IClientMeta.cs
index 1b3ed0a41..479ba70ae 100644
--- a/SharedLibraryCore/Interfaces/IClientMeta.cs
+++ b/SharedLibraryCore/Interfaces/IClientMeta.cs
@@ -20,6 +20,7 @@ namespace SharedLibraryCore.Interfaces
 
     public enum MetaType
     {
+        All = -1,
         Other,
         Information,
         AliasUpdate,
diff --git a/WebfrontCore/ViewComponents/ProfileMetaListViewComponent.cs b/WebfrontCore/ViewComponents/ProfileMetaListViewComponent.cs
index db7fc7c7d..5314960bd 100644
--- a/WebfrontCore/ViewComponents/ProfileMetaListViewComponent.cs
+++ b/WebfrontCore/ViewComponents/ProfileMetaListViewComponent.cs
@@ -38,11 +38,12 @@ namespace WebfrontCore.ViewComponents
             return View("_List", meta);
         }
 
-        public static async Task<IEnumerable<IClientMeta>> GetClientMeta(IMetaService metaService, MetaType? metaType, EFClient.Permission level, ClientPaginationRequest request)
+        public static async Task<IEnumerable<IClientMeta>> GetClientMeta(IMetaService metaService, MetaType? metaType,
+            EFClient.Permission level, ClientPaginationRequest request)
         {
             IEnumerable<IClientMeta> meta = null;
 
-            if (metaType == null) // all types
+            if (metaType is null or MetaType.All)
             {
                 meta = await metaService.GetRuntimeMeta(request);
             }
diff --git a/WebfrontCore/Views/Client/Profile/Index.cshtml b/WebfrontCore/Views/Client/Profile/Index.cshtml
index 7721ae408..90397bd96 100644
--- a/WebfrontCore/Views/Client/Profile/Index.cshtml
+++ b/WebfrontCore/Views/Client/Profile/Index.cshtml
@@ -146,23 +146,23 @@
     <partial name="Meta/_Information.cshtml" model="@Model.Meta"/>
 </div>
 
-<div class="row border-bottom bg-dark">
-    <div class="d-md-flex flex-fill align-items-center bg-dark">
-        <div class="text-center bg-dark p-2 pl-3 pr-4 text-muted" id="filter_meta_container_button">
-            <span class="oi oi-sort-ascending"></span>
+<div class="row border-bottom">
+    <div class="d-md-flex flex-fill">
+        <div class="bg-dark p-2 pl-3 pr-3 text-center text-muted border-0 align-self-stretch align-middle" id="filter_meta_container_button">
+            <span class="text-primary" id="meta_filter_dropdown_icon">▼</span>
             <a>@ViewBag.Localization["WEBFRONT_CLIENT_META_FILTER"]</a>
         </div>
         <div id="filter_meta_container" class="d-none d-md-flex flex-md-fill flex-md-wrap">
-            <a asp-action="ProfileAsync" asp-controller="Client"
-               class="nav-link p-2 pl-3 pr-3 text-center col-12 col-md-auto text-md-left @(!Model.MetaFilterType.HasValue ? "btn-primary text-white" : "text-muted")"
-               asp-route-id="@Model.ClientId">
-                @ViewBag.Localization["META_TYPE_ALL_NAME"]
-            </a>
-            @{ var metaTypes = Enum.GetValues(typeof(MetaType))
+            @{
+                const int defaultTabCount = 5;
+                var metaTypes = Enum.GetValues(typeof(MetaType))
                    .Cast<MetaType>()
                    .Where(type => !ignoredMetaTypes.Contains(type))
-                   .ToList(); }
-            @foreach (var type in metaTypes.Take(4))
+                   .OrderByDescending(type => type == MetaType.All)
+                   .ToList();
+                var selectedMeta = metaTypes.FirstOrDefault(meta => metaTypes.IndexOf(Model.MetaFilterType ?? MetaType.All) >= defaultTabCount && meta != MetaType.All && meta == Model.MetaFilterType);
+            }
+            @foreach (var type in metaTypes.Take(defaultTabCount - 1).Append(selectedMeta == MetaType.Other ? metaTypes[defaultTabCount - 1] : selectedMeta))
             {
                 <a asp-action="ProfileAsync" asp-controller="Client"
                    class="meta-filter nav-link p-2 pl-3 pr-3 text-center @(Model.MetaFilterType.HasValue && Model.MetaFilterType.Value.ToString() == type.ToString() ? "btn-primary text-white" : "text-muted")"
@@ -172,9 +172,8 @@
                     @type.ToTranslatedName()
                 </a>
             }
-            <a href="#" class="nav-link p-2 pl-3 pr-3 text-center text-muted d-none d-md-block" id="expand-meta-filters">...</a>
-            <div class="d-block d-md-none" id="additional-meta-filter">
-                @foreach (var type in metaTypes.Skip(4))
+            <div class="d-md-none" id="additional_meta_filter">
+                @foreach (var type in (selectedMeta == MetaType.Other ? metaTypes.Skip(defaultTabCount) : metaTypes.Skip(defaultTabCount).Append(metaTypes[defaultTabCount - 1])).Where(meta => selectedMeta == MetaType.Other || meta != selectedMeta))
                 {
                     <a asp-action="ProfileAsync" asp-controller="Client"
                        class="meta-filter nav-link p-2 pl-3 pr-3 text-center @(Model.MetaFilterType.HasValue && Model.MetaFilterType.Value.ToString() == type.ToString() ? "btn-primary text-white" : "text-muted")"
diff --git a/WebfrontCore/wwwroot/js/profile.js b/WebfrontCore/wwwroot/js/profile.js
index c60d13a87..1200dc327 100644
--- a/WebfrontCore/wwwroot/js/profile.js
+++ b/WebfrontCore/wwwroot/js/profile.js
@@ -35,15 +35,9 @@
     startAt = $('.loader-data-time').last().data('time');
 
     $('#filter_meta_container_button').click(function () {
-        $('#filter_meta_container').hide().removeClass('d-none').addClass('d-block').slideDown();
-        $('#additional-meta-filter').removeClass('d-md-none').addClass('d-flex').slideDown();
-        $('#expand-meta-filters').removeClass('d-md-block');
+        $('#filter_meta_container').removeClass('d-none').addClass('flex-md-column');
+        $('#additional_meta_filter').removeClass('d-md-none');
     });
-    
-    $('#expand-meta-filters').click(function () {
-        $('#additional-meta-filter').removeClass('d-md-none').addClass('d-flex').slideDown();
-        $('#expand-meta-filters').removeClass('d-md-block');
-    })
 
     /*
      * load context of chat