Add possibility to make comments to proposal

src/components/actions.tsx

@@ -4,5 +4,5 @@ import { useHorizontalSpacing } from "@/styles";
 export const Actions = (props: HTMLProps<HTMLDivElement>) => {
     const classes = useHorizontalSpacing(2);
 
-    return <div className={ classes.root } { ...props }/>
+    return <div className={ classes.root } { ...props } style={{ display: "flex", alignItems: "center" }}/>
 }

src/components/proposalPreview.tsx

@@ -33,7 +33,6 @@ export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => {
     const { t } = useTranslation();
 
     const classes = useVerticalSpacing(3);
-
     const duration = moment.duration(proposal.endDate.diff(proposal.startDate));
 
     return <div className={ classNames("proposal", classes.root) }>

src/pages/internship/proposal.tsx

@@ -1,9 +1,22 @@
 import { Page } from "@/pages/base";
-import { Button, Container, Link, Typography } from "@material-ui/core";
+import {
+    Button,
+    ButtonGroup,
+    Container,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Link,
+    Menu,
+    MenuItem,
+    TextField,
+    Typography
+} from "@material-ui/core";
 import { Link as RouterLink, useHistory } from "react-router-dom";
 import { route } from "@/routing";
 import { InternshipForm } from "@/forms/internship";
-import React from "react";
+import React, { useState } from "react";
 import { ProposalComment } from "@/pages/steps/proposal";
 import { useTranslation } from "react-i18next";
 import { ProposalPreview } from "@/components/proposalPreview";
@@ -13,7 +26,7 @@ import { AppState } from "@/state/reducer";
 import { internshipSerializationTransformer } from "@/serialization";
 import { Actions } from "@/components";
 import { InternshipProposalActions, useDispatch } from "@/state/actions";
-import { StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui/index";
+import { MenuDown, StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui/index";
 import { useVerticalSpacing } from "@/styles";
 
 export const InternshipProposalFormPage = () => {
@@ -39,13 +52,49 @@ export const InternshipProposalPreviewPage = () => {
     const dispatch = useDispatch();
     const history = useHistory();
 
+    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 handleAccept = () => {
-        dispatch({ type: InternshipProposalActions.Approve, comment: null });
+        dispatch({ type: InternshipProposalActions.Approve, comment });
         history.push(route("home"));
     }
 
     const handleDiscard = () => {
-        dispatch({ type: InternshipProposalActions.Decline, comment: "Well..." });
+        dispatch({ type: InternshipProposalActions.Decline, comment });
+        history.push(route("home"));
+    }
+
+    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 handleAcceptWithoutComments = () => {
+        dispatch({ type: InternshipProposalActions.Approve, comment: null });
         history.push(route("home"));
     }
 
@@ -68,15 +117,54 @@ export const InternshipProposalPreviewPage = () => {
                     { t('go-back') }
                 </Button>
 
-                <Button onClick={ handleAccept } color="primary" startIcon={ <StickerCheckOutline /> }>
-                    { t('accept') }
-                </Button>
+                <ButtonGroup color="primary" variant="contained">
+                    <Button onClick={ handleAcceptWithoutComments } startIcon={ <StickerCheckOutline /> }>
+                        { t('accept') }
+                    </Button>
+                    <Button size="small" onClick={ handleAcceptMenuOpen }><MenuDown /></Button>
+                </ButtonGroup>
 
-                <Button onClick={ handleDiscard } color="secondary" startIcon={ <StickerRemoveOutline /> }>
+                <Menu open={ !!menuAnchor } anchorEl={ menuAnchor } onClose={ handleAcceptMenuClose }>
+                    <MenuItem onClick={ handleAcceptWithComment }>{ t("accept-with-comments") }</MenuItem>
+                </Menu>
+
+                <Button onClick={ handleDiscardAction } color="secondary" startIcon={ <StickerRemoveOutline /> }>
                     { t('discard') }
                 </Button>
             </Actions>
         </Container>
+        <Dialog open={ isDiscardModalOpen } onClose={ handleDiscardModalClose } maxWidth="md">
+            <DialogTitle>{ t("internship.discard.title") }</DialogTitle>
+            <DialogContent>
+                <Typography variant="body1">{ t("internship.discard.info") }</Typography>
+                <TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") }/>
+
+                <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("internship.accept.title") }</DialogTitle>
+            <DialogContent>
+                <Typography variant="body1">{ t("internship.accept.info") }</Typography>
+                <TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") }/>
+
+                <DialogActions>
+                    <Button onClick={ handleAcceptModalClose }>
+                        { t('cancel') }
+                    </Button>
+                    <Button onClick={ handleAccept } color="primary" variant="contained">
+                        { t('confirm') }
+                    </Button>
+                </DialogActions>
+            </DialogContent>
+        </Dialog>
     </Page>
 }
 

translations/pl.yaml

@@ -20,6 +20,9 @@ comments: Zgłoszone uwagi
 send-again: wyślij ponownie
 cancel: anuluj
 
+accept: zaakceptuj
+accept-with-comments: zaakceptuj z uwagami
+discard: zgłoś uwagi
 
 dropzone: "Przeciągnij i upuść plik bądź kliknij, aby wybrać"
 
@@ -71,7 +74,12 @@ internship:
     place: "Miejsce odbywania praktyki"
     kind: "Rodzaj i program praktyki"
     mentor: "Zakładowy opiekun praktyki"
-
+  discard:
+    title: "Odrzuć zgłoszenie praktyki"
+    info: "Poniższa informacja zostanie przekazana praktykantowi w celu poprawy zgłoszenia."
+  accept:
+    title: "Zaakceptuj zgłoszenie praktyki"
+    info: "Poniższa informacja zostanie przekazana praktykantowi."
 
 steps:
   personal-data: