222 lines
8.7 KiB
Plaintext
222 lines
8.7 KiB
Plaintext
@using Indotalent.ConfigBackEnd.Extensions
|
|
@using Indotalent.ConfigBackEnd.Interfaces
|
|
@using Indotalent.Infrastructure.Authentication
|
|
@using Indotalent.Infrastructure.Authorization.Identity
|
|
@using Indotalent.Shared.Consts
|
|
@using Microsoft.AspNetCore.Components.Authorization
|
|
@inherits LayoutComponentBase
|
|
@inject NavigationManager NavigationManager
|
|
@inject ICurrentUserService CurrentUserService
|
|
|
|
<MudThemeProvider />
|
|
<MudDialogProvider />
|
|
<MudSnackbarProvider />
|
|
<MudPopoverProvider />
|
|
|
|
<MudLayout>
|
|
<AuthorizeView>
|
|
<MudAppBar Elevation="1">
|
|
<MudSpacer />
|
|
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" Dense="true"
|
|
ActivationEvent="@MouseEvent.LeftClick" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
|
|
<MudMenuItem OnClick="GoToProfile">Profile</MudMenuItem>
|
|
<MudMenuItem OnClick="Logout" Color="Color.Error">Logout</MudMenuItem>
|
|
</MudMenu>
|
|
</MudAppBar>
|
|
|
|
<MudDrawer @bind-Open="_drawerOpen"
|
|
Elevation="0"
|
|
Variant="@DrawerVariant.Mini"
|
|
OpenMiniOnHover="false"
|
|
MiniWidth="80px"
|
|
Width="280px"
|
|
Class="v6-drawer">
|
|
|
|
<MudIconButton Icon="@(_drawerOpen ? Icons.Material.Rounded.ChevronLeft : Icons.Material.Rounded.ChevronRight)"
|
|
OnClick="@DrawerToggle"
|
|
Class="v6-toggle-btn"
|
|
Size="Size.Small" />
|
|
|
|
<MudDrawerHeader Class="pa-6 mb-2">
|
|
<div class="d-flex align-center">
|
|
<MudIcon Icon="@Icons.Material.Filled.FaceRetouchingNatural" Size="Size.Medium" Style="color: #DB2777;" />
|
|
@if (_drawerOpen)
|
|
{
|
|
<MudText Typo="Typo.h5" Class="ml-3" Style="font-weight:900; color: #831843;">@GlobalConsts.AppInitial</MudText>
|
|
}
|
|
</div>
|
|
</MudDrawerHeader>
|
|
|
|
<MudNavMenu Class="v6-nav">
|
|
<AuthorizeView Roles="@($"{ApplicationRoles.Admin},{ApplicationRoles.Member}")" Context="commonAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/home" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">@(_drawerOpen ? "Home" : "")</MudNavLink>
|
|
<MudNavLink Href="/profile" Icon="@Icons.Material.Filled.AccountCircle">@(_drawerOpen ? "Profile" : "")</MudNavLink>
|
|
<MudNavLink Href="/thirdparty" Icon="@Icons.Material.Filled.Groups">@(_drawerOpen ? "Third Party" : "")</MudNavLink>
|
|
<MudNavLink Href="/organization" Icon="@Icons.Material.Filled.Badge">@(_drawerOpen ? "Organization" : "")</MudNavLink>
|
|
<MudNavLink Href="/sales" Icon="@Icons.Material.Filled.MonetizationOn">@(_drawerOpen ? "Sales" : "")</MudNavLink>
|
|
<MudNavLink Href="/purchase" Icon="@Icons.Material.Filled.ShoppingCart">@(_drawerOpen ? "Purchase" : "")</MudNavLink>
|
|
<MudNavLink Href="/inventory" Icon="@Icons.Material.Filled.Inventory2">@(_drawerOpen ? "Inventory" : "")</MudNavLink>
|
|
<MudNavLink Href="/utilities" Icon="@Icons.Material.Filled.Build">@(_drawerOpen ? "Utilities" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
|
|
<AuthorizeView Roles="@ApplicationRoles.Admin" Context="adminAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/serilogs" Icon="@Icons.Material.Filled.HistoryEdu">@(_drawerOpen ? "System Logs" : "")</MudNavLink>
|
|
<MudNavLink Href="/setting" Icon="@Icons.Material.Filled.Settings">@(_drawerOpen ? "App Settings" : "")</MudNavLink>
|
|
<MudNavLink Href="/appsettings/json" Icon="@Icons.Material.Filled.SettingsEthernet">@(_drawerOpen ? "System Settings" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
</MudNavMenu>
|
|
|
|
<div class="v6-footer d-flex align-center @(_drawerOpen ? "" : "justify-center")">
|
|
<MudBadge Color="Color.Success" Overlap="true" Dot="true" Bordered="true" Placement="Placement.BottomRight">
|
|
<MudAvatar Style="background-color: #DB2777; color: white;" Size="Size.Medium">@CurrentUserService.FullName.ToInitial()</MudAvatar>
|
|
</MudBadge>
|
|
@if (_drawerOpen)
|
|
{
|
|
<div class="ml-3">
|
|
<MudText Typo="Typo.caption" Style="font-weight:700; display: block; color: #831843;">@CurrentUserService.FullName</MudText>
|
|
<MudText Typo="Typo.caption" Style="color: #BE185D; font-size: 10px;">Online</MudText>
|
|
</div>
|
|
}
|
|
</div>
|
|
</MudDrawer>
|
|
</AuthorizeView>
|
|
|
|
<MudMainContent Style="background-color: #f1f5f9;">
|
|
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-3 md-pa-6 lg-pa-8 pt-3 pb-12">
|
|
@Body
|
|
</MudContainer>
|
|
</MudMainContent>
|
|
</MudLayout>
|
|
|
|
<script>
|
|
function downloadFile(fileName, contentType, base64String) {
|
|
const link = document.createElement('a');
|
|
link.download = fileName;
|
|
link.href = `data:${contentType};base64,${base64String}`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
</script>
|
|
|
|
@code {
|
|
private bool _drawerOpen = true;
|
|
|
|
private void DrawerToggle() => _drawerOpen = !_drawerOpen;
|
|
private void GoToProfile() => NavigationManager.NavigateTo("/profile");
|
|
private void Logout() => NavigationManager.NavigateTo("/account/logout");
|
|
}
|
|
|
|
<style>
|
|
.mud-input-control:has(.mud-input-adornment-start) {
|
|
margin-top: 0 !important;
|
|
height: 35px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) .mud-input-outlined-border {
|
|
height: 35px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) input {
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
height: 30px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
height: 35px !important;
|
|
}
|
|
|
|
div:has(> .mud-input-control:has(.mud-input-adornment-start)) > .mud-button-root {
|
|
height: 35px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.mud-input-outlined-border {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.custom-select-dense .mud-input-control {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.custom-select-dense .mud-input-slot {
|
|
padding-top: 4px !important;
|
|
padding-bottom: 4px !important;
|
|
padding-left: 8px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.mud-drawer.v6-drawer {
|
|
overflow: visible !important;
|
|
z-index: 1350 !important;
|
|
background-color: #f8fafc !important;
|
|
border-right: 1px solid var(--mud-palette-divider) !important;
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.v6-drawer .mud-drawer-content {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.v6-toggle-btn {
|
|
position: absolute !important;
|
|
right: -16px !important;
|
|
top: 18px !important;
|
|
z-index: 1400 !important;
|
|
background-color: white !important;
|
|
border: 1px solid var(--mud-palette-divider) !important;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
min-width: 32px !important;
|
|
border-radius: 50% !important;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link {
|
|
border-radius: 12px;
|
|
margin: 4px 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link.active {
|
|
background-color: white !important;
|
|
color: #DB2777 !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link.active .mud-nav-link-icon {
|
|
color: #DB2777 !important;
|
|
}
|
|
|
|
.v6-footer {
|
|
margin-top: auto;
|
|
padding: 16px;
|
|
border-top: 1px solid #FCE7F3;
|
|
background-color: #FDF2F8;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mud-badge-dot {
|
|
border: 2px solid white !important;
|
|
}
|
|
</style> |