Merge pull request #20 from shivamg9/develop

Enabled sorting on column headers
OpenG2P · Apr 1, 2024 · ada8f89 · ada8f89
2 parents 13e48da + ba5444c
commit ada8f89
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 29 deletions.
diff --git a/src/app/[locale]/applications/page.tsx b/src/app/[locale]/applications/page.tsx
@@ -31,6 +31,9 @@ export default function ApplcnPage({
   const currentPage = Number(searchParams?.page) || 1;
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -58,6 +61,42 @@ export default function ApplcnPage({
     router.push(`?page=${page}`);
   };
 
+  function getTransformedStatus(status: string) {
+    if (status === "active" || status === "inprogress") {
+      return "Applied";
+    }
+    return toTitleCase(status);
+  }
+  const sortApplications = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedApplications = [...applications].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "application_status") {
+        return order === "asc"
+          ? getTransformedStatus(a.application_status).localeCompare(
+              getTransformedStatus(b.application_status)
+            )
+          : getTransformedStatus(b.application_status).localeCompare(
+              getTransformedStatus(a.application_status)
+            );
+      } else if (column === "application_id") {
+        return order === "asc" ? a.application_id - b.application_id : b.application_id - a.application_id;
+      } else if (column === "date_applied") {
+        const dateA = new Date(a.date_applied).getTime();
+        const dateB = new Date(b.date_applied).getTime();
+        return order === "asc" ? dateA - dateB : dateB - dateA;
+      }
+      return 0;
+    });
+
+    setApplications(sortedApplications);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const isDataEmpty = !Array.isArray(applications) || applications.length < 1 || !applications;
 
   function getStatusClass(status: string) {
@@ -116,7 +155,10 @@ export default function ApplcnPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -131,7 +173,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("application_status")}
+                        >
                           {t("Application Status")}
                           <svg
                             data-column="1"
@@ -146,7 +191,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("application_id")}
+                        >
                           {t("Application ID")}
                           <svg
                             data-column="2"
@@ -161,7 +209,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("date_applied")}
+                        >
                           {t("Date Applied")}
                           <svg
                             data-column="3"

diff --git a/src/app/[locale]/benefits/page.tsx b/src/app/[locale]/benefits/page.tsx
@@ -31,6 +31,9 @@ export default function BenefPage({
   const currentPage = Number(searchParams?.page) || 1;
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -58,6 +61,34 @@ export default function BenefPage({
     router.push(`?page=${page}`);
   };
 
+  const sortBenefits = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedBenefits = [...benefits].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "entitlement_reference_number") {
+        return order === "asc"
+          ? a.entitlement_reference_number - b.entitlement_reference_number
+          : b.entitlement_reference_number - a.entitlement_reference_number;
+      } else if (column === "funds_awaited") {
+        return order === "asc" ? a.funds_awaited - b.funds_awaited : b.funds_awaited - a.funds_awaited;
+      } else if (column === "funds_received") {
+        return order === "asc" ? a.funds_received - b.funds_received : b.funds_received - a.funds_received;
+      } else if (column === "date_approved") {
+        const dateA = new Date(a.date_approved).getDate();
+        const dateB = new Date(b.date_approved).getDate();
+        return order === "asc" ? dateA - dateB : dateB - dateA;
+      }
+      return 0;
+    });
+
+    setBenefits(sortedBenefits);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const isDataEmpty = !Array.isArray(benefits) || benefits.length < 1 || !benefits;
 
   return (
@@ -96,7 +127,10 @@ export default function BenefPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -111,7 +145,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("entitlement_reference_number")}
+                        >
                           {t("Entitlement Reference Number")}
                           <svg
                             data-column="1"
@@ -126,7 +163,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("funds_awaited")}
+                        >
                           {t("Funds Awaited")}
                           <svg
                             data-column="2"
@@ -141,7 +181,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("funds_received")}
+                        >
                           {t("Funds Received")}
                           <svg
                             data-column="3"
@@ -156,7 +199,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("date_approved")}
+                        >
                           {t("Date Approved")}
                           <svg
                             data-column="4"

