Implement QuickFilters

NHSUKFrontendRazor/ViewComponents/QuickFilterViewComponent.cs

@@ -0,0 +1,29 @@
+namespace NHSUKFrontendRazor.ViewComponents
+{
+    using Microsoft.AspNetCore.Mvc;
+    using NHSUKFrontendRazor.ViewModels;
+
+    /// <summary>
+    /// A ViewComponent that renders a tag based on the provided name and styling.
+    /// </summary>
+    public class QuickFiltersViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            List<string> tagNames,
+            string myLearningsType,
+            string resourcesType,
+            string cataloguesType,
+            string dashboardTrayLearningResourceType)
+        {
+            var model = new QuickFiltersViewModel
+            (
+                tagNames,
+                myLearningsType,
+                resourcesType,
+                cataloguesType,
+                dashboardTrayLearningResourceType
+            );
+            return View(model);
+        }
+    }
+}

NHSUKFrontendRazor/ViewModels/QuickFiltersViewModel.cs

@@ -0,0 +1,41 @@
+namespace NHSUKFrontendRazor.ViewModels
+{
+    public class QuickFiltersViewModel
+    {
+        public QuickFiltersViewModel(
+            List<string> tagNames,
+            string myLearningsType,
+            string resourcesType,
+            string cataloguesType,
+            string dashboardTrayLearningResourceType)
+        {
+            TagNames = tagNames;
+            MyLearningsType = myLearningsType;
+            ResourcesType = resourcesType;
+            CataloguesType = cataloguesType;
+            DashboardTrayLearningResourceType = dashboardTrayLearningResourceType;
+        }
+
+        public List<string> TagNames { get; set; }
+
+        /// <summary>
+        /// Gets or sets a type of my learning items to be displayed in the dashboard.
+        /// </summary>
+        public string MyLearningsType { get; set; }
+
+        /// <summary>
+        /// Gets or sets a type of resources to be displayed in the dashboard.
+        /// </summary>
+        public string ResourcesType { get; set; }
+
+        /// <summary>
+        /// Gets or sets a type of catalogues to be displayed in the dashboard.
+        /// </summary
+        public string CataloguesType { get; set; }
+
+        /// <summary>
+        /// Gets or sets the dashboard tray Learning resource type.
+        /// </summary>
+        public string DashboardTrayLearningResourceType { get; set; }
+    }
+}

NHSUKFrontendRazor/Views/Shared/Components/QuickFilters.cshtml/Default.cshtml

@@ -0,0 +1,27 @@
+@using NHSUKFrontendRazor.ViewModels
+@model QuickFiltersViewModel
+
+<nav class="quick-filters">
+    <ul class="quick-filters__list">
+        <span class="quick-filters__list-heading">Show</span>
+        <li class="quick-filters__list-item">
+            <a asp-action="Index" asp-route-dashboardTrayLearningResourceType="all" [email protected] asp-route-resourceDashboard="@(Model.ResourcesType)" asp-route-catalogueDashboard="@Model.CataloguesType" asp-fragment="my-learning"
+               class="quick-filters__button @(Model.DashboardTrayLearningResourceType == "all" ? "quick-filters__button--active" : "")"
+               title="All"
+               data-tag="all">
+                All
+            </a>
+        </li>
+        @foreach (var tag in Model.TagNames)
+        {
+            <li class="quick-filters__list-item">
+                <a asp-action="Index" asp-route-dashboardTrayLearningResourceType="@tag" [email protected] asp-route-resourceDashboard="@(Model.ResourcesType)" asp-route-catalogueDashboard="@Model.CataloguesType" asp-fragment="my-learning"
+                   class="quick-filters__button @(Model.DashboardTrayLearningResourceType == @tag ? "quick-filters__button--active" : "")"
+                   title="@tag"
+                   data-tag="@tag">
+                    @tag
+                </a>
+            </li>
+        }
+    </ul>
+</nav>