288 lines
10 KiB
Plaintext
288 lines
10 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"
|
|
Dense="true"
|
|
ActivationEvent="@MouseEvent.LeftClick"
|
|
AnchorOrigin="Origin.BottomLeft"
|
|
TransformOrigin="Origin.TopLeft"
|
|
PopoverClass="custom-menu-popover">
|
|
|
|
<MudMenuItem OnClick="GoToProfile"
|
|
Icon="@Icons.Material.Filled.Person"
|
|
IconColor="Color.Primary">
|
|
Profile
|
|
</MudMenuItem>
|
|
|
|
<MudMenuItem OnClick="GoToTenantSelection"
|
|
Icon="@Icons.Material.Filled.Business"
|
|
IconColor="Color.Info">
|
|
Change Tenant
|
|
</MudMenuItem>
|
|
|
|
<MudMenuItem OnClick="Logout"
|
|
Icon="@Icons.Material.Filled.Logout"
|
|
IconColor="Color.Error"
|
|
Class="red-text-item">
|
|
<MudText Color="Color.Error">Logout</MudText>
|
|
</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.Apps" Size="Size.Medium" Color="Color.Primary" />
|
|
@if (_drawerOpen)
|
|
{
|
|
<MudText Typo="Typo.h5" Class="ml-3" Style="font-weight:900">@GlobalConsts.AppInitial</MudText>
|
|
}
|
|
</div>
|
|
</MudDrawerHeader>
|
|
|
|
|
|
<MudNavMenu Class="v6-nav">
|
|
@* Member & Admin *@
|
|
<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="/account/tenant-selection" Icon="@Icons.Material.Filled.Business">@(_drawerOpen ? "Change Tenant" : "")</MudNavLink>
|
|
<MudNavLink Href="/leave" Icon="@Icons.Material.Filled.EventAvailable">@(_drawerOpen ? "Leave Management" : "")</MudNavLink>
|
|
<MudNavLink Href="/performance" Icon="@Icons.Material.Filled.Speed">@(_drawerOpen ? "Performance" : "")</MudNavLink>
|
|
<MudNavLink Href="/organization" Icon="@Icons.Material.Filled.AccountTree">@(_drawerOpen ? "Organization" : "")</MudNavLink>
|
|
<MudNavLink Href="/payroll" Icon="@Icons.Material.Filled.CurrencyExchange">@(_drawerOpen ? "Payroll" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
|
|
@* Tenant Admin Only *@
|
|
<AuthorizeView Roles="@ApplicationRoles.TenantAdmin" Context="tenantAdminAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/setting" Icon="@Icons.Material.Filled.Settings">@(_drawerOpen ? "App Settings" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
|
|
@* Admin Only *@
|
|
<AuthorizeView Roles="@ApplicationRoles.Admin" Context="adminAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/multitenant" Icon="@Icons.Material.Filled.CorporateFare">@(_drawerOpen ? "Multitenant" : "")</MudNavLink>
|
|
<MudNavLink Href="/serilogs" Icon="@Icons.Material.Filled.HistoryEdu">@(_drawerOpen ? "System Logs" : "")</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 Color="Color.Primary" 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: #1e293b;">@CurrentUserService.FullName</MudText>
|
|
<MudText Typo="Typo.caption" Style="color: #64748b; 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>
|
|
|
|
|
|
@code {
|
|
private bool _drawerOpen = true;
|
|
|
|
private void DrawerToggle() => _drawerOpen = !_drawerOpen;
|
|
private void GoToProfile() => NavigationManager.NavigateTo("/profile");
|
|
private void GoToTenantSelection() => NavigationManager.NavigateTo("/account/tenant-selection");
|
|
private void Logout() => NavigationManager.NavigateTo("/account/logout");
|
|
}
|
|
|
|
<style>
|
|
.custom-menu-popover {
|
|
min-width: 200px !important;
|
|
margin-right: 16px !important;
|
|
}
|
|
|
|
.custom-menu-popover .mud-list-item {
|
|
padding-left: 16px !important;
|
|
padding-right: 16px !important;
|
|
}
|
|
|
|
.red-text-item {
|
|
color: var(--mud-palette-error) !important;
|
|
}
|
|
</style>
|
|
|
|
<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,
|
|
.v6-nav .mud-nav-group {
|
|
max-width: 100% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.v6-drawer.mud-drawer--mini .v6-nav .mud-nav-link,
|
|
.v6-drawer.mud-drawer--mini .v6-nav .mud-nav-group-button {
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
width: 80px !important;
|
|
}
|
|
|
|
.v6-drawer.mud-drawer--mini .v6-nav .mud-nav-link-icon,
|
|
.v6-drawer.mud-drawer--mini .v6-nav .mud-nav-group-icon {
|
|
margin-right: 0px !important;
|
|
margin-inline-start: 0px !important;
|
|
display: flex !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: var(--mud-palette-primary) !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v6-footer {
|
|
margin-top: auto;
|
|
padding: 16px;
|
|
border-top: 1px solid var(--mud-palette-divider);
|
|
background-color: #f8fafc;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mud-badge-dot {
|
|
border: 2px solid white !important;
|
|
}
|
|
|
|
</style>
|
|
|