42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { ChangeEvent } from "react";
|
|
import { FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
|
|
import { BasicCategoryResponse } from "../backend/queries/category";
|
|
|
|
interface CategorySelectionMenuProps {
|
|
selectedCategoryId: number | null;
|
|
categories?: Array<BasicCategoryResponse>;
|
|
|
|
handleCategoryChange(categoryId: number | null): void;
|
|
}
|
|
|
|
export default function CategorySelectionMenu(
|
|
props: CategorySelectionMenuProps
|
|
) {
|
|
const onCategoryIdChange = (
|
|
e: ChangeEvent<{ name?: string; value: unknown }>
|
|
) => {
|
|
const newValue = e.target.value === -1 ? null : (e.target.value as number);
|
|
props.handleCategoryChange(newValue);
|
|
};
|
|
|
|
return (
|
|
<FormControl fullWidth variant="outlined">
|
|
<InputLabel>Kategorie</InputLabel>
|
|
<Select
|
|
value={props.selectedCategoryId ? props.selectedCategoryId : -1}
|
|
label="Kategorie"
|
|
onChange={onCategoryIdChange}
|
|
>
|
|
<MenuItem value={-1}>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{props.categories?.map((category) => (
|
|
<MenuItem key={category.id} value={category.rowId}>
|
|
{category.title}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|