created new component for bucket managment
This commit is contained in:
Pramod Mahajan
parent
a965116aa5
commit
3ff8066803
226
src/components/Directory/ManageBucket.jsx
Normal file
226
src/components/Directory/ManageBucket.jsx
Normal file
@ -0,0 +1,226 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import IconButton from "../common/IconButton";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { bucketScheam } from "./DirectorySchema";
|
||||||
|
import showToast from "../../services/toastService";
|
||||||
|
import Directory from "../../pages/Directory/Directory";
|
||||||
|
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||||
|
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||||
|
import { useBuckets } from "../../hooks/useDirectory";
|
||||||
|
|
||||||
|
const ManageBucket = () =>
|
||||||
|
{
|
||||||
|
const [bucketList, setBucketList] = useState([]);
|
||||||
|
|
||||||
|
const { buckets } = useBuckets();
|
||||||
|
const [action_bucket, setAction_bucket] = useState(false);
|
||||||
|
const [isSubmitting, setSubmitting] = useState(false);
|
||||||
|
const [selected_bucket, select_bucket] = useState(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(bucketScheam),
|
||||||
|
defaultValues: {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
} );
|
||||||
|
|
||||||
|
const onSubmit = async (data) => {
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
let response;
|
||||||
|
|
||||||
|
if ( selected_bucket )
|
||||||
|
{
|
||||||
|
let payload ={...data, id:selected_bucket.id}
|
||||||
|
response = await DirectoryRepository.UpdateBuckets(selected_bucket.id, payload);
|
||||||
|
const cache_buckets = getCachedData("buckets") || [];
|
||||||
|
const updatedBuckets = cache_buckets.map((bucket) =>
|
||||||
|
bucket.id === selected_bucket.id ? response?.data : bucket
|
||||||
|
);
|
||||||
|
cacheData( "buckets", updatedBuckets );
|
||||||
|
setBucketList(updatedBuckets);
|
||||||
|
showToast("Bucket Updated Successfully", "success");
|
||||||
|
} else {
|
||||||
|
response = await DirectoryRepository.CreateBuckets(data);
|
||||||
|
const cache_buckets = getCachedData("buckets") || [];
|
||||||
|
const updatedBuckets = [...cache_buckets, response?.data];
|
||||||
|
cacheData( "buckets", updatedBuckets );
|
||||||
|
setBucketList(updatedBuckets);
|
||||||
|
showToast("Bucket Created Successfully", "success");
|
||||||
|
}
|
||||||
|
|
||||||
|
handleBack();
|
||||||
|
} catch (error) {
|
||||||
|
const message =
|
||||||
|
error?.response?.data?.message ||
|
||||||
|
error?.message ||
|
||||||
|
"Error occurred during API call";
|
||||||
|
showToast(message, "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
reset({
|
||||||
|
name: selected_bucket?.name || "",
|
||||||
|
description: selected_bucket?.description || "",
|
||||||
|
});
|
||||||
|
}, [ selected_bucket ] );
|
||||||
|
|
||||||
|
useEffect( () =>
|
||||||
|
{
|
||||||
|
setBucketList( buckets )
|
||||||
|
}, [ buckets ] )
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
select_bucket(null);
|
||||||
|
setAction_bucket(false);
|
||||||
|
setSubmitting(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container m-0 p-0" style={{ minHeight: "200px" }}>
|
||||||
|
<div className="d-flex justify-content-center">
|
||||||
|
<p className="fs-h6 fw-semibold m-0">Manage Buckets</p>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
|
||||||
|
<i
|
||||||
|
className={`fa-solid fa-arrow-left fs-5 cursor-pointer ${
|
||||||
|
action_bucket ? "" : "d-none"
|
||||||
|
}`}
|
||||||
|
onClick={handleBack}
|
||||||
|
></i>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn btn-xs btn-primary ms-auto ${
|
||||||
|
action_bucket ? "d-none" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => setAction_bucket(true)}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
Add Bucket
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{!action_bucket ? (
|
||||||
|
<div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
|
||||||
|
<table className="table px-2">
|
||||||
|
<thead className="p-0">
|
||||||
|
<tr className="p-0">
|
||||||
|
<th colSpan={2}>
|
||||||
|
<div className="d-flex justify-content-start align-items-center gap-1">
|
||||||
|
<IconButton
|
||||||
|
size={12}
|
||||||
|
iconClass="fa-solid fa-bucket"
|
||||||
|
color="info"
|
||||||
|
/>
|
||||||
|
<span>Name</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th className="text-start d-none d-sm-table-cell">
|
||||||
|
<div className="d-flex align-items-center justify-content-start gap-1">
|
||||||
|
<IconButton
|
||||||
|
size={12}
|
||||||
|
iconClass="fa-solid fa-file-lines"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
<span>Description</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div className="d-flex align-items-center justify-content-center gap-1">
|
||||||
|
<IconButton
|
||||||
|
size={12}
|
||||||
|
iconClass="fa-solid fa-gear"
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
<span>Action</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody className="table-border-bottom-0 overflow-auto">
|
||||||
|
{bucketList.map((bucket) => (
|
||||||
|
<tr key={bucket.id}>
|
||||||
|
<td colSpan={2} className="text-start">
|
||||||
|
{bucket.name}
|
||||||
|
</td>
|
||||||
|
<td className="text-start d-none d-sm-table-cell">
|
||||||
|
{bucket.description}
|
||||||
|
</td>
|
||||||
|
<td className="justify-content-center">
|
||||||
|
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||||
|
<i
|
||||||
|
className="bx bx-edit bx-sm text-primary cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
select_bucket(bucket);
|
||||||
|
setAction_bucket(true);
|
||||||
|
}}
|
||||||
|
></i>
|
||||||
|
<i className="bx bx-trash bx-sm text-danger cursor-pointer"></i>
|
||||||
|
<i className="bx bx-user-plus cursor-pointer"></i>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
|
||||||
|
<div className="">
|
||||||
|
<label className="form-label">Bucket Name</label>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("name")}
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<small className="danger-text">{errors.name.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="">
|
||||||
|
<label className="form-label">Bucket Discription</label>
|
||||||
|
<textarea
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("description")}
|
||||||
|
/>
|
||||||
|
{errors.description && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.description.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 d-flex justify-content-center gap-3">
|
||||||
|
<button
|
||||||
|
type="reset"
|
||||||
|
className="btn btn-sm btn-secondary"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? "Please wait..." : "Submit"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ManageBucket;
|
||||||
Loading…
x
Reference in New Issue
Block a user