Merge branch 'master' of...

Merge branch 'master' of https://gitlab.mynisum.com/vsingamchetty/nisum-scorecard into scorecarduidesigns

package-lock.json

@@ -1993,9 +1993,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },

src/assets/icons/downloadIcon.js

@@ -3,9 +3,9 @@ import React from 'react'
 function DownloadIcon() {
     return (
         <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" className='mr-2'>
-        <path d="M12 7L12 14M12 14L15 11M12 14L9 11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M16 17H12H8" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-        <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="white" stroke-width="1.5"/>
+        <path d="M12 7L12 14M12 14L15 11M12 14L9 11" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M16 17H12H8" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
+        <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="white" strokeWidth="1.5"/>
         </svg>
     )
 }

src/components/accordion/index.jsx

@@ -59,7 +59,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
           className="flex items-center rounded-lg  w-full py-2 px-2 mt-4 font-medium rtl:text-right bg-white text-gray-500 border border-[#B7B7B7] focus:ring-4   hover:bg-gray-100 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2" >
           <span className="w-1/2 text-start ms-2">{title}</span>
           <span className="w-1/2 flex justify-between">
-            Score :{title === "Duties" ? defaultAvgScore : initiativeAvgScore}
+            Score :  {title === "Duties" ? defaultAvgScore : initiativeAvgScore}
           <ModalButton type={`${title === "Duties" ? "duties" : "initiative"}`} handleAddActivity={handleAddActivity}/>
           </span>
           <svg data-accordion-icon className="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

src/components/table/index.jsx

 import React, {useState, useEffect} from "react";
+import { useSelector, useDispatch} from "react-redux";
+import {setSortKey, setSortOrder} from '../../redux/reducers/reporteesSlice';
 import Loading from "../loading Component/Loading";
 import SortButton from "../sortButton";
 
