Merge pull request #36 from upendraTekdi/cohort_list

Task #223115: add style for border on table , resolve build creation error
tekdi · Jul 19, 2024 · e9d58d0 · e9d58d0
2 parents cc3bd03 + 66b7ccf
commit e9d58d0
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 79 deletions.
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -9,16 +9,17 @@ import { IPagingProps } from "ka-table/props";
 import { updatePageIndex, updatePageSize } from "ka-table/actionCreators";
 import ActionCell from "./ActionCell";
 import ActionIcon from "./ActionIcon";
+
 interface KaTableComponentProps {
   columns: ITableProps["columns"];
   data?: ITableProps["data"];
   offset?: any;
   limit?: any;
   PagesSelector?: any;
   PageSizeSelector?: any;
-  pageSizes?:any
-  onDelete?:any
-  onEdit?:any
+  pageSizes?: any;
+  onDelete?: any;
+  onEdit?: any;
 
   extraActions: {
     name: string;
@@ -39,9 +40,9 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
 
   extraActions,
   onEdit,
-   onDelete,
+  onDelete,
   showIcons,
-  pageSizes
+  pageSizes,
 }) => {
   const tableProps: ITableProps = {
     columns,
@@ -52,28 +53,29 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
 
   return (
     <Paper>
-      <Table
-        {...tableProps}
-        paging={{
-          enabled:  true, // to do dynamic limit for enable  pagination and page sizes by data
-          pageIndex: 0,
-          pageSize: limit,
-          pageSizes: pageSizes,
-          position: PagingPosition.Bottom,
-        }}
-        childComponents={{
-          pagingSizes: {
-            content: (props) => <PageSizeSelector {...props} />,
-          },
-          pagingPages: {
-            content: (props) => <PagesSelector {...props} />,
-          },
-          cell: {
-            content: (props) => {
-              if (props.column.key === "actions") {
-                return (
-                  <>
-                  {/* <ActionCell
+      <div className="ka-table-wrapper">
+        <Table
+          {...tableProps}
+          paging={{
+            enabled: true, // to do dynamic limit for enable  pagination and page sizes by data
+            pageIndex: 0,
+            pageSize: limit,
+            pageSizes: pageSizes,
+            position: PagingPosition.Bottom,
+          }}
+          childComponents={{
+            pagingSizes: {
+              content: (props) => <PageSizeSelector {...props} />,
+            },
+            pagingPages: {
+              content: (props) => <PagesSelector {...props} />,
+            },
+            cell: {
+              content: (props) => {
+                if (props.column.key === "actions") {
+                  return (
+                    <>
+                      {/* <ActionCell
                     rowData={props.rowData}
                     extraActions={extraActions}
                     showIcons={showIcons}
@@ -84,20 +86,20 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                       throw new Error("Function not implemented.");
                     }}
                   /> */}
-                  <ActionIcon
-                  rowData={props.rowData}
-                   onEdit={onEdit}
-                   onDelete={onDelete}
-                  />
-                  </>
-
-                );
-              }
-              return null;
+                      <ActionIcon
+                        rowData={props.rowData}
+                        onEdit={onEdit}
+                        onDelete={onDelete}
+                      />
+                    </>
+                  );
+                }
+                return null;
+              },
             },
-          },
-        }}
-      />
+          }}
+        />
+      </div>
     </Paper>
   );
 };

diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
@@ -28,6 +28,9 @@ const Profile = () => {
   };
 
   const handleLogout = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.removeItem("token");
+    }
     router.push("/logout");
   };
 

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,19 +1,5 @@
 // import "@/styles/globals.css";
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 // import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { appWithTranslation } from "next-i18next";
@@ -24,11 +10,9 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { telemetryFactory } from "../utils/telemetry";
 import FullLayout from "@/components/layouts/FullLayout";
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from "@mui/material/styles";
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
 import customTheme from "../styles/customTheme";
-
+import "./../styles/style.css";
 function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     telemetryFactory.init();

diff --git a/src/pages/cohorts.tsx b/src/pages/cohorts.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { ChangeEvent, FormEvent } from "react";
 import KaTableComponent from "../components/KaTableComponent";
 import { DataType } from "ka-table/enums";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -172,25 +172,25 @@ const Cohorts: React.FC = () => {
     setSelectedFilter(event.target.value as string);
   };
 
-  useEffect(() => {
-    const fetchUserList = async () => {
-      try {
-        const limit = pageLimit;
-        // const page = 0;
-        const offset = pageOffset;
-        // const sort = ["createdAt", "asc"];
-        const filters = { role: Role.TEACHER };
-        const userId = localStorage.getItem(Storage.USER_ID) || "";
+  const fetchUserList = async () => {
+    try {
+      const limit = pageLimit;
+      // const page = 0;
+      const offset = pageOffset;
+      // const sort = ["createdAt", "asc"];
+      const filters = { role: Role.TEACHER };
+      const userId = localStorage.getItem(Storage.USER_ID) || "";
 
-        const resp = await getCohortList(userId);
-        const result = resp;
-        console.log("result", result);
+      const resp = await getCohortList(userId);
+      const result = resp;
+      console.log("result", result);
 
-        setData(result);
-      } catch (error) {
-        console.error("Error fetching user list:", error);
-      }
-    };
+      setData(result);
+    } catch (error) {
+      console.error("Error fetching user list:", error);
+    }
+  };
+  useEffect(() => {
     fetchUserList();
   }, [pageOffset, pageLimit]);
 
@@ -241,7 +241,7 @@ const Cohorts: React.FC = () => {
     setIsEditModalOpen(false);
   };
 
-  const handleInputName = (event: FormEvent<HTMLFormElement>) => {
+  const handleInputName = (event: ChangeEvent<HTMLInputElement>) => {
     const updatedName = event.target.value;
     setInputName(updatedName);
   };
@@ -259,6 +259,7 @@ const Cohorts: React.FC = () => {
       console.log("No cohort Id Selected");
     }
     onCloseEditMOdel();
+    fetchUserList();
   };
 
   return (

diff --git a/src/services/cohortService.ts b/src/services/cohortService.ts
@@ -21,8 +21,8 @@ export const getCohortList = async (
 export const updateCohortUpdate = async (
   userId: string,
   cohortDetails: {
-    name: string;
-    status: string;
+    name?: string;
+    status?: string;
   }
 ): Promise<any> => {
   const { name, status } = cohortDetails;

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -0,0 +1,4 @@
+
+.ka-tbody .ka-tr {
+  border-bottom: 2px solid #ececec; /* Red border bottom */
+}