feat: フォーム作成時にラベルを設定できるように

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<GetFormLabelsResponse>([]);
+
   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}
                 />
               </CardContent>
               {fields.map((field, index) => (

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<SetStateAction<GetFormLabelsResponse>>;
+}) => {
+  return (
+    <Autocomplete
+      multiple
+      id="label"
+      options={props.labelOptions.map((label) => label.name)}
+      getOptionLabel={(option) => option}
+      renderTags={(value: readonly string[], getTagProps) =>
+        value.map((option: string, index: number) => (
+          <Chip
+            label={option}
+            sx={{ background: '#FFFFFF29' }}
+            {...getTagProps({ index })}
+            key={index}
+          />
+        ))
+      }
+      renderOption={(props, option) => {
+        return (
+          <Box
+            {...props}
+            key={option}
+            component="span"
+            style={{ color: 'black' }}
+          >
+            {option}
+          </Box>
+        );
+      }}
+      renderInput={(params) => (
+        // @ts-expect-error (解決方法がよくわからないのでとりあえずignoreする)
+        // FIXME: あとで調べる
+        <TextField
+          {...params}
+          variant="standard"
+          label="フォームラベル設定"
+          sx={{ borderBottom: '1px solid #FFFFFF6B' }}
+        />
+      )}
+      onChange={(_event, value) => {
+        props.setLabels(
+          props.labelOptions.filter((label) => value.includes(label.name))
+        );
+      }}
+    />
+  );
+};
+
+export default FormLabelField;

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<Form>;
   visibility: Visibility;
   has_response_period: boolean;
+  labelOptions: GetFormLabelsResponse;
+  setLabels: Dispatch<SetStateAction<GetFormLabelsResponse>>;
 }) => {
   return (
     <Stack spacing={2}>
@@ -31,6 +36,10 @@ const FormSettings = (props: {
         label="フォームの説明"
         required
       />
+      <FormLabelField
+        labelOptions={props.labelOptions}
+        setLabels={props.setLabels}
+      />
       <FormControlLabel
         label="回答開始日と回答終了日を設定する"
         control={

src/app/(authed)/admin/forms/create/page.tsx

@@ -1,14 +1,31 @@
 'use client';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
+import useSWR from 'swr';
+import ErrorModal from '@/app/_components/ErrorModal';
+import LoadingCircular from '@/app/_components/LoadingCircular';
 import FormCreateForm from './_components/FormCreateForm';
 import adminDashboardTheme from '../../theme/adminDashboardTheme';
+import type {
+  ErrorResponse,
+  GetFormLabelsResponse,
+} from '@/app/api/_schemas/ResponseSchemas';
+import type { Either } from 'fp-ts/lib/Either';
 
 const Home = () => {
+  const { data: labels, isLoading: isLoadingLabels } =
+    useSWR<Either<ErrorResponse, GetFormLabelsResponse>>('/api/labels/forms');
+
+  if (!labels) {
+    return <LoadingCircular />;
+  } else if ((!isLoadingLabels && !labels) || labels._tag === 'Left') {
+    return <ErrorModal />;
+  }
+
   return (
     <ThemeProvider theme={adminDashboardTheme}>
       <CssBaseline />
-      <FormCreateForm />
+      <FormCreateForm labelOptions={labels.right} />
     </ThemeProvider>
   );
 };