Skip to content

Commit 10e1803

Browse files
dkamburovdkamburov
committed
grid landing pages updates
1 parent f508634 commit 10e1803

File tree

6 files changed

+55
-16
lines changed

6 files changed

+55
-16
lines changed

‎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 07ead4cc-f57e-4c0d-804d-317e113c2193 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 cc2d2139-3b37-41bb-a9da-79243b8558a3 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 849d8156-ba0b-4449-946f-139da3a6e2d9 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 895cac1e-a540-4829-a744-1460035fb51f 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 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1}]

‎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/models/ERPProducts/table1-type-erpproducts.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { OrdersType } from './orders-type';
21
import { SalesTrendDataType } from './sales-trend-data-type';
2+
import { OrdersType } from './orders-type';
33

44
export interface Table1TypeERPProducts {
55
sku: string;

‎src/app/org-chart-hr-portal/org-chart-hr-portal.module.css‎

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

‎src/app/org-chart-hr-portal/org-chart-hr-portal.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
1-
import { IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrTreeGrid, IgrTreeGridModule } from 'igniteui-react-grids';
1+
import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
2+
import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrTreeGrid, IgrTreeGridModule } from 'igniteui-react-grids';
23
import { useGetTable1List as hRDataUseGetTable1List } from '../hooks/hrdata-hooks';
34
import 'igniteui-react-grids/grids/combined.js';
45
import styles from './org-chart-hr-portal.module.css';
56
import createClassTransformer from '../style-utils';
67

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

911
export default function OrgChartHRPortal() {
1012
const classes = createClassTransformer(styles);
1113
const uuid = () => crypto.randomUUID();
1214
const { hRDataTable1 } = hRDataUseGetTable1List();
1315

16+
const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
17+
return (
18+
<>
19+
<IgrAvatar src={ctx.dataContext.cell.row.data.Picture} shape="circle" 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+
1427
return (
1528
<>
1629
<div className={classes("row-layout org-charthr-portal-container")}>
17-
<IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering="true" filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")}>
30+
<IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering="true" filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")} key={uuid()}>
1831
<IgrGridToolbar>
1932
<IgrGridToolbarActions>
2033
<IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -25,9 +38,9 @@ export default function OrgChartHRPortal() {
2538
<span key={uuid()}>HR Portal</span>
2639
</IgrGridToolbarTitle>
2740
</IgrGridToolbar>
28-
<IgrColumn field="ID" dataType="number" header="ID" sortable="true" selectable="false"></IgrColumn>
29-
<IgrColumn field="Name" dataType="string" header="Name" sortable="true" selectable="false"></IgrColumn>
30-
<IgrColumn field="JobTitle" dataType="string" header="JobTitle" sortable="true" selectable="false"></IgrColumn>
41+
<IgrColumn field="ID" dataType="number" header="ID" hidden="true" sortable="true" selectable="false"></IgrColumn>
42+
<IgrColumn field="Name" dataType="string" header="Name" width="300px" pinned="true" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
43+
<IgrColumn field="JobTitle" dataType="string" header="Job Title" sortable="true" selectable="false"></IgrColumn>
3144
<IgrColumn field="Department" dataType="string" header="Department" sortable="true" selectable="false"></IgrColumn>
3245
<IgrColumn field="Location" dataType="string" header="Location" sortable="true" selectable="false"></IgrColumn>
3346
<IgrColumn field="Country" dataType="string" header="Country" sortable="true" selectable="false"></IgrColumn>

0 commit comments

Comments
 (0)