first commit

src/component/Admin/Common/GroupSelectionInput.tsx

@@ -0,0 +1,94 @@
+import { ListItemText } from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import { useEffect, useState } from "react";
+import { getGroupList } from "../../../api/api";
+import { GroupEnt } from "../../../api/dashboard";
+import { useAppDispatch } from "../../../redux/hooks";
+import { DenseSelect } from "../../Common/StyledComponents";
+import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu";
+
+export interface GroupSelectionInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onChangeGroup?: (group?: GroupEnt) => void;
+  emptyValue?: string;
+  emptyText?: string;
+  fullWidth?: boolean;
+  required?: boolean;
+}
+
+const AnonymousGroupId = 3;
+
+const GroupSelectionInput = ({
+  value,
+  onChange,
+  onChangeGroup,
+  emptyValue,
+  emptyText,
+  fullWidth,
+  required,
+}: GroupSelectionInputProps) => {
+  const dispatch = useAppDispatch();
+  const [loading, setLoading] = useState(true);
+  const [groups, setGroups] = useState<GroupEnt[]>([]);
+
+  useEffect(() => {
+    setLoading(true);
+    dispatch(
+      getGroupList({
+        page_size: 1000,
+        page: 1,
+        order_by: "id",
+        order_direction: "asc",
+      }),
+    )
+      .then((res) => {
+        setGroups(res.groups);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  const handleChange = (value: string) => {
+    onChange(value);
+    onChangeGroup?.(groups.find((g) => g.id === parseInt(value)));
+  };
+
+  return (
+    <FormControl fullWidth={fullWidth}>
+      <DenseSelect
+        disabled={loading}
+        value={value}
+        onChange={(e) => handleChange(e.target.value as string)}
+        required={required}
+      >
+        {groups
+          .filter((g) => g.id != AnonymousGroupId)
+          .map((g) => (
+            <SquareMenuItem value={g.id.toString()}>
+              <ListItemText
+                slotProps={{
+                  primary: { variant: "body2" },
+                }}
+              >
+                {g.name}
+              </ListItemText>
+            </SquareMenuItem>
+          ))}
+        {emptyValue !== undefined && emptyText && (
+          <SquareMenuItem value={emptyValue}>
+            <ListItemText
+              primary={<em>{emptyText}</em>}
+              slotProps={{
+                primary: { variant: "body2" },
+              }}
+            />
+          </SquareMenuItem>
+        )}
+      </DenseSelect>
+    </FormControl>
+  );
+};
+
+export default GroupSelectionInput;