Improves customer page UI with interactive elements: - Adds quick view sidebar button for each customer row - Implements row-level navigation to customer details - Corrects Danish spelling and typography - Refactors data table layout for better usability Modernizes customer interaction by enabling direct page navigation and quick information access
185 lines
10 KiB
Text
185 lines
10 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailRulesViewModel
|
|
|
|
<swp-detail-grid>
|
|
<!-- Column 1 -->
|
|
<swp-card-column>
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelBookingRules</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-edit-section>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelMinNotice</swp-edit-label>
|
|
<swp-select data-value="@Model.MinNotice">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@GetNoticeLabel(Model.MinNotice)</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.MinNotice == "0" ? "selected" : "")">Ingen</swp-select-option>
|
|
<swp-select-option data-value="2" class="@(Model.MinNotice == "2" ? "selected" : "")">2 timer</swp-select-option>
|
|
<swp-select-option data-value="4" class="@(Model.MinNotice == "4" ? "selected" : "")">4 timer</swp-select-option>
|
|
<swp-select-option data-value="24" class="@(Model.MinNotice == "24" ? "selected" : "")">24 timer</swp-select-option>
|
|
<swp-select-option data-value="48" class="@(Model.MinNotice == "48" ? "selected" : "")">48 timer</swp-select-option>
|
|
<swp-select-option data-value="168" class="@(Model.MinNotice == "168" ? "selected" : "")">1 uge</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelMaxAdvanceBooking</swp-edit-label>
|
|
<swp-select data-value="@Model.MaxAdvanceBooking">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@GetAdvanceBookingLabel(Model.MaxAdvanceBooking)</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="1" class="@(Model.MaxAdvanceBooking == "1" ? "selected" : "")">1 måned</swp-select-option>
|
|
<swp-select-option data-value="2" class="@(Model.MaxAdvanceBooking == "2" ? "selected" : "")">2 måneder</swp-select-option>
|
|
<swp-select-option data-value="3" class="@(Model.MaxAdvanceBooking == "3" ? "selected" : "")">3 måneder</swp-select-option>
|
|
<swp-select-option data-value="6" class="@(Model.MaxAdvanceBooking == "6" ? "selected" : "")">6 måneder</swp-select-option>
|
|
<swp-select-option data-value="12" class="@(Model.MaxAdvanceBooking == "12" ? "selected" : "")">1 år</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelCancellationDeadline</swp-edit-label>
|
|
<swp-select data-value="@Model.CancellationDeadline">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@GetNoticeLabel(Model.CancellationDeadline)</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.CancellationDeadline == "0" ? "selected" : "")">Ingen</swp-select-option>
|
|
<swp-select-option data-value="2" class="@(Model.CancellationDeadline == "2" ? "selected" : "")">2 timer</swp-select-option>
|
|
<swp-select-option data-value="4" class="@(Model.CancellationDeadline == "4" ? "selected" : "")">4 timer</swp-select-option>
|
|
<swp-select-option data-value="24" class="@(Model.CancellationDeadline == "24" ? "selected" : "")">24 timer</swp-select-option>
|
|
<swp-select-option data-value="48" class="@(Model.CancellationDeadline == "48" ? "selected" : "")">48 timer</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelNoShowFee</swp-edit-label>
|
|
<swp-select data-value="@Model.NoShowFee">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@GetNoShowFeeLabel(Model.NoShowFee)</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.NoShowFee == "0" ? "selected" : "")">Intet</swp-select-option>
|
|
<swp-select-option data-value="25" class="@(Model.NoShowFee == "25" ? "selected" : "")">25% af pris</swp-select-option>
|
|
<swp-select-option data-value="50" class="@(Model.NoShowFee == "50" ? "selected" : "")">50% af pris</swp-select-option>
|
|
<swp-select-option data-value="100" class="@(Model.NoShowFee == "100" ? "selected" : "")">Fuld pris</swp-select-option>
|
|
<swp-select-option data-value="fixed" class="@(Model.NoShowFee == "fixed" ? "selected" : "")">Fast beløb</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelOnlineBookingSettings</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-toggle-row>
|
|
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
|
|
<swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
<swp-toggle-row>
|
|
<swp-toggle-label>@Model.LabelAllowEmployeeSelection</swp-toggle-label>
|
|
<swp-toggle-slider data-value="@(Model.AllowEmployeeSelection ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
<swp-toggle-row>
|
|
<swp-toggle-label>@Model.LabelShowPrice</swp-toggle-label>
|
|
<swp-toggle-slider data-value="@(Model.ShowPrice ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
<swp-toggle-row>
|
|
<swp-toggle-label>@Model.LabelShowDuration</swp-toggle-label>
|
|
<swp-toggle-slider data-value="@(Model.ShowDuration ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
</swp-card>
|
|
</swp-card-column>
|
|
|
|
<!-- Column 2 -->
|
|
<swp-card-column>
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelRequirements</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-toggle-row>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelRequiresConsultation</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelRequiresConsultationDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.RequiresConsultation ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
<swp-toggle-row>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelRequiresPatchTest</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelRequiresPatchTestDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.RequiresPatchTest ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
<swp-toggle-row>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelAgeRestriction</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelAgeRestrictionDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.AgeRestriction ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
</swp-card>
|
|
</swp-card-column>
|
|
</swp-detail-grid>
|
|
|
|
@functions {
|
|
string GetNoticeLabel(string hours)
|
|
{
|
|
return hours switch
|
|
{
|
|
"0" => "Ingen",
|
|
"168" => "1 uge",
|
|
_ => $"{hours} timer"
|
|
};
|
|
}
|
|
|
|
string GetAdvanceBookingLabel(string months)
|
|
{
|
|
return months switch
|
|
{
|
|
"1" => "1 måned",
|
|
"12" => "1 år",
|
|
_ => $"{months} måneder"
|
|
};
|
|
}
|
|
|
|
string GetNoShowFeeLabel(string fee)
|
|
{
|
|
return fee switch
|
|
{
|
|
"0" => "Intet",
|
|
"100" => "Fuld pris",
|
|
"fixed" => "Fast beløb",
|
|
_ => $"{fee}% af pris"
|
|
};
|
|
}
|
|
}
|