Skip to content

Commit

Permalink
feat: Comment form
Browse files Browse the repository at this point in the history
  • Loading branch information
Grafikart committed Jan 5, 2024
1 parent 17626e9 commit c46fd17
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 79 deletions.
12 changes: 7 additions & 5 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
import { loadConfiguration, useConfiguration } from 'utils/hooks/useConfiguration';
import QueenContainer from './components/panel-body/queen-container';
import { PearlTheme } from './ui/PearlTheme';
import { Header } from './ui/Header';
import { Home } from './pages/Home';
Expand All @@ -12,7 +11,7 @@ import { ThemeProvider as ThemeProviderV4 } from '@material-ui/styles';
import theme from './theme';
import CssBaseline from '@material-ui/core/CssBaseline';
import Notification from './components/common/Notification';
import Preloader from './components/common/loader';
import { Preloader } from './ui/Preloader';
import D from './i18n/build-dictionary';
import { SyncContextProvider } from './ui/Sync/SyncContextProvider';
import Palette from './components/common/palette';
Expand All @@ -24,10 +23,12 @@ import './app.css';
import { SuiviPage } from './pages/SuiviPage';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { QueenPage } from './pages/QueenPage';

const router = createBrowserRouter([
{
path: '/queen/*',
element: <QueenContainer />,
element: <QueenPage />,
},
{
path: '/',
Expand Down Expand Up @@ -98,12 +99,13 @@ function AppWrapper() {
<CssBaseline />
<Notification serviceWorkerInfo={serviceWorkerInfo} />
<div>
{!authenticated && <Preloader message={D.pleaseWait} />}
{authenticated && (
{authenticated ? (
<SyncContextProvider>
<Header />
<Outlet />
</SyncContextProvider>
) : (
<Preloader message={D.pleaseWait} />
)}
</div>
</ThemeProviderV4>
Expand Down
4 changes: 2 additions & 2 deletions src/i18n/waitingMessage.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const waitingMessage = {
pleaseWait: { fr: 'Veuillez patienter ...', en: 'Please wait ...' },
loading: { fr: 'Chargement ...', en: 'Loading ...' },
pleaseWait: { fr: 'Veuillez patienter...', en: 'Please wait...' },
loading: { fr: 'Chargement...', en: 'Loading...' },
};

export default waitingMessage;
36 changes: 36 additions & 0 deletions src/pages/QueenPage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React, { useEffect, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { mount } from 'dramaQueen/DramaIndex';
import { useQueenListener } from '../utils/hooks/useQueenListener';

/**
* Mount Queen to sync data
* @returns {JSX.Element}
* @constructor
*/
export function QueenPage() {
/** @var {import('react').Ref<HTMLDivElement>} ref */
const ref = useRef(null);
const location = useLocation();

const navigate = useNavigate();
useQueenListener(navigate);

const isFirstRunRef = useRef(true);
const unmountRef = useRef(() => {});

useEffect(() => {
if (!isFirstRunRef.current) {
return;
}
unmountRef.current = mount({
mountPoint: ref.current,
initialPathname: location.pathname.replace('', ''),
});
isFirstRunRef.current = false;
}, [location]);

useEffect(() => unmountRef.current, []);

return <div ref={ref} id="drama-queen-mfe" />;
}
65 changes: 29 additions & 36 deletions src/pages/SurveyUnitPage.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import UEPage from '../components/panel-body/UEpage';
import { SurveyUnitHeader } from '../ui/SurveyUnit/SurveyUnitHeader';
import { useParams } from 'react-router-dom';
import { useSurveyUnit } from '../utils/hooks/database';
Expand All @@ -10,47 +9,41 @@ import { IdentificationCard } from '../ui/SurveyUnit/IdentificationCard';
import { PersonsCard } from '../ui/SurveyUnit/PersonsCard';
import { ContactsCard } from '../ui/SurveyUnit/ContactsCard';
import { CommunicationsCard } from '../ui/SurveyUnit/CommunicationsCard';
import { CommentCard } from '../ui/SurveyUnit/CommentCard';

export function SurveyUnitPage() {
const { id } = useParams();
const surveyUnit = useSurveyUnit(id);

// TODO : Remove this when finished
const isNewDesign = window.location.search.includes('&redesign');

if (!surveyUnit) {
return null;
}
if (isNewDesign) {
return (
<>
<SurveyUnitHeader surveyUnit={surveyUnit} />
<SwipeableTabs value={1}>
<SwipeableTab index={0} label={D.goToIdentificationPage}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
<AddressCard surveyUnit={surveyUnit} />
<IdentificationCard surveyUnit={surveyUnit} />
</Box>
</SwipeableTab>
<SwipeableTab index={1} label={D.goToContactPage}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
<PersonsCard surveyUnit={surveyUnit} />
<ContactsCard surveyUnit={surveyUnit} />
</Box>
</SwipeableTab>
<SwipeableTab index={2} label={D.goToCommunicationPage}>
<CommunicationsCard surveyUnit={surveyUnit} />
</SwipeableTab>
<SwipeableTab index={3} label={D.goToQuestionnairesPage}>
d
</SwipeableTab>
<SwipeableTab index={4} label={D.goToCommentsPage}>
e
</SwipeableTab>
</SwipeableTabs>
</>
);
}

return <UEPage />;
return (
<>
<SurveyUnitHeader surveyUnit={surveyUnit} />
<SwipeableTabs value={1}>
<SwipeableTab index={0} label={D.goToIdentificationPage}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
<AddressCard surveyUnit={surveyUnit} />
<IdentificationCard surveyUnit={surveyUnit} />
</Box>
</SwipeableTab>
<SwipeableTab index={1} label={D.goToContactPage}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
<PersonsCard surveyUnit={surveyUnit} />
<ContactsCard surveyUnit={surveyUnit} />
</Box>
</SwipeableTab>
<SwipeableTab index={2} label={D.goToCommunicationPage}>
<CommunicationsCard surveyUnit={surveyUnit} />
</SwipeableTab>
<SwipeableTab index={3} label={D.goToQuestionnairesPage}>
d
</SwipeableTab>
<SwipeableTab index={4} label={D.goToCommentsPage}>
<CommentCard surveyUnit={surveyUnit} />
</SwipeableTab>
</SwipeableTabs>
</>
);
}
47 changes: 47 additions & 0 deletions src/ui/Fields/CommentField.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import Stack from '@mui/material/Stack';
import { FilledInput } from '@mui/material';
import { Typography } from '../Typography';
import React from 'react';

/**
* @param {string} value
* @param {(v: string) => void} onChange
* @param {import('@mui/material').FilledInputProps} props
* @constructor
*/
export function CommentField({ value, onChange, ...props }) {
const maxChar = 999;
const handleChange = e => {
if (e.target.value.length > maxChar) {
return;
}
onChange(e.target.value);
};
return (
<Stack gap={1}>
<FilledInput
sx={{
padding: '0rem',
minWidth: 500,
}}
inputProps={{
sx: {
padding: '1rem',
},
}}
minRows={8}
maxRows={8}
value={value}
onChange={handleChange}
variant="filled"
label="Commentaire"
multiline
placeholder="Saisissez un commentaire..."
{...props}
/>
<Typography variant="xs" color="textHint" textAlign="right">
{value.length}/{maxChar}
</Typography>
</Stack>
);
}
25 changes: 25 additions & 0 deletions src/ui/Preloader.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Backdrop from '@mui/material/Backdrop';
import D from 'i18n';
import CircularProgress from '@mui/material/CircularProgress';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';

/**
* @param {string} message
* @constructor
*/
export function Preloader({ message }) {
return (
<Backdrop open sx={{ color: '#FFF' }}>
<Stack gap={2} alignItems="center">
<CircularProgress color="white" size="6em" />
<Box component="h2" m={0} mt={2}>
{D.pleaseWait}
</Box>
<Box component="h3" m={0} sx={{ opacity: 0.75 }} variant="m" color="textTertiary">
{message}
</Box>
</Stack>
</Backdrop>
);
}
10 changes: 7 additions & 3 deletions src/ui/Stats/PieChart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,13 @@ export function PieChart({ parts, size, paddingInline = 0, paddingBlock = 0 }) {
style={{ width: size + 2 * paddingInline, height: size + 2 * paddingBlock }}
>
<g mask="url(#pieMask)">
{parts.map((part, k) => (
<path key={k} fill={part.color} d={sliceToPath(pieSlices[k], radius)} />
))}
{parts.map((part, k) =>
part.value === 1 ? (
<circle fill={part.color} x={0} y={0} r={radius} />
) : (
<path key={k} fill={part.color} d={sliceToPath(pieSlices[k], radius)} />
)
)}
</g>
<mask id="pieMask">
<rect fill="white" x={radius * -1} y={radius * -1} width={size} height={size}></rect>
Expand Down
54 changes: 54 additions & 0 deletions src/ui/SurveyUnit/CommentCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { Typography } from '../Typography';
import D from 'i18n';
import { Row } from '../Row';
import Stack from '@mui/material/Stack';
import { getCommentByType } from '../../utils/functions';
import React, { useState } from 'react';
import Button from '@mui/material/Button';
import CommentIcon from '@mui/icons-material/Comment';
import { CommentField } from '../Fields/CommentField';
import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';

/**
* @param {SurveyUnit} surveyUnit
*/
export function CommentCard({ surveyUnit }) {
const baseComment = getCommentByType('INTERVIEWER', surveyUnit);
const [comment, setComment] = useState(baseComment);
const handleSubmit = e => {
e.preventDefault();
const comments = [
{ type: 'MANAGEMENT', value: getCommentByType('MANAGEMENT', surveyUnit) },
{ type: 'INTERVIEWER', value: comment },
];
surveyUnitIDBService.addOrUpdateSU({
...surveyUnit,
comments: comments,
});
};
const canSubmit = comment !== baseComment;
return (
<>
<Card p={2} elevation={0}>
<CardContent>
<Stack gap={3} component="form" onSubmit={handleSubmit}>
<Row gap={1}>
<CommentIcon fontSize="large" />
<Typography as="h2" variant="xl" fontWeight={700}>
{D.goToCommentsPage}
</Typography>
</Row>
<Stack gap={2} alignItems="stretch">
<CommentField value={comment} onChange={setComment} />
<Button variant="contained" type="submit" disabled={!canSubmit}>
{D.saveButton}
</Button>
</Stack>
</Stack>
</CardContent>
</Card>
</>
);
}
34 changes: 3 additions & 31 deletions src/ui/SurveyUnit/CommentDialog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import React, { useState } from 'react';
import Stack from '@mui/material/Stack';
import { Typography } from '../Typography';
import { PrivilegedPerson } from './PrivilegedPerson';
import { getCommentByType } from '../../utils/functions';
import { FilledInput } from '@mui/material';
import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';
import D from 'i18n';
import { CommentField } from '../Fields/CommentField';

/**
* Dialog to add a new comment to a survey unit
*
* @param {SurveyUnit} surveyUnit
* @param {boolean} open
Expand All @@ -21,17 +21,12 @@ import D from 'i18n';
export function CommentDialog({ surveyUnit, open, onClose }) {
const baseComment = getCommentByType('INTERVIEWER', surveyUnit);
const [comment, setComment] = useState(baseComment);
const maxChar = 999;

const handleCancel = () => {
setComment(baseComment);
onClose();
};

const handleChange = e => {
setComment(e.target.value.slice(0, maxChar));
};

const handleSubmit = e => {
e.preventDefault();
const comments = [
Expand All @@ -52,30 +47,7 @@ export function CommentDialog({ surveyUnit, open, onClose }) {
<DialogContent>
<Stack gap={2}>
<PrivilegedPerson surveyUnit={surveyUnit} />
<Stack gap={1}>
<FilledInput
sx={{
padding: '0rem',
width: 550,
}}
inputProps={{
sx: {
padding: '1rem',
},
}}
minRows={8}
maxRows={8}
value={comment}
onChange={handleChange}
variant="filled"
label="Commentaire"
multiline
placeholder="Saisissez un commentaire..."
/>
<Typography variant="xs" color="textHint" textAlign="right">
{comment.length}/{maxChar}
</Typography>
</Stack>
<CommentField value={comment} onChange={setComment} />
</Stack>
</DialogContent>
<DialogActions>
Expand Down
Loading

0 comments on commit c46fd17

Please sign in to comment.