Admin client dev

client/src/Services/rightServices.js

@@ -8,8 +8,10 @@ export const createRight = async (rightDetails) => {
         return error;
     }
 }
-export const updateRight = async (rightDetails, rightId) => {
+export const editRight = async (rightDetails, rightId) => {
     try {
+        console.log("details", rightDetails)
+        console.log("right id", rightId)
         const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
         return response.data;
     } catch (error) {

client/src/components/AddRight/AddRight.jsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { Modal } from "flowbite-react";
 import { createRight } from "../../Services/rightServices";
+import { toast } from "react-toastify";
 
 // eslint-disable-next-line react/prop-types
 function AddRight({ setOpenModal, openModal }) {
   const [formData, setFormData] = useState({
-    right_name: "",
-    right_desc: "",
+    name: "",
+    content: "",
   });
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -17,13 +18,18 @@ function AddRight({ setOpenModal, openModal }) {
   };
 
   const handleCreate = async () => {
-    if (!formData.right_name || !formData.right_desc) {
+    if (!formData.name || !formData.content) {
       console.log("Data fields Missing");
       return;
     }
     try {
       const response = await createRight(formData);
-      console.log("response in the page", response);
+      if (response.success === true) {
+        formData.name = "";
+        formData.content = "";
+        toast.success(response.message);
+        setOpenModal(false);
+      }
     } catch (error) {
       console.log("Error occurred", error);
     }
@@ -42,37 +48,24 @@ function AddRight({ setOpenModal, openModal }) {
               <input
                 type="text"
                 className="w-full rounded-md bg-gray-700 text-text"
-                value={formData.right_name}
+                value={formData.name}
                 onChange={handleChange}
-                name="right_name"
+                name="name"
               />
             </label>
           </div>
           <div className="w-full mt-3">
             <label htmlFor="">
               <h1 className="text-text py-2">Provide the Right Description</h1>
               <textarea
-                name="right_desc"
-                value={formData.right_desc}
+                name="content"
+                value={formData.content}
                 onChange={handleChange}
                 id=""
                 rows={8}
                 className="w-full rounded-md bg-gray-700 text-white"
               ></textarea>
             </label>
-            {/* <div>
-              <label
-                className="block mb-2 text-sm font-medium text-text"
-                htmlFor="small_size"
-              >
-                Select the image
-              </label>
-              <input
-                className="block w-full mb-5 text-xs text-gray-900 border border-gray-300 rounded-lg cursor-pointer focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
-                id="small_size"
-                type="file"
-              />
-            </div> */}
           </div>
           <button
             className="text-primary border-2 px-2 py-2 rounded-md float-end"

client/src/components/EditRight/EditRight.jsx

@@ -1,26 +1,37 @@
 import { Modal } from "flowbite-react";
 import { useEffect, useState } from "react";
+import { editRight } from "../../Services/rightServices";
+import { toast } from "react-toastify";
 
 // eslint-disable-next-line react/prop-types
 function EditRight({ setOpenModal, openModal, rightDetails }) {
   const [formData, setFormData] = useState({
-    right_name: "",
-    right_desc: "",
+    name: "",
+    content: "",
   });
   useEffect(() => {
     if (rightDetails) {
-      // eslint-disable-next-line react/prop-types
-      formData.right_name = rightDetails?.name;
-      // eslint-disable-next-line react/prop-types
-      formData.right_desc = rightDetails?.description;
+      setFormData({
+        name: rightDetails?.name || "",
+        content: rightDetails?.content || "",
+      });
     }
-  }, [formData, rightDetails]);
+  }, [rightDetails]);
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFormData({
-      ...formData,
+    setFormData((prevData) => ({
+      ...prevData,
       [name]: value,
-    });
+    }));
+  };
+  const handleEdit = async () => {
+    const response = await editRight(formData, rightDetails?._id);
+    if (response.success === true) {
+      toast.success(response.message);
+      formData.name = "";
+      formData.content = "";
+      setOpenModal(false);
+    }
   };
   return (
     <>
@@ -35,26 +46,29 @@ function EditRight({ setOpenModal, openModal, rightDetails }) {
               <input
                 type="text"
                 className="w-full rounded-md bg-gray-700 text-text"
-                value={formData?.right_name}
+                value={formData?.name}
                 onChange={handleChange}
-                name="right_name"
+                name="name"
               />
             </label>
           </div>
           <div className="w-full mt-3">
             <label htmlFor="">
               <h1 className="text-text py-2">Provide the Right Description</h1>
               <textarea
-                name="right_desc"
-                value={formData?.right_desc}
+                name="content"
+                value={formData?.content}
                 onChange={handleChange}
                 id=""
                 rows={8}
                 className="w-full rounded-md bg-gray-700 text-white"
               ></textarea>
             </label>
           </div>
-          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+          <button
+            className="text-primary border-2 px-2 py-2 rounded-md float-end"
+            onClick={handleEdit}
+          >
             Update
           </button>
         </Modal.Body>

client/src/pages/AdminPages/Rights/Rights.jsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import AddRight from "../../../components/AddRight/AddRight";
+import EditRight from "../../../components/EditRight/EditRight";
+import { getRight } from "../../../Services/rightServices";
+import { getDelete } from "../../../Services/rightServices";
+import timeFormat from "../../../utils/timeFormat";
+import { toast } from "react-toastify";
+
+function Rights() {
+  const [openModal, setOpenModal] = useState(false);
+  const [rightDetails, setRightDetails] = useState([]);
+
+  const [editRight, setEditRight] = useState();
+  const [editModal, setEditModal] = useState(false);
+
+  const handleModal = () => {
+    setOpenModal(true);
+  };
+  const handleEditModal = (rightId) => {
+    setEditModal(true);
+    const rightToEdit = rightDetails.find((right) => {
+      return right?._id === rightId;
+    });
+    setEditRight(rightToEdit);
+  };
+  useEffect(() => {
+    console.log("Runnning..");
+    const getRights = async () => {
+      const response = await getRight();
+      setRightDetails(response.rights);
+    };
+    getRights();
+  }, [
+    setOpenModal,
+    setEditModal,
+    openModal,
+    editModal,
+    setRightDetails,
+    setEditRight,
+  ]);
+  const handleDelete = async (rightId) => {
+    const response = await getDelete(rightId);
+    if (response.success === true) {
+      setRightDetails((prevDetails) =>
+        prevDetails.filter((right) => right._id !== rightId)
+      );
+      toast.success(response.message);
+    }
+  };
+  return (
+    <>
+      <EditRight
+        setOpenModal={setEditModal}
+        openModal={editModal}
+        rightDetails={editRight ? editRight : null}
+      />
+      <AddRight setOpenModal={setOpenModal} openModal={openModal} />
+      <div className="h-full bg-background">
+        <div className="col-span-9">
+          {/* Text Components  */}
+          <div className="text-text flex justify-between">
+            <div>
+              <h1 className="text-2xl py-12">Rights Management</h1>
+            </div>
+            <div className="px-8">
+              <button
+                className="text-xl py-12 text-pretty text-primary underline"
+                onClick={handleModal}
+              >
+                Create
+              </button>
+            </div>
+          </div>
+          {/* Table Component  */}
+          <div>
+            <>
+              <table className="w-full text-sm text-left rtl:text-right rounded">
+                <thead className="text-xs bg-secondary rounded">
+                  <tr>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      No
+                    </th>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      Name
+                    </th>
+                    <th scope="col" className="px-6 py-3 text-primary">
+                      Date
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-3 text-primary text-center"
+                    >
+                      Edit or Delete
+                    </th>
+                  </tr>
+                </thead>
+                {rightDetails.map((right, index) => {
+                  return (
+                    <>
+                      <tbody className="text-text" key={index}>
+                        <tr className="border-b border-gray-500">
+                          <th scope="row" className="px-6 py-4 font-medium">
+                            {index + 1}
+                          </th>
+                          <td className="px-6 py-4">{right?.name}</td>
+                          <td className="px-6 py-4">
+                            {timeFormat(right?.createdAt)}
+                          </td>
+                          <td className="px-6 py-4 flex justify-center">
+                            <button
+                              className="border py-1 px-6 rounded hover:bg-green-500"
+                              onClick={() => handleEditModal(right?._id)}
+                            >
+                              Edit
+                            </button>
+                            <button
+                              className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
+                              onClick={() => handleDelete(right?._id)}
+                            >
+                              Delete
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </>
+                  );
+                })}
+              </table>
+            </>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+export default Rights;