Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Commit

Permalink
Admin client dev (#49)
Browse files Browse the repository at this point in the history
  • Loading branch information
amarnath-dev authored Mar 9, 2024
2 parents 3691068 + 196940f commit a1e3147
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 135 deletions.
4 changes: 3 additions & 1 deletion client/src/Services/rightServices.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
35 changes: 14 additions & 21 deletions client/src/components/AddRight/AddRight.jsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
Expand All @@ -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"
Expand Down
44 changes: 29 additions & 15 deletions client/src/components/EditRight/EditRight.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
Expand All @@ -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>
Expand Down
136 changes: 136 additions & 0 deletions client/src/pages/AdminPages/Rights/Rights.jsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit a1e3147

Please sign in to comment.