60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { TextInputDialog } from "./TextInputDialog";
|
|
import { ServerApi } from "../api/ServerApi";
|
|
import { FamilyApi } from "../api/FamilyApi";
|
|
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
|
|
|
|
export function CreateFamilyDialog(p: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onCreated: () => void;
|
|
}): React.ReactElement {
|
|
const [name, setName] = React.useState("");
|
|
const [creating, setCreating] = React.useState(false);
|
|
const [error, setError] = React.useState(false);
|
|
|
|
const alert = useAlert();
|
|
|
|
const cancel = () => {
|
|
setName("");
|
|
setCreating(false);
|
|
setError(false);
|
|
p.onClose();
|
|
};
|
|
|
|
const createFamily = async () => {
|
|
setCreating(true);
|
|
try {
|
|
await FamilyApi.CreateFamily(name);
|
|
setName("");
|
|
p.onCreated();
|
|
await alert("La famille a été créée avec succès !");
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError(true);
|
|
}
|
|
setCreating(false);
|
|
};
|
|
|
|
return (
|
|
<TextInputDialog
|
|
open={p.open}
|
|
title="Création d'une famille"
|
|
text="Veuillez définir le nom que vous souhaitez donner à la famille créée :"
|
|
label="Nom de la famille"
|
|
minLen={ServerApi.Config.constraints.family_name_len.min}
|
|
maxLen={ServerApi.Config.constraints.family_name_len.max}
|
|
onClose={cancel}
|
|
onCancel={cancel}
|
|
submitButton="Créer la famille"
|
|
value={name}
|
|
onValueChange={setName}
|
|
isChecking={creating}
|
|
checkingMessage="Création en cours..."
|
|
errorIsBlocking={false}
|
|
error={error ? "Echec de la création de la famille !" : undefined}
|
|
onSubmit={createFamily}
|
|
/>
|
|
);
|
|
}
|