Skip to content

Commit f6224ef

Browse files
skrustevskrustev
committed
Separate grids in view for easier replace later on.
1 parent 7cf9d18 commit f6224ef

File tree

4 files changed

+134
-102
lines changed

4 files changed

+134
-102
lines changed

‎src/app/views/erp-hgrid/erp-hgrid-view.tsx‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useGetTable1List as eRPProductsUseGetTable1List } from '../../hooks/erp
55
import styles from './erp-hgrid-view.module.css';
66
import createClassTransformer from '../../style-utils';
77

8-
export default function ERPHGridView() {
8+
function ERPHGrid () {
99
const classes = createClassTransformer(styles);
1010
const uuid = () => crypto.randomUUID();
1111
const { eRPProductsTable1 } = eRPProductsUseGetTable1List();
@@ -18,36 +18,44 @@ export default function ERPHGridView() {
1818
)
1919
}
2020

21+
return (
22+
<div className={classes("row-layout erpinventory-container")}>
23+
<IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering={true} filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")} key={uuid()}>
24+
<IgrGridToolbar>
25+
<IgrGridToolbarActions>
26+
<IgrGridToolbarPinning></IgrGridToolbarPinning>
27+
<IgrGridToolbarHiding></IgrGridToolbarHiding>
28+
<IgrGridToolbarExporter></IgrGridToolbarExporter>
29+
</IgrGridToolbarActions>
30+
<IgrGridToolbarTitle>
31+
<span key={uuid()}>Inventory</span>
32+
</IgrGridToolbarTitle>
33+
</IgrGridToolbar>
34+
<IgrRowIsland childDataKey="orders" primaryKey="orderId" allowFiltering={true} filterMode="excelStyleFilter" className={classes("ig-scrollbar")}>
35+
<IgrColumn field="orderId" dataType="number" header="orderId" sortable={true} selectable={false}></IgrColumn>
36+
<IgrColumn field="status" dataType="string" header="status" sortable={true} selectable={false}></IgrColumn>
37+
</IgrRowIsland>
38+
<IgrColumn field="sku" dataType="string" header="SKU" sortable={true} selectable={false}></IgrColumn>
39+
<IgrColumn field="imageUrl" dataType="image" header="Image" sortable={true} selectable={false}></IgrColumn>
40+
<IgrColumn field="productName" dataType="string" header="Product Name" sortable={true} selectable={false}></IgrColumn>
41+
<IgrColumn field="category" dataType="string" header="Category" sortable={true} selectable={false}></IgrColumn>
42+
<IgrColumn field="rating" dataType="number" header="Rating" sortable={true} bodyTemplate={columnBodyTemplate} selectable={false}></IgrColumn>
43+
<IgrColumn header="Sold Units Last Month" sortable={true} selectable={false} key="86f2766e-c724-4e27-bdc0-d17d845eb299"></IgrColumn>
44+
<IgrColumn header="Montly Sales Trends" sortable={true} selectable={false} key="bb1b0e09-b31c-4c2d-a985-155db4ad6906"></IgrColumn>
45+
<IgrColumn field="grossPrice" dataType="currency" header="Gross Price" sortable={true} selectable={false}></IgrColumn>
46+
<IgrColumn field="netPrice" dataType="currency" header="Net Price" sortable={true} selectable={false}></IgrColumn>
47+
<IgrColumn header="Net Profit" sortable={true} selectable={false} key="0a4cffbd-702e-4f7a-af19-4c3fac55f63e"></IgrColumn>
48+
</IgrHierarchicalGrid>
49+
</div>
50+
);
51+
}
52+
53+
export default function ERPHGridView() {
54+
const classes = createClassTransformer(styles);
55+
2156
return (
2257
<>
23-
<div className={classes("row-layout erpinventory-container")}>
24-
<IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering={true} filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")} key={uuid()}>
25-
<IgrGridToolbar>
26-
<IgrGridToolbarActions>
27-
<IgrGridToolbarPinning></IgrGridToolbarPinning>
28-
<IgrGridToolbarHiding></IgrGridToolbarHiding>
29-
<IgrGridToolbarExporter></IgrGridToolbarExporter>
30-
</IgrGridToolbarActions>
31-
<IgrGridToolbarTitle>
32-
<span key={uuid()}>Inventory</span>
33-
</IgrGridToolbarTitle>
34-
</IgrGridToolbar>
35-
<IgrRowIsland childDataKey="orders" primaryKey="orderId" allowFiltering={true} filterMode="excelStyleFilter" className={classes("ig-scrollbar")}>
36-
<IgrColumn field="orderId" dataType="number" header="orderId" sortable={true} selectable={false}></IgrColumn>
37-
<IgrColumn field="status" dataType="string" header="status" sortable={true} selectable={false}></IgrColumn>
38-
</IgrRowIsland>
39-
<IgrColumn field="sku" dataType="string" header="SKU" sortable={true} selectable={false}></IgrColumn>
40-
<IgrColumn field="imageUrl" dataType="image" header="Image" sortable={true} selectable={false}></IgrColumn>
41-
<IgrColumn field="productName" dataType="string" header="Product Name" sortable={true} selectable={false}></IgrColumn>
42-
<IgrColumn field="category" dataType="string" header="Category" sortable={true} selectable={false}></IgrColumn>
43-
<IgrColumn field="rating" dataType="number" header="Rating" sortable={true} bodyTemplate={columnBodyTemplate} selectable={false}></IgrColumn>
44-
<IgrColumn header="Sold Units Last Month" sortable={true} selectable={false} key="86f2766e-c724-4e27-bdc0-d17d845eb299"></IgrColumn>
45-
<IgrColumn header="Montly Sales Trends" sortable={true} selectable={false} key="bb1b0e09-b31c-4c2d-a985-155db4ad6906"></IgrColumn>
46-
<IgrColumn field="grossPrice" dataType="currency" header="Gross Price" sortable={true} selectable={false}></IgrColumn>
47-
<IgrColumn field="netPrice" dataType="currency" header="Net Price" sortable={true} selectable={false}></IgrColumn>
48-
<IgrColumn header="Net Profit" sortable={true} selectable={false} key="0a4cffbd-702e-4f7a-af19-4c3fac55f63e"></IgrColumn>
49-
</IgrHierarchicalGrid>
50-
</div>
58+
<ERPHGrid />
5159
</>
5260
);
5361
}

