95 lines
2.4 KiB
TypeScript
Executable File
95 lines
2.4 KiB
TypeScript
Executable File
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;
|