Skip to content

Commit f53dfea

Browse files
dkamburovdkamburov
authored
Merge pull request #1 from IgniteUI/dkamburov/erp
grid landing pages updates
2 parents f508634 + 09e0f6e commit f53dfea

File tree

15 files changed

+217
-94
lines changed

15 files changed

+217
-94
lines changed

‎.github/workflows/github-pages.yml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: Deploy GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
workflow_dispatch: {}
7+
8+
jobs:
9+
build-and-deploy:
10+
11+
runs-on: ubuntu-latest
12+
13+
permissions:
14+
pages: write
15+
id-token: write
16+
actions: read
17+
18+
environment:
19+
name: github-pages
20+
url: ${{ steps.deployment.outputs.page_url }}
21+
22+
strategy:
23+
matrix:
24+
node-version: [22.x]
25+
26+
steps:
27+
- uses: actions/checkout@v3
28+
- name: Use Node.js ${{ matrix.node-version }}
29+
uses: actions/setup-node@v2
30+
with:
31+
node-version: ${{ matrix.node-version }}
32+
# cache: 'npm' # enable after committing lock file from first install
33+
- run: npm i # replace with 'npm ci' after committing lock file from first install
34+
- name: Set environment variable for basename
35+
run: echo "VITE_BASENAME=/${{ github.event.repository.name }}" >> $GITHUB_ENV
36+
- run: npm run build -- --base=/${{ github.event.repository.name }}/
37+
- name: Update Resource Paths
38+
run: |
39+
find ./dist/assets -type f -name "*.js" -exec sed -i 's|src/assets|${{ github.event.repository.name }}/assets|g' {} +;
40+
find ./dist/assets -type f -name "*.js" -exec sed -i 's|/static-data/|/${{ github.event.repository.name }}/static-data/|g' {} +
41+
- name: Copy Resources to dist
42+
run: mkdir -p ./dist/assets && cp -R ./src/assets/* ./dist/assets/
43+
- name: SPA routing handling
44+
run: cp ./dist/index.html ./dist/404.html
45+
- name: Upload build artifact to GitHub Pages
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
path: ./dist
49+
- name: Deploy to GitHub Pages
50+
uses: actions/deploy-pages@v4

‎generationLogs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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}]
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‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,3 +224,8 @@ igc-card-header h6[slot='subtitle'] {
224224
.ig-typography__body-1 {
225225
margin: 0 !important;
226226
}
227+
228+
igc-button .imx-icon, igc-icon-button .imx-icon {
229+
/* adjust icon size when projected in other components */
230+
--size: 1.125rem;
231+
}

‎ignite-ui-cli.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "14.3.15",
2+
"version": "14.3.16",
33
"project": {
44
"defaultPort": 3003,
55
"framework": "react",

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<title>grid landing pages</title>
1212
<link rel="stylesheet" href="./styles.css">
1313
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
14+
<link href='./node_modules/@igniteui/material-icons-extended/styles/sprite.css' rel='stylesheet'>
1415
<link rel='stylesheet' href='./node_modules/igniteui-webcomponents/themes/light/material.css'>
1516
<link rel='stylesheet' href='./node_modules/igniteui-react-grids/grids/themes/light/material.css'>
1617
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:wght@300;400;600;700' rel='stylesheet'>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7+
"@igniteui/material-icons-extended": "^3.0.0",
78
"@testing-library/jest-dom": "^6.1.3",
89
"@testing-library/react": "^14.0.0",
910
"element-internals-polyfill": "^1.3.10",
@@ -31,7 +32,7 @@
3132
"typescript": "~5.5.4",
3233
"vite": "^4.4.9",
3334
"vitest-canvas-mock": "^0.3.3",
34-
"igniteui-cli": "~14.3.15"
35+
"igniteui-cli": "~14.3.16"
3536
},
3637
"scripts": {
3738
"start": "vite",

‎src/app/erpinventory/erpinventory.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@
1414
flex-grow: 1;
1515
flex-basis: 0;
1616
}
17+
.rating {
18+
width: max-content;
19+
height: max-content;
20+
}

