grid landing pages updates

.github/workflows/github-pages.yml

@@ -0,0 +1,50 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [ master ]
+  workflow_dispatch: {}
+
+jobs:
+  build-and-deploy:
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+      actions: read
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        # cache: 'npm' # enable after committing lock file from first install
+    - run: npm i # replace with 'npm ci' after committing lock file from first install
+    - name: Set environment variable for basename
+      run: echo "VITE_BASENAME=/${{ github.event.repository.name }}" >> $GITHUB_ENV
+    - run: npm run build -- --base=/${{ github.event.repository.name }}/
+    - name: Update Resource Paths
+      run: |
+        find ./dist/assets -type f -name "*.js" -exec sed -i 's|src/assets|${{ github.event.repository.name }}/assets|g' {} +;
+        find ./dist/assets -type f -name "*.js" -exec sed -i 's|/static-data/|/${{ github.event.repository.name }}/static-data/|g' {} +
+    - name: Copy Resources to dist
+      run: mkdir -p ./dist/assets && cp -R ./src/assets/* ./dist/assets/
+    - name: SPA routing handling
+      run: cp ./dist/index.html ./dist/404.html
+    - name: Upload build artifact to GitHub Pages
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: ./dist
+    - name: Deploy to GitHub Pages
+      uses: actions/deploy-pages@v4

generationLogs.json

@@ -1 +1 @@
-[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id c067e6f8-6bfc-4867-a22e-01a93ed93665 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 2bf787fe-2555-4d36-945f-d1c98f551712 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a24e66b7-9154-40f4-ac11-f56efbfaaad4 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 18e4de2c-b47a-4db1-ba24-1e7a7a2361aa try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '0a23bf69-1695-4b54-ba68-5aef99f5a47a' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '0a23bf69-1695-4b54-ba68-5aef99f5a47a' has property with no name. Property was not generated.","Type":1}]
+[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id db9384fb-b8b2-42c9-8412-a10feef648e3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 1b916aba-2abf-4f35-8eb6-8c4837054a6d try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f71aeb5f-fbf6-491d-8e8b-1a7c3dc68d44 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id dd4be239-81ca-42a5-888c-579ae78091e6 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8a820e0-b189-44bf-912e-c78dcd9eb966 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '5cd92221-1e48-485d-aba5-d4c514e40be9' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '5cd92221-1e48-485d-aba5-d4c514e40be9' has property with no name. Property was not generated.","Type":1}]

ig-theme.css

@@ -224,3 +224,8 @@ igc-card-header h6[slot='subtitle'] {
 .ig-typography__body-1 {
     margin: 0 !important;
 }
+
+igc-button .imx-icon, igc-icon-button .imx-icon {
+  /* adjust icon size when projected in other components */
+  --size: 1.125rem;
+}

ignite-ui-cli.json

