Addet employee frontend and move header to a componet

This commit is contained in:
Alex Pedersen
2026-07-31 14:07:43 +02:00
parent 03594bba3f
commit 205d27c6c7
13 changed files with 180 additions and 148 deletions

View File

@@ -21,7 +21,7 @@
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Pos.ServiceDefaults\Pos.ServiceDefaults.csproj" />
<ProjectReference Include="..\Pos.ServiceDefaults\Pos.ServiceDefaults.csproj" />
</ItemGroup>
</Project>

View File

@@ -1,18 +1,9 @@
@rendermode InteractiveServer
@implements IDisposable
@using System.Globalization
@inject NavigationManager Nav
@page "/"
<header class="top-nav">
<div class="brand">Indstilinger</div>
<Header/>
<time datetime="@_currentTime.ToString("O")">
@_currentTime.ToString(
"dddd d. MMMM yyyy · HH:mm",
_danishCulture)
</time>
</header>
<div class="home-container">
<FluentButton Class="menu-button" Size="ButtonSize.Large">
@@ -27,32 +18,4 @@
<FluentButton Class="menu-button" Size="ButtonSize.Large" onclick="@(() => Nav.NavigateTo("/settings"))">
Indstillinger
</FluentButton>
</div>
@code {
private readonly CultureInfo _danishCulture =
CultureInfo.GetCultureInfo("da-DK");
private readonly Timer _timer;
private DateTime _currentTime = DateTime.Now;
public Home()
{
_timer = new Timer(
UpdateTime,
null,
TimeSpan.FromMinutes(1),
TimeSpan.FromMinutes(1));
}
private void UpdateTime(object? state)
{
_currentTime = DateTime.Now;
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
_timer.Dispose();
}
}
</div>

View File

@@ -1,27 +1,3 @@
.top-nav {
min-height: 72px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 32px;
background: var(--colorNeutralBackground1);
border-bottom: 1px solid var(--colorNeutralStroke2);
}
.brand {
color: var(--colorNeutralForeground1);
font-size: 26px;
font-weight: 600;
}
time {
color: var(--colorNeutralForeground2);
font-size: 18px;
white-space: nowrap;
}
.home-container {
width: min(100%, 1100px);
margin: 32px auto;

View File

@@ -1,21 +1,50 @@
@page "/settings/employees"
@rendermode InteractiveServer
<Header />
<h1>Medarbejder</h1>
<div class="employees-page">
<div class="employees-header">
<h1>Medarbejdere</h1>
<FluentButton Appearance="@ButtonAppearance.Primary"
OnClick="@CreateEmployee">
Opret medarbejder
</FluentButton>
<FluentButton Appearance="@ButtonAppearance.Primary">
Opret medarbejder
</FluentButton>
</div>
<p>@_message</p>
<FluentDataGrid TGridItem="EmployeeRow"
Items="@_employees.AsQueryable()"
GridTemplateColumns="1fr 180px">
<PropertyColumn Property="@(item => item.Name)"
Title="Navn"
Sortable="true" />
<TemplateColumn Title="Handling" Context="employee">
<FluentButton Class="deactivate-button"
Appearance="@ButtonAppearance.Outline"
OnClick="@(() => DeactivateEmployee(employee))">
Deaktivér
</FluentButton>
</TemplateColumn>
</FluentDataGrid>
</div>
@code {
private string _message = "";
private List<EmployeeRow> _employees =
[
new EmployeeRow { Name = "Anna Jensen" },
new EmployeeRow { Name = "Peter Hansen" },
new EmployeeRow { Name = "Maria Nielsen" }
];
public void CreateEmployee()
private void DeactivateEmployee(EmployeeRow employee)
{
_message = "Medarbejder blev oprettet";
_employees.Remove(employee);
}
}
private class EmployeeRow
{
public string Name { get; set; } = string.Empty;
}
}

View File

@@ -0,0 +1,26 @@
/* CSS for Employees component */
.employees-page {
width: min(100%, 1100px);
margin: 0 auto;
padding: 32px;
}
.employees-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.employees-header h1 {
margin: 0;
}
.employees-page ::deep fluent-data-grid {
width: 100%;
}
.employees-page ::deep .deactivate-button {
color: #b10e1e;
border-color: #b10e1e;
}

View File

@@ -1,54 +1,20 @@
@using System.Globalization
@rendermode InteractiveServer
@implements IDisposable
@rendermode InteractiveServer
@inject NavigationManager Nav
@page "/settings"
<header class="top-nav">
<div class="brand">Blomster POS</div>
<Header />
<div class="settings-page">
<h1>Indstillinger</h1>
<time datetime="@_currentTime.ToString("O")">
@_currentTime.ToString(
"dddd d. MMMM yyyy · HH:mm",
_danishCulture)
</time>
</header>
<p>Administrer data, der bruges i kassesalget.</p>
<p>Administer data, der bruges i kassesalget</p>
<div class="home-container">
<FluentButton Class="menu-button" Size="ButtonSize.Large">
Medarbejder
</FluentButton>
<FluentButton Class="menu-button" Size="ButtonSize.Large">
Vare
</FluentButton>
</div>
<div class="settings-grid">
<FluentButton Class="settings-button" onclick="@(() => Nav.NavigateTo("/settings/employees"))">
Medarbejder
</FluentButton>
@code {
private readonly CultureInfo _danishCulture =
CultureInfo.GetCultureInfo("da-DK");
private readonly Timer _timer;
private DateTime _currentTime = DateTime.Now;
public Settings()
{
_timer = new Timer(
UpdateTime,
null,
TimeSpan.FromMinutes(1),
TimeSpan.FromMinutes(1));
}
private void UpdateTime(object? state)
{
_currentTime = DateTime.Now;
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
_timer.Dispose();
}
}
<FluentButton Class="settings-button">
Vare
</FluentButton>
</div>
</div>

