Merge pull request #1640 from Ansanjohny/dev

feat: Add category in ig dashboard
gtech-mulearn · Oct 7, 2024 · acc41d8 · acc41d8
2 parents ced8ca6 + c808608
commit acc41d8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/src/modules/Dashboard/modules/InterestGroup/InterestGroup.tsx b/src/modules/Dashboard/modules/InterestGroup/InterestGroup.tsx
@@ -5,23 +5,20 @@ import THead from "@/MuLearnComponents/Table/THead";
 import TableTop from "@/MuLearnComponents/TableTop/TableTop";
 import { deleteInterestGroups, getInterestGroups } from "./apis";
 import { useNavigate } from "react-router-dom";
-import {
-    MuButton,
-    PowerfulButton
-} from "@/MuLearnComponents/MuButtons/MuButton";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
 import { AiOutlinePlusCircle } from "react-icons/ai";
 import styles from "./InterestGroup.module.css";
 import { dashboardRoutes } from "@/MuLearnServices/urls";
 import { Blank } from "@/MuLearnComponents/Table/Blank";
-import CreateOrUpdateModal from "./CreateOrUpdateModal";
 import MuModal from "@/MuLearnComponents/MuModal/MuModal";
 import InterestGroupForm from "./InterestGroupForm";
+import { Label } from "recharts";
 
-interface IgDetails {
-    igName: string;
-    igCode: string;
-    igIcon: string;
-}
+// interface IgDetails {
+//     igName: string;
+//     igCode: string;
+//     igIcon: string;
+// }
 
 export type modalTypes = "edit" | "create" | null;
 
@@ -38,6 +35,7 @@ function InterestGroup() {
     const columnOrder = [
         { column: "name", Label: "Name", isSortable: true },
         { column: "members", Label: "Members", isSortable: true },
+        { column: "category", Label: "Category", isSortable: true },
         { column: "updated_at", Label: "Updated On", isSortable: true },
         { column: "updated_by", Label: "Updated By", isSortable: true },
         { column: "created_by", Label: "Created By", isSortable: true },

diff --git a/src/modules/Dashboard/modules/InterestGroup/InterestGroupForm.tsx b/src/modules/Dashboard/modules/InterestGroup/InterestGroupForm.tsx
@@ -1,8 +1,9 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import styles from "../../utils/modalForm.module.css";
 import toast from "react-hot-toast";
-import { customReactSelectStyles } from "../../utils/common";
 import { createInterestGroups, editInterestGroups, getIGDetails } from "./apis";
+import ReactSelect from "react-select";
+import styles2 from "./InterestGroupFrom.module.css";
 
 type Props = { id: string; isEditMode: boolean };
 
@@ -11,8 +12,19 @@ const IntrestGroupForm = forwardRef(
         const [data, setData] = useState<IGData>({
             name: "",
             icon: "",
-            code: ""
+            code: "",
+            category: "others"
         });
+        const interestGroup = [
+            { label: "Software", value: "software" },
+            { label: "Maker", value: "maker" },
+            {
+                label: "Management",
+                value: "management"
+            },
+            { label: "Creative", value: "creative" },
+            { label: "Others", value: "others" }
+        ];
 
         const [errors, setErrors] = useState<OrgFormErrors>({});
 
@@ -23,7 +35,8 @@ const IntrestGroupForm = forwardRef(
                     setData({
                         name: data.name,
                         icon: data.icon,
-                        code: data.code
+                        code: data.code,
+                        category: data.category
                     });
                 });
             }
@@ -142,6 +155,23 @@ const IntrestGroupForm = forwardRef(
                             <div style={{ color: "red" }}>{errors.icon}</div>
                         )}
                     </div>
+                    <ReactSelect
+                        required={true}
+                        className={styles2.inputBox}
+                        options={interestGroup}
+                        onChange={e => {
+                            setData(prevData => ({
+                                ...prevData,
+                                category: e?.value as string
+                            }));
+                        }}
+                        value={
+                            interestGroup.filter(e => {
+                                console.log(e.value, data.category);
+                                return e.value === data.category;
+                            })[0]
+                        }
+                    />
                 </form>
             </div>
         );

diff --git a/src/modules/Dashboard/modules/InterestGroup/InterestGroupFrom.module.css b/src/modules/Dashboard/modules/InterestGroup/InterestGroupFrom.module.css
@@ -0,0 +1,3 @@
+.inputBox {
+    width: 45%;
+}
diff --git a/src/modules/Dashboard/modules/InterestGroup/InterestGroupInterface.d.ts b/src/modules/Dashboard/modules/InterestGroup/InterestGroupInterface.d.ts
@@ -2,4 +2,5 @@ interface IGData {
     name: string;
     code: string;
     icon: string;
+    category: string;
 }