MRB webassembly

2024-05-13 14:33:27 -07:00
parent ba8d92ea01
commit 9b7e3ef897
109 changed files with 11731 additions and 1024 deletions
--- a/MesaFabApproval.Client/Layout/MainLayout.razor
+++ b/MesaFabApproval.Client/Layout/MainLayout.razor
@ -0,0 +1,71 @@
+@inherits LayoutComponentBase
+
+@inject MesaFabApprovalAuthStateProvider authStateProvider
+@inject IConfiguration Configuration
+@inject IMemoryCache cache
+@inject NavigationManager navManager
+
+<MudThemeProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+<MudPopoverProvider />
+
+<div style="height: 100vh;">
+    <MudLayout>
+        <MudAppBar Elevation="1" Color="Color.Info">
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
+            <MudText Typo="Typo.h5" Class="ml-3">Mesa Fab Approval</MudText>
+            @if (authStateProvider.CurrentUser is not null) {
+                <MudSpacer />
+                <MudText Typo="Typo.h6" Class="mr-3">@authStateProvider.CurrentUser.FirstName @authStateProvider.CurrentUser.LastName</MudText>
+                <MudIconButton Variant="Variant.Filled"
+                               Color="Color.Tertiary"
+                               OnClick=Logout
+                               Edge="Edge.End"
+                               Icon="@Icons.Material.Filled.Logout" />
+            }
+        </MudAppBar>
+        <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+            <MudNavMenu Color="Color.Info" Bordered="true" Class="d-flex flex-column justify-center p-1 gap-1">
+                <MudButton Variant="Variant.Filled"
+                           Color="Color.Tertiary"
+                           Href="@Configuration["OldFabApprovalUrl"]"
+                           Target="_blank"
+                           StartIcon="@Icons.Material.Filled.Home">
+                    Return to Main Site
+                </MudButton>
+                <MudDivider Class="my-1" />
+                @if (authStateProvider.CurrentUser is not null) {
+                    <MudNavGroup Title="Create New">
+                        <MudNavLink OnClick="@(() => GoTo("mrb/new"))">Create New MRB</MudNavLink>
+                    </MudNavGroup>
+                    <MudNavLink OnClick="@(() => GoTo(""))" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
+                    <MudNavLink OnClick="@(() => GoTo("mrb/all"))" Icon="@Icons.Material.Filled.Ballot">MRB List</MudNavLink>
+                }
+            </MudNavMenu>
+        </MudDrawer>
+        <div style="display: flex; flex-flow: column; height: 100%;">
+            <MudMainContent Style="@($"background:#E0E0E0; flex-grow: 1;")">
+                @Body
+            </MudMainContent>
+        </div>
+    </MudLayout>
+</div>
+
+@code {
+    bool _drawerOpen = true;
+
+    void DrawerToggle() {
+        _drawerOpen = !_drawerOpen;
+    }
+
+    void Logout() {
+        authStateProvider.Logout();
+    }
+
+    private void GoTo(string page) {
+        DrawerToggle();
+        cache.Set("redirectUrl", page);
+        navManager.NavigateTo(page);
+    }
+}
--- a/MesaFabApproval.Client/Layout/MainLayout.razor.css
+++ b/MesaFabApproval.Client/Layout/MainLayout.razor.css
@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}