feat(shell): keep-alive tab navigation for instant sample switching#22
Open
Zneeky wants to merge 77 commits into
Open
feat(shell): keep-alive tab navigation for instant sample switching#22Zneeky wants to merge 77 commits into
Zneeky wants to merge 77 commits into
Conversation
…ark Material theme - Rework the Fleet Management view into a master-detail IgbGrid matching the Angular reference: toolbar (hiding/pinning/advanced filtering), make-logo avatars, status badges with icons, and a default sort by vehicle id. - Add a per-vehicle tabbed detail view: Details (photo carousel + spec table), Trip History and Maintenance child grids, and Cost/Utilization charts. - Align FleetData with the real vehicles schema and add detail models (drivers, trip history, maintenance, cost, utilization) with service loaders and lookups; bundle car/driver photos and logos as static assets. - Register the IgniteUI modules the sample needs (grid, avatar, badge, button, tabs, carousel, category/pie charts). - Scope a dark Material theme to the sample (#fleet-section) while keeping the rest of the app on light Material, and surface Theme/Mode in the sample header.
…teractive cost charts - Size the master-detail panel to the Angular reference: 420x240 carousel, details table at two-thirds width with separate label/value columns. - Make the detail pane fill the row width (force the tabs inner/body and the detail host to 100%) and remove the horizontal scrollbar caused by widening the hierarchical indent; trim main-grid columns to leave room for the expander. - Make the tabs height content-driven instead of a fixed 520px. - Fix the Trip History driver column not rendering until interaction, and the flicker when switching tabs, by lazy-rendering each tab's grid/chart once and keeping it mounted. - Cost/Utilization charts: light axis, label and title colors for dark mode, light pie outer labels, a 2023/2024 utilization legend with matching series brushes, and per-chart Period selectors wired to the period-aware data. - Lay out the Cost panel like Angular (pie + area stacked left, fuel chart large on the right) and refresh the detail via MarkForCheck so period changes apply immediately. Register IgbSelectModule.
…d tab fade - Make every grid small (--ig-size-small) with 33px rows; shrink the make-logo and driver images to 22px so cell content no longer forces a taller row. - Switch the make-logo cell from IgbAvatar to a plain img for exact sizing. - Toolbar: keep the title on the left and push the Clear Sort action to the right next to the hiding/pinning/advanced-filtering tools; add a gated Clear Sort button that resets the grid sorting. - Fade the detail tab content in on tab change (replaces a horizontal slide that reflowed the grid/chart content and flickered).
… and styling polish - Extract the master-detail content into a VehicleDetailPanel child component so its own state changes re-render it directly; period selectors update the charts without forcing the grid to re-check, and the detail re-renders when async data arrives. - Render the image/badge cells (driver photo, make logo, status, maintenance type) with native lit-html cell templates (BodyTemplateScript) instead of Blazor BodyTemplates. The grid recreated Blazor template DOM on every hover/scroll, reloading images and flickering; lit-html updates the cell in place. Mirrors the IgniteUI Web Components fleet sample, using the exact material-icons-extended icons. - Lazy-render each detail tab's grid/chart on first open to keep the panel responsive. - Compact every grid to small rows; toolbar title on the left with a Clear Sort action on the right; auto-fit the Trip History and Maintenance grids to their content. - Use the brighter primary color for the active tab so it is clearly visible. - Remove the inline-SVG icon helper and unused RCL boilerplate; drop code comments.
…rdered host as the cost charts
… bordered card Match the IgniteUI Web Components fleet sample: the Utilization tab is now a single bordered card containing a large title, the legend stacked beneath it on the left, and the chart below — instead of a title/legend header above a separately bordered chart. The chart-host border stays on the cost charts only.
…adge in the driver cell Show a light-green rounded "Current" badge next to the driver name on the first Trip History row when the trip is ongoing (first row and End is "N/A"), mirroring the IgniteUI Web Components fleet sample. Added in the native lit-html driver cell template so it does not flicker on hover/scroll.
… and Indigo theme - Convert the Sales sample to an IgbPivotGrid analytics dashboard matching the IgniteUI Web Components sales example: the sales.json dataset summarized as a cross-tab. - Two switchable pivot presets (by Country & Brand, by Store) plus an IgbPivotDataSelector panel for runtime drag-and-drop reconfiguration of rows, columns, values and filters. - Values aggregate Sales and the pre-computed Profit (Sale - Cost) with SUM and a SUM/AVG/COUNT/MIN/MAX dropdown; a date dimension groups periods into years and quarters. - Apply the Indigo / Light theme scoped to the sales section (palette tokens overriding the host material theme - the same scoping pattern used for the fleet sample's dark theme). - Expose Profit on the model so the grid can aggregate it; drop the live-update timer (too heavy for a pivot over the full dataset). Remove unused RCL boilerplate and suppress the unavoidable BL0005 from the documented pivot-configuration pattern.
…y 10% data sample - Rework the layout to match the IgniteUI Web Components sales sample: a bordered toolbar with the header-surface background and bordered, gap-less pivot + data-selector containers. - Temporarily sample every 10th record (~10%) so the pivot loads quickly while validating functionality; marked for removal before finalizing. WIP: parked to revisit last (indigo grid-structure theme and data-loading strategy still open).
…cells and Bootstrap theme - Rebuild the Financial Portfolio grid to match the IgniteUI Web Components finance sample: 11 columns (symbol, asset, position, prices, daily change, market value, net profit/loss, allocation, holding period) with sorting, filtering, column hiding/pinning and multi-row selection. - Render image/icon/bar cells via native lit-html BodyTemplateScript so the live 3s price updates do not flicker (the fleet-sample lesson): company-logo avatars, green/red profit and loss values with trending up/down icons, and an allocation progress bar. - Fix the live updates for Blazor WebAssembly: replace System.Timers.Timer (does not fire reliably on the single WASM thread) with a PeriodicTimer loop, and assign a new data list reference each tick so the grid re-syncs the mutated rows. - Apply the Bootstrap / Light theme scoped to the finance section; add HoldingPeriod to the model; remove unused RCL boilerplate.
…bar and exporter - Replace the per-column filter row with the Web Components toolbar layout: the title and a "Filter by Asset" search bar with the hiding, pinning and Excel exporter actions. - The search filters by Symbol or Asset (case-insensitive contains) via a client-side LINQ view bound to the grid, which keeps working through the live price updates.
… and match the toolbar layout - Previously only the Bootstrap color *tokens* were scoped to the section, so the grid kept the host's Material *structure*. Scope the actual Bootstrap grid + component theme CSS to #finance-section (selectors prefixed; :root rescoped; @keyframes/@font-face/@import dropped so the host theme still provides them) so the toolbar buttons, inputs, checkboxes and grid chrome render as Bootstrap. - Match the Web Components toolbar layout: title on the left, the "Filter by Asset" search bar on the right next to the hiding/pinning/exporter actions (the title/search live in portal wrappers, so flex-start + margin-left:auto on the search rather than space-between). - Use the full "Average Cost/Share" column header.
…ut styling, remove section gap - The IgbInput Input event does not fire on typing and ValueChanged is blur-only, so the search only updated on blur. Replace it with a native <input type="search"> bound via @Bind:event="oninput", so the grid filters on every keystroke. - Style the search field to match the Bootstrap design: white field, gray border, rounded corners, blue focus ring and the native clear button. - Drop the .finance-container padding that left a gap between the themed section and the grid.
…ocation bar - The column widths summed to 109%, so the grid overflowed horizontally and the last column (Holding Period) was pushed off-screen. Reduce the widths to ~95% so every column, including Holding Period, fits within the grid without scrolling. - Make the allocation progress bar noticeably thicker (12px, large size) to match the design.
… close the right gap - The previous bar fix sized the igc-linear-progress host (12px), but its internal base/track/fill parts stayed fixed at 4px. Size those ::part elements directly so the bar is actually thick. - Widen the Asset column so the data columns fill the grid width (~97.5%), removing the empty space that was left on the right edge.
… rating stars and status badges - Rebuild the ERP/Inventory sample as an IgbHierarchicalGrid matching the IgniteUI Web Components inventory example: a root products grid with one Orders row island, plus collapsible column groups (Delivery, Order Information) on the child level. - Replace the old flat model with the real nested products.json shape (product -> salesTrendData[], orders[] -> delivery + orderInformation); compute UnitsSold (last month) and TotalNetProfit. - Native lit-html cell templates: a read-only 5-star igc-rating and a colored order-status badge (Packed/In Transit/Customs/Delivered). - Toolbar (Inventory) with hiding, pinning and advanced filtering; multiple row selection and per-column filtering at both levels. Material/Light theme is the host default, so no scoping. - Register IgbHierarchicalGridModule + IgbRatingModule; remove unused RCL boilerplate.
…ry flags, status icons, summaries and editing - Product image thumbnails (served locally from wwwroot/products) and a per-product monthly sales-trend column chart (igc-category-chart over salesTrendData). - Order-status badges now carry an icon (box / truck / document / check) on a light variant background; the Order Information Country column shows a country flag next to the name. - Column summaries on the numeric product columns (units sold, prices, net profit). - Cell editing on the editable text/price columns (product name, category, prices, city).
…ean hoverable trend chart, export button - Move the "Inventory" toolbar title to the left (actions stay on the right), matching the WC layout. - Render delivery dates as the raw ISO value (yyyy-MM-dd) and show "N/A" when a date is empty, via string columns + a date cell template (previously reformatted to a long date and left blank). - Remove the sales-trend chart's horizontal gridlines and the hover crosshair line; enable per-bar highlighting so hovering each bar responds. - Add the Excel/CSV toolbar exporter to match the WC toolbar.
…hart and fit both grids' columns - Replace the category chart with the Web Components data chart (igc-data-chart + column series, show-default-tooltip, FadeOthersSpecific highlighting). Hovering a bar now shows its month and units sold and fades the other bars - no horizontal gridlines, no crosshair line. Normalize the cell data to camelCase keys so the column series value-member-path resolves; register the data-chart core/category/interactivity modules. - Reduce the root and Orders-child column widths so both grids fit within view (they were spilling out horizontally).
…flush with the section The 1rem padding on .erp-container inset the hierarchical grid from the section edges; drop it so the grid spans the full width like the other samples.
… templated cells and WC parity - Register the missing IgbTreeGrid / IgbPaginator / IgbIconButton modules so the tree grid renders. - Apply the Fluent / Light theme scoped to #fluent-section: the previous nested `@import` inside a selector was invalid CSS, so the grid was actually rendering the host Material theme. Generate fluent-theme.css by scoping the prebuilt Fluent component + grid theme CSS to #fluent-section, and rescope the cell styles to match. - Load the cell templates from index.html with the load-order guard (the in-component `<script type="module">` never executed under Blazor), and fix the contact-template field typo (data.Contacs -> data.Contacts). - Match the Web Components sample: Gross Salary as currency, Hire Date as ISO yyyy-MM-dd via a date template, and multipleCascade row selection. - Remove unused RCL boilerplate.
… contact icons Fluent blue - Widen the columns (they summed to ~83%, leaving a ~237px empty strip on the right) so the grid fills the available width. - Color the contact icon buttons with the Fluent primary (var(--ig-primary-500)) instead of the browser default link blue / dark icon part.
… min-widths Remove the explicit percentage Width values from the columns and keep only MinWidth, letting the tree grid auto-distribute the available width (matching the Web Components sample). The columns fill the grid evenly with no right-side gap.
…header/buttons, match WC grid sizing Fleet sample: - Remove the per-column filter row; keep the advanced-filtering toolbar dialog and button. - Match the WC grid sizing: scope --ig-size-small to the grid (toolbar 44px), set the header sort icon to 15px (the grid otherwise renders it at the default 24px), row height to 32px, and use MinWidth-only columns (drop the percentage widths so they auto-distribute and fill the grid). - Make the grid flush by dropping the .fleet-container 1rem padding. - Match the WC toolbar title exactly: soft-gray #e0e0e0 (was near-white #fafafa) and left-aligned at the toolbar padding (hide the empty portaled title slot that pushed it ~16px right). App shell (NavMenu): - Re-render the nav on navigation (subscribe to NavigationManager.LocationChanged) so the active tab and the current-tab-info no longer go stale after switching samples. - Use the exact per-sample title/description/theme/mode from the WC home view (fixes ERP and Sales, which were defaulting to the Bootstrap theme label). - Fix the Download and Fullscreen buttons: IgbButton (Lite) exposes no click event, so wrap each in a span with @OnClick and add shell-interop.js (real document fullscreen; Download fetches the repo zip; View More opens the docs in a new tab).
…ales-dashboard-sample-blazor
…d data, Indigo theme, styled toolbar - Map every sales.json record into PivotSalesDataItem via SalesDataService (no hand-written data); bundle a 10% sample (~1MB, every 10th record) locally and cache the deserialized list per session. - Configure the pivot 1:1 with the WC sample: Country > Brand columns, Date (Year > Quarter) rows, Sales + Profit values, narrowed to the HM / HM Home brands in C# (the native dimension Filter does not apply in this build). Three switchable views: Brands separate / combined, Stores: Bulgaria. - Scope the Indigo grid theme to #sales-section so the grid structure (filter chips, cells) is Indigo, not just the color tokens. - Toolbar: replace the select with a filled-Indigo IgbDropdown button (white text, eye + caret icons) and an outlined gray Export-to-Excel pill (download icon); SVG icons registered at runtime. - Use the pivot grid built-in IsLoading indicator (the WC loading widget). - Shrink the data selector search input and enlarge/bolden its section headers via a shadow-piercing interop helper (they render inside the selector shadow root).
…id height to 162px
…blazor' into aahmedov/sales-dashboard-sample-blazor
…rp-inventory-sample-blazor # Conflicts: # BlazorGridExamples/Program.cs
…inancial-portfolio-sample-blazor # Conflicts: # BlazorGridExamples/Program.cs
Replace the hand-generated finance-theme.css (613KB Bootstrap grid+component dump scoped to #finance-section) with scopeThemeToElement calls that scope the stock Bootstrap light theme tokens to #finance-section at runtime -- same pattern as Fleet (dark Material) and Sales (Indigo).
…rg-chart-hr-portal-sample # Conflicts: # BlazorGridExamples/Program.cs
Replace the hand-generated fluent-theme.css dump (scoped to #fluent-section) with scopeThemeToElement calls that scope the stock Fluent light theme tokens to #fluent-section at runtime -- same pattern as Fleet, Sales and Finance. OnAfterRender becomes OnAfterRenderAsync; the country/contact icon registration is unchanged.
…ple-blazor' into aahmedov/financial-portfolio-sample-blazor
…, allocation bar Align the Finance sample with the web-components reference (live + local webcomponents-grid-examples/projects/finance-grid): - toolbar title: Bootstrap system font, 16px, weight 400, muted gray (--ig-gray-600) - "Filter by Asset" input + placeholder: 16px Bootstrap font, --ig-gray-700 - allocation linear-progress fill: Bootstrap primary blue (--ig-primary-500 / #0d6efd)
…arity) Match the web-components layout where the dashboard fills the viewport and the grid scrolls internally: - body: overflow hidden so the page never shows its own vertical scrollbar - demo-container: height 100vh - finance grid: Height="100%" (fills the flex container) instead of calc(100vh - 110px)
…ection checkbox column Further WC parity for the Finance sample: - toolbar action buttons (hiding/pinning/export): Bootstrap primary blue (#0d6efd) instead of grey - column headers: bold (700) solid dark, matching the WC bold black headers - restore RowSelection=Multiple (dropped in the currency-formatting merge) so the row-selector checkbox column is shown, per the grid Selection docs
The outlined toolbar buttons (hiding/pinning/export) kept a grey border after the foreground was switched to primary; set the border-color to the Bootstrap primary too so the buttons fully match the WC reference.
…teUI.Blazor to 26.1.51 - scopeThemeToElement gains an opt-in `full` (3rd arg) mode that re-scopes a theme's ENTIRE ruleset (component rules + tokens) under the selector via the browser's own CSS parser (Safari-safe, no regex lookbehind), so scoped sections can match a theme at the component level (button states, checkbox shape, etc.). Default stays the lightweight tokens-only path, so existing samples are unaffected unless they opt in. - Bump IgniteUI.Blazor 25.2.104 -> 26.1.51 across all projects.
…rp-inventory-sample-blazor
…rg-chart-hr-portal-sample
…inancial-portfolio-sample-blazor
…ction Opt into scopeThemeToElement's full mode (3rd arg) for the base + grid Bootstrap themes, so the Finance grid's buttons (text/border/icon + hover), checkboxes (square) and headers (bold) are driven by the real Bootstrap component theme instead of CSS patches. Removed the now-redundant manual overrides from finance.css (button color/border, header weight, title typography, allocation fill) -- the theme provides them, matching the WC sample 1:1.
body: overflow hidden so the page never shows its own scrollbar; demo-container: 100vh. Samples fill the router area and grids scroll internally (matches the WC layout).
The "Fleet Management" title was display:none and would render dark-on-dark; show it in the dark theme's light text colour.
- opt into full-scope Indigo theming so the pivot title, chips, checkboxes and data selector are component-level Indigo (not Material-with-indigo-palette) - title via igx-grid-toolbar__title (14px/600 bold) instead of an oversized custom style - pin the toolbar buttons to the WC look: contained Indigo pill with white text, neutral grey outlined pill, both flat (no elevation) - data selector width 200px; sales-container fills the host (no viewport magic number)
…rp-inventory-sample-blazor
…inancial-portfolio-sample-blazor # Conflicts: # BlazorGridExamples/wwwroot/css/app.css
…rg-chart-hr-portal-sample
…t cleanup - Replace percentage column widths with px MinWidth (main grid + row island). - Add a product-image hover overlay (#erp-image-overlay) mirroring the WC tooltip: a larger image plus the product name beside the cell, flipping/clamping near edges. - Remove the summary rows from the numeric columns. - Shrink the header sort indicator to 16px. - Fit the page to the viewport (calc(100vh - 162px)) so the page no longer scrolls; only the grid body scrolls.
…eep-alive-tab-navigation
…p-alive-tab-navigation # Conflicts: # samples/ERPInventory/ERPInventoryComponent.razor # samples/FinanceGrid/FinanceGridComponent.razor
…ov/keep-alive-tab-navigation # Conflicts: # BlazorGridExamples/Program.cs
…-alive-tab-navigation # Conflicts: # BlazorGridExamples/Program.cs
…inance, Sales) fill the page
Zneeky
added
the
🛠️ status: in-development
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Switches the gallery from route-based navigation to a single keep-alive host, so tabs switch instantly instead of rebuilding the grid on every click.
Before — route-based (
RouteView+ one@pageper sample)Every tab click destroys the current sample and builds the next from scratch. The costly part — the Ignite grid mount + first render — therefore ran on every switch, synchronously on Blazor WASM's single UI thread.
After — keep-alive (
SampleHostowns/,/home,/home/{Sample?})All routes map to one component, so navigating reuses the host instance.
Result
Trade-off: higher memory (visited samples stay in the DOM) in exchange for instant switching.