116 lines
4.5 KiB
TypeScript
116 lines
4.5 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle, Menu, MenuItem, TextField, Typography } from "@material-ui/core";
|
|
import { MenuDown, StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useVerticalSpacing } from "@/styles";
|
|
import { createPortal } from "react-dom";
|
|
|
|
type AcceptanceActionsProps = {
|
|
onAccept: (comment?: string) => void;
|
|
onDiscard: (comment: string) => void;
|
|
label: string;
|
|
}
|
|
|
|
export function AcceptanceActions({ onAccept, onDiscard, label }: AcceptanceActionsProps) {
|
|
const { t } = useTranslation();
|
|
|
|
const [isDiscardModalOpen, setDiscardModelOpen] = useState<boolean>(false);
|
|
const [isAcceptModalOpen, setAcceptModelOpen] = useState<boolean>(false);
|
|
|
|
const [comment, setComment] = useState<string>("");
|
|
const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
|
|
|
|
const classes = useVerticalSpacing(3);
|
|
|
|
const handleAccept = () => {
|
|
onAccept(comment);
|
|
}
|
|
|
|
const handleDiscard = () => {
|
|
onDiscard(comment);
|
|
}
|
|
|
|
const handleAcceptModalClose = () => {
|
|
setAcceptModelOpen(false);
|
|
}
|
|
|
|
const handleDiscardModalClose = () => {
|
|
setDiscardModelOpen(false);
|
|
}
|
|
|
|
const handleDiscardAction = () => {
|
|
setDiscardModelOpen(true);
|
|
}
|
|
|
|
const handleAcceptMenuOpen = (ev: React.MouseEvent<HTMLElement>) => {
|
|
setMenuAnchor(ev.currentTarget);
|
|
}
|
|
|
|
const handleAcceptMenuClose = () => {
|
|
setMenuAnchor(null);
|
|
}
|
|
|
|
const handleAcceptWithComment = () => {
|
|
setAcceptModelOpen(true);
|
|
setMenuAnchor(null);
|
|
}
|
|
|
|
const handleAcceptWithoutComment = () => {
|
|
onAccept();
|
|
}
|
|
|
|
return <>
|
|
<ButtonGroup color="primary" variant="contained">
|
|
<Button onClick={ handleAcceptWithoutComment } startIcon={ <StickerCheckOutline /> }>
|
|
{ t('accept-without-comments') }
|
|
</Button>
|
|
<Button size="small" onClick={ handleAcceptMenuOpen }><MenuDown /></Button>
|
|
</ButtonGroup>
|
|
|
|
<Menu open={ !!menuAnchor } anchorEl={ menuAnchor } onClose={ handleAcceptMenuClose }>
|
|
<MenuItem onClick={ handleAcceptWithoutComment }>{ t("accept-without-comments") }</MenuItem>
|
|
<MenuItem onClick={ handleAcceptWithComment }>{ t("accept-with-comments") }</MenuItem>
|
|
</Menu>
|
|
|
|
<Button onClick={ handleDiscardAction } color="secondary" startIcon={ <StickerRemoveOutline /> }>
|
|
{ t('discard') }
|
|
</Button>
|
|
|
|
{ createPortal(<>
|
|
<Dialog open={ isDiscardModalOpen } onClose={ handleDiscardModalClose } maxWidth="md">
|
|
<DialogTitle>{ t(label + ".discard.title") }</DialogTitle>
|
|
<DialogContent className={ classes.root }>
|
|
<Typography variant="body1">{ t(label + ".discard.info") }</Typography>
|
|
<TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") } rows={3}/>
|
|
|
|
<DialogActions>
|
|
<Button onClick={ handleDiscardModalClose }>
|
|
{ t('cancel') }
|
|
</Button>
|
|
<Button onClick={ handleDiscard } color="primary" variant="contained">
|
|
{ t('confirm') }
|
|
</Button>
|
|
</DialogActions>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={ isAcceptModalOpen } onClose={ handleAcceptModalClose } maxWidth="md">
|
|
<DialogTitle>{ t(label + ".accept.title") }</DialogTitle>
|
|
<DialogContent className={ classes.root }>
|
|
<Typography variant="body1">{ t(label + ".accept.info") }</Typography>
|
|
<TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") } rows={3}/>
|
|
|
|
<DialogActions>
|
|
<Button onClick={ handleAcceptModalClose }>
|
|
{ t('cancel') }
|
|
</Button>
|
|
<Button onClick={ handleAccept } color="primary" variant="contained">
|
|
{ t('confirm') }
|
|
</Button>
|
|
</DialogActions>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>, document.getElementById("modals") as Element) }
|
|
</>
|
|
}
|