Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances Services module with detail view and interactions

Browse source 
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
This commit is contained in:
Janus C. H. Knudsen 2026-01-16 22:03:22 +01:00
parent fad5e46dfb
commit 120367acbb
22 changed files with 1780 additions and 597 deletions
Download patch file Download diff file Expand all files Collapse all files

129
PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml Normal file
View file

@ -0,0 +1,129 @@
@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>