diff --git a/src/app/[locale]/home/page.tsx b/src/app/[locale]/home/page.tsx
@@ -29,6 +29,10 @@ export default function Page({
   const [paginatedPrograms, setPaginatedPrograms] = useState<ProgramDetails[]>([]);
   const [totalPages, setTotalPages] = useState<number>(0);
   const currentPage = Number(searchParams?.page) || 1;
+
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   const t = useTranslations();
 
   useEffect(() => {
@@ -54,6 +58,34 @@ export default function Page({
     setPaginatedPrograms(programs.slice(start, end));
   }, [currentPage, programs]);
 
+  const sortPrograms = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedPrograms = [...programs].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "enrollment_status") {
+        return order === "asc"
+          ? a.enrollment_status.localeCompare(b.enrollment_status)
+          : b.enrollment_status.localeCompare(a.enrollment_status);
+      } else if (column === "total_funds_awaited") {
+        return order === "asc"
+          ? a.total_funds_awaited - b.total_funds_awaited
+          : b.total_funds_awaited - a.total_funds_awaited;
+      } else if (column === "total_funds_received") {
+        return order === "asc"
+          ? a.total_funds_received - b.total_funds_received
+          : b.total_funds_received - a.total_funds_received;
+      }
+      return 0;
+    });
+
+    setPrograms(sortedPrograms);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const handlePageChange = (page: number) => {
     router.push(`?page=${page}`);
   };
@@ -96,7 +128,10 @@ export default function Page({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -111,7 +146,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("enrollment_status")}
+                        >
                           {t("Enrollment Status")}
                           <svg
                             data-column="1"
@@ -126,7 +164,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("total_funds_awaited")}
+                        >
                           {t("Total Funds Awaited")}
                           <svg
                             data-column="2"
@@ -141,7 +182,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("total_funds_received")}
+                        >
                           {t("Total Funds Received")}
                           <svg
                             data-column="3"

diff --git a/src/app/[locale]/programs/page.tsx b/src/app/[locale]/programs/page.tsx
@@ -34,6 +34,9 @@ export default function ProgrmPage({
 
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -70,6 +73,21 @@ export default function ProgrmPage({
     setPaginatedPrograms(programs.slice(start, end));
   }, [currentPage, programs]);
 
+  const sortPrograms = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedPrograms = [...programs].sort((a, b) => {
+      if (column === "name") {
+        return order === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+      } else if (column === "program_status")
+        return order === "asc" ? a.state.localeCompare(b.state) : b.state.localeCompare(a.state);
+      return 0;
+    });
+
+    setPrograms(sortedPrograms);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const handlePageChange = (page: number) => {
     router.push(`?page=${page}`);
   };
@@ -310,7 +328,10 @@ export default function ProgrmPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 text-sm font-normal">
-                        <div className="flex items-center">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortPrograms("name")}
+                        >
                           {t("Program Name")}
                           <Link href="#">
                             <svg
@@ -327,7 +348,10 @@ export default function ProgrmPage({
                       </th>
 
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortPrograms("program_status")}
+                        >
                           {t("Program Status")}
                           <Link href="#">
                             <svg

diff --git a/src/app/[locale]/reapply/page.tsx b/src/app/[locale]/reapply/page.tsx
@@ -35,9 +35,8 @@ export default function ApplcnPage() {
       case "completed":
         return "completedButton";
       case "active":
-        return "activeButton";
       case "inprogress":
-        return "inProgressButton";
+        return "appliedButton";
       case "rejected":
         return "rejectedButton";
       default:
@@ -148,7 +147,10 @@ export default function ApplcnPage() {
                             className={`top-14 text-xs  w-24 h-8 rounded-md text-center tracking-[0px] opacity-100 border-collapse border-[none] left-[811px] text-white ${getStatusClass(application.application_status)}`}
                             disabled={true}
                           >
-                            {toTitleCase(application.application_status)}
+                            {application.application_status === "active" ||
+                            application.application_status === "inprogress"
+                              ? "Applied"
+                              : toTitleCase(application.application_status)}
                           </button>
                         </td>
                         <td className="px-6 py-4">{application.application_id}</td>