feat: Added Breadcrumb Navigation

isala404 · Nov 27, 2021 · edf35b5 · edf35b5
1 parent 508681a
commit edf35b5
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 128 deletions.
diff --git a/WorkFlow/Pages/Index.razor b/WorkFlow/Pages/Index.razor
@@ -1,7 +1,91 @@
 @page "/"
 
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
-
-<SurveyPrompt Title="How is Blazor working for you?" />
+<div class="bg-gray-100 p-8">
+    <div>
+        <h2 class="text-2xl">Today</h2>
+        <div class="whitespace-nowrap overflow-x-auto">
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="1"
+                Assignee="Isala Piyarisi"
+                Status="todo"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="2"
+                Assignee="Isala Piyarisi"
+                Status="inprogress"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="3"
+                Assignee="Isala Piyarisi"
+                Status="done"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="2"
+                Assignee="Isala Piyarisi"
+                Status="done"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+        </div>
+    </div>
+    <div>
+        <h2 class="text-2xl">Overdue</h2>
+        <div class="whitespace-nowrap overflow-x-auto">
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="3"
+                Assignee="Isala Piyarisi"
+                Status="todo"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="1"
+                Assignee="Isala Piyarisi"
+                Status="inprogress"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+        </div>
+    </div>
+    <div>
+        <h2 class="text-2xl">Next</h2>
+        <div class="whitespace-nowrap overflow-x-auto">
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="2"
+                Assignee="Isala Piyarisi"
+                Status="todo"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="1"
+                Assignee="Isala Piyarisi"
+                Status="inprogress"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+            <Ticket
+                Name="Create Something Something"
+                Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tinciduLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et sapien pulvinar ante pellentesque lacinia. Etiam tincidunt sed...."
+                Priority="3"
+                Assignee="Isala Piyarisi"
+                Status="done"
+                DueDate=@DateTime.Parse("03/11/2021")
+                EstimatedTime=@TimeSpan.Parse("02:00:00") />
+        </div>
+    </div>
+</div>
diff --git a/WorkFlow/Shared/MainLayout.razor b/WorkFlow/Shared/MainLayout.razor
@@ -1,8 +1,43 @@
 @inherits LayoutComponentBase
+@inject NavigationManager _navigationManager
+@inject ProtectedLocalStorage _protectedLocalStore
 
 <header>
-    <NavMenu />
+    <NavMenu CurrentCompany="@_currentCompany" />
 </header>
 <div class="container mx-auto">
+    <Breadcrumbs CurrentCompany="@_currentCompany" />
     @Body
-</div>
+</div>
+
+
+@code
+{
+    public static Navigation.Navigation NavCtrl;
+
+    private string _currentCompany;
+
+    protected override void OnInitialized()
+    {
+        NavCtrl = new Navigation.Navigation(_navigationManager, _protectedLocalStore);
+        _currentCompany = NavCtrl.GetCurrentCompany();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var currentPath = _navigationManager.ToBaseRelativePath(_navigationManager.Uri).Split("/");
+
+            _currentCompany = await NavCtrl.RestoreLastCompany();
+
+            if (currentPath.First() != "" && currentPath.First() != _currentCompany)
+            {
+                NavCtrl.SetCurrentCompany(currentPath.First());
+                _currentCompany = currentPath.First();
+            }
+
+            StateHasChanged();
+        }
+    }
+}
diff --git a/WorkFlow/Shared/Navigation/Breadcrumbs.razor b/WorkFlow/Shared/Navigation/Breadcrumbs.razor
@@ -0,0 +1,40 @@
+@inject NavigationManager _navigationManager
+
+<div class="my-5">
+    <ol class="list-reset flex text-grey-dark">
+        @foreach (var url in _urLs)
+        {
+            <li>
+                <a href="@url.Url" class="font-bold">@url.Name</a>
+            </li>
+            <li>
+                <span class="mx-2">></span>
+            </li>
+        }
+
+    </ol>
+</div>
+
+@code {
+    [Parameter]
+    public string CurrentCompany { get; set; }
+
+    private List<Breadcrumb> _urLs;
+
+    protected override void OnParametersSet()
+    {
+        var currentPath = _navigationManager.ToBaseRelativePath(_navigationManager.Uri).Split("/");
+        var subPaths = currentPath.Skip(1);
+
+        _urLs = new List<Breadcrumb> {new Breadcrumb {Name = Navigation.TitleCase(CurrentCompany), Url = "/"}};
+
+        var url = "/" + CurrentCompany;
+        foreach (var path in subPaths)
+        {
+            if (path == "")
+                continue;
+            url += "/" + path;
+            _urLs.Add(new Breadcrumb {Name = Navigation.TitleCase(path), Url = url});
+        }
+    }
+}
diff --git a/WorkFlow/Shared/Navigation/CompanySelect.razor b/WorkFlow/Shared/Navigation/CompanySelect.razor
@@ -1,18 +1,20 @@
-<select value="@CurrentCompany"  @onchange="SetCompany" class="block w-52 text-gray-700 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 mx-auto" name="company">
-    @foreach (var company in NavMenu.NavCtrl.CompanyLinks)
+<select value="@CurrentCompany" @onchange="SetCompany" class="block w-52 text-gray-700 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 mx-auto" name="company">
+    @foreach (var company in MainLayout.NavCtrl.CompanyLinks)
     {
         <option value=@company.Uri>@company.Name</option>
     }
 </select>
 
 @code {
+
     [Parameter]
     public string CurrentCompany { get; set; }
 
     private void SetCompany(ChangeEventArgs e)
     {
         if (e.Value != null) CurrentCompany = e.Value.ToString();
 
-        NavMenu.NavCtrl.SetCurrentCompany(CurrentCompany);
+        MainLayout.NavCtrl.SetCurrentCompany(CurrentCompany);
     }
-}
+
+}
diff --git a/WorkFlow/Shared/Navigation/NavMenu.razor b/WorkFlow/Shared/Navigation/NavMenu.razor
@@ -1,31 +1,27 @@
-@inject NavigationManager _navigationManager
-@inject ProtectedLocalStorage _protectedLocalStore
-@inject ProtectedSessionStorage _protectedSessionStore
-
-<nav class="bg-white dark:bg-gray-800 shadow ">
+<nav class="bg-white dark:bg-gray-800 shadow ">
     <div class="max-w-7xl mx-auto px-8">
         <div class="flex items-center justify-between h-16">
             <div class=" flex items-center">
                 <a class="flex-shrink-0" href="/">
