Merge pull request #43 from SyncfusionExamples/1000396-employee

1000396: added UI changes for Payroll page in Employee Management

Author: BalajiSGrid

Employee_Managment_App/src/components/EmployeePayRoll.tsx

@@ -73,42 +73,42 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
   }, []);
 
   const itemTemplate = () => {
-    return (
-      <div>
-        <table className="CardTable">
-          <colgroup>
-            <col />
-          </colgroup>
-          <tbody>
-            <tr>
-              <td className="cardcell"> Regular Hours Worked </td>
-            </tr>
-            <tr>
-              <td className="cardcell">OverTime Hours Worked </td>
-            </tr>
-            <tr>
-              <td className="cardcell"> Bonus </td>
-            </tr>
-            <tr>
-              <td className="cardcell separateline"> Commission </td>
-            </tr>
-            <tr>
-              <td className="cardcell"> Federal Income Tax </td>
-            </tr>
-            <tr>
-              <td className="cardcell"> State Income Tax </td>
-            </tr>
-            <tr>
-              <td className="cardcell"> Social Security Tax </td>
-            </tr>
-            <tr>
-              <td className="cardcell"> MedicareTax </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  };
+  return (
+    <div>
+      <table className="CardTable">
+        <colgroup>
+          <col />
+        </colgroup>
+        <tbody>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> Regular Hours Worked </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}>OverTime Hours Worked </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> Bonus </td>
+          </tr>
+          <tr>
+            <td className="cardcell separateline" style={{ fontWeight: 400 }}> Commission </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> Federal Income Tax </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> State Income Tax </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> Social Security Tax </td>
+          </tr>
+          <tr>
+            <td className="cardcell" style={{ fontWeight: 400 }}> MedicareTax </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};
 
   const totalTemplate = () => {
     return (
@@ -208,21 +208,26 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
   ];
 
   const queryCellInfo = (args: QueryCellInfoEventArgs): void => {
-    if (args.column?.field === 'Total') {
-      for (let i: number = 0; i < elemClass.length; i++) {
-        const elem: HTMLElement = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
-        let value: number = 0;
-        for (let j: number = 0; j < months.length; j++) {
-          if ((args.data as any)[months[j].field]) {
-            value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
-          }
-        }
-        if (elem) {
-          elem.innerText = '$ ' + value.toFixed(2);
+  if (args.column?.field === 'Total') {
+    // Compute totals into the Total column
+    for (let i = 0; i < elemClass.length; i++) {
+      const elem = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
+      let value = 0;
+      for (let j = 0; j < months.length; j++) {
+        if ((args.data as any)[months[j].field]) {
+          value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
         }
       }
+      if (elem) {
+        elem.innerText = '$ ' + value.toFixed(2);
+      }
     }
-  };
+
+    // Make all Total column values medium (500)
+    const totalCells = args.cell?.querySelectorAll('.cardcell') ?? [];
+    totalCells.forEach((c) => ((c as HTMLElement).style.fontWeight = '500'));
+  }
+};
 
   const calculteGrossAggregate = (data: any, aggColumn: AggregateColumnModel): string => {
     const payStubData: MonthPayStub =
@@ -412,7 +417,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
                 type="Custom"
                 customAggregate={calculteGrossInYear}
                 footerTemplate={(props: any) => {
-                  return <span>$ {props.Custom}</span>;
+                  return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
                 }}
               />
               {months.map((x, index) => {
@@ -445,7 +450,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
                 type="Custom"
                 customAggregate={calculteDeductionInYear}
                 footerTemplate={(props: any) => {
-                  return <span>$ {props.Custom}</span>;
+                  return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
                 }}
               />
               {months.map((x, index) => {
@@ -470,30 +475,30 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
                 field="Item"
                 type="Custom"
                 footerTemplate={() => {
-                  return <strong>Net Pay</strong>;
+                  return <span style={{ fontWeight: 600 }}>Net Pay</span>;
                 }}
               />
               <AggregateColumnDirective
                 field="Total"
                 type="Custom"
                 customAggregate={calculteNetPayInYear}
                 footerTemplate={(props: any) => {
-                  return <strong>$ {props.Custom}</strong>;
+                  return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
                 }}
               />
               {months.map((x, index) => {
-                return (
-                  <AggregateColumnDirective
-                    key={index + 3}
-                    field={x.field}
-                    type="Custom"
-                    customAggregate={calculteNetPayAggregate}
-                    footerTemplate={(props: any) => {
-                      return <span>$ {props.Custom}</span>;
-                    }}
-                  />
-                );
-              })}
+              return (
+                <AggregateColumnDirective
+                  key={index + 3}
+                  field={x.field}
+                  type="Custom"
+                  customAggregate={calculteNetPayAggregate}
+                  footerTemplate={(props: any) => {
+                    return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
+                  }}
+                />
+              );
+            })}
             </AggregateColumnsDirective>
           </AggregateDirective>
         </AggregatesDirective>

Employee_Managment_App/src/components/TopNav.css

@@ -111,7 +111,6 @@
 
 /* Input group container */
 .search-field.input-group {
-  pointer-events: none;
   position: relative;
   display: flex;
   align-items: center;