c1d2df9327
Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title` Improves component consistency across multiple features: - Adds structured card headers - Introduces more semantic HTML elements - Enhances layout and readability of card components Updates CSS and component styles to support new structure
68 lines
3.6 KiB
Text
68 lines
3.6 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailEmployeesViewModel
|
||
|
||
<swp-detail-grid>
|
||
<swp-card-column>
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>@Model.LabelEmployeesForService</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-selectable-list>
|
||
@foreach (var employee in Model.Employees)
|
||
{
|
||
<swp-selectable-item class="@(employee.Selected ? "selected" : "") @(employee.Warning != null ? "disabled" : "")">
|
||
<swp-selectable-checkbox>
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||
</swp-selectable-checkbox>
|
||
<swp-avatar class="@employee.LevelCssClass">@employee.Initials</swp-avatar>
|
||
<swp-selectable-info>
|
||
<swp-selectable-name>
|
||
@employee.Name
|
||
@if (employee.Warning != null)
|
||
{
|
||
<swp-selectable-warning>@employee.Warning</swp-selectable-warning>
|
||
}
|
||
</swp-selectable-name>
|
||
<swp-tag class="@employee.LevelCssClass">@employee.Level</swp-tag>
|
||
</swp-selectable-info>
|
||
<swp-selectable-override>
|
||
@Model.LabelDuration: <swp-selectable-override-value>@employee.OverrideValue</swp-selectable-override-value>
|
||
</swp-selectable-override>
|
||
</swp-selectable-item>
|
||
}
|
||
</swp-selectable-list>
|
||
|
||
<swp-see-all>@Model.LabelSelectAll</swp-see-all>
|
||
</swp-card>
|
||
</swp-card-column>
|
||
|
||
<swp-card-column>
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>@Model.LabelAvailability</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-availability-list>
|
||
@foreach (var day in Model.Availability)
|
||
{
|
||
<swp-availability-row data-enabled="@(day.Enabled ? "true" : "false")">
|
||
<swp-availability-day>@day.Day</swp-availability-day>
|
||
<swp-toggle-slider data-value="@(day.Enabled ? "yes" : "no")">
|
||
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
||
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-availability-time>
|
||
<swp-time-range>
|
||
<swp-time-range-slider>
|
||
<swp-time-range-track></swp-time-range-track>
|
||
<swp-time-range-fill></swp-time-range-fill>
|
||
<input type="range" class="range-start" min="0" max="60" value="8" step="1" @(day.Enabled ? "" : "disabled")>
|
||
<input type="range" class="range-end" min="0" max="60" value="48" step="1" @(day.Enabled ? "" : "disabled")>
|
||
</swp-time-range-slider>
|
||
<swp-time-range-label>@day.StartTime – @day.EndTime</swp-time-range-label>
|
||
</swp-time-range>
|
||
</swp-availability-time>
|
||
</swp-availability-row>
|
||
}
|
||
</swp-availability-list>
|
||
</swp-card>
|
||
</swp-card-column>
|
||
</swp-detail-grid>
|