View File

@@ -1,24 +1,24 @@
/* CSS for Settings component */
.top-nav {
min-height: 72px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 32px;
background: var(--colorNeutralBackground1);
border-bottom: 1px solid var(--colorNeutralStroke2);
.settings-page {
width: min(100%, 1100px);
margin: 0 auto;
padding: 32px;
}
.brand {
.settings-page h1 {
margin-bottom: 12px;
color: var(--colorNeutralForeground1);
font-size: 26px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 32px;
}
.settings-grid ::deep .settings-button {
width: 100%;
min-height: 220px;
font-size: 28px;
font-weight: 600;
}
time {
color: var(--colorNeutralForeground2);
font-size: 18px;
white-space: nowrap;
}

View File

@@ -0,0 +1,12 @@
@rendermode InteractiveServer
@implements IDisposable
<header class="top-nav">
<div class="brand">Blomster POS</div>
<time datetime="@_currentTime.ToString("O")">
@_currentTime.ToString(
"dddd d. MMMM yyyy · HH:mm",
_danishCulture)
</time>
</header>

View File

@@ -0,0 +1,33 @@
using System.Globalization;
namespace Pos.Web.Components.Shared
{
public partial class Header
{
private readonly CultureInfo _danishCulture =
CultureInfo.GetCultureInfo("da-DK");
private readonly Timer _timer;
private DateTime _currentTime = DateTime.Now;
public Header()
{
_timer = new Timer(
UpdateTime,
null,
TimeSpan.FromMinutes(1),
TimeSpan.FromMinutes(1));
}
private void UpdateTime(object? state)
{
_currentTime = DateTime.Now;
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
_timer.Dispose();
}
}
}

View File

@@ -0,0 +1,24 @@
/* CSS for Header component */
.top-nav {
min-height: 72px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 32px;
background: var(--colorNeutralBackground1);
border-bottom: 1px solid var(--colorNeutralStroke2);
}
.brand {
color: var(--colorNeutralForeground1);
font-size: 26px;
font-weight: 600;
}
time {
color: var(--colorNeutralForeground2);
font-size: 18px;
white-space: nowrap;
}

View File

@@ -11,3 +11,4 @@
@using Pos.Web
@using Pos.Web.Components
@using Pos.Web.Components.Layout
@using Pos.Web.Components.Shared

View File

@@ -13,6 +13,8 @@
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Pos.Models\Pos.Models.csproj" />
<ProjectReference Include="..\Pos.ServiceDefaults\Pos.ServiceDefaults.csproj" />
<ProjectReference Include="..\Pos.Ui\Database\Database.csproj" />
</ItemGroup>
</Project>

View File

@@ -13,8 +13,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EpsonPrinter", "EpsonPrinte
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pos.AppHost", "Pos.AppHost\Pos.AppHost.csproj", "{53EFB4EB-931D-419B-8399-4E389011076C}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pos.ServiceDefaults", "Pos.ServiceDefaults\Pos.ServiceDefaults.csproj", "{EDC882E6-4983-35BD-3357-E433A3E64369}"
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tests", "Tests", "{9051E89F-15CC-40A4-8C60-82C98151139E}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "IntegrationTests", "IntegrationTests\IntegrationTests.csproj", "{04551552-086E-4CF4-AFD3-A4E51CD36182}"
@@ -25,6 +23,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pos.Service", "Pos.Service\
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pos.Models", "Pos.Models\Pos.Models.csproj", "{D6EA5236-CEFB-4889-9E67-4983D1A016FA}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pos.ServiceDefaults", "Pos.ServiceDefaults\Pos.ServiceDefaults.csproj", "{EDC882E6-4983-35BD-3357-E433A3E64369}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
@@ -47,10 +47,6 @@ Global
{53EFB4EB-931D-419B-8399-4E389011076C}.Debug|Any CPU.Build.0 = Debug|Any CPU
{53EFB4EB-931D-419B-8399-4E389011076C}.Release|Any CPU.ActiveCfg = Release|Any CPU
{53EFB4EB-931D-419B-8399-4E389011076C}.Release|Any CPU.Build.0 = Release|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Debug|Any CPU.Build.0 = Debug|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Release|Any CPU.ActiveCfg = Release|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Release|Any CPU.Build.0 = Release|Any CPU
{04551552-086E-4CF4-AFD3-A4E51CD36182}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{04551552-086E-4CF4-AFD3-A4E51CD36182}.Debug|Any CPU.Build.0 = Debug|Any CPU
{04551552-086E-4CF4-AFD3-A4E51CD36182}.Release|Any CPU.ActiveCfg = Release|Any CPU
@@ -67,6 +63,10 @@ Global
{D6EA5236-CEFB-4889-9E67-4983D1A016FA}.Debug|Any CPU.Build.0 = Debug|Any CPU
{D6EA5236-CEFB-4889-9E67-4983D1A016FA}.Release|Any CPU.ActiveCfg = Release|Any CPU
{D6EA5236-CEFB-4889-9E67-4983D1A016FA}.Release|Any CPU.Build.0 = Release|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Debug|Any CPU.Build.0 = Debug|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Release|Any CPU.ActiveCfg = Release|Any CPU
{EDC882E6-4983-35BD-3357-E433A3E64369}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE