Skip to content

Ttonev/hr portal latest #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dkamburov merged 21 commits into from
Apr 25, 2025
Merged

Ttonev/hr portal latest #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5a93ffd
hr-portal initial version
tishko0 Apr 8, 2025
aa46dbb
hr portal react
tishko0 Apr 10, 2025
65e49a1
removed unnecessary wrapping
tishko0 Apr 10, 2025
d1e7cae
resolved comments
tishko0 Apr 22, 2025
e61cb88
Merge branch 'skrastev/sales-tabs' of https://github.com/IgniteUI/gri…
mddragnev Apr 22, 2025
e7da3e8
Updated vite to include project assets and updated images to resolve …
tishko0 Apr 23, 2025
9a2f64d
Merge branch 'ttonev/hr-portal' of https://github.com/IgniteUI/grid-d…
tishko0 Apr 23, 2025
2358bd1
Merge branch 'ttonev/hr-portal-latest' of https://github.com/IgniteUI…
tishko0 Apr 23, 2025
2a5b53c
cleaning up
tishko0 Apr 23, 2025
0ac6f75
Merge remote-tracking branch 'origin' into ttonev/hr-portal-latest
tishko0 Apr 23, 2025
a57edec
updated app to run locally and with plugin
tishko0 Apr 24, 2025
8fcf092
Merge remote-tracking branch 'origin' into ttonev/hr-portal-latest
tishko0 Apr 24, 2025
16eed0d
Merge branch 'vnext' into ttonev/hr-portal-latest
dkamburov Apr 24, 2025
7c461fa
resolved comments
tishko0 Apr 24, 2025
59269eb
Merge branch 'ttonev/hr-portal-latest' of https://github.com/IgniteUI…
tishko0 Apr 24, 2025
75b65e4
added interface for data type and simplified date template
tishko0 Apr 25, 2025
1474af9
Merge remote-tracking branch 'origin' into ttonev/hr-portal-latest
tishko0 Apr 25, 2025
f42c800
removed padding
tishko0 Apr 25, 2025
67c3408
Merge branch 'vnext' into ttonev/hr-portal-latest
tishko0 Apr 25, 2025
e21656c
updated classes and reordered data
tishko0 Apr 25, 2025
8a7ef32
Merge branch 'ttonev/hr-portal-latest' of https://github.com/IgniteUI…
tishko0 Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions projects/hr-portal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<head>
<meta charset="utf-8" />
<title>HR Portal</title>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:wght@300;400;600;700' rel='stylesheet'>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>S
<link rel='stylesheet' href='./node_modules/igniteui-webcomponents/themes/light/fluent.css'>
<link rel='stylesheet' href='./node_modules/igniteui-react-grids/grids/themes/light/fluent.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
Expand Down
2 changes: 1 addition & 1 deletion projects/hr-portal/src/app/hr-portal/hr-portal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
font-family: 'Open Sans', sans-serif;
--ig-font-family: "Open Sans", sans-serif;
margin: 0;
Copy link
Contributor

@MarielaTihova MarielaTihova Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you need these styles for margin of the body both here and in styles.scss?

Copy link
Contributor Author

@tishko0 tishko0 Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's just one element so I removed the body completely

padding: 0;
background: #f9f9f9;
Expand Down
37 changes: 17 additions & 20 deletions projects/hr-portal/src/app/hr-portal/hr-portal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,12 @@ import {
import { IgrIcon, IgrAvatar, IgrIconButton, IgrButton, registerIcon } from 'igniteui-react';
import 'igniteui-react-grids/grids/combined';
import 'igniteui-react-grids/grids/themes/light/fluent.css';
import { DataService } from './../services/data.service';
import { icons } from '../data/icons/Icons'
import { dataService } from './../services/data.service';
import { icons } from '../data/icons/Icons';

export default function HRPortal() {
const [data, setData] = useState<any[]>([]);
const [isSorted, setIsSorted] = useState(false);
const dataService = React.useMemo(() => new DataService(), []);

const gridRef = useRef<IgrTreeGrid | null>(null);

useEffect(() => {
Expand All @@ -35,10 +33,10 @@ export default function HRPortal() {
icons.forEach((element: { name: string; path: string; category: string }) => {
registerIcon(element.name, element.path, element.category);
});
}, [dataService]);
}, []); // No dependency on dataService

const avatarTemplate = (props: { dataContext: IgrCellTemplateContext }) => {
const data = props.dataContext.cell.row.data;
const avatarTemplate = ({ cell }: IgrCellTemplateContext) => {
const data = cell.row.data;
return (
<div className="employeeDiv">
<IgrAvatar shape="rounded" src={data.Picture} className="small" />
Expand All @@ -47,8 +45,8 @@ export default function HRPortal() {
);
};

const countryIconTemplate = (props: { dataContext: IgrCellTemplateContext }) => {
const data = props.dataContext.cell.row?.data;
const countryIconTemplate = ({ cell }: IgrCellTemplateContext) => {
const data = cell.row?.data;
if (!data) {
return <div>No Data</div>; // Fallback for missing data
}
Expand All @@ -60,8 +58,8 @@ export default function HRPortal() {
);
};

const contactsTemplate = (props: { dataContext: IgrCellTemplateContext }) => {
const data = props.dataContext.cell.row.data;
const contactsTemplate = ({ cell }: IgrCellTemplateContext) => {
const data = cell.row.data;
return (
<div className="center-content small">
<a href={`mailto:${data.Email}`}>
Expand All @@ -77,8 +75,8 @@ export default function HRPortal() {
);
};

const dateTemplate = (props: { dataContext: IgrCellTemplateContext }) => {
const data = props.dataContext.cell.row.data;
const dateTemplate = ({ cell }: IgrCellTemplateContext) => {
const data = cell.row.data;
Copy link
Contributor

@MarielaTihova MarielaTihova Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why use cell.row.data here? You only need the value of the column here formatted in some way. You can remove the { } around cell and use .cell.value instead

Copy link
Contributor Author

@tishko0 tishko0 Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was for consistency with the rest of the templates, but if you think this way is better i am with you so I have changed it

const formattedDate = new Date(data.HireDate).toISOString().split('T')[0];
return <>{formattedDate}</>;
};
Expand All @@ -91,9 +89,8 @@ export default function HRPortal() {
}, []);

const handleSortingChanged = useCallback(() => {
const grid = document.getElementById('treeGrid') as IgrTreeGrid;
if (grid) {
setIsSorted(grid.sortingExpressions.length > 0);
if (gridRef.current) {
setIsSorted(gridRef.current.sortingExpressions.length > 0);
}
}, []);

Expand All @@ -113,9 +110,9 @@ export default function HRPortal() {
>
<IgrPaginator perPage={20} />
<IgrGridToolbar>
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText">HR Portal</span>
</IgrGridToolbarTitle>
<IgrGridToolbarTitle key="toolbarTitle">
<span key="toolbarTitleText">HR Portal</span>
</IgrGridToolbarTitle>
<IgrGridToolbarActions>
{isSorted && (
<div className="icon-button-group">
Expand All @@ -141,5 +138,5 @@ export default function HRPortal() {
<IgrColumn field="GrossSalary" header="Gross Salary" dataType="currency" minWidth="100px" sortable={true} />
</IgrTreeGrid>
);
};
}

2 changes: 1 addition & 1 deletion projects/hr-portal/src/app/services/data.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ export class DataService {
}
}

export {};
export const dataService = new DataService();
15 changes: 0 additions & 15 deletions projects/hr-portal/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@ body {
background: hsla(var(--ig-surface-500, 0 0% 100%));
color: var(--ig-surface-500-contrast, black);
font-family: var(--ig-font-family);
padding: 0;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

html, body, #root {
Expand All @@ -23,12 +17,3 @@ html {
box-sizing: border-box;
}

img, video {
height: auto;
max-width: 100%;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
6 changes: 3 additions & 3 deletions src/app/app-routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { redirect, RouteObject } from 'react-router-dom';
import ERPHGridView from './views/erp-hgrid/erp-hgrid-view';
import HRPortalView from './views/hr-portal/hr-portal-view';
import HRPortal from './../../projects/hr-portal/src/app/hr-portal/hr-portal';
import FinanceView from './views/finance/finance-view';
import SalesView from './views/sales/sales-view';
import FleetManagementView from './views/fleet-management/fleet-management-view';
Expand All @@ -12,14 +12,14 @@ export const routes: RouteObject[] = [
children: [
{ index: true, loader: () => redirect('inventory') },
{ path: 'inventory', element: <ERPHGridView /> },
{ path: 'hr-portal', element: <HRPortalView /> },
{ path: 'hr-portal', element: <HRPortal /> },
{ path: 'finance', element: <FinanceView />},
{ path: 'sales', element: <SalesView /> },
{ path: 'fleet', element: <FleetManagementView /> },
]
},
{ path: 'inventory', element: <ERPHGridView /> },
{ path: 'hr-portal', element: <HRPortalView /> },
{ path: 'hr-portal', element: <HRPortal /> },
{ path: 'finance', element: <FinanceView />},
{ path: 'sales', element: <SalesView /> },
{ path: 'fleet', element: <FleetManagementView /> },
Expand Down