From d39a7d56501179a7d4bbb1e2ebaff5e0c324fdb8 Mon Sep 17 00:00:00 2001
From: samet <sametcn99@gmail.com>
Date: Wed, 3 Jul 2024 03:53:16 +0300
Subject: [PATCH] Enhance repo filtering and UI accessibility

- Added checkbox filters in `RepositoryFilterBar.razor` for archived, forked, and template repositories, including corresponding state variables and event handlers (`HandleArchivedChange`, `HandleForkedChange`, `HandleTemplatesChange`).
- Updated `ApplyFilters` method in `RepositoryFilterBar.razor` to incorporate filtering logic based on the new checkboxes.
- Made `readme` parameter nullable in `ReadmeModal.razor` to handle repositories without a readme file.
- Improved UI and accessibility in `RepositoryDisplay.razor` by grouping repository name, archived status, and template status within a single heading element and ensuring external links open in a new tab.
- Conducted minor styling and structural adjustments for enhanced layout and visual appeal of repository display cards.
---
 .../FilterDisplays/RepositoryFilterBar.razor  | 43 +++++++++++++++++++
 .../Components/Displays/ReadmeModal.razor     |  2 +-
 .../Displays/RepositoryDisplay.razor          | 16 +++----
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/GPVBlazor/GPVBlazor/Components/Displays/FilterDisplays/RepositoryFilterBar.razor b/GPVBlazor/GPVBlazor/Components/Displays/FilterDisplays/RepositoryFilterBar.razor
index 5cba384..c3294dc 100644
--- a/GPVBlazor/GPVBlazor/Components/Displays/FilterDisplays/RepositoryFilterBar.razor
+++ b/GPVBlazor/GPVBlazor/Components/Displays/FilterDisplays/RepositoryFilterBar.razor
@@ -4,6 +4,24 @@
     <div class="control is-expanded">
         <input type="text" value="@searchQuery" @oninput="OnSearchQueryChanged" class="input" placeholder="Search...">
     </div>
+    <div class="control">
+        <label class="checkbox">
+            <input type="checkbox" @onchange="HandleArchivedChange" checked="@includeArchived">
+            Include Archived
+        </label>
+    </div>
+    <div class="control">
+        <label class="checkbox">
+            <input type="checkbox" @onchange="HandleForkedChange" checked="@includeForked">
+            Include Forked
+        </label>
+    </div>
+    <div class="control">
+        <label class="checkbox">
+            <input type="checkbox" @onchange="HandleTemplatesChange" checked="@includeTemplates">
+            Include Templates
+        </label>
+    </div>
     <div class="control">
         <div class="select is-fullwidth">
             <select @onchange="HandleSortChange">
@@ -77,6 +95,9 @@
     private string selectedTopic = string.Empty;
     private string selectedLanguage = string.Empty;
     private string selectedLicense = string.Empty;
+    private bool includeArchived = true;
+    private bool includeForked = true;
+    private bool includeTemplates = true;
 
     protected override void OnInitialized()
     {
@@ -134,6 +155,25 @@
         ApplyFilters();
     }
 
+    private void HandleArchivedChange(ChangeEventArgs e)
+    {
+        includeArchived = (bool)e.Value;
+        ApplyFilters();
+    }
+
+    private void HandleForkedChange(ChangeEventArgs e)
+    {
+        includeForked = (bool)e.Value;
+        ApplyFilters();
+    }
+
+    private void HandleTemplatesChange(ChangeEventArgs e)
+    {
+        includeTemplates = (bool)e.Value;
+        ApplyFilters();
+    }
+
+
     private void ApplyFilters(bool reset = false)
     {
         if (reset)
@@ -152,6 +192,9 @@
             if (!string.IsNullOrWhiteSpace(selectedLanguage)) query = query.Where(r => r.Language == selectedLanguage);
 
             if (!string.IsNullOrWhiteSpace(selectedLicense)) query = query.Where(r => r.License != null && r.License.Name == selectedLicense);
+            if (!includeArchived) query = query.Where(r => !r.Archived);
+            if (!includeForked) query = query.Where(r => !r.Fork);
+            if (!includeTemplates) query = query.Where(r => !r.IsTemplate);
 
             switch (selectedSort)
             {
diff --git a/GPVBlazor/GPVBlazor/Components/Displays/ReadmeModal.razor b/GPVBlazor/GPVBlazor/Components/Displays/ReadmeModal.razor
index 15c58a9..73ca1aa 100644
--- a/GPVBlazor/GPVBlazor/Components/Displays/ReadmeModal.razor
+++ b/GPVBlazor/GPVBlazor/Components/Displays/ReadmeModal.razor
@@ -31,5 +31,5 @@
 
 @code {
     [Parameter] public bool ShowModal { get; set; }
-    [Parameter] public Readme readme { get; set; }
+    [Parameter] public Readme? readme { get; set; }
 }
\ No newline at end of file
diff --git a/GPVBlazor/GPVBlazor/Components/Displays/RepositoryDisplay.razor b/GPVBlazor/GPVBlazor/Components/Displays/RepositoryDisplay.razor
index 7132ea3..8d073a2 100644
--- a/GPVBlazor/GPVBlazor/Components/Displays/RepositoryDisplay.razor
+++ b/GPVBlazor/GPVBlazor/Components/Displays/RepositoryDisplay.razor
@@ -4,18 +4,19 @@
 {
     <div class="box h-100" style="min-height: 300px;">
         <div>
-            <div class="is-flex is-align-items-center is-flex-wrap-wrap" style="gap: 0.5rem;">
-                <h5 class="title is-5">@repository.Name</h5>
-                <h6 class="subtitle is-6 has-text-grey">@((repository.Archived) ? "Archived" : "")</h6>
-            </div>
+            <h5 class="title is-5 is-flex is-flex-wrap-wrap is-column-gap-1">
+                @repository.Name <span class="subtitle is-6 has-text-grey">@((repository.Archived) ? "Archived" : "")</span>
+                <span class="subtitle is-6 has-text-grey">@((repository.IsTemplate) ? "Template" : "")</span>
+            </h5>
+
             <h6 class="subtitle is-6 mb-2 has-text-grey">@repository.Language</h6>
             <div class="is-flex is-flex-direction-row is-flex-wrap-wrap" style="gap: 0.5rem;">
                 @if (!string.IsNullOrEmpty(repository.Homepage) && Uri.IsWellFormedUriString(repository.Homepage, UriKind.Absolute))
                 {
-                    <a href="@repository.Homepage" class="button is-small is-link is-inverted">Homepage</a>
+                    <a href="@repository.Homepage" class="button is-small is-link is-inverted" target="_blank">Homepage</a>
                 }
-                <a href="@repository.HtmlUrl" class="button is-small is-link is-inverted">GitHub</a>
-                <a href="@repository.CloneUrl" class="button is-small is-link is-inverted">Clone URL</a>
+                <a href="@repository.HtmlUrl" class="button is-small is-link is-inverted" target="_blank">GitHub</a>
+                <a href="@repository.CloneUrl" class="button is-small is-link is-inverted" target="_blank">Clone URL</a>
                 <button class="button is-small is-link is-inverted is-column-gap-1">
                     @repository.StargazersCount
                     <span class="icon">
@@ -44,7 +45,6 @@
                     }
                 </div>
             }
-
         </footer>
     </div>
 }