-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
OM-93: voucher assignment page, minor changes
- Loading branch information
1 parent
851df05
commit cec7ca0
Showing
9 changed files
with
314 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Grid, Divider } from '@material-ui/core'; | ||
|
|
||
| import { PublishedComponent, TextInput } from '@openimis/fe-core'; | ||
|
|
||
| function AssignmentVoucherForm({ | ||
| classes, readOnly = false, edited, onEditedChange, formatMessage, | ||
| }) { | ||
| return ( | ||
| <> | ||
| <Grid container direction="row"> | ||
| <Grid item xs={12} className={classes.item}> | ||
| <PublishedComponent | ||
| module="workerVoucher" | ||
| pubRef="workerVoucher.WorkerMultiplePicker" | ||
| readOnly={readOnly} | ||
| required | ||
| classes={classes} | ||
| value={edited?.workers ?? []} | ||
| onChange={(workers) => onEditedChange({ ...edited, workers })} | ||
| previousWorkers | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| <Divider style={{ margin: '12px 0' }} /> | ||
| <Grid container xs={12}> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <TextInput | ||
| module="workerVoucher" | ||
| label="workerVoucher.employer.code" | ||
| value={edited?.employer?.code ?? formatMessage('workerVoucher.WorkerDateRangePicker.notAvailable')} | ||
| readOnly | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <TextInput | ||
| module="workerVoucher" | ||
| label="workerVoucher.employer.tradename" | ||
| value={edited?.employer?.code ?? formatMessage('workerVoucher.WorkerDateRangePicker.notAvailable')} | ||
| readOnly | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| <Divider style={{ margin: '12px 0' }} /> | ||
| <Grid container xs={12}> | ||
| <PublishedComponent | ||
| module="workerVoucher" | ||
| pubRef="workerVoucher.WorkerDateRangePicker" | ||
| readOnly={readOnly} | ||
| required | ||
| classes={classes} | ||
| value={edited?.dateRanges ?? []} | ||
| onChange={(dateRanges) => onEditedChange({ ...edited, dateRanges })} | ||
| /> | ||
| </Grid> | ||
| <Divider style={{ margin: '12px 0' }} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default AssignmentVoucherForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { | ||
| Button, | ||
| Dialog, | ||
| DialogActions, | ||
| DialogContent, | ||
| DialogTitle, | ||
| Divider, | ||
| CircularProgress, | ||
| Grid, | ||
| Typography, | ||
| Checkbox, | ||
| FormControlLabel, | ||
| Tooltip, | ||
| } from '@material-ui/core'; | ||
| import { makeStyles } from '@material-ui/styles'; | ||
|
|
||
| import { useTranslations, useModulesManager, NumberInput } from '@openimis/fe-core'; | ||
| import { MODULE_NAME } from '../constants'; | ||
|
|
||
| export const useStyles = makeStyles((theme) => ({ | ||
| primaryButton: theme.dialog.primaryButton, | ||
| secondaryButton: theme.dialog.secondaryButton, | ||
| item: theme.paper.item, | ||
| })); | ||
|
|
||
| function VoucherAssignmentConfirmModal({ | ||
| openState, | ||
| onClose, | ||
| onConfirm, | ||
| isLoading, | ||
| error, | ||
| assignmentSummary, | ||
| readOnly = true, | ||
| }) { | ||
| const classes = useStyles(); | ||
| const modulesManager = useModulesManager(); | ||
| const { formatMessage } = useTranslations(MODULE_NAME, modulesManager); | ||
| const [acceptAssignment, setAcceptAssignment] = useState(false); | ||
| const acquireButtonDisabled = !acceptAssignment || isLoading || error; | ||
|
|
||
| const renderContent = () => { | ||
| if (error) { | ||
| return <Typography color="error">{error}</Typography>; | ||
| } | ||
|
|
||
| if (isLoading) { | ||
| return <CircularProgress />; | ||
| } | ||
|
|
||
| return ( | ||
| <Grid container> | ||
| <Grid xs={4} className={classes.item}> | ||
| <NumberInput | ||
| module="workerVoucher" | ||
| label="workerVoucher.acquire.vouchersQuantity" | ||
| value={assignmentSummary?.vouchers} | ||
| readOnly={readOnly} | ||
| /> | ||
| </Grid> | ||
| <FormControlLabel | ||
| style={{ margin: '12px 0 0 0' }} | ||
| control={( | ||
| <Checkbox | ||
| color="primary" | ||
| checked={acceptAssignment} | ||
| onChange={(e) => setAcceptAssignment(e.target.checked)} | ||
| /> | ||
| )} | ||
| label={formatMessage('workerVoucher.assign.confirmation')} | ||
| /> | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Dialog open={openState} onClose={onClose}> | ||
| <DialogTitle>{formatMessage('workerVoucher.VoucherAssignmentConfirmModal.title')}</DialogTitle> | ||
| <Divider /> | ||
| <DialogContent>{renderContent()}</DialogContent> | ||
| <Divider style={{ margin: '12px 0' }} /> | ||
| <DialogActions> | ||
| <Button onClick={onClose} className={classes.secondaryButton}> | ||
| {formatMessage('workerVoucher.close')} | ||
| </Button> | ||
| {acquireButtonDisabled ? ( | ||
| <Tooltip title={formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm.tooltip')}> | ||
| <span> | ||
| <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={acquireButtonDisabled}> | ||
| {formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm')} | ||
| </Button> | ||
| </span> | ||
| </Tooltip> | ||
| ) : ( | ||
| <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={acquireButtonDisabled}> | ||
| {formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm')} | ||
| </Button> | ||
| )} | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| export default VoucherAssignmentConfirmModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| import { | ||
| Divider, Grid, Paper, Typography, Button, Tooltip, | ||
| } from '@material-ui/core'; | ||
| import { makeStyles } from '@material-ui/styles'; | ||
|
|
||
| import { useModulesManager, useTranslations } from '@openimis/fe-core'; | ||
| import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants'; | ||
| import AssignmentVoucherForm from './AssignmentVoucherForm'; | ||
| import VoucherAssignmentConfirmModal from './VoucherAssignmentConfirmModal'; | ||
|
|
||
| export const useStyles = makeStyles((theme) => ({ | ||
| paper: { ...theme.paper.paper, margin: '10px 0 0 0' }, | ||
| paperHeaderTitle: { | ||
| ...theme.paper.title, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| }, | ||
| tableTitle: theme.table.title, | ||
| item: theme.paper.item, | ||
| })); | ||
|
|
||
| function VoucherAssignmentForm() { | ||
| const modulesManager = useModulesManager(); | ||
| const classes = useStyles(); | ||
| const { formatMessage } = useTranslations(MODULE_NAME, modulesManager); | ||
| const [voucherAssignment, setVoucherAssignment] = useState({}); | ||
| const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false); | ||
|
|
||
| const assignmentBlocked = (voucherAssignment) => !voucherAssignment?.workers?.length | ||
| || !voucherAssignment?.dateRanges?.length; | ||
|
|
||
| const onVoucherAssign = () => { | ||
| setIsConfirmationModalOpen((prevState) => !prevState); | ||
| // TODO: Fetch info about assignment (assignmentSummary) | ||
| }; | ||
|
|
||
| const onAssignmentConfirmation = () => { | ||
| // TODO: After summary fetch, assign vouchers to the Workers. | ||
| setIsConfirmationModalOpen((prevState) => !prevState); | ||
| console.log('Assign Vouchers to the Workers'); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY); | ||
|
|
||
| if (storedUserEconomicUnit) { | ||
| const userEconomicUnit = JSON.parse(storedUserEconomicUnit); | ||
|
|
||
| setVoucherAssignment((prevState) => ({ ...prevState, employer: userEconomicUnit })); | ||
| } | ||
| }, [setVoucherAssignment]); | ||
|
|
||
| return ( | ||
| <Grid container> | ||
| <Grid xs={12}> | ||
| <Paper className={classes.paper}> | ||
| <Grid xs={12}> | ||
| <Grid container className={classes.paperHeaderTitle}> | ||
| <Typography variant="h5">{formatMessage('workerVoucher.menu.voucherAssignment')}</Typography> | ||
| <Tooltip | ||
| title={ | ||
| assignmentBlocked(voucherAssignment) | ||
| ? formatMessage('workerVoucher.vouchers.required') | ||
| : formatMessage('workerVoucher.assign.vouchers') | ||
| } | ||
| > | ||
| <span> | ||
| <Button | ||
| variant="outlined" | ||
| style={{ border: 0 }} | ||
| onClick={onVoucherAssign} | ||
| disabled={assignmentBlocked(voucherAssignment)} | ||
| > | ||
| <Typography variant="subtitle1">{formatMessage('workerVoucher.assign.voucher')}</Typography> | ||
| </Button> | ||
| </span> | ||
| </Tooltip> | ||
| </Grid> | ||
| </Grid> | ||
| <Divider /> | ||
| <AssignmentVoucherForm | ||
| edited={voucherAssignment} | ||
| onEditedChange={setVoucherAssignment} | ||
| formatMessage={formatMessage} | ||
| classes={classes} | ||
| /> | ||
| <VoucherAssignmentConfirmModal | ||
| openState={isConfirmationModalOpen} | ||
| onClose={() => setIsConfirmationModalOpen((prevState) => !prevState)} | ||
| onConfirm={onAssignmentConfirmation} | ||
| // TODO: Change after BE implementation | ||
| isLoading={false} | ||
| error={false} | ||
| assignmentSummary={{ | ||
| vouchers: 100, | ||
| }} | ||
| /> | ||
| </Paper> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| export default VoucherAssignmentForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.