From a2832ec1248992491a3c02bf5689c714960cb693 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Wed, 12 Aug 2020 20:43:08 +0200
Subject: [PATCH] Add possibility to make comments to proposal
---
src/components/actions.tsx | 2 +-
src/components/proposalPreview.tsx | 1 -
src/pages/internship/proposal.tsx | 106 ++++++++++++++++++++++++++---
translations/pl.yaml | 10 ++-
4 files changed, 107 insertions(+), 12 deletions(-)
diff --git a/src/components/actions.tsx b/src/components/actions.tsx
index b2e090e..79ce5e2 100644
--- a/src/components/actions.tsx
+++ b/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" }}/>
}
diff --git a/src/components/proposalPreview.tsx b/src/components/proposalPreview.tsx
index f57798f..1b8a46a 100644
--- a/src/components/proposalPreview.tsx
+++ b/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) }>
diff --git a/src/pages/internship/proposal.tsx b/src/pages/internship/proposal.tsx
index 3e92aea..176f6d9 100644
--- a/src/pages/internship/proposal.tsx
+++ b/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>
}
diff --git a/translations/pl.yaml b/translations/pl.yaml
index 1f35c9d..d13ce82 100644
--- a/translations/pl.yaml
+++ b/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:
--
2.45.2