77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import React from "react";
|
|
import { FormProvider, useForm } from "react-hook-form";
|
|
import {
|
|
defaultOrganizationValues,
|
|
organizationSchema,
|
|
} from "./OrganizationSchema";
|
|
import Modal from "../common/Modal";
|
|
import { useOrganization } from "../../hooks/useDirectory";
|
|
import { useOrganizationModal } from "../../hooks/useOrganization";
|
|
import Label from "../common/Label";
|
|
|
|
const ManageOrganization = () => {
|
|
const orgModal = useOrganizationModal();
|
|
const method = useForm({
|
|
resolver: zodResolver(organizationSchema),
|
|
defaultValues: defaultOrganizationValues,
|
|
});
|
|
|
|
const { handleSubmit, watch, register } = method;
|
|
|
|
const onSubmit = () => {};
|
|
|
|
const contentBody = (
|
|
<FormProvider {...method}>
|
|
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="organization" required>
|
|
Organization Name
|
|
</Label>
|
|
<input className="form-control form-control-sm" />
|
|
</div>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="organization" required>
|
|
Contact Person
|
|
</Label>
|
|
<input className="form-control form-control-sm" />
|
|
</div>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="organization" required>
|
|
Contact Number
|
|
</Label>
|
|
<input className="form-control form-control-sm" />
|
|
</div>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="organization" required>
|
|
Email Address
|
|
</Label>
|
|
<input className="form-control form-control-sm" />
|
|
</div>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="organization" required>
|
|
Address
|
|
</Label>
|
|
<textarea className="form-control form-control-sm" rows={2} />
|
|
</div>
|
|
<div className="d-flex justify-content-end gap-2 my-2">
|
|
<button className="btn btn-sm btn-secondary">Cancel</button>
|
|
<button className="btn btn-sm btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
return (
|
|
<Modal
|
|
isOpen={orgModal.isOpen}
|
|
onClose={orgModal.onClose}
|
|
onSubmit={onSubmit}
|
|
title={"Manage organization"}
|
|
actionLabel={"Submit"}
|
|
body={contentBody}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ManageOrganization;
|