Создал форму для удаления ролей

src/api/roles.ts

@@ -1,30 +1,30 @@
-const MOCK_DATA_USERS = [
+export const MOCK_DATA_USERS = [
   {
     key: 0,
     id: "someid1",
     name: "admin",
-    desc:"Администратор сервиса"
+    desc: "Администратор сервиса",
   },
   {
     key: 1,
     id: "someid2",
     name: "manager",
-    desc:"Менеджер сервиса"
+    desc: "Менеджер сервиса",
   },
   {
     key: 2,
     id: "someid3",
     name: "user",
-    desc:"Пользователь сервиса"
+    desc: "Пользователь сервиса",
-    }
+  },
 ];
 
 export type TMockData = typeof MOCK_DATA_USERS;
 
-export const getRoles_mock = ():Promise<TMockData> => {
+export const getRoles_mock = (): Promise<TMockData> => {
   return new Promise((resolve) => {
     setTimeout(() => {
-            resolve( MOCK_DATA_USERS );
+      resolve(MOCK_DATA_USERS);
     }, 1000);
   });
-}
+};

src/pages/Setting/FormCreateRoles.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+} from "@mui/material";
+import { MOCK_DATA_USERS } from "@root/api/roles";
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+    },
+  },
+};
+
+export default function CreateForm() {
+  const [personName, setPersonName] = useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
+    const {
+      target: { value },
+    } = event;
+    setPersonName(typeof value === "string" ? value.split(",") : value);
+  };
+
+  return (
+    <>
+      <TextField
+        placeholder="название"
+        fullWidth
+        sx={{
+          alignItems: "center",
+          width: "400px",
+          "& .MuiInputBase-root": {
+            backgroundColor: "#F2F3F7",
+            height: "48px",
+          },
+        }}
+        inputProps={{
+          sx: {
+            borderRadius: "10px",
+            fontSize: "18px",
+            lineHeight: "21px",
+            py: 0,
+          },
+        }}
+      />
+      <Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
+      <FormControl sx={{ ml: "25px", width: "80%" }}>
+        <Select
+          sx={{ bgcolor: "white", height: "48px" }}
+          labelId="demo-multiple-checkbox-label"
+          id="demo-multiple-checkbox"
+          multiple
+          value={personName}
+          onChange={handleChange}
+          renderValue={(selected) => selected.join(", ")}
+          MenuProps={MenuProps}
+        >
+          {MOCK_DATA_USERS.map(({ name, id }) => (
+            <MenuItem key={id} value={name}>
+              <Checkbox checked={personName.indexOf(name) > -1} />
+              <ListItemText primary={name} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </>
+  );
+}

src/pages/Setting/FormDeleteRoles.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import axios from "axios";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+} from "@mui/material";
+import { MOCK_DATA_USERS } from "@root/api/roles";
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+    },
+  },
+};
+
+export default function DeleteForm() {
+  const [personName, setPersonName] = useState<string[]>([]);
+  const [roleId, setRoleId] = useState<string>();
+
+  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
+    const {
+      target: { value },
+    } = event;
+    setPersonName(typeof value === "string" ? value.split(",") : value);
+  };
+
+  const rolesDelete = (id = "") => {
+    axios.delete("https://admin.pena.digital/role/" + id);
+  };
+  return (
+    <>
+      <Button onClick={() => rolesDelete(roleId)} sx={{ mr: "5px", bgcolor: "#fe9903", color: "white" }}>
+        Удалить
+      </Button>
+      <TextField
+        placeholder="название"
+        fullWidth
+        sx={{
+          alignItems: "center",
+          width: "400px",
+          "& .MuiInputBase-root": {
+            backgroundColor: "#F2F3F7",
+            height: "48px",
+          },
+        }}
+        inputProps={{
+          sx: {
+            borderRadius: "10px",
+            fontSize: "18px",
+            lineHeight: "21px",
+            py: 0,
+          },
+        }}
+      />
+      <FormControl sx={{ ml: "25px", width: "80%" }}>
+        <Select
+          sx={{ bgcolor: "white", height: "48px" }}
+          labelId="demo-multiple-checkbox-label"
+          id="demo-multiple-checkbox"
+          value={personName}
+          onChange={handleChange}
+          renderValue={(selected) => selected.join(", ")}
+          MenuProps={MenuProps}
+        >
+          {MOCK_DATA_USERS.map(({ name, id }) => (
+            <MenuItem key={id} value={name}>
+              <Checkbox onClick={() => setRoleId(id)} checked={personName.indexOf(name) > -1} />
+              <ListItemText primary={name} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </>
+  );
+}

src/pages/Setting/SettingRoles.tsx

@@ -1,51 +1,11 @@
-import { useState } from "react";
+import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 
-import {
+import FormDeleteRoles from "./FormDeleteRoles";
-  AccordionDetails,
+import FormCreateRoles from "./FormCreateRoles";
-  Button,
-  Checkbox,
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  OutlinedInput,
-  Select,
-  SelectChangeEvent,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from "@mui/material";
 
 import theme from "../../theme";
 
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-    },
-  },
-};
-
-const names = ["admin", "user"];
-
 export const SettingRoles = () => {
-  const [personName, setPersonName] = useState<string[]>([]);
-
-  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
-    const {
-      target: { value },
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : value
-    );
-  };
   return (
     <AccordionDetails>
       <Table
@@ -71,7 +31,7 @@ export const SettingRoles = () => {
                   color: theme.palette.secondary.main,
                 }}
               >
