120367acbb
Adds comprehensive service detail view with multiple tabs and dynamic interactions Implements client-side navigation between service list and detail views Introduces mock service data catalog for flexible component rendering Extends localization support for new service detail screens Improves user experience by adding edit capabilities and smooth view transitions
129 lines
8.4 KiB
Text
129 lines
8.4 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailGeneralViewModel
|
|
|
|
<swp-detail-grid>
|
|
<!-- Left column -->
|
|
<div>
|
|
<!-- Basic Info Card -->
|
|
<swp-card>
|
|
<swp-section-label>@Model.LabelBasic</swp-section-label>
|
|
<swp-edit-section>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelServiceName</swp-edit-label>
|
|
<input type="text" id="servicename" value="@Model.Name">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelCategory</swp-edit-label>
|
|
<swp-select data-value="@Model.CategoryValue">
|
|
<button type="button" popovertarget="category-select" aria-expanded="false">
|
|
<swp-select-value>@Model.Category</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<div popover id="category-select">
|
|
<swp-select-option data-value="kombi" class="@(Model.CategoryValue == "kombi" ? "selected" : "")">Kombi-behandlinger</swp-select-option>
|
|
<swp-select-option data-value="klip" class="@(Model.CategoryValue == "klip" ? "selected" : "")">Klip</swp-select-option>
|
|
<swp-select-option data-value="farve" class="@(Model.CategoryValue == "farve" ? "selected" : "")">Farve</swp-select-option>
|
|
<swp-select-option data-value="behandlinger" class="@(Model.CategoryValue == "behandlinger" ? "selected" : "")">Behandlinger</swp-select-option>
|
|
<swp-select-option data-value="styling" class="@(Model.CategoryValue == "styling" ? "selected" : "")">Styling</swp-select-option>
|
|
</div>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelCalendarColor</swp-edit-label>
|
|
<swp-select data-value="@Model.CalendarColor">
|
|
<button type="button" popovertarget="color-select" aria-expanded="false">
|
|
<swp-select-value>@Model.CalendarColorLabel</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<div popover id="color-select">
|
|
<swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")">Rød</swp-select-option>
|
|
<swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")">Pink</swp-select-option>
|
|
<swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")">Lilla</swp-select-option>
|
|
<swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")">Mørk lilla</swp-select-option>
|
|
<swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")">Indigo</swp-select-option>
|
|
<swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")">Blå</swp-select-option>
|
|
<swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")">Lyseblå</swp-select-option>
|
|
<swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")">Cyan</swp-select-option>
|
|
<swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")">Teal</swp-select-option>
|
|
<swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")">Grøn</swp-select-option>
|
|
<swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")">Lysegrøn</swp-select-option>
|
|
<swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")">Lime</swp-select-option>
|
|
<swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")">Gul</swp-select-option>
|
|
<swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")">Amber</swp-select-option>
|
|
<swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")">Orange</swp-select-option>
|
|
<swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")">Mørk orange</swp-select-option>
|
|
</div>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelIsActive</swp-edit-label>
|
|
<swp-toggle-slider data-value="@(Model.IsActive ? "yes" : "no")">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
|
|
<swp-section-label class="spaced">@Model.LabelInternalNotes</swp-section-label>
|
|
<textarea id="internalnotes" rows="3">@Model.InternalNotes</textarea>
|
|
</swp-card>
|
|
|
|
<!-- Booking Type Card -->
|
|
<swp-card>
|
|
<swp-section-label>@Model.LabelBookingType</swp-section-label>
|
|
<swp-toggle-row>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelCanBookAsMain</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelCanBookAsMainDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.CanBookAsMain ? "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.LabelCanBookAsAddon</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelCanBookAsAddonDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.CanBookAsAddon ? "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>
|
|
</div>
|
|
|
|
<!-- Right column -->
|
|
<div>
|
|
<!-- Online Booking Card -->
|
|
<swp-card>
|
|
<swp-section-label>@Model.LabelOnlineBooking</swp-section-label>
|
|
<swp-toggle-row>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelShowInOnlineBookingDesc</swp-toggle-description>
|
|
</div>
|
|
<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>
|
|
<div>
|
|
<swp-toggle-label>@Model.LabelIsFeatured</swp-toggle-label>
|
|
<swp-toggle-description>@Model.LabelIsFeaturedDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="@(Model.IsFeatured ? "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-section-label class="spaced">@Model.LabelDescription</swp-section-label>
|
|
<textarea id="description" rows="4">@Model.Description</textarea>
|
|
|
|
<swp-section-label class="spaced">@Model.LabelImage</swp-section-label>
|
|
<swp-btn class="secondary">@Model.LabelUploadImage</swp-btn>
|
|
</swp-card>
|
|
</div>
|
|
</swp-detail-grid>
|