DragnDrop + Löschfunktion
This commit is contained in:
@@ -63,7 +63,9 @@
|
||||
<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6" Color="Color.Primary">
|
||||
|
||||
<MudTabPanel Icon="@Icons.Material.Filled.ViewWeek" Text="Wochenansicht">
|
||||
<MudDropContainer @ref="_dropContainer" T="DropItem" Items="_items" ItemsSelector="@((item, dropzone) => item.Status == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
|
||||
<MudDropContainer @ref="_dropContainer" T="DropItem" Items="_items"
|
||||
ItemsSelector="@((item, dropzone) => item.Status == dropzone && (dropzone != "Backlog" || string.IsNullOrWhiteSpace(_backlogSearchString) || item.Project.Contains(_backlogSearchString, StringComparison.OrdinalIgnoreCase) || item.Task.Contains(_backlogSearchString, StringComparison.OrdinalIgnoreCase)))"
|
||||
ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
|
||||
<ChildContent>
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<MudButtonGroup Color="Color.Default" Variant="Variant.Outlined">
|
||||
@@ -71,37 +73,49 @@
|
||||
<MudButton>KW 12</MudButton>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ChevronRight" />
|
||||
</MudButtonGroup>
|
||||
|
||||
<div class="d-flex gap-4">
|
||||
<MudPaper Variant="Variant.Outlined" Class="pa-2 d-flex gap-2 align-center" Style="background-color: var(--mud-palette-background-grey);">
|
||||
<MudText Typo="Typo.caption" Class="px-2"><b>Projekt-Stapel:</b></MudText>
|
||||
<MudDropZone T="DropItem" Identifier="Backlog" Class="d-flex gap-2" />
|
||||
</MudPaper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 overflow-x-auto pb-4">
|
||||
@foreach (var day in _weekDays)
|
||||
{
|
||||
<div class="flex-1" style="min-width: 180px;">
|
||||
<MudPaper Elevation="0" Class="pa-3 mb-2" Style="@(day.IsToday ? "background: var(--mud-palette-primary-hover);" : "background: transparent;")">
|
||||
<MudText Typo="Typo.subtitle2" Align="Align.Center"><b>@day.Name</b></MudText>
|
||||
<MudText Typo="Typo.caption" Align="Align.Center" Class="d-block">@day.Date.ToShortDateString()</MudText>
|
||||
</MudPaper>
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="9">
|
||||
<div class="d-flex gap-2 overflow-x-auto pb-4">
|
||||
@foreach (var day in _weekDays)
|
||||
{
|
||||
<div class="flex-1" style="min-width: 180px;">
|
||||
<MudPaper Elevation="0" Class="pa-3 mb-2" Style="@(day.IsToday ? "background: var(--mud-palette-primary-hover);" : "background: transparent;")">
|
||||
<MudText Typo="Typo.subtitle2" Align="Align.Center"><b>@day.Name</b></MudText>
|
||||
<MudText Typo="Typo.caption" Align="Align.Center" Class="d-block">@day.Date.ToShortDateString()</MudText>
|
||||
</MudPaper>
|
||||
|
||||
<MudDropZone T="DropItem" Identifier="@day.Name" Class="rounded-lg d-flex flex-column gap-2"
|
||||
Style="min-height: 400px; border: 2px dashed var(--mud-palette-divider); padding: 8px;">
|
||||
</MudDropZone>
|
||||
<MudDropZone T="DropItem" Identifier="@day.Name" Class="rounded-lg d-flex flex-column gap-2"
|
||||
Style="min-height: 400px; border: 2px dashed var(--mud-palette-divider); padding: 8px;">
|
||||
</MudDropZone>
|
||||
|
||||
<div class="mt-2 d-flex justify-center">
|
||||
<MudText Typo="Typo.caption" Color="Color.Secondary">Summe: @(_items.Where(i => i.Status == day.Name).Sum(i => i.Hours))h</MudText>
|
||||
</div>
|
||||
<div class="mt-2 d-flex justify-center">
|
||||
<MudText Typo="Typo.caption" Color="Color.Secondary">Summe: @(_items.Where(i => i.Status == day.Name).Sum(i => i.Hours))h</MudText>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="3">
|
||||
<MudPaper Elevation="0" Class="pa-4 rounded-lg d-flex flex-column" Style="border: 2px solid var(--mud-palette-divider); height: 100%; min-height: 450px; background-color: var(--mud-palette-background-grey);">
|
||||
<MudText Typo="Typo.h6" Class="mb-4">Projekt-Stapel</MudText>
|
||||
|
||||
<MudTextField T="string" Value="@_backlogSearchString" ValueChanged="OnBacklogSearchChanged"
|
||||
Placeholder="Suchen..." Adornment="Adornment.Start" Immediate="true"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Small"
|
||||
Class="mb-4 mt-0 bg-white" Margin="Margin.Dense" Variant="Variant.Outlined"></MudTextField>
|
||||
|
||||
<div class="flex-grow-1 overflow-y-auto pr-2" style="max-height: 400px;">
|
||||
<MudDropZone T="DropItem" Identifier="Backlog" Class="d-flex flex-column gap-3" Style="min-height: 100%" />
|
||||
</div>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</ChildContent>
|
||||
<ItemRenderer>
|
||||
<MudPaper Elevation="2" Class="pa-3 rounded-lg border-l-4" Style="@($"border-left: 6px solid {context.Color}; cursor: grab; width: 160px; position: relative;")">
|
||||
<MudPaper Elevation="2" Class="pa-3 rounded-lg border-l-4" Style="@($"border-left: 6px solid {context.Color}; cursor: grab; width: 100%; position: relative;")">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex justify-space-between align-start">
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary" Style="font-size: 0.7rem">@context.Project</MudText>
|
||||
@@ -124,26 +138,53 @@
|
||||
</MudTabPanel>
|
||||
|
||||
<MudTabPanel Icon="@Icons.Material.Filled.List" Text="Alle Buchungen">
|
||||
<MudDataGrid T="BookingPlaceholder" Items="@_dummyBookings" Hover="true" Bordered="false" Striped="true" QuickFilter="@_quickFilter">
|
||||
<ToolBarContent>
|
||||
<MudText Typo="Typo.h6">Verlauf</MudText>
|
||||
<MudSpacer />
|
||||
<MudTextField @bind-Value="_searchString" Placeholder="Suchen..." Adornment="Adornment.Start" Immediate="true"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
|
||||
</ToolBarContent>
|
||||
<Columns>
|
||||
<PropertyColumn Property="x => x.Date" Title="Datum" Format="dd.MM.yyyy" />
|
||||
<PropertyColumn Property="x => x.Project" Title="Auftrag" />
|
||||
<PropertyColumn Property="x => x.Task" Title="Tätigkeit" />
|
||||
<PropertyColumn Property="x => x.Hours" Title="Stunden" />
|
||||
<TemplateColumn CellClass="d-flex justify-end">
|
||||
<CellTemplate>
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" Color="Color.Default" />
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Delete" Color="Color.Error" />
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
</Columns>
|
||||
</MudDataGrid>
|
||||
<MudPaper Elevation="0" Class="pa-4 mt-4" Style="border: 1px solid var(--mud-palette-divider); border-radius: 8px;">
|
||||
<MudDataGrid T="BookingPlaceholder" Items="@_dummyBookings" Hover="true" Elevation="0" Striped="true" Dense="true" QuickFilter="@_quickFilter">
|
||||
<ToolBarContent>
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary" Class="fw-bold mb-2"><b>Buchungsverlauf</b></MudText>
|
||||
<MudSpacer />
|
||||
<MudTextField @bind-Value="_searchString" Placeholder="Suchen..." Adornment="Adornment.Start" Immediate="true"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"
|
||||
Variant="Variant.Outlined" Margin="Margin.Dense" Style="max-width: 300px;"></MudTextField>
|
||||
</ToolBarContent>
|
||||
<Columns>
|
||||
<TemplateColumn T="BookingPlaceholder" Title="Datum" SortBy="@(x => x.Date)">
|
||||
<CellTemplate>
|
||||
<div class="d-flex align-center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.CalendarMonth" Size="Size.Small" Class="mr-2 mud-text-secondary" />
|
||||
<MudText Typo="Typo.body2"><b>@context.Item.Date.ToString("dd.MM.yyyy")</b></MudText>
|
||||
</div>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
<TemplateColumn T="BookingPlaceholder" Title="Auftrag" SortBy="@(x => x.Project)">
|
||||
<CellTemplate>
|
||||
<MudChip T="string" Color="Color.Primary" Size="Size.Small" Variant="Variant.Text">@context.Item.Project</MudChip>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
<PropertyColumn Property="x => x.Task" Title="Tätigkeit" />
|
||||
<TemplateColumn T="BookingPlaceholder" Title="Stunden" SortBy="@(x => x.Hours)">
|
||||
<CellTemplate>
|
||||
<div class="d-flex align-center">
|
||||
<MudText Typo="Typo.body2"><b>@context.Item.Hours</b> <small class="mud-text-secondary ml-1">h</small></MudText>
|
||||
</div>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
<TemplateColumn T="BookingPlaceholder" CellClass="d-flex justify-end">
|
||||
<CellTemplate>
|
||||
<MudTooltip Text="Bearbeiten" Delay="400">
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Edit" Color="Color.Primary" Class="mr-2" />
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Löschen" Delay="400">
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Delete" Color="Color.Error" />
|
||||
</MudTooltip>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
</Columns>
|
||||
<PagerContent>
|
||||
<MudDataGridPager T="BookingPlaceholder" RowsPerPageString="Einträge pro Seite:" />
|
||||
</PagerContent>
|
||||
</MudDataGrid>
|
||||
</MudPaper>
|
||||
</MudTabPanel>
|
||||
</MudTabs>
|
||||
</MudItem>
|
||||
@@ -155,6 +196,7 @@
|
||||
@code {
|
||||
private MudDropContainer<DropItem> _dropContainer;
|
||||
private string _searchString = "";
|
||||
private string _backlogSearchString = "";
|
||||
private List<DayInfo> _weekDays = new();
|
||||
private List<DropItem> _items = new();
|
||||
|
||||
@@ -196,6 +238,12 @@
|
||||
|
||||
}
|
||||
|
||||
private void OnBacklogSearchChanged(string newValue)
|
||||
{
|
||||
_backlogSearchString = newValue;
|
||||
_dropContainer.Refresh();
|
||||
}
|
||||
|
||||
private void ItemUpdated(MudItemDropInfo<DropItem> dropInfo)
|
||||
{
|
||||
if (dropInfo.DropzoneIdentifier != "Backlog" && dropInfo.Item.Status == "Backlog")
|
||||
|
||||
Reference in New Issue
Block a user