‎src/app/views/finance/finance-view.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import createClassTransformer from '../../style-utils';
66
import styles from './finance-view.module.css';
77
import lightBootstrap from 'igniteui-react-grids/grids/themes/light/bootstrap.css?inline';
88

9-
export default function FinanceView() {
9+
function FinanceGrid() {
1010
const classes = createClassTransformer(styles);
1111
const uuid = () => crypto.randomUUID();
1212
const { financeTable1 } = financeUseGetTable1List();
@@ -35,36 +35,44 @@ export default function FinanceView() {
3535
)
3636
}
3737

38+
return (
39+
<div className={classes("row-layout financial-portfolio-container")}>
40+
<IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
41+
<IgrGridToolbar>
42+
<IgrGridToolbarActions>
43+
<IgrGridToolbarPinning></IgrGridToolbarPinning>
44+
<IgrGridToolbarHiding></IgrGridToolbarHiding>
45+
<IgrGridToolbarExporter></IgrGridToolbarExporter>
46+
</IgrGridToolbarActions>
47+
<IgrGridToolbarTitle>
48+
<span key={uuid()}>Financial Portfolio</span>
49+
</IgrGridToolbarTitle>
50+
</IgrGridToolbar>
51+
<IgrColumn field="id" dataType="string" header="Symbol" sortable={true} filterable={false} selectable={false}></IgrColumn>
52+
<IgrColumn field="holdingName" dataType="string" header="holdingName" sortable={true} bodyTemplate={columnBodyTemplate} filterable={false} selectable={false}></IgrColumn>
53+
<IgrColumn field="positions" dataType="number" header="Positions" sortable={true} filterable={false} selectable={false}></IgrColumn>
54+
<IgrColumn field="value.boughtPrice" dataType="currency" header="Average Cost/Share" sortable={true} filterable={false} selectable={false}></IgrColumn>
55+
<IgrColumn field="value.currentPrice" dataType="currency" header="Last Price" sortable={true} filterable={false} selectable={false}></IgrColumn>
56+
<IgrColumn header="Daily Change %" sortable={true} filterable={false} selectable={false} key="edd5fd57-f366-41a7-ab71-4f54f6ebd8a4"></IgrColumn>
57+
<IgrColumn header="Market Value" sortable={true} filterable={false} selectable={false} key="20ffb91b-55c9-4294-8286-0de1c30febeb"></IgrColumn>
58+
<IgrColumn header="NET Profit/Loss" sortable={true} filterable={false} selectable={false} key="7aaf09c0-8ee8-4f54-b0bf-6c124aed404e"></IgrColumn>
59+
<IgrColumn header="NET Profit/Loss %" sortable={true} filterable={false} selectable={false} key="0305822a-4055-45f0-9319-31b73605aee8"></IgrColumn>
60+
<IgrColumn header="Allocation" sortable={true} filterable={false} selectable={false} key="46776679-446b-41bd-8db3-dbe47a7e1e45"></IgrColumn>
61+
<IgrColumn field="holdingPeriod" dataType="number" header="Holding Period" sortable={true} bodyTemplate={columnBodyTemplate1} filterable={false} selectable={false}></IgrColumn>
62+
</IgrGrid>
63+
</div>
64+
);
65+
}
66+
67+
export default function FinanceView() {
68+
const classes = createClassTransformer(styles);
69+
3870
return (
3971
<>
4072
<style>
4173
{lightBootstrap}
4274
</style>
43-
<div className={classes("row-layout financial-portfolio-container")}>
44-
<IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
45-
<IgrGridToolbar>
46-
<IgrGridToolbarActions>
47-
<IgrGridToolbarPinning></IgrGridToolbarPinning>
48-
<IgrGridToolbarHiding></IgrGridToolbarHiding>
49-
<IgrGridToolbarExporter></IgrGridToolbarExporter>
50-
</IgrGridToolbarActions>
51-
<IgrGridToolbarTitle>
52-
<span key={uuid()}>Financial Portfolio</span>
53-
</IgrGridToolbarTitle>
54-
</IgrGridToolbar>
55-
<IgrColumn field="id" dataType="string" header="Symbol" sortable={true} filterable={false} selectable={false}></IgrColumn>
56-
<IgrColumn field="holdingName" dataType="string" header="holdingName" sortable={true} bodyTemplate={columnBodyTemplate} filterable={false} selectable={false}></IgrColumn>
57-
<IgrColumn field="positions" dataType="number" header="Positions" sortable={true} filterable={false} selectable={false}></IgrColumn>
58-
<IgrColumn field="value.boughtPrice" dataType="currency" header="Average Cost/Share" sortable={true} filterable={false} selectable={false}></IgrColumn>
59-
<IgrColumn field="value.currentPrice" dataType="currency" header="Last Price" sortable={true} filterable={false} selectable={false}></IgrColumn>
60-
<IgrColumn header="Daily Change %" sortable={true} filterable={false} selectable={false} key="edd5fd57-f366-41a7-ab71-4f54f6ebd8a4"></IgrColumn>
61-
<IgrColumn header="Market Value" sortable={true} filterable={false} selectable={false} key="20ffb91b-55c9-4294-8286-0de1c30febeb"></IgrColumn>
62-
<IgrColumn header="NET Profit/Loss" sortable={true} filterable={false} selectable={false} key="7aaf09c0-8ee8-4f54-b0bf-6c124aed404e"></IgrColumn>
63-
<IgrColumn header="NET Profit/Loss %" sortable={true} filterable={false} selectable={false} key="0305822a-4055-45f0-9319-31b73605aee8"></IgrColumn>
64-
<IgrColumn header="Allocation" sortable={true} filterable={false} selectable={false} key="46776679-446b-41bd-8db3-dbe47a7e1e45"></IgrColumn>
65-
<IgrColumn field="holdingPeriod" dataType="number" header="Holding Period" sortable={true} bodyTemplate={columnBodyTemplate1} filterable={false} selectable={false}></IgrColumn>
66-
</IgrGrid>
67-
</div>
75+
<FinanceGrid />
6876
</>
6977
);
7078
}