-function Table({headers, data,loading, maxHeight}) {
-  const [sortedData, setSortedData] = useState([]);
-  const [sortKey, setSortKey] = useState(null);
-  const [sortOrder, setSortOrder] = useState('asc');
+function Table({headers, data,loading, handleSorting }) {
+  const dispatch = useDispatch();
+  const {sortKey,  sortOrder} = useSelector((state) => state.reportees);
+  // const [sortedData, setSortedData] = useState([]);
+  // const [sortKey, setSortKey] = useState(null);
+  // const [sortOrder, setSortOrder] = useState('asc');
 
-  useEffect(() => {
-    if(sortKey) {
-      setSortKey(null);
-    }
-    setSortedData(data);
-  }, [data]);
+  // useEffect(() => {
+  //   if(sortKey) {
+  //     setSortKey(null);
+  //   }
+  //   setSortedData(data);
+  // }, [data]);
+
+  // useEffect(() => {
+  //   if(sortKey) {
+      
+  //   }
+  // }, [sortKey, sortOrder])
 
   const handleSort = (key) => {
-    const order = key === sortKey ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
 
+    const order = key === sortKey ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
     if(sortOrder === 'desc' && key === sortKey) {
-      setSortedData(data);
-      setSortKey(null);
-      setSortOrder('asc');
+        dispatch(setSortKey(null))
+      dispatch(setSortOrder('asc'));
+        handleSorting(null, order)
     } else {
-      const sorted = [...data].sort((a, b) => {
-        if (typeof a[key] === 'string') {
-          return order === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
-        }
-        return order === 'asc' ? a[key] - b[key] : b[key] - a[key];
-      });
-      setSortedData(sorted);
-      setSortKey(key);
-      setSortOrder(order);
+     dispatch(setSortKey(key));
+      dispatch(setSortOrder(order));
+      handleSorting(key, order)
     }
    
+
+    // if(sortOrder === 'desc' && key === sortKey) {
+    //   setSortedData(data);
+    //   setSortKey(null);
+    //   setSortOrder('asc');
+    // } else {
+    //   const sorted = [...data].sort((a, b) => {
+    //     if (typeof a[key] === 'string') {
+    //       return order === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
+    //     }
+    //     return order === 'asc' ? a[key] - b[key] : b[key] - a[key];
+    //   });
+    //   setSortedData(sorted);
+    //   setSortKey(key);
+    //   setSortOrder(order);
+    // }
+
   };
 
   if(loading) return <Loading/>
@@ -58,7 +79,7 @@ function Table({headers, data,loading, maxHeight}) {
        { 
        (data?.length)?<tbody >
          {
-           sortedData?.map((item, index) => (
+           data?.map((item, index) => (
                <tr key={item.id} className="bg-white  hover:bg-gray-300 " >
                    {
                      headers?.map(({render, id}) => (

src/pages/dashboard/index.jsx

@@ -10,7 +10,7 @@ import PaginationComponent from "../../components/Pagenation/Pagenation";
 function Dashboard() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { reportees, loading, totalCount, currPage,  pagesCount} = useSelector((state) => state.reportees);
+  const { reportees, loading, totalCount, currPage,  pagesCount, sortKey, sortOrder} = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
   const [reporteIds, setReporteIds] = useState([]);
   const [inputValue, setInputValue] = useState(null);
@@ -20,12 +20,22 @@ function Dashboard() {
     let data = {
       reportees: userDetails.user.reportees,
       page: currPage,
-      perPage: 10
+      perPage: 10,
+      sort: sortKey ? {type:sortKey, order: sortOrder === "asc" ? 1 : -1} : {}
     }
     dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 
+  const handleSort = (key, order) => {
+    let data = {
+      reportees: userDetails.user.reportees,
+      page: currPage,
+      perPage: 10,
+      sort: key ? {type:key, order: order === "asc" ? 1 : -1} : {}
+    }
+    dispatch(fetchReportees(data))
+  }
 
   useEffect(() => {
     dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
@@ -122,7 +132,7 @@ function Dashboard() {
           <label>Search :</label>
           <input placeholder="Name/Id/Designation/Role"  value={inputValue} onChange={handleChange} type="text" className="p-1 px-2 border rounded ml-2 placeholder:text-[14px]"/>
         </div>
-         <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
+         <Table headers={headers} data={reportees} loading={loading} handleSorting={handleSort}/>
          
       <div className="">
         {reportees.length>0 && pagesCount>1 && (

src/pages/reportexport/index.jsx

@@ -177,7 +177,7 @@ function Exporttable() {
           return true;
         }
       } else {
-        if((preEmployee !== selectedEmployee && fromDate !== preFromDate && toDate !== preToDate) || activitiesData.length === 0) {
+        if((preEmployee !== selectedEmployee || fromDate !== preFromDate || toDate !== preToDate) || activitiesData.length === 0) {
           return true;
         }
       }
@@ -262,8 +262,9 @@ function Exporttable() {
                     type="button"
                     className={styles.downloadButton}
                   >
+                    <span>{pdfLoading ? "Downloading... " : "Download "}  </span>
                     <DownloadIcon />
-                    <span>{pdfLoading ? "Downloading..." : "Download"}</span>
+
                     { pdfLoading && <div className="loading ml-2 "></div>}
                   </button>
                 </div>

src/pages/viewReportee/index.jsx

@@ -106,7 +106,7 @@ function Viewreportee() {
                 <span className="font-medium">Role : </span> {viewReportee?.techStack}
               </p>
               <p>
-                <span className="font-medium">Employee Id:  </span> {viewReportee?.empId}
+                <span className="font-medium">Employee Id :  </span> {viewReportee?.empId}
               </p>
             </div>
             <div className="flex flex-col justify-center items-center">

src/redux/reducers/exporttableslice.js

@@ -36,7 +36,7 @@ const exporttableSlice = createSlice({
       state.error = "pending";
     });
     builder.addCase(fetchReportesActivitiesData.fulfilled, (state, action) => {
-      console.log(action.payload.activities)
+      // console.log(action.payload.activities)
       state.loading = false;
       state.activitiesData = action.payload.activities      ;
       state.error = "";

src/redux/reducers/reporteesSlice.js

@@ -9,7 +9,9 @@ const initialState = {
   loading: false,
   error: null,
   currPage:1,
-  pagesCount:1
+  pagesCount:1,
+  sortKey: null,
+  sortOrder: 'asc'
 };
 
 export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
@@ -43,6 +45,12 @@ const reporteesSlice = createSlice({
     },
     setPagesCount: (state, action) => {
       state.pagesCount = action.payload
+    },
+    setSortKey: (state, action) => {
+      state.sortKey = action.payload
+    },
+    setSortOrder: (state, action) => {
+      state.sortOrder = action.payload
     }
   },
   extraReducers: (builder) => {
@@ -64,6 +72,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees,setViewReportee, setCurrPage, setPagesCount} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee, setCurrPage, setPagesCount, setSortKey, setSortOrder} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;

src/redux/reducers/viewreporteeSlice.js

@@ -15,7 +15,7 @@ const initialState = {
 export const fetchReporteeActivities = createAsyncThunk("getReports", async (data) => {
   return await axios
     .post(`${base_url}/getActivities`, data)
-    .then((response) => response.data?.activities);
+    .then((response) => {return {data:response.data?.activities, type:data.types}});
 });
 
 export const fetchActivitiesAvg = createAsyncThunk("getActivities-avg", async (data) => {
@@ -37,8 +37,8 @@ const reportSlice = createSlice({
       return {...state,loading :true,error :"loading"}
     });
     builder.addCase(fetchReporteeActivities.fulfilled, (state, action) => {
-      const {type} = action?.payload[0] ?? {}
-      return {...state,loading :false,error :"", [`${type}Reports`]: action.payload}
+      const {data, type} = action.payload;
+      return {...state,loading :false,error :"", [`${type[0]}Reports`]: data}
     });
     builder.addCase(fetchReporteeActivities.rejected, (state, action) => {
       return {...state,loading :false,error :action.error || "Something went wrong!",reports:null}