Replace with proper usage of latest Breadcrumbs

NetCoreApps · Aug 19, 2023 · a61db57 · a61db57
1 parent 426e848
commit a61db57
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 154 deletions.
diff --git a/TalentBlazor.Client/Pages/Talent/ContactApplicationView.razor b/TalentBlazor.Client/Pages/Talent/ContactApplicationView.razor
@@ -2,13 +2,19 @@
 @inherits AppComponentBase
 
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            @if (!loading)
+            {
+                <Breadcrumbs>
+                    <Breadcrumb href="/jobs">Jobs</Breadcrumb>
+                    <Breadcrumb href=@($"/jobs/{jobApp.JobId}")>@jobApp.Position.Title</Breadcrumb>
+                    <Breadcrumb href=@($"/jobs/{jobApp.JobId}/applications")>Applications</Breadcrumb>
+                    <Breadcrumb href=@($"/jobs/{jobApp.JobId}/applications/{jobApp.ContactId}")>@jobApp.Applicant.DisplayName</Breadcrumb>
+                </Breadcrumbs>
+            }
         </nav>
-        @if(loading)
+        @if (loading)
         {
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
             <!-- PersonInfo -->
@@ -213,8 +219,6 @@
 
     AppUser? employeeSelection;
 
-    List<Breadcrumb> breadcrumbs = new();
-
     bool loading = true;
 
     string? selectedResult;
@@ -312,7 +316,6 @@
     async Task RefreshData()
     {
         await RefreshJobApp();
-        SetBreadcrumbs();
         await RefreshJobAppEvents();
         if (appUsers.Count == 0)
             await GetAppUsers();
@@ -324,19 +327,6 @@
         loading = false;
     }
 
-    void SetBreadcrumbs()
-    {
-        if (breadcrumbs.IsEmpty())
-        {
-            breadcrumbs = new List<Breadcrumb> {
-                new() { title="Jobs", href="/jobs" },
-                new() { title=$"{jobApp.Position.Title}", href=$"/jobs/{jobApp.JobId}" },
-                new() { title="Applications", href=$"/jobs/{jobApp.JobId}/applications" },
-                new() { title=$"{jobApp.Applicant.DisplayName}", href=$"/jobs/{jobApp.JobId}/applications/{jobApp.ContactId}" },
-            };
-        }
-    }
-
     async Task RefreshPhoneScreen()
     {
         var api = await ApiAsync(new QueryPhoneScreen {

diff --git a/TalentBlazor.Client/Pages/Talent/ContactDetails.razor b/TalentBlazor.Client/Pages/Talent/ContactDetails.razor
@@ -2,13 +2,16 @@
 @inherits AppComponentBase
 
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            <Breadcrumbs>
+                <Breadcrumb href="/contacts">Contacts</Breadcrumb>
+                @if (loading != true)
+                {
+                    <Breadcrumb href=@($"/contacts/{contact.Id}")>@contact.DisplayName</Breadcrumb>
+                }
+            </Breadcrumbs>
         </nav>
-
         <div class="">
             <div>
                 <div>
@@ -156,31 +159,16 @@
     public int ContactId { get; set; }
     Contact contact = new();
 
-    List<Breadcrumb> breadcrumbs = new();
-
     ResponseStatus? errorStatus;
     bool? loading;
 
     protected override async Task OnInitializedAsync()
     {
         await Task.Delay(300).ContinueWith(_ => { loading ??= true; });
         await RefreshContact();
-        SetBreadcrumbs();
         loading = false;
     }
 
-    void SetBreadcrumbs()
-    {
-        if (breadcrumbs.IsEmpty())
-        {
-            breadcrumbs = new List<Breadcrumb>
-            {
-                new() { title="Contacts",href="/contacts" },
-                new() { title=$"{contact.DisplayName}", href=$"/contacts/{contact.Id}" }
-            };
-        }
-    }
-
     // For best UX: apply changes locally then revalidate with real server state
     async Task RefreshContact()
     {
@@ -192,5 +180,4 @@
         else
             errorStatus = api.Error;
     }
-
 }
diff --git a/TalentBlazor.Client/Pages/Talent/ContactsList.razor b/TalentBlazor.Client/Pages/Talent/ContactsList.razor
@@ -1,13 +1,15 @@
 @page "/contacts"
 @inherits AppComponentBase
 
-
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            @if (contacts.Count > 0)
+            {
+                <Breadcrumbs>
+                    <Breadcrumb href="/contacts">Contacts</Breadcrumb>
+                </Breadcrumbs>
+            }
         </nav>
 
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
@@ -172,10 +174,6 @@
     int currentPage = 0;
     int perPage = 5;
 
-    List<Breadcrumb> breadcrumbs = new() {
-        new Breadcrumb { title = "Contacts", href = "/contacts" }
-    };
-
     Dictionary<EmploymentType, string> employmentTypeMapping = new() {
         { EmploymentType.FullTime, "Full-time" },
         { EmploymentType.PartTime, "Part-time" },

diff --git a/TalentBlazor.Client/Pages/Talent/Dashboard.razor b/TalentBlazor.Client/Pages/Talent/Dashboard.razor
@@ -4,11 +4,14 @@
 @inject NavigationManager NavigationManager;
 
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            @if (hasInit)
+            {
+                <Breadcrumbs>
+                    <Breadcrumb href="/dashboard">Dashboard</Breadcrumb>
+                </Breadcrumbs>
+            }
         </nav>
 
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
@@ -82,7 +85,7 @@
             <dt class="text-base font-normal text-gray-900">Total Jobs</dt>
             <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
                 <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @totalJobs
+                    @totalJobs
                 </div>
 
                 <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 md:mt-2 lg:mt-0">
@@ -102,7 +105,7 @@
         <dt class="text-base font-normal text-gray-900"><a href="/contacts">Total Contacts</a></dt>
         <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
             <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @totalContacts
+                @totalContacts
             </div>
 
             <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 md:mt-2 lg:mt-0">
@@ -121,7 +124,7 @@
         <dt class="text-base font-normal text-gray-900">Avg Salary Expectation</dt>
         <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
             <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @(avgSalaryExpectation/1000)k
+                @(avgSalaryExpectation/1000)k
             </div>
 
             <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 md:mt-2 lg:mt-0">
@@ -143,7 +146,7 @@
         <dt class="text-base font-normal text-gray-900">Avg Salary Range Lower</dt>
         <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
             <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @(avgSalaryRangeLower/1000)k
+                @(avgSalaryRangeLower/1000)k
             </div>
 
             <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 md:mt-2 lg:mt-0">
@@ -160,7 +163,7 @@
         <dt class="text-base font-normal text-gray-900">Avg Salary Range Upper</dt>
         <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
             <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @(avgSalaryRangeUpper/1000)k
+                @(avgSalaryRangeUpper/1000)k
             </div>
 
             <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 md:mt-2 lg:mt-0">
@@ -177,7 +180,7 @@
         <dt class="text-base font-normal text-gray-900">Remote Preferred</dt>
         <dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
             <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
-                        @prefRemotePercentage %
+                @prefRemotePercentage %
             </div>
 
             <div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 md:mt-2 lg:mt-0">
@@ -196,16 +199,13 @@
 
 @code {
 
-    readonly List<Breadcrumb> breadcrumbs = new() {
-        new Breadcrumb { title = "Dashboard", href = "/dashboard" }
-    };
-
     long totalJobs = 0;
     long totalContacts = 0;
     int avgSalaryExpectation = 0;
     int avgSalaryRangeLower = 0;
     int avgSalaryRangeUpper = 0;
     decimal prefRemotePercentage = 0.0m;
+    bool hasInit = false;
 
     ResponseStatus? errorResponse;
     string? LoginUrl { get; set; }
@@ -244,5 +244,6 @@
     {
         await FetchJobApps();
         await base.OnInitializedAsync();
+        hasInit = true;
     }
 }
diff --git a/TalentBlazor.Client/Pages/Talent/JobAppView.razor b/TalentBlazor.Client/Pages/Talent/JobAppView.razor
@@ -1,18 +1,22 @@
 @page "/jobs/{JobId:int}/applications"
 @inherits AppComponentBase
 
-
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            @if (!loading)
+            {
+                <Breadcrumbs>
+                    <Breadcrumb href="/jobs">Jobs</Breadcrumb>
+                    <Breadcrumb href=@($"/jobs/{JobId}")>@job.Title</Breadcrumb>
+                    <Breadcrumb href=@($"/jobs/{JobId}/applications")>Applications</Breadcrumb>
+                </Breadcrumbs>
+            }
         </nav>
         @if (loading)
         {
-         <h1 class="mt-2 text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Loading...</h1>
-        <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
+            <h1 class="mt-2 text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Loading...</h1>
+            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
 
             <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
                 <div class="mt-2 flex items-center text-sm text-gray-500">
@@ -292,15 +296,8 @@
 
 
 @code {
-    //static string[] VisibleFields = new[] { nameof(CreateTodo.Text) };
-
-    //string TabClass(string @class, bool isActive) =>
-    //    ClassNames("border-gray-200 text-sm font-medium px-4 py-2 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700",
-    //        (isActive ? "text-blue-700 dark:bg-blue-600" : "text-gray-900 hover:text-blue-700 dark:bg-gray-700"), @class);
-
     List<JobApplication> jobApps = new();
     Job job = new();
-    List<Breadcrumb> breadcrumbs = new();
     JobApplicationFilter filter = JobApplicationFilter.Interview;
     JobApplicationFilter Filter
     {
@@ -348,7 +345,6 @@
     {
         await RefreshJobApps();
         startOnFilterWithJobs();
-        SetBreadcrumbs();
         loading = false;
     }
 
@@ -409,18 +405,6 @@
             errorStatus = api.Error;
     }
 
-    void SetBreadcrumbs()
-    {
-        if (breadcrumbs.IsEmpty())
-        {
-            breadcrumbs = new List<Breadcrumb> {
-                new() { title="Jobs",href="/jobs" },
-                new() { title=$"{job.Title}", href=$"/jobs/{job.Id}" },
-                new() { title=$"Applications", href=$"/jobs/{job.Id}/applications" }
-            };
-        }
-    }
-
     readonly Dictionary<JobApplicationStatus, string> jobAppStatusMapping = new() {
         { JobApplicationStatus.Applied, "Applied" },
         { JobApplicationStatus.Interview, "Interview" },

diff --git a/TalentBlazor.Client/Pages/Talent/JobCreate.razor b/TalentBlazor.Client/Pages/Talent/JobCreate.razor
@@ -3,11 +3,12 @@
 @page "/jobs/create"
 
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <!-- Breadcrumbs-->
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            <Breadcrumbs>
+                <Breadcrumb href="/jobs">Jobs</Breadcrumb>
+                <Breadcrumb href="/jobs/create">Create</Breadcrumb>
+            </Breadcrumbs>
         </nav>
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0">
             <div class="ml-4 mt-4">
@@ -40,11 +41,6 @@
     AppMetadata? appMetadata;
     CreateJob request = new();
 
-    readonly List<Breadcrumb> breadcrumbs = new() {
-        new Breadcrumb { title="Jobs",href="/jobs" },
-        new Breadcrumb { title="Create",href="/jobs/create" },
-    };
-
     async Task Save(CreateJob req)
     {
         //request = req;

diff --git a/TalentBlazor.Client/Pages/Talent/JobEdit.razor b/TalentBlazor.Client/Pages/Talent/JobEdit.razor
@@ -3,10 +3,13 @@
 @page "/jobs/{JobId:int}/edit"
 
 <SetHeader>
-    <!-- Page header -->
     <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
-            <Breadcrumbs BreadCrumbs="breadcrumbs"></Breadcrumbs>
+            <Breadcrumbs>
+                <Breadcrumb href="/jobs">Jobs</Breadcrumb>
+                <Breadcrumb href=@($"/jobs/{JobId}")>@job?.Title</Breadcrumb>
+                <Breadcrumb href=@($"/jobs/{JobId}/applications")>Applications</Breadcrumb>
+            </Breadcrumbs>
         </nav>
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0">
             @if (job != null)
@@ -52,8 +55,6 @@
     UpdateJob request = new();
     Job? job;
 
-    List<Breadcrumb> breadcrumbs = new();
-
     async Task Save(UpdateJob req)
     {
         //request = req;
@@ -69,22 +70,9 @@
         navigationManager.NavigateTo("/jobs/" + JobId + "/applications");
     }
 
-    void SetBreadcrumbs()
-    {
-        if (breadcrumbs.IsEmpty())
-        {
-            breadcrumbs = new List<Breadcrumb> {
-                new() { title="Jobs",href="/jobs" },
-                new() { title=$"{job.Title}",href=$"/jobs/{JobId}" },
-                new() { title=$"Edit",href=$"/jobs/{JobId}/edit" },
-            };
-        }
-    }
-
     protected override async Task OnInitializedAsync()
     {
         await RefreshData();
-        SetBreadcrumbs();
     }
 
     async Task RefreshData()