Finsih Employyepage

PointOfSale/Pos.Service/EmployeeService.cs

@@ -55,5 +55,13 @@ namespace Pos.Service
         {
             return await _employeeRepository.GetAllAsync();
         }
+
+        public async Task<EmployeeEntity> AddEmployeeAsync(string name)
+        {
+            EmployeeEntity employee =
+                await _employeeRepository.AddAsync(ValidateName(name));
+            CacheService.Invalidate();
+            return employee;
+        }
     }
 }

PointOfSale/Pos.Ui/Database/Repository/EmployeeRepository.cs

@@ -70,5 +70,21 @@ namespace Database.Repository
                 .OrderBy(employee => employee.Name)
                 .ToListAsync();
         }
+
+        public async Task<EmployeeEntity> AddAsync(string name)
+        {
+            EmployeeEntity employee = new EmployeeEntity
+            {
+                Name = name,
+                IsModified = true
+            };
+
+            await using PosDbContext context = new PosDbContext();
+
+            context.Employee.Add(employee);
+            await context.SaveChangesAsync();
+
+            return employee;
+        }
     }
 }

PointOfSale/Pos.Web/Components/Pages/Settings/CreateEmployeeDialog.razor

@@ -0,0 +1,44 @@
+@using Pos.Service
+@inject EmployeeService EmployeeService
+
+@if (IsOpen)
+{
+    <div class="dialog-overlay">
+        <div class="employee-dialog" role="dialog" aria-modal="true" aria-labelledby="create-employee-title">
+            <div class="dialog-header">
+                <h2 id="create-employee-title">Opret medarbejder</h2>
+                <button class="close-button"
+                        type="button"
+                        aria-label="Luk"
+                        @onclick="CloseAsync">
+                    &times;
+                </button>
+            </div>
+
+            <div class="dialog-content">
+                <label for="employee-name">Navn</label>
+                <input id="employee-name"
+                       class="name-input"
+                       type="text"
+                       placeholder="Indtast navn"
+                       @bind="_name"
+                       @bind:event="oninput" />
+                <p>Medarbejderen bliver aktiv med det samme.</p>
+            </div>
+
+            <div class="dialog-actions">
+                <button class="cancel-button"
+                        type="button"
+                        @onclick="CloseAsync">
+                    Annuller
+                </button>
+                <button class="create-button"
+                        type="button"
+                        disabled="@string.IsNullOrWhiteSpace(_name)"
+                        @onclick="CreateEmployeeAsync">
+                    Opret medarbejder
+                </button>
+            </div>
+        </div>
+    </div>
+}

PointOfSale/Pos.Web/Components/Pages/Settings/CreateEmployeeDialog.razor.cs

@@ -0,0 +1,35 @@
+using Database.Models;
+using Microsoft.AspNetCore.Components;
+using Pos.Service;
+
+namespace Pos.Web.Components.Pages.Settings
+{
+    public partial class CreateEmployeeDialog
+    {
+        [Parameter]
+        public bool IsOpen { get; set; }
+
+        [Parameter]
+        public EventCallback<bool> IsOpenChanged { get; set; }
+
+        [Parameter]
+        public EventCallback<EmployeeEntity> EmployeeCreated { get; set; }
+
+        private string _name = string.Empty;
+
+        private async Task CreateEmployeeAsync()
+        {
+            EmployeeEntity employee =
+                await EmployeeService.AddEmployeeAsync(_name);
+
+            await EmployeeCreated.InvokeAsync(employee);
+            await CloseAsync();
+        }
+
+        private async Task CloseAsync()
+        {
+            _name = string.Empty;
+            await IsOpenChanged.InvokeAsync(false);
+        }
+    }
+}

PointOfSale/Pos.Web/Components/Pages/Settings/CreateEmployeeDialog.razor.css

@@ -0,0 +1,132 @@
+.dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background: rgb(15 23 42 / 45%);
+}
+
+.employee-dialog {
+    width: min(100%, 650px);
+    overflow: hidden;
+    border-radius: 12px;
+    background: white;
+    color: #242424;
+    color-scheme: light;
+}
+
+.dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 28px 40px 18px;
+}
+
+.dialog-header h2 {
+    margin: 0;
+    font-size: 28px;
+}
+
+.close-button {
+    border: 0;
+    background: transparent;
+    color: #334155;
+    cursor: pointer;
+    font-size: 36px;
+    line-height: 1;
+}
+
+.dialog-content {
+    display: grid;
+    gap: 10px;
+    padding: 18px 40px 36px;
+}
+
+.dialog-content label {
+    color: #242424;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.name-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 48px;
+    padding: 0 14px;
+    border: 1px solid #8a8a8a;
+    border-radius: 6px;
+    outline: none;
+    background: #ffffff;
+    color: #242424;
+    font: inherit;
+}
+
+.name-input::placeholder {
+    color: #707070;
+}
+
+.name-input:focus {
+    border-color: #0f6cbd;
+    box-shadow: 0 0 0 1px #0f6cbd;
+}
+
+.dialog-content p {
+    margin: 6px 0 0;
+    color: #64748b;
+}
+
+.dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    padding: 24px 40px;
+    border-top: 1px solid #e2e8f0;
+}
+
+.cancel-button,
+.create-button {
+    min-height: 42px;
+    padding: 0 22px;
+    border-radius: 6px;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 500;
+}
+
+.cancel-button {
+    border: 1px solid #616161;
+    background: #ffffff;
+    color: #242424;
+}
+
+.cancel-button:hover {
+    background: #f5f5f5;
+}
+
+.create-button {
+    border: 1px solid #0f6cbd;
+    background: #0f6cbd;
+    color: #ffffff;
+}
+
+.create-button:hover:not(:disabled) {
+    background: #115ea3;
+}
+
+.create-button:disabled {
+    border-color: #d1d1d1;
+    background: #e0e0e0;
+    color: #707070;
+    cursor: not-allowed;
+}
+
+@media (max-width: 600px) {
+    .dialog-header,
+    .dialog-content,
+    .dialog-actions {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+}

PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor

@@ -11,14 +11,16 @@
     <div class="employees-header">
         <h1>Medarbejdere</h1>
 
-        <FluentButton Appearance="@ButtonAppearance.Primary">
+        <FluentButton Appearance="@ButtonAppearance.Primary"
+                      OnClick="@(() => _showCreateDialog = true)">
             Opret medarbejder
         </FluentButton>
     </div>
     @if (_isLoading)
     {
         <FluentProgressRing />
-    }else
+    }
+    else
     {
         <FluentDataGrid TGridItem="EmployeeEntity"
                         Items="@_employees.AsQueryable()"
@@ -37,4 +39,7 @@
             </TemplateColumn>
         </FluentDataGrid>
     }
-</div>
+</div>
+
+<CreateEmployeeDialog @bind-IsOpen="_showCreateDialog"
+                      EmployeeCreated="EmployeeCreated" />

PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor.cs

@@ -7,6 +7,8 @@ namespace Pos.Web.Components.Pages.Settings
     {
         private List<EmployeeEntity> _employees = [];
         private bool _isLoading = true;
+        private bool _showCreateDialog;
+
         protected override async Task OnInitializedAsync()
         {
             _employees = await EmployeeService.GetEmployeesAsync();
@@ -42,5 +44,10 @@ namespace Pos.Web.Components.Pages.Settings
         {
             public string Name { get; set; } = string.Empty;
         }
+
+        private void EmployeeCreated(EmployeeEntity employee)
+        {
+            _employees.Add(employee);
+        }
     }
 }