admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

created new component for bucket managment

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-25 00:22:12 +05:30
parent 0bc56c82cf
commit 98c6e9edbe
1 changed files with 226 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/components/Directory/ManageBucket.jsx Normal file
View 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;