63 lines
2 KiB
TypeScript
63 lines
2 KiB
TypeScript
import React from 'react';
|
|
import Dialog from '@material-ui/core/Dialog';
|
|
import DialogContent from '@material-ui/core/DialogContent';
|
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
|
import {BasicCategoryResponse} from "../backend/queries/category";
|
|
import CategorySelectionMenu from "./CategorySelectionMenu";
|
|
import {DialogActionBar} from "./DialogActionBar";
|
|
import {DialogTitleAndDetails} from "./DialogTitleAndDetails";
|
|
|
|
|
|
export interface ChangeQuestionDialogContent {
|
|
id: string
|
|
title: string,
|
|
details: string | null,
|
|
categoryId: number | null,
|
|
}
|
|
|
|
interface DialogChangeQuestionProps {
|
|
title: string,
|
|
confirmButtonText: string,
|
|
open: boolean,
|
|
content: ChangeQuestionDialogContent,
|
|
loading: boolean,
|
|
categories?: Array<BasicCategoryResponse>,
|
|
|
|
handleContentChange(content: ChangeQuestionDialogContent): void
|
|
|
|
handleConfirmButtonClick(): void,
|
|
|
|
handleClose(): void,
|
|
}
|
|
|
|
|
|
export default function DialogChangeQuestion(props: DialogChangeQuestionProps) {
|
|
return (
|
|
<Dialog open={props.open} onClose={props.handleClose} aria-labelledby="form-dialog-title">
|
|
<DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogTitleAndDetails
|
|
title={props.content.title}
|
|
details={props.content.details}
|
|
onTitleChange={newTitle => props.handleContentChange({...props.content, title: newTitle})}
|
|
onDetailsChange={newDetails => props.handleContentChange({...props.content, details: newDetails})}
|
|
/>
|
|
<CategorySelectionMenu
|
|
selectedCategoryId={props.content.categoryId}
|
|
categories={props.categories}
|
|
handleCategoryChange={(categoryId) => props.handleContentChange({
|
|
...props.content,
|
|
categoryId: categoryId,
|
|
})}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActionBar
|
|
loading={props.loading}
|
|
onClose={props.handleClose}
|
|
onConfirmButtonClick={props.handleConfirmButtonClick}
|
|
confirmButtonText={props.confirmButtonText}
|
|
/>
|
|
</Dialog>
|
|
);
|
|
}
|