@@ -1,5 +1,5 @@
 {
-  "version": "14.3.15",
+  "version": "14.3.16",
   "project": {
     "defaultPort": 3003,
     "framework": "react",

index.html

@@ -11,6 +11,7 @@
     <title>grid landing pages</title>
     <link rel="stylesheet" href="./styles.css">
     <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
+  <link href='./node_modules/@igniteui/material-icons-extended/styles/sprite.css' rel='stylesheet'>
   <link rel='stylesheet' href='./node_modules/igniteui-webcomponents/themes/light/material.css'>
   <link rel='stylesheet' href='./node_modules/igniteui-react-grids/grids/themes/light/material.css'>
   <link href='https://fonts.googleapis.com/css?family=Titillium+Web:wght@300;400;600;700' rel='stylesheet'>

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@igniteui/material-icons-extended": "^3.0.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "element-internals-polyfill": "^1.3.10",
@@ -31,7 +32,7 @@
     "typescript": "~5.5.4",
     "vite": "^4.4.9",
     "vitest-canvas-mock": "^0.3.3",
-    "igniteui-cli": "~14.3.15"
+    "igniteui-cli": "~14.3.16"
   },
   "scripts": {
     "start": "vite",

src/app/erpinventory/erpinventory.module.css

@@ -14,3 +14,7 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+.rating {
+  width: max-content;
+  height: max-content;
+}

src/app/erpinventory/erpinventory.tsx

@@ -1,20 +1,30 @@
-import { IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
+import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
+import { IgrRating, IgrRatingModule } from 'igniteui-react';
 import { useGetTable1List as eRPProductsUseGetTable1List } from '../hooks/erpproducts-hooks';
 import 'igniteui-react-grids/grids/combined.js';
 import styles from './erpinventory.module.css';
 import createClassTransformer from '../style-utils';
 
 IgrHierarchicalGridModule.register();
+IgrRatingModule.register();
 
 export default function ERPInventory() {
   const classes = createClassTransformer(styles);
   const uuid = () => crypto.randomUUID();
   const { eRPProductsTable1 } = eRPProductsUseGetTable1List();
 
+  const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <IgrRating value={ctx.dataContext.cell.value} className={classes("rating")}></IgrRating>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout erpinventory-container")}>
-        <IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")}>
+        <IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")} key={uuid()}>
           <IgrGridToolbar>
             <IgrGridToolbarActions>
               <IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -29,13 +39,16 @@ export default function ERPInventory() {
             <IgrColumn field="orderId" dataType="number" header="orderId" sortable="true" selectable="false"></IgrColumn>
             <IgrColumn field="status" dataType="string" header="status" sortable="true" selectable="false"></IgrColumn>
           </IgrRowIsland>
-          <IgrColumn field="sku" dataType="string" header="sku" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="imageUrl" dataType="string" header="imageUrl" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="productName" dataType="string" header="productName" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="category" dataType="string" header="category" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="rating" dataType="number" header="rating" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="grossPrice" dataType="number" header="grossPrice" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="netPrice" dataType="number" header="netPrice" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="sku" dataType="string" header="SKU" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="imageUrl" dataType="image" header="Image" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="productName" dataType="string" header="Product Name" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="category" dataType="string" header="Category" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="rating" dataType="number" header="Rating" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
+          <IgrColumn header="Sold Units Last Month" sortable="true" selectable="false" key="86f2766e-c724-4e27-bdc0-d17d845eb299"></IgrColumn>
+          <IgrColumn header="Montly Sales Trends" sortable="true" selectable="false" key="bb1b0e09-b31c-4c2d-a985-155db4ad6906"></IgrColumn>
+          <IgrColumn field="grossPrice" dataType="currency" header="Gross Price" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="netPrice" dataType="currency" header="Net Price" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn header="Net Profit" sortable="true" selectable="false" key="0a4cffbd-702e-4f7a-af19-4c3fac55f63e"></IgrColumn>
         </IgrHierarchicalGrid>
       </div>
     </>

src/app/financial-portfolio/financial-portfolio.module.css

@@ -14,3 +14,10 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+.avatar::part(base) {
+  background-color: transparent;
+}
+.text {
+  height: max-content;
+  min-width: min-content;
+}

src/app/financial-portfolio/financial-portfolio.tsx

@@ -1,20 +1,46 @@
-import { IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
+import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
+import { IgrCellTemplateContext, IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
 import { useGetTable1List as financeUseGetTable1List } from '../hooks/finance-hooks';
 import 'igniteui-react-grids/grids/combined.js';
 import styles from './financial-portfolio.module.css';
 import createClassTransformer from '../style-utils';
 
+IgrAvatarModule.register();
 IgrGridModule.register();
 
 export default function FinancialPortfolio() {
   const classes = createClassTransformer(styles);
   const uuid = () => crypto.randomUUID();
   const { financeTable1 } = financeUseGetTable1List();
 
+  const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <IgrAvatar src="/src/assets/Zoom.png" shape="rounded" className={classes("avatar")}></IgrAvatar>
+        <p className={classes("typography__body-1 text")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+      </>
+    )
+  }
+
+  const columnBodyTemplate1 = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <p className={classes("typography__body-1 text")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+        <p className={classes("typography__body-1 text")}>
+          <span> days</span>
+        </p>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout financial-portfolio-container")}>
-        <IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")}>
+        <IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
           <IgrGridToolbar>
             <IgrGridToolbarActions>
               <IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -25,12 +51,17 @@ export default function FinancialPortfolio() {
               <span key={uuid()}>Financial Portfolio</span>
             </IgrGridToolbarTitle>
           </IgrGridToolbar>
-          <IgrColumn field="id" dataType="string" header="id" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="positions" dataType="number" header="positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="holdingPeriod" dataType="number" header="holdingPeriod" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="value.currentPrice" dataType="number" header="value currentPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="value.boughtPrice" dataType="number" header="value boughtPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="id" dataType="string" header="Symbol" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" bodyTemplate={columnBodyTemplate} filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="positions" dataType="number" header="Positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="value.boughtPrice" dataType="currency" header="Average Cost/Share" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="value.currentPrice" dataType="currency" header="Last Price" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn header="Daily Change %" sortable="true" filterable="false" selectable="false" key="edd5fd57-f366-41a7-ab71-4f54f6ebd8a4"></IgrColumn>
+          <IgrColumn header="Market Value" sortable="true" filterable="false" selectable="false" key="20ffb91b-55c9-4294-8286-0de1c30febeb"></IgrColumn>
+          <IgrColumn header="NET Profit/Loss" sortable="true" filterable="false" selectable="false" key="7aaf09c0-8ee8-4f54-b0bf-6c124aed404e"></IgrColumn>
+          <IgrColumn header="NET Profit/Loss %" sortable="true" filterable="false" selectable="false" key="0305822a-4055-45f0-9319-31b73605aee8"></IgrColumn>
+          <IgrColumn header="Allocation" sortable="true" filterable="false" selectable="false" key="46776679-446b-41bd-8db3-dbe47a7e1e45"></IgrColumn>
+          <IgrColumn field="holdingPeriod" dataType="number" header="Holding Period" sortable="true" bodyTemplate={columnBodyTemplate1} filterable="false" selectable="false"></IgrColumn>
         </IgrGrid>
       </div>
     </>