diff --git a/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx b/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx index c030c937..d5930ab9 100644 --- a/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx +++ b/src/app/(authed)/admin/forms/create/_components/FormCreateForm.tsx @@ -19,8 +19,9 @@ import FormSettings from './FormSettings'; import QuestionComponent from './Question'; import { formSchema } from '../_schema/createFormSchema'; import type { Form } from '../_schema/createFormSchema'; +import type { GetFormLabelsResponse } from '@/app/api/_schemas/ResponseSchemas'; -const FormCreateForm = () => { +const FormCreateForm = (props: { labelOptions: GetFormLabelsResponse }) => { const { control, handleSubmit, @@ -62,6 +63,8 @@ const FormCreateForm = () => { const [isSubmitted, setIsSubmitted] = useState(false); + const [labels, setLabels] = useState([]); + const onSubmit = async (data: Form) => { const createFormResponse = await fetch('/api/form', { method: 'POST', @@ -142,7 +145,26 @@ const FormCreateForm = () => { }); if (addQuestionResponse.ok) { - setIsSubmitted(true); + const putLabelsResponse = await fetch( + `/api/forms/${parsedCreateFormResponse.data.id}/labels`, + { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + labels: labels.map((label) => label.id), + }), + } + ); + if (putLabelsResponse.ok) { + setIsSubmitted(true); + } else { + setError('root', { + type: 'manual', + message: 'ラベルの設定に失敗しました。', + }); + } } else { setError('root', { type: 'manual', @@ -162,6 +184,8 @@ const FormCreateForm = () => { register={register} visibility={visibility} has_response_period={has_response_period} + labelOptions={props.labelOptions} + setLabels={setLabels} /> {fields.map((field, index) => ( diff --git a/src/app/(authed)/admin/forms/create/_components/FormLabelField.tsx b/src/app/(authed)/admin/forms/create/_components/FormLabelField.tsx new file mode 100644 index 00000000..5b94cfd9 --- /dev/null +++ b/src/app/(authed)/admin/forms/create/_components/FormLabelField.tsx @@ -0,0 +1,59 @@ +import Autocomplete from '@mui/material/Autocomplete'; +import Box from '@mui/material/Box'; +import Chip from '@mui/material/Chip'; +import TextField from '@mui/material/TextField'; +import type { GetFormLabelsResponse } from '@/app/api/_schemas/ResponseSchemas'; +import type { Dispatch, SetStateAction } from 'react'; + +const FormLabelField = (props: { + labelOptions: GetFormLabelsResponse; + setLabels: Dispatch>; +}) => { + return ( + label.name)} + getOptionLabel={(option) => option} + renderTags={(value: readonly string[], getTagProps) => + value.map((option: string, index: number) => ( + + )) + } + renderOption={(props, option) => { + return ( + + {option} + + ); + }} + renderInput={(params) => ( + // @ts-expect-error (解決方法がよくわからないのでとりあえずignoreする) + // FIXME: あとで調べる + + )} + onChange={(_event, value) => { + props.setLabels( + props.labelOptions.filter((label) => value.includes(label.name)) + ); + }} + /> + ); +}; + +export default FormLabelField; diff --git a/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx b/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx index 6d6dca26..2063e00f 100644 --- a/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx +++ b/src/app/(authed)/admin/forms/create/_components/FormSettings.tsx @@ -8,13 +8,18 @@ import { TextField, Typography, } from '@mui/material'; +import FormLabelField from './FormLabelField'; import type { Form, Visibility } from '../_schema/createFormSchema'; +import type { GetFormLabelsResponse } from '@/app/api/_schemas/ResponseSchemas'; +import type { Dispatch, SetStateAction } from 'react'; import type { UseFormRegister } from 'react-hook-form'; const FormSettings = (props: { register: UseFormRegister
; visibility: Visibility; has_response_period: boolean; + labelOptions: GetFormLabelsResponse; + setLabels: Dispatch>; }) => { return ( @@ -31,6 +36,10 @@ const FormSettings = (props: { label="フォームの説明" required /> + { + const { data: labels, isLoading: isLoadingLabels } = + useSWR>('/api/labels/forms'); + + if (!labels) { + return ; + } else if ((!isLoadingLabels && !labels) || labels._tag === 'Left') { + return ; + } + return ( - + ); };