Fleet Management sample: master-detail grid with charts and native cell templates#17
Open
Zneeky wants to merge 12 commits into
Open
Fleet Management sample: master-detail grid with charts and native cell templates#17Zneeky wants to merge 12 commits into
Zneeky wants to merge 12 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.
…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).
…id height to 162px
…ia fullscreenchange
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.
Closes #2
Adds a Fleet Management sample — a master-detail grid for managing vehicle acquisition, operations and maintenance — built to parity with the Angular and Web Components fleet examples.
Highlights
VehicleDetailPanelchild component) with lazy-rendered tabs so the panel stays responsive:BodyTemplateScript) for the driver photo, make logo, status and maintenance-type cells. The grid recreates BlazorBodyTemplateDOM on every hover/scroll, which reloaded images and flickered; lit-html updates the cell in place, eliminating the flicker. Uses the exact@igniteui/material-icons-extendedicons.Implementation notes
samples/FleetManagement/wwwroot/scripts/fleet-grid-templates.jsand loaded from the host page.Verification
Built and exercised in the browser (Blazor WebAssembly): the grid and detail render, tab switching and period selectors work, the Current badge shows only on the ongoing trip, and there is no cell flicker or console errors.