426 lines
16 KiB
Plaintext
426 lines
16 KiB
Plaintext
@page "/projects/{id:int}"
|
||
@using OnProfNext.Client.Services
|
||
@inject ProjectApiService ProjectService
|
||
@inject NavigationManager Nav
|
||
@inject OrderApiService OrderService
|
||
@inject UserApiService UserService
|
||
|
||
@using OnProfNext.Shared.Models.DTOs
|
||
|
||
<h3 class="mb-4 d-flex justify-content-between align-items-center">
|
||
<span class="text-primary">📁 Projekt-Details</span>
|
||
<button class="btn btn-outline-secondary" @onclick="GoBack">
|
||
<i class="bi bi-arrow-left"></i> Zurück
|
||
</button>
|
||
</h3>
|
||
|
||
@if (isLoading)
|
||
{
|
||
<div class="text-center mt-5">
|
||
<div class="spinner-border text-primary" role="status"></div>
|
||
<p class="mt-3 text-secondary">Projekt wird geladen...</p>
|
||
</div>
|
||
}
|
||
else if (errorMessage is not null)
|
||
{
|
||
<div class="alert alert-danger">@errorMessage</div>
|
||
}
|
||
else if (project is null)
|
||
{
|
||
<div class="alert alert-warning">Projekt nicht gefunden.</div>
|
||
}
|
||
else
|
||
{
|
||
<!-- HEADER -->
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<h3 class="text-primary mb-1">@project.ProjectName</h3>
|
||
<span class="badge bg-@GetStatusColor(project.Status)">
|
||
@project.Status
|
||
</span>
|
||
<p class="mt-3 text-muted">@project.Description</p>
|
||
</div>
|
||
<div class="text-end">
|
||
<small class="text-muted d-block">
|
||
<i class="bi bi-calendar"></i>
|
||
@project.StartDate.ToString("dd.MM.yyyy")
|
||
@if (project.EndDate is not null)
|
||
{
|
||
<span> – @project.EndDate?.ToString("dd.MM.yyyy")</span>
|
||
}
|
||
</small>
|
||
<small class="text-muted d-block mt-1">
|
||
<i class="bi bi-building"></i> Mandant: @project.MandantId
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
@if (project.ProjectManagers?.Any() == true)
|
||
{
|
||
<div class="mt-3">
|
||
<h6 class="fw-bold text-secondary">Projektleiter</h6>
|
||
@foreach (var manager in project.ProjectManagers)
|
||
{
|
||
<span class="badge bg-primary me-1">@manager.FullName</span>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TABS -->
|
||
<ul class="nav nav-tabs mb-3">
|
||
@foreach (var tab in tabs)
|
||
{
|
||
<li class="nav-item">
|
||
<button class="nav-link @(activeTab == tab.Key ? "active" : "")"
|
||
@onclick="() => SetActiveTab(tab.Key)">
|
||
<i class="@tab.Icon me-1"></i> @tab.Title
|
||
</button>
|
||
</li>
|
||
}
|
||
</ul>
|
||
|
||
<div class="tab-content p-3 border rounded bg-white shadow-sm">
|
||
@switch (activeTab)
|
||
{
|
||
case "overview":
|
||
<div>
|
||
<h5>Projektübersicht</h5>
|
||
<p>Hier kommt später ein Überblick über Fortschritt, KPIs und Aktivitäten.</p>
|
||
</div>
|
||
break;
|
||
|
||
case "tasks":
|
||
<div>
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h5 class="m-0">Aufträge</h5>
|
||
<button class="btn btn-success btn-sm" @onclick="ShowAddOrderModal">
|
||
<i class="bi bi-plus-circle"></i> Neuer Auftrag
|
||
</button>
|
||
</div>
|
||
|
||
@if (orders is null)
|
||
{
|
||
<div class="text-center text-muted mt-3">
|
||
<div class="spinner-border spinner-border-sm text-primary"></div>
|
||
<p>Aufträge werden geladen...</p>
|
||
</div>
|
||
}
|
||
else if (!orders.Any())
|
||
{
|
||
<div class="alert alert-info text-center">Keine Aufträge vorhanden.</div>
|
||
}
|
||
else
|
||
{
|
||
<table class="table table-hover align-middle">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th>Nr.</th>
|
||
<th>Titel</th>
|
||
<th>Status</th>
|
||
<th>Plan (h)</th>
|
||
<th>Ist (h)</th>
|
||
<th>Mitarbeiter</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach (var o in orders)
|
||
{
|
||
<tr>
|
||
<td>@o.Auftragsnummer</td>
|
||
<td>@o.Titel</td>
|
||
<td>
|
||
<span class="badge bg-@GetStatusColor(o.Status)">@o.Status</span>
|
||
</td>
|
||
<td>@o.Planstunden</td>
|
||
<td>@o.Iststunden</td>
|
||
<td>
|
||
<!-- Mitarbeiter-Zuordnung (später) -->
|
||
<span class="text-muted small">noch offen</span>
|
||
</td>
|
||
<td class="text-end">
|
||
<button class="btn btn-outline-danger btn-sm" @onclick="() => DeleteOrder(o.Id)">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
}
|
||
</div>
|
||
|
||
@if (showAddOrderModal)
|
||
{
|
||
<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
|
||
<div class="modal-dialog modal-dialog-centered" @onclick:stopPropagation>
|
||
<div class="modal-content border-0 shadow">
|
||
<div class="modal-header bg-primary text-white">
|
||
<h5 class="modal-title">Neuen Auftrag anlegen</h5>
|
||
<button type="button" class="btn-close btn-close-white" @onclick="CloseAddOrderModal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<EditForm Model="newOrder" OnValidSubmit="CreateOrderAsync">
|
||
<DataAnnotationsValidator />
|
||
<ValidationSummary />
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Auftragsnummer</label>
|
||
<InputText class="form-control" @bind-Value="newOrder.Auftragsnummer" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Titel</label>
|
||
<InputText class="form-control" @bind-Value="newOrder.Titel" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Planstunden</label>
|
||
<InputNumber class="form-control" @bind-Value="newOrder.Planstunden" />
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Status</label>
|
||
<InputSelect class="form-select" @bind-Value="newOrder.Status">
|
||
<option value="Geplant">Geplant</option>
|
||
<option value="In Arbeit">In Arbeit</option>
|
||
<option value="Abgeschlossen">Abgeschlossen</option>
|
||
</InputSelect>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Mitarbeiter zuweisen</label>
|
||
<InputText class="form-control mb-2" @bind-Value="searchText" placeholder="Mitarbeiter suchen..." />
|
||
<div class="list-group" style="max-height: 150px; overflow-y: auto;">
|
||
@foreach (var u in FilteredUsers)
|
||
{
|
||
<label class="list-group-item small">
|
||
<input type="checkbox"
|
||
value="@u.Id"
|
||
checked="@(selectedUserIds.Contains(u.Id))"
|
||
@onchange="(e => ToggleUser(u.Id, (bool)e.Value!))" />
|
||
@u.FirstName @u.LastName (@u.Username)
|
||
</label>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-end">
|
||
<button type="button" class="btn btn-secondary me-2" @onclick="CloseAddOrderModal">Abbrechen</button>
|
||
<button type="submit" class="btn btn-success">Speichern</button>
|
||
</div>
|
||
</EditForm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
break;
|
||
|
||
|
||
case "bookings":
|
||
<div>
|
||
<h5>Buchungen</h5>
|
||
<p>Zeiterfassungen und Plan/Ist-Vergleiche werden hier erscheinen.</p>
|
||
</div>
|
||
break;
|
||
|
||
case "members":
|
||
<div>
|
||
<h5>Mitarbeiter</h5>
|
||
<p>Teamzuordnung, Rollenverwaltung, People Picker.</p>
|
||
</div>
|
||
break;
|
||
|
||
case "documents":
|
||
<div>
|
||
<h5>Dokumente</h5>
|
||
<p>Dateiupload, SharePoint-Verknüpfung, Projektreports.</p>
|
||
</div>
|
||
break;
|
||
|
||
case "comments":
|
||
<div>
|
||
<h5>Kommentare</h5>
|
||
<p>Chat/Kommentarbereich für Projektkommunikation.</p>
|
||
</div>
|
||
break;
|
||
}
|
||
</div>
|
||
}
|
||
|
||
@code {
|
||
[Parameter] public int id { get; set; }
|
||
|
||
private ProjectDto? project;
|
||
private string? errorMessage;
|
||
private bool isLoading = true;
|
||
|
||
// Tabs
|
||
private string activeTab = "overview";
|
||
private readonly List<(string Key, string Title, string Icon)> tabs = new()
|
||
{
|
||
("overview", "Übersicht", "bi bi-house"),
|
||
("tasks", "Aufträge", "bi bi-list-task"),
|
||
("bookings", "Buchungen", "bi bi-clock-history"),
|
||
("members", "Mitarbeiter", "bi bi-people"),
|
||
("documents", "Dokumente", "bi bi-folder2-open"),
|
||
("comments", "Kommentare", "bi bi-chat-left-text")
|
||
};
|
||
|
||
protected override async Task OnInitializedAsync()
|
||
{
|
||
await LoadProjectAsync();
|
||
|
||
var result = await OrderService.GetOrdersByProjectAsync(1);
|
||
Console.WriteLine($"Orders loaded: {result.Data?.Count}");
|
||
|
||
}
|
||
|
||
private async Task LoadProjectAsync()
|
||
{
|
||
try
|
||
{
|
||
var result = await ProjectService.GetProjectAsync(id);
|
||
if (!result.Success)
|
||
{
|
||
errorMessage = result.Error;
|
||
return;
|
||
}
|
||
project = result.Data;
|
||
}
|
||
catch (Exception ex)
|
||
{
|
||
errorMessage = $"Fehler beim Laden: {ex.Message}";
|
||
}
|
||
finally
|
||
{
|
||
isLoading = false;
|
||
}
|
||
}
|
||
|
||
private string GetStatusColor(string? status) => status switch
|
||
{
|
||
"Geplant" => "secondary",
|
||
"In Arbeit" => "info",
|
||
"Abgeschlossen" => "success",
|
||
_ => "light"
|
||
};
|
||
|
||
private void SetActiveTab(string key) => activeTab = key;
|
||
private void GoBack() => Nav.NavigateTo("/projects");
|
||
|
||
|
||
|
||
private List<OrderDto>? orders;
|
||
private bool showAddOrderModal = false;
|
||
private OrderDto newOrder = new();
|
||
private List<UserDto> users = new();
|
||
private string searchText = "";
|
||
private List<int> selectedUserIds = new();
|
||
|
||
private IEnumerable<UserDto> FilteredUsers => string.IsNullOrWhiteSpace(searchText)
|
||
? users
|
||
: users.Where(u => $"{u.FirstName} {u.LastName} {u.Username}".Contains(searchText, StringComparison.OrdinalIgnoreCase));
|
||
|
||
private void ToggleUser(int id, bool selected)
|
||
{
|
||
if (selected)
|
||
{
|
||
selectedUserIds.Add(id);
|
||
}
|
||
else
|
||
{
|
||
selectedUserIds.Remove(id);
|
||
}
|
||
}
|
||
|
||
private void ShowAddOrderModal()
|
||
{
|
||
newOrder = new OrderDto
|
||
{
|
||
ProjectId = project!.Id,
|
||
Status = "Geplant",
|
||
MandantId = project.MandantId
|
||
};
|
||
|
||
selectedUserIds.Clear();
|
||
searchText = "";
|
||
showAddOrderModal = true;
|
||
}
|
||
|
||
private void CloseAddOrderModal() => showAddOrderModal = false;
|
||
|
||
private async Task LoadOrderAsync()
|
||
{
|
||
var result = await OrderService.GetOrdersByProjectAsync(project!.Id);
|
||
if(result.Success)
|
||
{
|
||
orders = result.Data;
|
||
}
|
||
else
|
||
{
|
||
errorMessage = result.Error;
|
||
}
|
||
}
|
||
|
||
private async Task CreateOrderAsync()
|
||
{
|
||
var result = await OrderService.CreateOrderAsync(newOrder);
|
||
if(!result.Success)
|
||
{
|
||
errorMessage = result.Error;
|
||
return;
|
||
}
|
||
|
||
CloseAddOrderModal();
|
||
await LoadOrderAsync();
|
||
}
|
||
|
||
private async Task DeleteOrder(int id)
|
||
{
|
||
var result = await OrderService.DeleteOrderAsync(id);
|
||
if (result.Success)
|
||
{
|
||
await LoadOrderAsync();
|
||
}
|
||
else
|
||
{
|
||
errorMessage = result.Error;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
<style>
|
||
.nav-tabs .nav-link {
|
||
color: #495057;
|
||
border: none;
|
||
border-bottom: 3px solid transparent;
|
||
}
|
||
|
||
.nav-tabs .nav-link.active {
|
||
color: #0d6efd;
|
||
font-weight: 600;
|
||
border-color: #0d6efd;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.tab-content {
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
.modal-content {
|
||
border-radius: 0.75rem;
|
||
}
|
||
|
||
.list-group-item {
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
</style>
|