Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
PlanTempusApp/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml

134 lines
9.5 KiB
Text
Raw Normal View History

Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
@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">
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
<button type="button" aria-expanded="false">
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
<swp-select-value>@Model.Category</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
<swp-select-dropdown>
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
<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>
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
</swp-select-dropdown>
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelCalendarColor</swp-edit-label>
<swp-select data-value="@Model.CalendarColor">
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
<button type="button" aria-expanded="false">
<swp-color-dot class="is-@Model.CalendarColor"></swp-color-dot>
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
<swp-select-value>@Model.CalendarColorLabel</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
<swp-select-dropdown>
<swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")"><swp-color-dot class="is-red"></swp-color-dot><span>Rød</span></swp-select-option>
<swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")"><swp-color-dot class="is-pink"></swp-color-dot><span>Pink</span></swp-select-option>
<swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")"><swp-color-dot class="is-purple"></swp-color-dot><span>Lilla</span></swp-select-option>
<swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")"><swp-color-dot class="is-deep-purple"></swp-color-dot><span>Mørk lilla</span></swp-select-option>
<swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")"><swp-color-dot class="is-indigo"></swp-color-dot><span>Indigo</span></swp-select-option>
<swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")"><swp-color-dot class="is-blue"></swp-color-dot><span>Blå</span></swp-select-option>
<swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")"><swp-color-dot class="is-light-blue"></swp-color-dot><span>Lyseblå</span></swp-select-option>
<swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")"><swp-color-dot class="is-cyan"></swp-color-dot><span>Cyan</span></swp-select-option>
<swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")"><swp-color-dot class="is-teal"></swp-color-dot><span>Teal</span></swp-select-option>
<swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")"><swp-color-dot class="is-green"></swp-color-dot><span>Grøn</span></swp-select-option>
<swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")"><swp-color-dot class="is-light-green"></swp-color-dot><span>Lysegrøn</span></swp-select-option>
<swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")"><swp-color-dot class="is-lime"></swp-color-dot><span>Lime</span></swp-select-option>
<swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")"><swp-color-dot class="is-yellow"></swp-color-dot><span>Gul</span></swp-select-option>
<swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")"><swp-color-dot class="is-amber"></swp-color-dot><span>Amber</span></swp-select-option>
<swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")"><swp-color-dot class="is-orange"></swp-color-dot><span>Orange</span></swp-select-option>
<swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")"><swp-color-dot class="is-deep-orange"></swp-color-dot><span>Mørk orange</span></swp-select-option>
</swp-select-dropdown>
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
</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>
Enhance service detail UI with improved select and color controls Refactors select dropdown functionality to use custom implementation Adds color dot support for color selection Improves keyboard navigation and interaction for select dropdowns Modernizes UI components with more flexible and interactive controls
2026-01-16 23:25:05 +01:00
<swp-add-button>
<i class="ph ph-upload-simple"></i>
@Model.LabelUploadImage
</swp-add-button>
Enhances Services module with detail view and interactions 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
2026-01-16 22:03:22 +01:00
</swp-card>
</div>
</swp-detail-grid>
Reference in a new issue Copy permalink