‎src/app/erpinventory/erpinventory.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1-
import { IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
1+
import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
2+
import { IgrRating, IgrRatingModule } from 'igniteui-react';
23
import { useGetTable1List as eRPProductsUseGetTable1List } from '../hooks/erpproducts-hooks';
34
import 'igniteui-react-grids/grids/combined.js';
45
import styles from './erpinventory.module.css';
56
import createClassTransformer from '../style-utils';
67

78
IgrHierarchicalGridModule.register();
9+
IgrRatingModule.register();
810

911
export default function ERPInventory() {
1012
const classes = createClassTransformer(styles);
1113
const uuid = () => crypto.randomUUID();
1214
const { eRPProductsTable1 } = eRPProductsUseGetTable1List();
1315

16+
const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
17+
return (
18+
<>
19+
<IgrRating value={ctx.dataContext.cell.value} className={classes("rating")}></IgrRating>
20+
</>
21+
)
22+
}
23+
1424
return (
1525
<>
1626
<div className={classes("row-layout erpinventory-container")}>
17-
<IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")}>
27+
<IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")} key={uuid()}>
1828
<IgrGridToolbar>
1929
<IgrGridToolbarActions>
2030
<IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -29,13 +39,16 @@ export default function ERPInventory() {
2939
<IgrColumn field="orderId" dataType="number" header="orderId" sortable="true" selectable="false"></IgrColumn>
3040
<IgrColumn field="status" dataType="string" header="status" sortable="true" selectable="false"></IgrColumn>
3141
</IgrRowIsland>
32-
<IgrColumn field="sku" dataType="string" header="sku" sortable="true" selectable="false"></IgrColumn>
33-
<IgrColumn field="imageUrl" dataType="string" header="imageUrl" sortable="true" selectable="false"></IgrColumn>
34-
<IgrColumn field="productName" dataType="string" header="productName" sortable="true" selectable="false"></IgrColumn>
35-
<IgrColumn field="category" dataType="string" header="category" sortable="true" selectable="false"></IgrColumn>
36-
<IgrColumn field="rating" dataType="number" header="rating" sortable="true" selectable="false"></IgrColumn>
37-
<IgrColumn field="grossPrice" dataType="number" header="grossPrice" sortable="true" selectable="false"></IgrColumn>
38-
<IgrColumn field="netPrice" dataType="number" header="netPrice" sortable="true" selectable="false"></IgrColumn>
42+
<IgrColumn field="sku" dataType="string" header="SKU" sortable="true" selectable="false"></IgrColumn>
43+
<IgrColumn field="imageUrl" dataType="image" header="Image" sortable="true" selectable="false"></IgrColumn>
44+
<IgrColumn field="productName" dataType="string" header="Product Name" sortable="true" selectable="false"></IgrColumn>
45+
<IgrColumn field="category" dataType="string" header="Category" sortable="true" selectable="false"></IgrColumn>
46+
<IgrColumn field="rating" dataType="number" header="Rating" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
47+
<IgrColumn header="Sold Units Last Month" sortable="true" selectable="false" key="86f2766e-c724-4e27-bdc0-d17d845eb299"></IgrColumn>
48+
<IgrColumn header="Montly Sales Trends" sortable="true" selectable="false" key="bb1b0e09-b31c-4c2d-a985-155db4ad6906"></IgrColumn>
49+
<IgrColumn field="grossPrice" dataType="currency" header="Gross Price" sortable="true" selectable="false"></IgrColumn>
50+
<IgrColumn field="netPrice" dataType="currency" header="Net Price" sortable="true" selectable="false"></IgrColumn>
51+
<IgrColumn header="Net Profit" sortable="true" selectable="false" key="0a4cffbd-702e-4f7a-af19-4c3fac55f63e"></IgrColumn>
3952
</IgrHierarchicalGrid>
4053
</div>
4154
</>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,10 @@
1414
flex-grow: 1;
1515
flex-basis: 0;
1616
}
17+
.avatar::part(base) {
18+
background-color: transparent;
19+
}
20+
.text {
21+
height: max-content;
22+
min-width: min-content;
23+
}

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

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,46 @@
1-
import { IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
1+
import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
2+
import { IgrCellTemplateContext, IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
23
import { useGetTable1List as financeUseGetTable1List } from '../hooks/finance-hooks';
34
import 'igniteui-react-grids/grids/combined.js';
45
import styles from './financial-portfolio.module.css';
56
import createClassTransformer from '../style-utils';
67

8+
IgrAvatarModule.register();
79
IgrGridModule.register();
810

911
export default function FinancialPortfolio() {
1012
const classes = createClassTransformer(styles);
1113
const uuid = () => crypto.randomUUID();
1214
const { financeTable1 } = financeUseGetTable1List();
1315

16+
const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
17+
return (
18+
<>
19+
<IgrAvatar src="/src/assets/Zoom.png" shape="rounded" className={classes("avatar")}></IgrAvatar>
20+
<p className={classes("typography__body-1 text")}>
21+
<span>{ctx.dataContext.cell.value}</span>
22+
</p>
23+
</>
24+
)
25+
}
26+
27+
const columnBodyTemplate1 = (ctx: { dataContext: IgrCellTemplateContext }) => {
28+
return (
29+
<>
30+
<p className={classes("typography__body-1 text")}>
31+
<span>{ctx.dataContext.cell.value}</span>
32+
</p>
33+
<p className={classes("typography__body-1 text")}>
34+
<span> days</span>
35+
</p>
36+
</>
37+
)
38+
}
39+
1440
return (
1541
<>
1642
<div className={classes("row-layout financial-portfolio-container")}>
17-
<IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")}>
43+
<IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
1844
<IgrGridToolbar>
1945
<IgrGridToolbarActions>
2046
<IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -25,12 +51,17 @@ export default function FinancialPortfolio() {
2551
<span key={uuid()}>Financial Portfolio</span>
2652
</IgrGridToolbarTitle>
2753
</IgrGridToolbar>
28-
<IgrColumn field="id" dataType="string" header="id" sortable="true" filterable="false" selectable="false"></IgrColumn>
29-
<IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" filterable="false" selectable="false"></IgrColumn>
30-
<IgrColumn field="positions" dataType="number" header="positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
31-
<IgrColumn field="holdingPeriod" dataType="number" header="holdingPeriod" sortable="true" filterable="false" selectable="false"></IgrColumn>
32-
<IgrColumn field="value.currentPrice" dataType="number" header="value currentPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
33-
<IgrColumn field="value.boughtPrice" dataType="number" header="value boughtPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
54+
<IgrColumn field="id" dataType="string" header="Symbol" sortable="true" filterable="false" selectable="false"></IgrColumn>
55+
<IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" bodyTemplate={columnBodyTemplate} filterable="false" selectable="false"></IgrColumn>
56+
<IgrColumn field="positions" dataType="number" header="Positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
57+
<IgrColumn field="value.boughtPrice" dataType="currency" header="Average Cost/Share" sortable="true" filterable="false" selectable="false"></IgrColumn>
58+
<IgrColumn field="value.currentPrice" dataType="currency" header="Last Price" sortable="true" filterable="false" selectable="false"></IgrColumn>
59+
<IgrColumn header="Daily Change %" sortable="true" filterable="false" selectable="false" key="edd5fd57-f366-41a7-ab71-4f54f6ebd8a4"></IgrColumn>
60+
<IgrColumn header="Market Value" sortable="true" filterable="false" selectable="false" key="20ffb91b-55c9-4294-8286-0de1c30febeb"></IgrColumn>
61+
<IgrColumn header="NET Profit/Loss" sortable="true" filterable="false" selectable="false" key="7aaf09c0-8ee8-4f54-b0bf-6c124aed404e"></IgrColumn>
62+
<IgrColumn header="NET Profit/Loss %" sortable="true" filterable="false" selectable="false" key="0305822a-4055-45f0-9319-31b73605aee8"></IgrColumn>
63+
<IgrColumn header="Allocation" sortable="true" filterable="false" selectable="false" key="46776679-446b-41bd-8db3-dbe47a7e1e45"></IgrColumn>
64+
<IgrColumn field="holdingPeriod" dataType="number" header="Holding Period" sortable="true" bodyTemplate={columnBodyTemplate1} filterable="false" selectable="false"></IgrColumn>
3465
</IgrGrid>
3566
</div>
3667
</>

0 commit comments

Comments
 (0)