-                    <img class="h-8 w-8" src="/icons/rocket.svg" alt="Workflow" />
+                    <img class="h-8 w-8" src="/icons/rocket.svg" alt="Workflow"/>
                 </a>
                 <div class="hidden md:block">
                     <div class="ml-10 flex items-baseline space-x-4">
-                        <NavOptions CurrentCompany="@_currentCompany" />
+                        <NavOptions CurrentCompany="@CurrentCompany"/>
                     </div>
                 </div>
             </div>
             <div class="block">
                 <div class="ml-4 flex items-center md:ml-6">
                     <div class="hidden md:block">
-                        <CompanySelect CurrentCompany="@_currentCompany" />
+                        <CompanySelect CurrentCompany="@CurrentCompany"/>
                     </div>
 
                     <div class="ml-3 relative">
                         <div class="relative inline-block text-left">
                             <div>
                                 <button @onclick="ToggleProfileOptions" type="button" class="flex items-center justify-center w-full rounded-md  px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500" id="options-menu">
-                                    <img src="https://avatars.dicebear.com/api/bottts/isala.svg" alt="profile-pic" height="40" width="40" />
+                                    <img src="https://avatars.dicebear.com/api/bottts/isala.svg" alt="profile-pic" height="40" width="40"/>
                                 </button>
                             </div>
                             @if (_profileOptions)
@@ -39,7 +35,7 @@
                                                 </span>
                                             </span>
                                         </a>
-                                        <a href="/@_currentCompany/edit" class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600" role="menuitem">
+                                        <a href="/@CurrentCompany/edit" class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600" role="menuitem">
                                             <span class="flex flex-col">
                                                 <span>
                                                     Company Settings
@@ -73,20 +69,19 @@
 
     <div class="md:hidden">
         <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 @(_showMobileNavLinks ? "block" : "hidden")">
-            <NavOptions CurrentCompany="@_currentCompany" />
-            <CompanySelect CurrentCompany="@_currentCompany" />
+            <NavOptions CurrentCompany="@CurrentCompany"/>
+            <CompanySelect CurrentCompany="@CurrentCompany"/>
         </div>
     </div>
 </nav>
 
 @code {
-    public static Navigation NavCtrl;
-
+    [Parameter]
+    public string CurrentCompany { get; set; }
+
     private bool _profileOptions = false;
     private bool _showMobileNavLinks = false;
 
-    private string _currentCompany;
-
     private void ToggleProfileOptions()
     {
         _profileOptions = !_profileOptions;
@@ -96,19 +91,4 @@
     {
         _showMobileNavLinks = !_showMobileNavLinks;
     }
-
-    protected override void OnInitialized()
-    {
-        NavCtrl = new Navigation(_navigationManager, _protectedLocalStore);
-        _currentCompany = NavCtrl.GetCurrentCompany();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            _currentCompany = await NavCtrl.RestoreLastCompany();
-            StateHasChanged();
-        }
-    }
-}
+}
diff --git a/WorkFlow/Shared/Navigation/NavOptions.razor b/WorkFlow/Shared/Navigation/NavOptions.razor
@@ -16,14 +16,14 @@
 
 @code {
 
-    private NavRoutes[] Options { get; set; } = NavMenu.NavCtrl.NavOptions;
+    private NavRoutes[] Options { get; set; } = MainLayout.NavCtrl.NavOptions;
 
     [Parameter]
     public string CurrentCompany { get; set; }
 
     protected override void OnParametersSet()
     {
-        var location = NavMenu.NavCtrl.NavigationManager.Uri;
+        var location = MainLayout.NavCtrl.NavigationManager.Uri;
 
         foreach (var option in Options)
         {
@@ -35,4 +35,5 @@
                 option.Selected = false;
         }
     }
-}
+
+}