-                Насторйки ролей
+                Настройки ролей
               </Typography>
             </TableCell>
           </TableRow>
@@ -89,51 +49,53 @@ export const SettingRoles = () => {
               cursor: "pointer",
             }}
           >
-            <TextField
+            <FormCreateRoles />
-              placeholder="название"
+          </TableRow>
-              fullWidth
+        </TableBody>
+      </Table>
+      <Table
         sx={{
-                alignItems: "center",
+          mt: "30px",
-                width: "400px",
+          width: "890px",
-                "& .MuiInputBase-root": {
+          border: "2px solid",
-                  backgroundColor: "#F2F3F7",
+          borderColor: theme.palette.secondary.main,
-                  height: "48px",
-                },
         }}
-              inputProps={{
+        aria-label="simple table"
-                sx: {
-                  borderRadius: "10px",
-                  fontSize: "18px",
-                  lineHeight: "21px",
-                  py: 0,
-                },
-              }}
-            />
-
-            <Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
-            <FormControl sx={{ ml: "25px", width: "80%" }}>
-              <InputLabel sx={{ color: "black", bg: "black" }} id="demo-multiple-checkbox-label">
-                Role
-              </InputLabel>
-              <Select
-                sx={{ bgcolor: "white", height: "48px" }}
-                labelId="demo-multiple-checkbox-label"
-                id="demo-multiple-checkbox"
-                multiple
-                value={personName}
-                onChange={handleChange}
-                input={<OutlinedInput label="Role" />}
-                renderValue={(selected) => selected.join(", ")}
-                MenuProps={MenuProps}
       >
-                {names.map((name) => (
+        <TableHead>
-                  <MenuItem key={name} value={name}>
+          <TableRow
-                    <Checkbox checked={personName.indexOf(name) > -1} />
+            sx={{
-                    <ListItemText primary={name} />
+              borderBottom: "2px solid",
-                  </MenuItem>
+              borderColor: theme.palette.grayLight.main,
-                ))}
+              height: "100px",
-              </Select>
+            }}
-            </FormControl>
+          >
+            <TableCell>
+              <Typography
+                variant="h4"
+                sx={{
+                  color: theme.palette.secondary.main,
+                }}
+              >
+                Удаление ролей
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          <TableRow
+            sx={{
+              p: "5px",
+              display: "flex",
+              alignItems: "center",
+              borderTop: "2px solid",
+              borderColor: theme.palette.grayLight.main,
+              height: "100px",
+              cursor: "pointer",
+            }}
+          >
+            <FormDeleteRoles />
           </TableRow>
         </TableBody>
       </Table>