‎src/app/views/fleet-management/fleet-management-view.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,47 @@ import createClassTransformer from '../../style-utils';
55
import styles from './fleet-management-view.module.css';
66
import darkMaterial from 'igniteui-react-grids/grids/themes/dark/material.css?inline';
77

8-
export default function FleetManagementView() {
8+
function FleetManagementGrid() {
99
const classes = createClassTransformer(styles);
1010
const uuid = () => crypto.randomUUID();
1111
const { vehiclesTable1 } = vehiclesUseGetTable1List();
1212

13+
return (
14+
<div className={classes("row-layout fleet-management-container")}>
15+
<IgrGrid data={vehiclesTable1} primaryKey="vehicleId" className={classes("ig-typography ig-scrollbar grid")}>
16+
<IgrGridToolbar>
17+
<IgrGridToolbarActions>
18+
<IgrGridToolbarPinning></IgrGridToolbarPinning>
19+
<IgrGridToolbarHiding></IgrGridToolbarHiding>
20+
<IgrGridToolbarExporter></IgrGridToolbarExporter>
21+
</IgrGridToolbarActions>
22+
<IgrGridToolbarTitle>
23+
<span key={uuid()}>Fleet Management</span>
24+
</IgrGridToolbarTitle>
25+
</IgrGridToolbar>
26+
<IgrColumn field="vehicleId" dataType="string" header="Vehicle ID" sortable={true} filterable={false} selectable={false}></IgrColumn>
27+
<IgrColumn field="licensePlate" dataType="string" header="License Plate" sortable={true} filterable={false} selectable={false}></IgrColumn>
28+
<IgrColumn field="make" dataType="string" header="Make" sortable={true} filterable={false} selectable={false}></IgrColumn>
29+
<IgrColumn field="model" dataType="string" header="Model" sortable={true} filterable={false} selectable={false}></IgrColumn>
30+
<IgrColumn field="type" dataType="string" header="Type" sortable={true} filterable={false} selectable={false}></IgrColumn>
31+
<IgrColumn field="vin" dataType="string" header="VIN" sortable={true} filterable={false} selectable={false}></IgrColumn>
32+
<IgrColumn field="status" dataType="string" header="Status" sortable={true} filterable={false} selectable={false}></IgrColumn>
33+
<IgrColumn field="locationCity" dataType="string" header="Location (City)" sortable={true} filterable={false} selectable={false}></IgrColumn>
34+
<IgrColumn field="locationGps" dataType="string" header="Location (GPS)" sortable={true} filterable={false} selectable={false}></IgrColumn>
35+
</IgrGrid>
36+
</div>
37+
);
38+
}
39+
40+
export default function FleetManagementView() {
41+
const classes = createClassTransformer(styles);
42+
1343
return (
1444
<>
1545
<style>
1646
{darkMaterial}
1747
</style>
18-
<div className={classes("row-layout fleet-management-container")}>
19-
<IgrGrid data={vehiclesTable1} primaryKey="vehicleId" className={classes("ig-typography ig-scrollbar grid")}>
20-
<IgrGridToolbar>
21-
<IgrGridToolbarActions>
22-
<IgrGridToolbarPinning></IgrGridToolbarPinning>
23-
<IgrGridToolbarHiding></IgrGridToolbarHiding>
24-
<IgrGridToolbarExporter></IgrGridToolbarExporter>
25-
</IgrGridToolbarActions>
26-
<IgrGridToolbarTitle>
27-
<span key={uuid()}>Fleet Management</span>
28-
</IgrGridToolbarTitle>
29-
</IgrGridToolbar>
30-
<IgrColumn field="vehicleId" dataType="string" header="Vehicle ID" sortable={true} filterable={false} selectable={false}></IgrColumn>
31-
<IgrColumn field="licensePlate" dataType="string" header="License Plate" sortable={true} filterable={false} selectable={false}></IgrColumn>
32-
<IgrColumn field="make" dataType="string" header="Make" sortable={true} filterable={false} selectable={false}></IgrColumn>
33-
<IgrColumn field="model" dataType="string" header="Model" sortable={true} filterable={false} selectable={false}></IgrColumn>
34-
<IgrColumn field="type" dataType="string" header="Type" sortable={true} filterable={false} selectable={false}></IgrColumn>
35-
<IgrColumn field="vin" dataType="string" header="VIN" sortable={true} filterable={false} selectable={false}></IgrColumn>
36-
<IgrColumn field="status" dataType="string" header="Status" sortable={true} filterable={false} selectable={false}></IgrColumn>
37-
<IgrColumn field="locationCity" dataType="string" header="Location (City)" sortable={true} filterable={false} selectable={false}></IgrColumn>
38-
<IgrColumn field="locationGps" dataType="string" header="Location (GPS)" sortable={true} filterable={false} selectable={false}></IgrColumn>
39-
</IgrGrid>
40-
</div>
48+
<FleetManagementGrid />
4149
</>
4250
);
4351
}

‎src/app/views/hr-portal/hr-portal-view.tsx‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import createClassTransformer from '../../style-utils';
66
import styles from './hr-portal-view.module.css';
77
import lightFluent from 'igniteui-react-grids/grids/themes/light/fluent.css?inline';
88

9-
export default function HrPortalView() {
9+
function HRPortalGrid() {
1010
const classes = createClassTransformer(styles);
1111
const uuid = () => crypto.randomUUID();
1212
const { hRDataTable1 } = hRDataUseGetTable1List();
@@ -61,33 +61,41 @@ export default function HrPortalView() {
6161
)
6262
}
6363

64+
return (
65+
<div className={classes("row-layout org-charthr-portal-container")}>
66+
<IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering={true} filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")} key={uuid()}>
67+
<IgrGridToolbar>
68+
<IgrGridToolbarActions>
69+
<IgrGridToolbarPinning></IgrGridToolbarPinning>
70+
<IgrGridToolbarHiding></IgrGridToolbarHiding>
71+
<IgrGridToolbarExporter></IgrGridToolbarExporter>
72+
</IgrGridToolbarActions>
73+
<IgrGridToolbarTitle>
74+
<span key={uuid()}>HR Portal</span>
75+
</IgrGridToolbarTitle>
76+
</IgrGridToolbar>
77+
<IgrColumn field="ID" dataType="number" header="ID" hidden={true} sortable={true} selectable={false}></IgrColumn>
78+
<IgrColumn field="Name" dataType="string" header="Name" width="300px" pinned={true} sortable={true} bodyTemplate={columnBodyTemplate} selectable={false}></IgrColumn>
79+
<IgrColumn field="JobTitle" dataType="string" header="Job Title" sortable={true} selectable={false}></IgrColumn>
80+
<IgrColumn field="Department" dataType="string" header="Department" sortable={true} selectable={false}></IgrColumn>
81+
<IgrColumn field="Location" dataType="string" header="Location" sortable={true} bodyTemplate={columnBodyTemplate1} selectable={false}></IgrColumn>
82+
<IgrColumn field="Contacts" dataType="string" header="Contacts" sortable={true} bodyTemplate={columnBodyTemplate2} selectable={false}></IgrColumn>
83+
<IgrColumn field="HireDate" dataType="date" header="HireDate" sortable={true} selectable={false}></IgrColumn>
84+
<IgrColumn field="GrossSalary" dataType="number" header="GrossSalary" sortable={true} selectable={false}></IgrColumn>
85+
</IgrTreeGrid>
86+
</div>
87+
);
88+
}
89+
90+
export default function HRPortalView() {
91+
const classes = createClassTransformer(styles);
92+
6493
return (
6594
<>
6695
<style>
6796
{lightFluent}
6897
</style>
69-
<div className={classes("row-layout org-charthr-portal-container")}>
70-
<IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering={true} filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")} key={uuid()}>
71-
<IgrGridToolbar>
72-
<IgrGridToolbarActions>
73-
<IgrGridToolbarPinning></IgrGridToolbarPinning>
74-
<IgrGridToolbarHiding></IgrGridToolbarHiding>
75-
<IgrGridToolbarExporter></IgrGridToolbarExporter>
76-
</IgrGridToolbarActions>
77-
<IgrGridToolbarTitle>
78-
<span key={uuid()}>HR Portal</span>
79-
</IgrGridToolbarTitle>
80-
</IgrGridToolbar>
81-
<IgrColumn field="ID" dataType="number" header="ID" hidden={true} sortable={true} selectable={false}></IgrColumn>
82-
<IgrColumn field="Name" dataType="string" header="Name" width="300px" pinned={true} sortable={true} bodyTemplate={columnBodyTemplate} selectable={false}></IgrColumn>
83-
<IgrColumn field="JobTitle" dataType="string" header="Job Title" sortable={true} selectable={false}></IgrColumn>
84-
<IgrColumn field="Department" dataType="string" header="Department" sortable={true} selectable={false}></IgrColumn>
85-
<IgrColumn field="Location" dataType="string" header="Location" sortable={true} bodyTemplate={columnBodyTemplate1} selectable={false}></IgrColumn>
86-
<IgrColumn field="Contacts" dataType="string" header="Contacts" sortable={true} bodyTemplate={columnBodyTemplate2} selectable={false}></IgrColumn>
87-
<IgrColumn field="HireDate" dataType="date" header="HireDate" sortable={true} selectable={false}></IgrColumn>
88-
<IgrColumn field="GrossSalary" dataType="number" header="GrossSalary" sortable={true} selectable={false}></IgrColumn>
89-
</IgrTreeGrid>
90-
</div>
98+
<HRPortalGrid />
9199
</>
92100
);
93101
}

0 commit comments

Comments
 (0)