Rename interfaces, AppBar changes

2024-06-28 12:33:07 +09:00
parent c41e59cd86
commit af1d497715
13 changed files with 165 additions and 80 deletions
--- a/frontend_reactjs/src/components/modals/CreateRoleModal.tsx
+++ b/frontend_reactjs/src/components/modals/CreateRoleModal.tsx
@ -1,11 +1,97 @@
-import React from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { IRoleCreate } from '../../interfaces/role';
+import { AxiosResponse } from 'axios';
+import { ApiResponse } from '../../interfaces/auth';
+import RoleService from '../../services/RoleService';
+import { Box, Button, Modal, TextField, Typography } from '@mui/material';

-const CreateRoleModal = () => {
-  return (
-    <div>
-        
-    </div>
-  )
+interface Props {
+  open: boolean;
+  setOpen: (state: boolean) => void;
 }

-export default CreateRoleModal
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  borderRadius: 2,
+  p: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px"
+}
+
+export default function CreateRoleModal({
+  open,
+  setOpen
+}: Props) {
+  const { register, handleSubmit, formState: { errors } } = useForm<IRoleCreate>({
+    defaultValues: {
+      name: '',
+      description: ''
+    }
+  })
+
+  const onSubmit: SubmitHandler<IRoleCreate> = async (data) => {
+    try {
+      const response: AxiosResponse<ApiResponse> = await RoleService.createRole(data)
+      console.log(response.data)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+
+        <Box sx={style}>
+          <Typography variant="h6" component="h6" gutterBottom>
+            Создание роли
+          </Typography>
+
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Название"
+            required
+            {...register('name', { required: 'Название обязательно' })}
+            error={!!errors.name}
+            helperText={errors.name?.message}
+          />
+
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Описание"
+            {...register('description')}
+            error={!!errors.description}
+            helperText={errors.description?.message}
+          />
+
+          <Box sx={{
+            display: "flex",
+            gap: "8px"
+          }}>
+            <Button type="submit" variant="contained" color="primary">
+              Добавить пользователя
+            </Button>
+
+            <Button type="button" variant="outlined" color="primary" onClick={() => setOpen(false)}>
+              Отмена
+            </Button>
+          </Box>
+        </Box>
+      </form>
+    </Modal>
+  )
+}