ERP/Inventory sample: hierarchical grid with row island, templated cells and bar-chart tooltips#19
Open
Zneeky wants to merge 12 commits into
Conversation
… 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.
…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
…blazor' into aahmedov/erp-inventory-sample-blazor
…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.
…ia fullscreenchange
…blazor' into aahmedov/erp-inventory-sample-blazor
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 #6
Implements the ERP / Inventory sample (#6) - a hierarchical data grid matching the IgniteUI Web Components inventory example.
Highlights
IgbHierarchicalGrid- a root products grid with one Orders row island, plus collapsible column groups (Delivery, Order Information) on the child level.products.json(product →salesTrendData[],orders[]→ delivery + orderInformation); computes Units Sold (last month) and Net Profit.wwwroot/products)igc-data-chartcolumn series withshow-default-tooltip+ fade-others highlighting (hover a bar to see month + units sold), no gridlinesNotes
samples/ERPInventory/wwwroot/scripts/erp-grid-templates.js; product images and country-flag SVGs were copied intowwwroot.IgbDataChartCore/Category/Interactivity), and the nested chart data is normalised to camelCase keys so the column seriesvalue-member-pathresolves.yyyy-MM-dd) with N/A for empty values.hierarchical-griddoc is actuallyhierarchical-grid-overview) are logged in the sharedmcp-inconsistenciestracker.Verification
Built and exercised in the browser: the hierarchy expands into the Orders child with column groups, all templated cells render, the trend-chart tooltip shows the value on hover, both grid levels fit without horizontal overflow, and there are no console errors.