96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
import { useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { bucketScheam } from "./DirectorySchema";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import Label from "../common/Label";
|
|
|
|
const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(bucketScheam),
|
|
defaultValues: selectedBucket || { name: "", description: "" },
|
|
});
|
|
|
|
useEffect(() => {
|
|
reset(selectedBucket || { name: "", description: "" });
|
|
}, [selectedBucket, reset]);
|
|
|
|
const isEditMode = mode === "edit";
|
|
const isCreateMode = mode === "create";
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<i
|
|
className="bx bx-left-arrow-alt bx-md cursor-pointer"
|
|
onClick={onCancel}
|
|
></i>
|
|
|
|
{/* Show edit toggle only for existing bucket in edit mode */}
|
|
{/* {isEditMode && (
|
|
<i className="bx bx-edit bx-sm text-primary cursor-pointer"></i>
|
|
)} */}
|
|
</div>
|
|
|
|
{(isCreateMode || isEditMode) ? (
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="mb-3 mt-5">
|
|
<Label htmlFor="Name" className="text-start" required>
|
|
Name
|
|
</Label>
|
|
<input
|
|
className="form-control form-control-sm"
|
|
{...register("name")}
|
|
/>
|
|
{errors.name && (
|
|
<small className="danger-text">{errors.name.message}</small>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<Label htmlFor="description" className="text-start" required>
|
|
Description
|
|
</Label>
|
|
<textarea
|
|
className="form-control form-control-sm"
|
|
{...register("description")}
|
|
rows="3"
|
|
/>
|
|
{errors.description && (
|
|
<small className="danger-text">{errors.description.message}</small>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-4 mb-3 d-flex gap-3 justify-content-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-label-secondary"
|
|
onClick={onCancel}
|
|
disabled={isPending}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
|
{isPending ? "Please Wait " : isEditMode ? "Update" : "Create"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<dl className="row text-start my-2">
|
|
<dt className="col-sm-2">Name</dt>
|
|
<dd className="col-sm-10">{selectedBucket?.name || "-"}</dd>
|
|
|
|
<dt className="col-sm-2">Description</dt>
|
|
<dd className="col-sm-10">{selectedBucket?.description || "-"}</dd>
|
|
</dl>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BucketForm;
|