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

2023-04-21 10:25:12 +03:00 · 2023-04-21 10:25:12 +03:00 · 8eab3d22ab
commit 8eab3d22ab
parent 24202ed52c
4 changed files with 230 additions and 105 deletions
--- a/src/api/roles.ts
+++ b/src/api/roles.ts
@ -1,22 +1,22 @@
-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;
@ -27,4 +27,4 @@ export const getRoles_mock = ():Promise<TMockData> => {
      resolve(MOCK_DATA_USERS);
    }, 1000);
  });
-}
+};
--- a/src/pages/Setting/FormCreateRoles.tsx
+++ b/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>
+    </>
+  );
+}
--- a/src/pages/Setting/FormDeleteRoles.tsx
+++ b/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>
+    </>
+  );
+}
--- a/src/pages/Setting/SettingRoles.tsx
+++ b/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 {
-  AccordionDetails,
-  Button,
-  Checkbox,
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  OutlinedInput,
-  Select,
-  SelectChangeEvent,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from "@mui/material";
+import FormDeleteRoles from "./FormDeleteRoles";
+import FormCreateRoles from "./FormCreateRoles";

 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
-              placeholder="название"
-              fullWidth
+            <FormCreateRoles />
+          </TableRow>
+        </TableBody>
+      </Table>
+      <Table
        sx={{
-                alignItems: "center",
-                width: "400px",
-                "& .MuiInputBase-root": {
-                  backgroundColor: "#F2F3F7",
-                  height: "48px",
-                },
+          mt: "30px",
+          width: "890px",
+          border: "2px solid",
+          borderColor: theme.palette.secondary.main,
        }}
-              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%" }}>
-              <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}
+        aria-label="simple table"
      >
-                {names.map((name) => (
-                  <MenuItem key={name} value={name}>
-                    <Checkbox checked={personName.indexOf(name) > -1} />
-                    <ListItemText primary={name} />
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+        <TableHead>
+          <TableRow
+            sx={{
+              borderBottom: "2px solid",
+              borderColor: theme.palette.grayLight.main,
+              height: "100px",
+            }}
+          >
+            <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>