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
This commit is contained in:
parent
fad5e46dfb
commit
120367acbb
22 changed files with 1780 additions and 597 deletions
|
|
@ -5,10 +5,16 @@
|
|||
<i class="ph ph-magnifying-glass"></i>
|
||||
<input type="text" placeholder="@Model.SearchPlaceholder" />
|
||||
</swp-search-input>
|
||||
<swp-btn class="primary">
|
||||
<i class="ph ph-plus"></i>
|
||||
@Model.CreateButtonText
|
||||
</swp-btn>
|
||||
<swp-btn-group>
|
||||
<swp-btn class="secondary" data-drawer-trigger="category-drawer">
|
||||
<i class="ph ph-folders"></i>
|
||||
@Model.CreateCategoryButtonText
|
||||
</swp-btn>
|
||||
<swp-btn class="primary">
|
||||
<i class="ph ph-plus"></i>
|
||||
@Model.CreateButtonText
|
||||
</swp-btn>
|
||||
</swp-btn-group>
|
||||
</swp-services-header>
|
||||
|
||||
<swp-card class="services-list">
|
||||
|
|
@ -25,3 +31,56 @@
|
|||
}
|
||||
</swp-data-table>
|
||||
</swp-card>
|
||||
|
||||
<!-- Category Drawer -->
|
||||
<div id="category-drawer" data-drawer="lg">
|
||||
<swp-drawer-header>
|
||||
<swp-drawer-title localize="services.categoryDrawer.title">Opret kategori</swp-drawer-title>
|
||||
<swp-drawer-close data-drawer-close>
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-drawer-close>
|
||||
</swp-drawer-header>
|
||||
|
||||
<swp-drawer-body>
|
||||
<swp-form-row>
|
||||
<swp-form-label localize="services.categoryDrawer.name">Kategorinavn</swp-form-label>
|
||||
<input type="text" id="category-name" placeholder="F.eks. Klip & Styling">
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-row>
|
||||
<swp-form-label localize="services.categoryDrawer.description">Beskrivelse</swp-form-label>
|
||||
<textarea id="category-description" rows="3" placeholder="Vises i online booking..."></textarea>
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-divider></swp-form-divider>
|
||||
|
||||
<!-- Synlighed sektion -->
|
||||
<swp-section-label localize="services.categoryDrawer.visibilitySection">Synlighed</swp-section-label>
|
||||
|
||||
<swp-toggle-row>
|
||||
<swp-toggle-label>
|
||||
<span localize="services.categoryDrawer.showInBooking">Kategorien skal vises i online booking</span>
|
||||
<swp-toggle-description localize="services.categoryDrawer.showInBookingDescription">Kategorien vil stadig være synlig her i systemet</swp-toggle-description>
|
||||
</swp-toggle-label>
|
||||
<swp-toggle-slider data-value="yes">
|
||||
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
|
||||
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
|
||||
</swp-toggle-slider>
|
||||
</swp-toggle-row>
|
||||
|
||||
<swp-form-row class="spaced">
|
||||
<swp-form-label localize="services.categoryDrawer.timePeriod">Skal kun være synlig i følgende tidsperiode</swp-form-label>
|
||||
<swp-date-range>
|
||||
<input type="date" id="category-start-date" class="inactive">
|
||||
<span>–</span>
|
||||
<input type="date" id="category-end-date" class="inactive">
|
||||
</swp-date-range>
|
||||
<swp-form-hint localize="services.categoryDrawer.timePeriodHint">Efterlad felterne blanke for ingen tidsbegrænsning</swp-form-hint>
|
||||
</swp-form-row>
|
||||
</swp-drawer-body>
|
||||
|
||||
<swp-drawer-footer>
|
||||
<swp-btn class="secondary" data-drawer-close localize="common.cancel">Annuller</swp-btn>
|
||||
<swp-btn class="primary" localize="services.categoryDrawer.save">Gem kategori</swp-btn>
|
||||
</swp-drawer-footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ public class ServiceTableViewComponent : ViewComponent
|
|||
Key = key,
|
||||
SearchPlaceholder = _localization.Get("services.searchPlaceholder"),
|
||||
CreateButtonText = _localization.Get("services.createService"),
|
||||
CreateCategoryButtonText = _localization.Get("services.createCategory"),
|
||||
ColumnService = _localization.Get("services.table.service"),
|
||||
ColumnDuration = _localization.Get("services.table.duration"),
|
||||
ColumnPrice = _localization.Get("services.table.price"),
|
||||
|
|
@ -66,6 +67,7 @@ public class ServiceTableViewModel
|
|||
public required string Key { get; init; }
|
||||
public required string SearchPlaceholder { get; init; }
|
||||
public required string CreateButtonText { get; init; }
|
||||
public required string CreateCategoryButtonText { get; init; }
|
||||
public required string ColumnService { get; init; }
|
||||
public required string ColumnDuration { get; init; }
|
||||
public required string ColumnPrice { get; init; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue