127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
SelectField,
|
|
Form,
|
|
TextField,
|
|
DialogFooter,
|
|
showToast,
|
|
} from "@calcom/ui";
|
|
|
|
import { directoryProviders } from "../lib/directoryProviders";
|
|
|
|
const defaultValues = {
|
|
name: "",
|
|
provider: directoryProviders[0].value,
|
|
};
|
|
|
|
const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
|
|
const { t } = useLocale();
|
|
const utils = trpc.useUtils();
|
|
const form = useForm({ defaultValues });
|
|
const [openModal, setOpenModal] = useState(false);
|
|
|
|
const mutation = trpc.viewer.dsync.create.useMutation({
|
|
async onSuccess() {
|
|
showToast(t("directory_sync_created"), "success");
|
|
await utils.viewer.dsync.invalidate();
|
|
setOpenModal(false);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col sm:flex-row">
|
|
<div>
|
|
<p className="text-default text-sm font-normal leading-6 dark:text-gray-300">
|
|
{t("directory_sync_title")}
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
|
|
<Button color="primary" onClick={() => setOpenModal(true)}>
|
|
{t("configure")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
|
<DialogContent type="creation">
|
|
<Form
|
|
form={form}
|
|
handleSubmit={(values) => {
|
|
mutation.mutate({
|
|
...values,
|
|
organizationId: orgId,
|
|
});
|
|
}}>
|
|
<div className="mb-5 mt-1">
|
|
<h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
|
|
{t("directory_sync_configure")}
|
|
</h2>
|
|
<p className="mt-1 text-sm text-gray-500">{t("directory_sync_configure_description")}</p>
|
|
</div>
|
|
<fieldset className="space-y-6 py-2">
|
|
<Controller
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field: { value } }) => (
|
|
<TextField
|
|
name="title"
|
|
label={t("directory_name")}
|
|
value={value}
|
|
onChange={(e) => {
|
|
form.setValue("name", e?.target.value);
|
|
}}
|
|
type="text"
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
<Controller
|
|
control={form.control}
|
|
name="provider"
|
|
render={() => (
|
|
<SelectField
|
|
name="provider"
|
|
label={t("directory_provider")}
|
|
options={directoryProviders}
|
|
placeholder={t("choose_directory_provider")}
|
|
defaultValue={directoryProviders[0]}
|
|
onChange={(option) => {
|
|
if (option) {
|
|
form.setValue("provider", option.value);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
</fieldset>
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
color="secondary"
|
|
onClick={() => {
|
|
setOpenModal(false);
|
|
}}
|
|
tabIndex={-1}>
|
|
{t("cancel")}
|
|
</Button>
|
|
<Button type="submit" loading={form.formState.isSubmitting || mutation.isPending}>
|
|
{t("save")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreateDirectory;
|