diff --git a/.env b/.env index 8ccf0395..4d8861cd 100644 --- a/.env +++ b/.env @@ -1,4 +1,3 @@ -QUEEN_URL=https://queen.demo.dev.sspcloud.fr -PEARL_API_URL=https://pearl-bo.demo.dev.sspcloud.fr +QUEEN_URL=https://drama-queen.demo.insee.io +PEARL_API_URL=https://pearl-bo.demo.insee.io PEARL_AUTHENTICATION_MODE=anonymous -CHAT_URL= \ No newline at end of file diff --git a/.gitignore b/.gitignore index bd98e77a..1a46475a 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ dist build dist-ssr *.local +Caddyfile # Editor directories and files .vscode/* diff --git a/configuration/configuration.json b/configuration/configuration.json index efda7c25..1139bb32 100644 --- a/configuration/configuration.json +++ b/configuration/configuration.json @@ -6,8 +6,5 @@ "_PEARL_API_URL_COMMENT_": "url of Pearl API", "PEARL_AUTHENTICATION_MODE": "${PEARL_AUTHENTICATION_MODE}", - "_PEARL_AUTHENTICATION_MODE_COMMENT": "The mode of authentication. Currently, App is supporting 'anonymous'", - - "CHAT_URL": "${CHAT_URL}", - "_CHAT_URL_COMMENT_": "url of Pearl Chat" + "_PEARL_AUTHENTICATION_MODE_COMMENT": "The mode of authentication. Currently, App is supporting 'anonymous'" } diff --git a/index.html b/index.html index b8087b31..7c44fa95 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,22 @@ - + - - - - - - - - - - - Collecte Enquêteurs - + - - -
- - + Collecte Enquêteurs + - \ No newline at end of file + + +
+ + + diff --git a/package.json b/package.json index d24813da..ea8fb809 100644 --- a/package.json +++ b/package.json @@ -1,35 +1,28 @@ { "name": "pearl", - "version": "1.1.9", + "version": "2.0.1", "private": true, "dependencies": { - "@date-io/date-fns": "1.x", - "@material-ui/core": "^4.11.2", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", - "@material-ui/pickers": "^3.3.10", - "@testing-library/jest-dom": "^5.11.9", - "@testing-library/react": "^11.2.5", - "@testing-library/user-event": "^11.2.5", - "clsx": "^1.1.1", - "date-fns": "^2.18.0", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@fontsource/montserrat": "^5.0.16", + "@maverick-js/signals": "^5.11.4", + "@mui/icons-material": "^5.15.10", + "@mui/material": "^5.15.10", + "@mui/styles": "^5.15.10", + "@mui/x-date-pickers": "^6.18.6", + "date-fns": "^2.30.0", "dexie": "^3.2.1", "dexie-export-import": "^1.0.3", "dexie-react-hooks": "^1.1.1", - "downloadjs": "^1.4.7", - "font-awesome": "^4.7.0", "keycloak-js": "^10.0.2", - "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-modal": "^3.11.1", - "react-router-dom": "^5.2.0", + "postcss": "8.4.24", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-hook-form": "^7.49.2", + "react-router-dom": "^6.21.0", "react-swipeable-views": "^0.14.0", - "workbox-cacheable-response": "^5.1.3", - "workbox-core": "^5.1.3", - "workbox-precaching": "^5.1.3", - "workbox-routing": "^5.1.3", - "workbox-strategies": "^5.1.3" + "zod": "^3.22.4" }, "scripts": { "dev": "vite", @@ -52,9 +45,6 @@ "jsx-a11y" ], "rules": { - "react/prop-types": [ - "off" - ], "prettier/prettier": [ 1, { @@ -99,12 +89,9 @@ }, "devDependencies": { "@originjs/vite-plugin-federation": "^1.2.1", - "@types/react": "^16.9.23", - "@types/react-router-dom": "^5.1.3", - "@vitejs/plugin-react": "^3.1.0", + "@types/react": "^18.2.46", + "@vitejs/plugin-react": "^4.2.1", "copy-and-watch": "^0.1.4", - "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.15.1", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^8.1.0", "eslint-plugin-import": "^2.22.1", @@ -113,12 +100,14 @@ "eslint-plugin-react": "^7.16.0", "eslint-plugin-react-hooks": "^4.2.0", "jest-sonar-reporter": "^2.0.0", - "jsdom": "^21.1.1", - "prettier": "^1.19.1", - "react-test-renderer": "^17.0.2", + "jsdom": "^23.0.1", + "prettier": "^3.1.1", "vite": "^4.2.1", - "vite-plugin-pwa": "^0.14.7", + "vite-plugin-pwa": "^0.19.2", "vite-tsconfig-paths": "^3.6.0", "vitest": "^0.29.7" + }, + "volta": { + "node": "20.10.0" } } diff --git a/public/configuration.json b/public/configuration.json index c834f809..8e03f516 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -5,8 +5,6 @@ "PEARL_API_URL": "http://localhost:8080", "_PEARL_API_URL_COMMENT_": "url of Pearl API", - "PEARL_AUTHENTICATION_MODE": "keycloak", - "_PEARL_AUTHENTICATION_MODE_COMMENT": "The mode of authentication. Currently, App is supporting 'anonymous'", - "CHAT_URL": "", - "_CHAT_URL_COMMENT_": "url of Pearl Chat" + "PEARL_AUTHENTICATION_MODE": "anonymous", + "_PEARL_AUTHENTICATION_MODE_COMMENT": "The mode of authentication. Supported values 'anonymous' and 'keycloak' " } diff --git a/src/App.jsx b/src/App.jsx index 26816a65..81dfe114 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,46 +1,102 @@ -import { Route, useLocation } from 'react-router-dom'; - -import CssBaseline from '@material-ui/core/CssBaseline'; -import D from 'i18n'; -import { DatabaseConsole } from 'components/panel-body/databaseConsole'; -import Home from 'components/panel-body/home'; -import Notification from 'components/common/Notification'; -import { NotificationWrapper } from 'components/notificationWrapper'; -import Palette from 'components/common/palette'; -import Preloader from 'components/common/loader'; import React from 'react'; -import { ResetData } from 'components/panel-body/resetData'; -import SynchronizeWrapper from 'components/sychronizeWrapper'; -import { ThemeProvider } from '@material-ui/core/styles'; -import theme from './theme'; -import { useAuth } from 'utils/auth/initAuth'; -import { useServiceWorker } from 'utils/hooks/useServiceWorker'; +import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'; +import { loadConfiguration, useConfiguration } from './utils/hooks/useConfiguration'; +import { PearlTheme } from './ui/PearlTheme'; +import { Header } from './ui/Header'; +import { Home } from './pages/Home'; +import { useAuth } from './utils/auth/initAuth'; +import { Preloader } from './ui/Preloader'; +import D from './i18n/build-dictionary'; +import { SyncContextProvider } from './ui/Sync/SyncContextProvider'; +import { useEffectOnce } from './utils/hooks/useEffectOnce'; +import { SurveyUnitPage } from './pages/SurveyUnitPage'; +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'; +import { ServiceWorkerStatus } from './ui/ServiceWorkerStatus'; +import { ResetData } from './pages/ResetData'; +import { enUS, fr } from 'date-fns/locale'; + +const router = createBrowserRouter([ + { + path: '/queen/*', + element: , + }, + { + path: '/', + element: , + children: [ + { + path: '/', + element: , + }, + { + path: '/suivi', + element: , + }, + { + path: '/survey-unit/:id', + element: , + children: [ + { + path: 'details', + element: , + }, + ], + }, + { + path: '/support/reset-data', + element: , + }, + ], + }, +]); + +export function App() { + const configuration = useConfiguration(); + + useEffectOnce(loadConfiguration, []); + + if (!configuration) { + return null; + } -function App() { - const { pathname } = useLocation(); + return ; +} + +function AppWrapper() { const { authenticated } = useAuth(); - const serviceWorkerInfo = useServiceWorker(authenticated); + const browserLanguage = navigator.language; + let dateFnsLocale; + switch (browserLanguage) { + case 'fr': + case 'fr-FR': + dateFnsLocale = fr; + break; + case 'en-US': + case 'en': + default: + dateFnsLocale = enUS; + break; + } + return ( - - - -
- {!authenticated && } - {authenticated && ( - - - {!pathname.startsWith('/support') && ( - } /> - )} - - - - - - )} -
- + + + +
+ {authenticated ? ( + +
+ + + ) : ( + + )} +
+ + ); } - -export default App; diff --git a/src/AppRooter.jsx b/src/AppRooter.jsx deleted file mode 100644 index b2863db5..00000000 --- a/src/AppRooter.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import App from 'App'; -import QueenContainer from 'components/panel-body/queen-container'; -import { Route, Switch, useLocation } from 'react-router-dom'; - -function AppRooter() { - const { pathname } = useLocation(); - - return ( - - } /> - {!pathname.startsWith('/queen') && } - - ); -} - -export default AppRooter; diff --git a/src/Root.jsx b/src/Root.jsx deleted file mode 100644 index e291bcb8..00000000 --- a/src/Root.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useEffect, useMemo, useState } from 'react'; - -import AppRouter from 'AppRooter'; -import { BrowserRouter as Router } from 'react-router-dom'; -import { addOnlineStatusObserver } from 'utils'; -import { useConfiguration } from 'utils/hooks/configuration'; - -export const AppContext = React.createContext(); - -function Root() { - const { configuration } = useConfiguration(); - const [online, setOnline] = useState(navigator.onLine); - - useEffect(() => { - addOnlineStatusObserver(s => { - setOnline(s); - }); - }, []); - - const context = useMemo(() => ({ ...configuration, online }), [configuration]); - - return ( - <> - {configuration && ( - - - - - - )} - - ); -} - -export default Root; diff --git a/src/SwipeableTabs.jsx b/src/SwipeableTabs.jsx new file mode 100644 index 00000000..435569d9 --- /dev/null +++ b/src/SwipeableTabs.jsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { Children } from 'react'; +import SwipeableViews from 'react-swipeable-views'; +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import Box from '@mui/material/Box'; + +export function SwipeableTab(props) { + const { children, value, index, ...other } = props; + + return ( +
+ {children} +
+ ); +} + +function a11yProps(index) { + return { + id: `full-width-tab-${index}`, + 'aria-controls': `full-width-tabpanel-${index}`, + }; +} + +export function SwipeableTabs({ children }) { + const [value, setValue] = React.useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + const handleChangeIndex = index => { + setValue(index); + }; + const tabs = Children.map(children, child => child.props.label); + + return ( + <> + + {tabs.map((tab, index) => ( + + ))} + + + {children} + + + ); +} diff --git a/src/app.css b/src/app.css new file mode 100644 index 00000000..0a4bb991 --- /dev/null +++ b/src/app.css @@ -0,0 +1,18 @@ +body { + background-color: #F5F7FA!important; +} + +::-webkit-scrollbar { + width: 7px; + height: 7px; +} + +::-webkit-scrollbar-track { + background: #FFF; + padding: 1px; +} + +::-webkit-scrollbar-thumb { + background: #E6EAF0; + border-radius: 4px; +} diff --git a/src/components/common/Notification/index.jsx b/src/components/common/Notification/index.jsx deleted file mode 100644 index 4d0a158f..00000000 --- a/src/components/common/Notification/index.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; -import Slide from '@material-ui/core/Slide'; -import Snackbar from '@material-ui/core/Snackbar'; -import D from 'i18n'; -import Alert from '@material-ui/lab/Alert'; - -const useStyles = makeStyles(theme => ({ - root: { - position: 'absolute', - top: 0, - minWidth: '80%', - }, - buttonParrent: { - marginTop: theme.spacing(1), - display: 'flex', - justifyContent: 'center', - }, -})); - -const SlideTransition = props => ; - -const Notification = ({ serviceWorkerInfo }) => { - const classes = useStyles(); - const [message, setMessage] = useState(null); - const { - isUpdating, - isUpdateInstalled, - isInstallingServiceWorker, - isUpdateAvailable, - isServiceWorkerInstalled, - isInstallationFailed, - updateApp, - clearUpdating, - } = serviceWorkerInfo; - const [open, setOpen] = useState(false); - const [severityType, setSeverityType] = useState('info'); - - useEffect(() => { - if (message) setOpen(true); - }, [message]); - - useEffect(() => { - if (isUpdating || isInstallingServiceWorker || isUpdateAvailable) setSeverityType('info'); - if (isInstallationFailed) setSeverityType('error'); - if (isUpdateInstalled || isServiceWorkerInstalled) setSeverityType('success'); - }, [ - isUpdating, - isInstallingServiceWorker, - isUpdateAvailable, - isInstallationFailed, - isUpdateInstalled, - isServiceWorkerInstalled, - ]); - - useEffect(() => { - if (isUpdating) setMessage(D.updating); - else if (isUpdateInstalled) setMessage(D.updateInstalled); - else if (isUpdateAvailable) setMessage(D.updateAvailable); - else if (isServiceWorkerInstalled) setMessage(D.appReadyOffline); - else if (isInstallingServiceWorker) setMessage(D.appInstalling); - else if (isInstallationFailed) setMessage(D.installError); - else setMessage(null); - }, [ - isUpdating, - isInstallingServiceWorker, - isUpdateAvailable, - isInstallationFailed, - isUpdateInstalled, - isServiceWorkerInstalled, - ]); - - const close = () => { - setOpen(false); - if (isUpdateInstalled) setTimeout(() => clearUpdating(), 1000); - }; - - return ( - - - {message} - {isUpdateAvailable && !isUpdating && ( - - - - )} - - - ); -}; - -export default Notification; diff --git a/src/components/common/Notification/notificationItem.jsx b/src/components/common/Notification/notificationItem.jsx deleted file mode 100644 index 2af48960..00000000 --- a/src/components/common/Notification/notificationItem.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import { NOTIFICATION_TYPE_MANAGEMENT, NOTIFICATION_TYPE_SYNC } from 'utils/constants'; -import React, { useContext } from 'react'; - -import D from 'i18n'; -import FiberManualRecord from '@material-ui/icons/FiberManualRecord'; -import Link from '@material-ui/core/Link'; -import { NavigationContext } from '../navigation/component'; -import { NotificationWrapperContext } from 'components/notificationWrapper'; -import { SynchronizeWrapperContext } from 'components/sychronizeWrapper'; -import Typography from '@material-ui/core/Typography'; -import { dateFnsLocal } from 'utils'; -import { formatDistance } from 'date-fns'; -import { makeStyles } from '@material-ui/core/styles'; -import syncReportIdbService from 'utils/indexeddb/services/syncReport-idb-service'; - -const useStyles = makeStyles(theme => ({ - root: { padding: '1em' }, - titleWrapper: { - display: 'flex', - }, - title: { - color: 'black', - fontSize: 'larger', - textAlign: 'left', - }, - details: { - fontSize: '0.8em', - textTransform: 'uppercase', - color: 'grey', - }, - readIcon: { marginLeft: 'auto', color: '#0f417a' }, -})); - -export const NotificationItem = ({ data }) => { - const { markNotifAsRead } = useContext(NotificationWrapperContext); - const { setOpen } = useContext(NavigationContext); - const { setSyncResult } = useContext(SynchronizeWrapperContext); - - const { id, date, title, type, messages, read, state, detail } = data; - - const typeOfNotif = { - [NOTIFICATION_TYPE_SYNC]: D.simpleSync, - [NOTIFICATION_TYPE_MANAGEMENT]: D.notifManagement, - }; - const finalType = typeOfNotif[type]; - - const finalDate = `${formatDistance(date || 0, new Date(), { - addSuffix: true, - locale: dateFnsLocal, - })}`; - - const classes = useStyles(); - - const markAsRead = async () => { - if (!read) { - markNotifAsRead(id); - } - if (type === NOTIFICATION_TYPE_SYNC) { - const report = (await syncReportIdbService.getById(detail)) || {}; - setOpen(false); - setSyncResult({ date: finalDate, state, messages, details: report }); - } - }; - - return ( -
-
- - {title} - - {!read && } -
- {`${finalDate} - ${finalType}`} -
- ); -}; diff --git a/src/components/common/Notification/notificationsRoot.jsx b/src/components/common/Notification/notificationsRoot.jsx deleted file mode 100644 index bd12ff31..00000000 --- a/src/components/common/Notification/notificationsRoot.jsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useContext } from 'react'; -import D from 'i18n'; -import Divider from '@material-ui/core/Divider'; -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import IconButton from '@material-ui/core/IconButton'; -import NativeSelect from '@material-ui/core/NativeSelect'; -import Paper from '@material-ui/core/Paper'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import { NotificationItem } from './notificationItem'; -import { NotificationWrapperContext } from 'components/notificationWrapper'; -import { Delete, Drafts } from '@material-ui/icons'; -import { NOTIFICATION_TYPE_MANAGEMENT, NOTIFICATION_TYPE_SYNC } from 'utils/constants'; - -const useStyles = makeStyles(theme => ({ - paperNotif: { - borderRadius: '10px', - minWidth: '400px', - boxShadow: '3px 0 0.8em grey, -3px 0 0.8em grey', - }, - paperNotifTitleWrapper: { display: 'flex', paddingTop: '10px' }, - iconButtons: { marginLeft: 'auto' }, - paperNotifTitle: { - padding: '1em', - fontWeight: 'bold', - }, - noNotif: { padding: '1em' }, - paperNotifContent: { - padding: 0, - maxHeight: '400px', - maxWidth: '400px', - overflowY: 'auto', - }, -})); - -export const NotificationsRoot = () => { - const { - notifications, - unReadNotificationsNumberFilterd, - deleteAll, - markAllAsRead, - filterType, - setFilterType, - } = useContext(NotificationWrapperContext); - - const changeFilter = e => { - setFilterType(e.target.value); - }; - - const classes = useStyles(); - - return ( - -
- {D.notifications} -
- - - - - - - {D.notificationsType} - -
- -
- {unReadNotificationsNumberFilterd > 0 && ( - - - - - - )} - {notifications.length > 0 && ( - - - - - - )} -
-
- - -
- {notifications.length > 0 && - notifications.map(notif => ( - - - - - ))} - {notifications.length === 0 && ( - {D.noNotification} - )} -
- - ); -}; diff --git a/src/components/common/loader/index.jsx b/src/components/common/loader/index.jsx deleted file mode 100644 index e2dcdb07..00000000 --- a/src/components/common/loader/index.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import { makeStyles } from '@material-ui/core/styles'; -import Backdrop from '@material-ui/core/Backdrop'; -import D from 'i18n'; -import imgPreloader from 'img/loader.svg'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const useStyles = makeStyles(theme => ({ - backdrop: { - zIndex: theme.zIndex.drawer + 1, - color: '#fff', - display: 'flex', - flexDirection: 'column', - }, -})); - -const Preloader = ({ message }) => { - const classes = useStyles(); - return ( - - waiting... -

{D.pleaseWait}

-

{message}

- - ); -}; - -export default Preloader; -Preloader.propTypes = { - message: PropTypes.string.isRequired, -}; diff --git a/src/components/common/navigation/component.jsx b/src/components/common/navigation/component.jsx deleted file mode 100644 index d71c76dd..00000000 --- a/src/components/common/navigation/component.jsx +++ /dev/null @@ -1,193 +0,0 @@ -import { NavLink, Route } from 'react-router-dom'; -import React, { useContext, useMemo, useState } from 'react'; - -import AssignmentIndIcon from '@material-ui/icons/AssignmentInd'; -import AppBar from '@material-ui/core/AppBar'; -import Badge from '@material-ui/core/Badge'; -import Card from '@material-ui/core/Card'; -import CardMedia from '@material-ui/core/CardMedia'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import D from 'i18n'; -import Fade from '@material-ui/core/Fade'; -import IconButton from '@material-ui/core/IconButton'; -import MenuIcon from '@material-ui/icons/Menu'; -import { NotificationWrapperContext } from 'components/notificationWrapper'; -import Notifications from '@material-ui/icons/Notifications'; -import { NotificationsRoot } from 'components/common/Notification/notificationsRoot'; -import OnlineStatus from 'components/common/online-status'; -import { PEARL_USER_KEY } from 'utils/constants'; -import Popper from '@material-ui/core/Popper'; -import PropTypes from 'prop-types'; -import SearchBar from '../search/component'; -import Synchronize from 'components/common/synchronize'; -import Toolbar from '@material-ui/core/Toolbar'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import { UserContext } from 'components/panel-body/home/UserContext'; -import { makeStyles } from '@material-ui/core/styles'; -import { Modal } from '@material-ui/core'; -import { UserProfile } from 'components/common/userProfile'; - -export const NavigationContext = React.createContext(); - -const Navigation = ({ textSearch, setTextSearch, setOpenDrawer }) => { - const { unReadNotificationsNumber } = useContext(NotificationWrapperContext); - const user = useContext(UserContext); - - const useStyles = makeStyles(theme => ({ - appBar: { - backgroundColor: theme.palette.primary.main, - height: '5em', - }, - column: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'end', - }, - card: { - borderRadius: 0, - }, - media: { - height: '3em', - width: '3em', - }, - grow: { - flex: '1 1 auto', - }, - notificationsIcon: { - fontSize: 'xx-large', - color: theme.palette.secondary.main, - '&:hover': { color: theme.palette.secondary.dark }, - }, - syncIcon: { - fontSize: 'xxx-large', - color: theme.palette.secondary.main, - alignSelf: 'center', - }, - noVisibleFocus: { - '&:focus, &:hover': { - backgroundColor: theme.palette.primary.main, - }, - marginLeft: '1em', - marginRight: '1em', - }, - notif: { - zIndex: 1200, - }, - profileModal: { - paddingTop: '5em', - display: 'flex', - justifyContent: 'flex-end', - margin: '1em', - }, - })); - - const classes = useStyles(); - - const [anchorEl, setAnchorEl] = useState(null); - const [open, setOpen] = useState(false); - const [profileOpen, setProfileOpen] = useState(false); - - const handleClickAway = () => { - setOpen(false); - }; - - const handleClick = event => { - setAnchorEl(event.currentTarget); - setOpen(o => !o); - }; - - const clickOnProfile = () => { - setProfileOpen(o => !o); - }; - const contextValue = useMemo(() => ({ setOpen }), [setOpen]); - - return ( - - - - - - - - - - setOpenDrawer(true)} - > - - - - Sabiane - - Collecte - - -
- ( - - )} - /> -
-
- -
- - - - - - - - - {({ TransitionProps }) => ( - - - - )} - -
- -
- - - - - - - - - - - - ); -}; -export default Navigation; -Navigation.propTypes = { - textSearch: PropTypes.string.isRequired, - setTextSearch: PropTypes.func.isRequired, - setOpenDrawer: PropTypes.func.isRequired, -}; diff --git a/src/components/common/navigation/index.jsx b/src/components/common/navigation/index.jsx deleted file mode 100644 index c2e6da1a..00000000 --- a/src/components/common/navigation/index.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import { withRouter } from 'react-router-dom'; -import Navigation from './component'; - -export default withRouter(props => ); diff --git a/src/components/common/online-status/index.jsx b/src/components/common/online-status/index.jsx deleted file mode 100644 index 794a1c32..00000000 --- a/src/components/common/online-status/index.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useContext } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import WifiIcon from '@material-ui/icons/Wifi'; -import clsx from 'clsx'; -import { AppContext } from 'Root'; - -const useStyles = makeStyles(theme => ({ - red: { - color: theme.palette.error.main, - }, - green: { - color: 'green', - }, - icon: { - transform: 'rotate(45deg)', - fontSize: 'xxx-large', - marginBottom: '-10px', - alignSelf: 'center', - }, -})); - -const OnlineStatus = () => { - const { online } = useContext(AppContext); - - const { icon, green, red } = useStyles(); - - return ; -}; - -export default OnlineStatus; diff --git a/src/components/common/palette.jsx b/src/components/common/palette.jsx deleted file mode 100644 index 79145488..00000000 --- a/src/components/common/palette.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles(theme => ({ - primaryMain: { - backgroundColor: theme.palette.primary.main, - height: '5em', - }, - primaryDark: { - backgroundColor: theme.palette.primary.dark, - height: '5em', - }, - primaryDarker: { - backgroundColor: theme.palette.primary.darker, - height: '5em', - }, - primaryLight: { - backgroundColor: theme.palette.primary.light, - height: '5em', - }, - secondaryMain: { - backgroundColor: theme.palette.secondary.main, - height: '5em', - }, - secondaryDark: { - backgroundColor: theme.palette.secondary.dark, - height: '5em', - }, - secondaryLight: { - backgroundColor: theme.palette.secondary.light, - height: '5em', - }, - errorMain: { - backgroundColor: theme.palette.error.main, - height: '5em', - }, - errorDark: { - backgroundColor: theme.palette.error.dark, - height: '5em', - }, - errorLight: { - backgroundColor: theme.palette.error.light, - height: '5em', - }, -})); - -const Palette = () => { - const classes = useStyles(); - - return ( - <> - - Primary.darker text.primary - Primary.darker text.secondary - - - Primary.dark text.primary - Primary.dark text.secondary - - - Primary.main text.primary - Primary.main text.secondary - - - Primary.light text.primary - Primary.light text.secondary - - - Secondary.dark - - - Secondary.main - - - Secondary.light - - - error.dark - - - error.main - - - error.light - - - ); -}; - -export default Palette; diff --git a/src/components/common/search/component.jsx b/src/components/common/search/component.jsx deleted file mode 100644 index 76336eae..00000000 --- a/src/components/common/search/component.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import InputBase from '@material-ui/core/InputBase'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - search: { - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(3), - width: '75%', - }, - }, - inputInput: { - padding: theme.spacing(1, 1, 1, 1), - border: 'solid 1px black', - }, -})); - -const SearchBar = ({ textSearch, setTextSearch }) => { - const classes = useStyles(); - const handleChange = e => { - const txt = e.target.value; - setTextSearch(txt); - }; - - return ( - - ); -}; - -export default SearchBar; -SearchBar.propTypes = { - textSearch: PropTypes.string.isRequired, - setTextSearch: PropTypes.func.isRequired, -}; diff --git a/src/components/common/search/index.jsx b/src/components/common/search/index.jsx deleted file mode 100644 index c2e6da1a..00000000 --- a/src/components/common/search/index.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import { withRouter } from 'react-router-dom'; -import Navigation from './component'; - -export default withRouter(props => ); diff --git a/src/components/common/sharedComponents/EditableBooleanField.jsx b/src/components/common/sharedComponents/EditableBooleanField.jsx deleted file mode 100644 index 5f796342..00000000 --- a/src/components/common/sharedComponents/EditableBooleanField.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: '1em', - }, -})); - -export const EditableBooleanField = ({ id, label, defaultValue = undefined, onChangeFunction }) => { - const classes = useStyles(); - return ( -
- {label} - onChangeFunction(event)} - /> -
- ); -}; diff --git a/src/components/common/sharedComponents/EditableTextField.jsx b/src/components/common/sharedComponents/EditableTextField.jsx deleted file mode 100644 index 3b235522..00000000 --- a/src/components/common/sharedComponents/EditableTextField.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: '1em', - }, -})); - -export const EditableTextField = ({ id, label, defaultValue = '', onChangeFunction }) => { - const classes = useStyles(); - return ( -
- {label} - onChangeFunction(event)} - /> -
- ); -}; diff --git a/src/components/common/sharedComponents/EditableTextFieldWithClickableIcon.jsx b/src/components/common/sharedComponents/EditableTextFieldWithClickableIcon.jsx deleted file mode 100644 index d251059a..00000000 --- a/src/components/common/sharedComponents/EditableTextFieldWithClickableIcon.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import { EditableTextField } from './EditableTextField'; -import React from 'react'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(theme => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: '1em', - }, -})); - -export const EditableTextFieldWithClickableIcon = ({ - id, - label, - defaultValue = '', - icons = [], - onChangeFunction, -}) => { - const classes = useStyles(); - return ( -
- - {icons.map(icon => icon)} -
- ); -}; diff --git a/src/components/common/sharedComponents/GenericTile.jsx b/src/components/common/sharedComponents/GenericTile.jsx deleted file mode 100644 index b59e45d6..00000000 --- a/src/components/common/sharedComponents/GenericTile.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Paper } from '@material-ui/core'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(() => ({ - root: { - display: 'flex', - flexDirection: 'column', - gap: '1em', - padding: '1.5em', - borderRadius: '15px', - margin: '2em', - height: 'max-content', - }, - row: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - gap: '1em', - }, -})); - -const GenericTile = ({ title, children, icon, editionIcon }) => { - const classes = useStyles(); - return ( - -
-
- {icon} - {title} -
- {editionIcon} -
- {children} - - ); -}; - -export default GenericTile; -GenericTile.propTypes = { - title: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - icon: PropTypes.node.isRequired, -}; diff --git a/src/components/common/sharedComponents/IconButton.jsx b/src/components/common/sharedComponents/IconButton.jsx deleted file mode 100644 index a09e469e..00000000 --- a/src/components/common/sharedComponents/IconButton.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import AddIcon from '@material-ui/icons/Add'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import Button from '@material-ui/core/Button'; -import CheckIcon from '@material-ui/icons/Check'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import CloseIcon from '@material-ui/icons/Close'; -import SendIcon from '@material-ui/icons/Send'; - -const ButtonIcons = { - questionnaire: , - transmit: , - rightArrow: , - add: , - check: , - close: , -}; - -const IconButton = ({ iconType, label, onClickFunction, hasArrow, disabled = false }) => { - return ( - - ); -}; - -export default IconButton; diff --git a/src/components/common/sharedComponents/LabelledBoolean.jsx b/src/components/common/sharedComponents/LabelledBoolean.jsx deleted file mode 100644 index fd7a01c7..00000000 --- a/src/components/common/sharedComponents/LabelledBoolean.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import MaterialIcons from 'utils/icons/materialIcons'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - row: { - display: 'flex', - flexDirection: 'row', - }, - rightMargin: { marginRight: '1em' }, -})); - -const LabelledBoolean = ({ labelText, value = undefined }) => { - const classes = useStyles(); - - return ( -
- - {labelText} - - {value !== undefined && } -
- ); -}; - -export default LabelledBoolean; diff --git a/src/components/common/sharedComponents/LabelledSwitch.jsx b/src/components/common/sharedComponents/LabelledSwitch.jsx deleted file mode 100644 index d76a2416..00000000 --- a/src/components/common/sharedComponents/LabelledSwitch.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import Switch from '@material-ui/core/Switch'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - marginRight: { - marginRight: '1em', - }, -})); - -export const LabelledSwitch = ({ labelText, text, value, onChangeFunction }) => { - const classes = useStyles(); - return ( -
- - {labelText} - - {text} - -
- ); -}; diff --git a/src/components/common/sharedComponents/LabelledText.jsx b/src/components/common/sharedComponents/LabelledText.jsx deleted file mode 100644 index 09def9ac..00000000 --- a/src/components/common/sharedComponents/LabelledText.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - maxWidth: '20em', - }, - column: { - display: 'flex', - flexDirection: 'column', - marginRight: '1em', - }, - overflow: { - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - }, -})); - -const LabelledText = ({ labelText, value }) => { - const classes = useStyles(); - return ( -
-
- {Array.isArray(labelText) ? ( - labelText.map(labelTextLine => ( - - {labelTextLine} - - )) - ) : ( - {labelText} - )} -
- {value} -
- ); -}; - -export default LabelledText; diff --git a/src/components/common/sharedComponents/LabelledTextWithClickableIcon.jsx b/src/components/common/sharedComponents/LabelledTextWithClickableIcon.jsx deleted file mode 100644 index ebebc9b6..00000000 --- a/src/components/common/sharedComponents/LabelledTextWithClickableIcon.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import LabelledText from './LabelledText'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(theme => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); - -export const LabelledTextWithClickableIcon = ({ labelText, value, icon: Icon }) => { - const classes = useStyles(); - - return ( -
- - -
- ); -}; diff --git a/src/components/common/synchronize/component.jsx b/src/components/common/synchronize/component.jsx deleted file mode 100644 index da50441f..00000000 --- a/src/components/common/synchronize/component.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useContext } from 'react'; - -import { AppContext } from 'Root'; -import D from 'i18n'; -import IconButton from '@material-ui/core/IconButton'; -import MaterialIcons from 'utils/icons/materialIcons'; -import PropTypes from 'prop-types'; -import { SynchronizeWrapperContext } from 'components/sychronizeWrapper'; -import Tooltip from '@material-ui/core/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - noVisibleFocus: { - '&:focus, &:hover': { - backgroundColor: theme.palette.primary.main, - }, - }, -})); - -const Synchronize = ({ materialClass }) => { - const { online } = useContext(AppContext); - const { syncFunction } = useContext(SynchronizeWrapperContext); - - const classes = useStyles(); - - return ( - - - - - - ); -}; - -export default Synchronize; -Synchronize.propTypes = { - materialClass: PropTypes.string.isRequired, -}; diff --git a/src/components/common/synchronize/index.jsx b/src/components/common/synchronize/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/common/synchronize/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/common/userProfile/component.jsx b/src/components/common/userProfile/component.jsx deleted file mode 100644 index eb4c4f79..00000000 --- a/src/components/common/userProfile/component.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Typography, makeStyles } from '@material-ui/core'; -import Paper from '@material-ui/core/Paper'; -import LabelledText from '../sharedComponents/LabelledText'; -import { version } from '../../../../package.json'; -import D from 'i18n'; - -const useStyles = makeStyles(() => ({ - innerPaper: { - backgroundColor: 'lightgrey', - borderRadius: '15px', - padding: '1em', - minWidth: '20em', - }, - outterPaper: { - borderRadius: '15px', - display: 'flex', - flexDirection: 'column', - padding: '1em', - gap: '1em', - marginBottom: 'auto', - }, - version: { - color: 'darkGrey', - alignSelf: 'flex-end', - fontWeight: 'bold', - }, -})); - -export const UserProfile = ({ - user = { - firstName: 'Unknown', - lastName: 'Interviewer', - phoneNumber: '0123456789', - email: 'no.data@y.et', - }, -}) => { - const classes = useStyles(); - const { firstName, lastName, phoneNumber, email } = user; - return ( - - {D.myProfile} - - - - - - - {`V.${version}`} - - ); -}; diff --git a/src/components/common/userProfile/index.js b/src/components/common/userProfile/index.js deleted file mode 100644 index bb824842..00000000 --- a/src/components/common/userProfile/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './component'; diff --git a/src/components/notificationWrapper/index.jsx b/src/components/notificationWrapper/index.jsx deleted file mode 100644 index 01388130..00000000 --- a/src/components/notificationWrapper/index.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import { NOTIFICATION_TYPE_SYNC } from 'utils/constants'; -import notificationIdbService from 'utils/indexeddb/services/notification-idb-service'; -import syncReportIdbService from 'utils/indexeddb/services/syncReport-idb-service'; - -export const NotificationWrapperContext = React.createContext(); - -export const NotificationWrapper = ({ children }) => { - const [notifications, setNotifications] = useState([]); - const [notificationsFiltered, setNotificatiosFiltered] = useState([]); - const [filterType, setFilterType] = useState(null); - - useEffect(() => { - const newNotif = filterType - ? notifications.filter(({ type }) => type === filterType) - : notifications; - setNotificatiosFiltered(newNotif); - }, [notifications, filterType]); - - useEffect(() => { - const load = async () => { - const notificationsDB = await notificationIdbService.getAll(); - const orderNotif = notificationsDB.sort((a, b) => { - if (a.date < b.date) return 1; - if (a.date > b.date) return -1; - return 0; - }); - setNotifications(orderNotif); - }; - load(); - }, []); - - const markNotifAsRead = async notifId => { - const notif = notifications.filter(({ id }) => id === notifId)[0]; - const newNotif = { ...notif, read: true }; - await notificationIdbService.addOrUpdateNotif(newNotif); - const newNotifs = notifications.map(n => { - if (n.id === notifId) return newNotif; - return n; - }); - setNotifications(newNotifs); - }; - - const markAllFilteredNotifAsRead = async () => { - const newNotifs = notifications.map(notif => { - const { type } = notif; - if (filterType) { - if (type === filterType) return { ...notif, read: true }; - return notif; - } - return { ...notif, read: true }; - }); - await Promise.all( - newNotifs.map(async notif => { - await notificationIdbService.addOrUpdateNotif(notif); - }) - ); - setNotifications(newNotifs); - }; - - const deleteAll = async () => { - if (filterType === NOTIFICATION_TYPE_SYNC) await syncReportIdbService.deleteAll(); - const idsToDelete = notificationsFiltered.map(({ id }) => id); - await notificationIdbService.deleteByIds(idsToDelete); - const newNotifs = notifications.filter(({ id }) => !idsToDelete.includes(id)); - setNotifications(newNotifs); - }; - - const unReadNotificationsNumber = notifications.filter(({ read }) => !read).length; - const unReadNotificationsNumberFilterd = notificationsFiltered.filter(({ read }) => !read).length; - - const context = { - markNotifAsRead, - deleteAll, - markAllAsRead: markAllFilteredNotifAsRead, - filterType, - setFilterType, - notifications: notificationsFiltered, - unReadNotificationsNumberFilterd, - unReadNotificationsNumber, - }; - - return ( - - {children} - - ); -}; diff --git a/src/components/panel-body/UESpage/component.jsx b/src/components/panel-body/UESpage/component.jsx deleted file mode 100644 index ee15adb5..00000000 --- a/src/components/panel-body/UESpage/component.jsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { applyFilters, sortOnColumnCompareFunction, updateStateWithDates } from 'utils/functions'; -import { useMissingSurveyUnits, useSurveyUnits } from 'utils/hooks/database'; - -import FilterPanel from './filterPanel'; -import Grid from '@material-ui/core/Grid'; -import PropTypes from 'prop-types'; -import SurveyUnitCard from './material/surveyUnitCard'; -import { makeStyles } from '@material-ui/core/styles'; - -const UESPage = ({ textSearch }) => { - const [surveyUnits, setSurveyUnits] = useState([]); - const [filteredSurveyUnits, setFilteredSurveyUnits] = useState([]); - const [searchEchoes, setSearchEchoes] = useState([0, 0]); - const [campaigns, setCampaigns] = useState([]); - const [sortCriteria, setSortCriteria] = useState('remainingDays'); - const [filters, setFilters] = useState({ - search: textSearch, - campaigns: [], - toDos: [], - priority: false, - terminated: false, - }); - - const [inaccessibles, setInaccessibles] = useState([]); - - const missingSurveyUnits = useMissingSurveyUnits(); - const idbSurveyUnits = useSurveyUnits(); - - useEffect(() => { - setInaccessibles(missingSurveyUnits.map(({ id }) => id)); - }, [missingSurveyUnits]); - - useEffect(() => { - idbSurveyUnits.forEach(su => updateStateWithDates(su)); - }, [idbSurveyUnits]); - - useEffect(() => { - const initializedSU = idbSurveyUnits.map(su => ({ ...su, selected: false })); - setCampaigns([...new Set(idbSurveyUnits.map(unit => unit.campaign))]); - setSurveyUnits(initializedSU); - setSearchEchoes([initializedSU.length, initializedSU.length]); - }, [idbSurveyUnits]); - - useEffect(() => { - setFilters(f => ({ ...f, search: textSearch })); - }, [textSearch]); - - useEffect(() => { - const sortSU = su => su.sort(sortOnColumnCompareFunction(sortCriteria)); - const filteredSU = applyFilters(surveyUnits, filters); - - const { searchFilteredSU, totalEchoes, matchingEchoes } = filteredSU; - setFilteredSurveyUnits(sortSU(searchFilteredSU)); - setSearchEchoes([matchingEchoes, totalEchoes]); - window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); - }, [textSearch, filters, sortCriteria, surveyUnits]); - - const useStyles = makeStyles(() => ({ - root: { - height: 'calc(100vh - 5em)', - scrollbarWidth: 'none', - }, - grid: { - height: '100%', - width: 'calc(100vw - 200px)', - overflow: 'auto', - scrollbarWidth: 'none', - padding: 10, - '&:last-child': { - paddingBottom: 0, - }, - paddingTop: 0, - alignContent: 'flex-start', - }, - })); - const classes = useStyles(); - - return ( - <> - - - - {filteredSurveyUnits.map(su => ( - - - - ))} - - - - ); -}; - -export default UESPage; -UESPage.propTypes = { - textSearch: PropTypes.string.isRequired, -}; diff --git a/src/components/panel-body/UESpage/filterPanel/component.jsx b/src/components/panel-body/UESpage/filterPanel/component.jsx deleted file mode 100644 index 2d3c4d1d..00000000 --- a/src/components/panel-body/UESpage/filterPanel/component.jsx +++ /dev/null @@ -1,348 +0,0 @@ -import React, { useState } from 'react'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import Checkbox from '@material-ui/core/Checkbox'; -import Drawer from '@material-ui/core/Drawer'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import { makeStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import toDoEnum from 'utils/enum/SUToDoEnum'; -import D from 'i18n'; -import PropTypes from 'prop-types'; - -const FilterPanel = ({ - searchEchoes, - campaigns, - sortCriteria, - setSortCriteria, - filters, - setFilters, -}) => { - const useStyles = makeStyles(() => ({ - leftMargin: { marginLeft: '16px' }, - drawer: { - height: 'calc(100vh - 5em)', - width: 200, - }, - drawerPaper: { - position: 'relative', - }, - drawerContainer: { - overflow: 'auto', - height: '100%', - 'scrollbar-width': 'none', - '&::-webkit-scrollbar': { - display: 'none', - }, - }, - paddingFour: { - padding: 4, - }, - accordion: { '&.MuiAccordion-root.Mui-expanded': { margin: '0px' } }, - accordionSummary: { '&.MuiAccordionSummary-root.Mui-expanded': { minHeight: '0px' } }, - })); - - const classes = useStyles(); - - const [sortCriteriaExpanded, setSortCriteriaExpanded] = useState(true); - - const [campaignFilterExpanded, setCampaignFilterExpanded] = useState(true); - - const [priorityFilterExpanded, setPriorityFilterExpanded] = useState(true); - - const [terminatedFilterExpanded, setTerminatedFilterExpanded] = useState(true); - - const [toDoFilterExpanded, setToDoFilterExpanded] = useState(true); - - const setPriority = value => { - setFilters({ ...filters, priority: value }); - }; - - const setSelectedCampaigns = array => { - setFilters({ ...filters, campaigns: array }); - }; - - const setSelectedTodos = array => { - setFilters({ ...filters, toDos: array, terminated: false }); - }; - - const setTerminated = value => { - if (value) { - setFilters({ ...filters, terminated: value, toDos: [toDoEnum.TERMINATED.order.toString()] }); - } else { - setFilters({ ...filters, terminated: value, toDos: [] }); - } - }; - - const { campaigns: selectedCampaigns, toDos: selectedToDos, priority, terminated } = filters; - - const toggleCampaignSelection = value => { - if (!selectedCampaigns.includes(value)) { - setSelectedCampaigns([...selectedCampaigns, value]); - } else { - setSelectedCampaigns(selectedCampaigns.filter(c => c !== value)); - } - }; - - const toggleToDoSelection = value => { - if (!selectedToDos.includes(value)) { - setSelectedTodos([...selectedToDos, value].filter(c => c !== '7')); - } else { - setSelectedTodos(selectedToDos.filter(c => c !== value)); - } - }; - - const handleChange = panel => (event, isExpanded) => { - switch (panel) { - case 'sortAccordion': - setSortCriteriaExpanded(isExpanded); - break; - case 'campaignFilterAccordion': - setCampaignFilterExpanded(isExpanded); - break; - case 'priorityFilterAccordion': - setPriorityFilterExpanded(isExpanded); - break; - case 'terminatedFilterAccordion': - setTerminatedFilterExpanded(isExpanded); - break; - case 'toDoFilterAccordion': - setToDoFilterExpanded(isExpanded); - break; - case 'campaignCheckbox': - toggleCampaignSelection(event.target.name); - break; - case 'toDoCheckbox': - toggleToDoSelection(event.target.name); - break; - case 'priority': - setPriority(event.target.checked); - break; - case 'terminated': - setTerminated(event.target.checked); - break; - - default: - break; - } - }; - - const changeCriteria = event => { - const { - target: { value }, - } = event; - setSortCriteria(value === sortCriteria ? '' : value); - }; - - const toDoEnumValues = Object.values(toDoEnum) - .reduce((tab, value) => [...tab, value], []) - .filter(todo => todo.order < 7); - - return ( - <> - -
- {`${searchEchoes[0]} / ${searchEchoes[1]} ${D.surveyUnits}`} -
-
- - } - aria-controls="panel4bh-content" - id="sortAccordion-header" - > - {D.sortBy} - - - - } - label={D.remainingDays} - /> - } - label={D.priority} - /> - } - label={D.survey} - /> - } - label={D.subSample} - /> - - - - - } - aria-controls="panel4bh-content" - id="campaignFilterAccordion-header" - > - {D.sortSurvey} - - - - {campaigns.map(campaign => ( - - } - label={campaign.toLowerCase()} - /> - ))} - - - - - } - aria-controls="panel4bh-content" - id="priorityFilterAccordion-header" - > - {D.priority} - - - - - } - label={D.yesButton} - /> - - - - - } - aria-controls="panel4bh-content" - id="toDoFilterAccordion-header" - > - {D.sortToDo} - - - - {toDoEnumValues.map(todo => ( - - } - label={todo.value} - /> - ))} - - - - - } - aria-controls="panel4bh-content" - id="priorityFilterAccordion-header" - > - {D.sortCompleted} - - - - - } - label={D.yesButton} - /> - - - -
- - - ); -}; - -export default FilterPanel; -FilterPanel.propTypes = { - searchEchoes: PropTypes.arrayOf(PropTypes.number).isRequired, - campaigns: PropTypes.arrayOf(PropTypes.string).isRequired, - sortCriteria: PropTypes.string.isRequired, - setSortCriteria: PropTypes.func.isRequired, - filters: PropTypes.shape({ - campaigns: PropTypes.arrayOf(PropTypes.string).isRequired, - toDos: PropTypes.arrayOf(PropTypes.string).isRequired, - priority: PropTypes.bool.isRequired, - terminated: PropTypes.bool.isRequired, - }).isRequired, - setFilters: PropTypes.func.isRequired, -}; diff --git a/src/components/panel-body/UESpage/filterPanel/index.jsx b/src/components/panel-body/UESpage/filterPanel/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/panel-body/UESpage/filterPanel/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/panel-body/UESpage/index.jsx b/src/components/panel-body/UESpage/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/panel-body/UESpage/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/panel-body/UESpage/material/surveyUnitCard.jsx b/src/components/panel-body/UESpage/material/surveyUnitCard.jsx deleted file mode 100644 index 3f42c4fe..00000000 --- a/src/components/panel-body/UESpage/material/surveyUnitCard.jsx +++ /dev/null @@ -1,193 +0,0 @@ -import { - getLastState, - getprivilegedPerson, - isSelectable, -} from 'utils/functions/surveyUnitFunctions'; - -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; -import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; -import D from 'i18n'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; -import PersonIcon from '@material-ui/icons/Person'; -import PropTypes from 'prop-types'; -import RadioButtonUncheckedSharpIcon from '@material-ui/icons/RadioButtonUncheckedSharp'; -import React from 'react'; -import ScheduleIcon from '@material-ui/icons/Schedule'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import WarningIcon from '@material-ui/icons/Warning'; -import { convertSUStateInToDo } from 'utils/functions/convertSUStateInToDo'; -import { intervalInDays } from 'utils/functions'; -import { makeStyles } from '@material-ui/core/styles'; -import { useHistory } from 'react-router-dom'; - -const useStyles = makeStyles(theme => ({ - root: { - padding: 8, - borderRadius: 15, - '&:hover': { cursor: 'pointer' }, - border: ' LightGray solid 1px', - height: 165, - width: 325, - }, - flexRow: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - }, - justifyStart: { - display: 'flex', - justifyContent: 'flex-start', - }, - flexColumn: { - display: 'flex', - flexDirection: 'column', - }, - content: { - flex: '1 0 auto', - padding: 0, - '&:last-child': { - paddingBottom: 0, - }, - }, - - icon: { - verticalAlign: 'bottom', - color: 'LightGray', - }, - inactive: { - backgroundColor: 'grey', - '&:hover': { cursor: 'not-allowed' }, - }, - paddingTop: { - paddingTop: '10px', - fontSize: 'xxx-large', - }, - stateIcon: { - color: 'green', - verticalAlign: 'center', - }, - rounded: { - border: '1px solid', - borderRadius: '50%', - width: '1.8em', - height: '1.8em', - }, - negativeLeftMargin: { marginLeft: '-5px' }, - hidden: { visibility: 'hidden' }, - maxWidth: { - maxWidth: '180px', - }, - leftMargin: { - marginLeft: '2px', - }, - warning: { color: theme.palette.warning.main }, -})); - -const SurveyUnitCard = ({ surveyUnit, inaccessible = false }) => { - const classes = useStyles(); - - const history = useHistory(); - - const active = isSelectable(surveyUnit); - - const { - id, - address: { l6 }, - campaign, - sampleIdentifiers: { ssech }, - priority, - persons, - } = surveyUnit; - - const privilegedPerson = getprivilegedPerson(surveyUnit); - const { firstName, lastName } = privilegedPerson ?? persons[0]; - const lastState = getLastState(surveyUnit); - const todo = convertSUStateInToDo(lastState.type); - const { order, value: toDoLabel } = todo; - const nbJoursRestant = intervalInDays(surveyUnit); - const openSurveyUnitPage = id => history.push(`/survey-unit/${id}/details?panel=0`); - - return ( - (active ? openSurveyUnitPage(id) : {})} - elevation={0} - > - - - ! - - - {campaign.toLowerCase()} - - - {ssech} - - - -
- -
- - {firstName} - - - {lastName} - -
-
- {inaccessible && ( - - - - )} - - - - - {`${l6}`} - - - {order !== 7 ? ( - - ) : ( - - )} - {toDoLabel} - - - - - {` # ${id}`} - -
- - - {`${nbJoursRestant} jours`} - -
- - - ); -}; - -export default SurveyUnitCard; -SurveyUnitCard.propTypes = { - surveyUnit: PropTypes.shape({ - id: PropTypes.string, - firstName: PropTypes.string, - lastName: PropTypes.string, - address: PropTypes.shape({ l6: PropTypes.string.isRequired }).isRequired, - campaign: PropTypes.string.isRequired, - states: PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.string.isRequired })).isRequired, - sampleIdentifiers: PropTypes.shape({ ssech: PropTypes.number.isRequired }).isRequired, - priority: PropTypes.bool.isRequired, - }).isRequired, -}; diff --git a/src/components/panel-body/UESpage/search.jsx b/src/components/panel-body/UESpage/search.jsx deleted file mode 100644 index 0ad40794..00000000 --- a/src/components/panel-body/UESpage/search.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useState } from 'react'; -import D from 'i18n'; - -const Search = ({ setFilter }) => { - const [motFilter, setMotFilter] = useState(''); - - const updateFilter = () => { - setFilter(motFilter.toLowerCase()); - }; - const handleKeyUp = e => { - if (e.key === 'Enter') { - updateFilter(); - } - }; - - const handleChange = e => { - const txt = e.target.value; - setMotFilter(txt); - // uncomment the next line to apply the filter as soon as you enter a letter in the input. - //setFilter(txt.toLowerCase()); - }; - - return ( - <> - - - - ); -}; - -export default Search; diff --git a/src/components/panel-body/UEpage/UEContext.jsx b/src/components/panel-body/UEpage/UEContext.jsx deleted file mode 100644 index 5795d775..00000000 --- a/src/components/panel-body/UEpage/UEContext.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const SurveyUnitContext = React.createContext({}); - -export const SurveyUnitProvider = SurveyUnitContext.Provider; -export const SurveyUnitConsumer = SurveyUnitContext.Consumer; -export default SurveyUnitContext; diff --git a/src/components/panel-body/UEpage/comments/comment/component.jsx b/src/components/panel-body/UEpage/comments/comment/component.jsx deleted file mode 100644 index c5ed5cea..00000000 --- a/src/components/panel-body/UEpage/comments/comment/component.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useContext, useState } from 'react'; - -import D from 'i18n'; -import Paper from '@material-ui/core/Paper'; -import PropTypes from 'prop-types'; -import SurveyUnitContext from '../../UEContext'; -import TextareaAutosize from '@material-ui/core/TextareaAutosize'; -import Typography from '@material-ui/core/Typography'; -import { getCommentByType } from 'utils/functions/surveyUnitFunctions'; -import { makeStyles } from '@material-ui/core/styles'; -import surveyUnitIdbService from 'utils/indexeddb/services/surveyUnit-idb-service'; - -const useStyles = makeStyles(() => ({ - noResize: { - resize: 'none', - border: 'none', - margin: '10px', - fontSize: '2vw', - overflow: 'scroll' - }, - paper: { - borderRadius: '15px', - boxShadow: 'unset', - border: 'LightGray solid 1px', - marginTop: '1em', - width: 'max-content', - }, -})); - -const Comment = ({ editable }) => { - const { surveyUnit } = useContext(SurveyUnitContext); - const value = editable - ? getCommentByType('INTERVIEWER', surveyUnit) - : getCommentByType('MANAGEMENT', surveyUnit); - const [interviewerComment, setInterviewerComment] = useState(value); - - const saveUE = comment => { - const managementCommentValue = getCommentByType('MANAGEMENT', surveyUnit); - const managementComment = { type: 'MANAGEMENT', value: managementCommentValue }; - const newInterviewerComment = { type: 'INTERVIEWER', value: comment }; - - const newComments = []; - newComments.push(managementComment); - newComments.push(newInterviewerComment); - surveyUnit.comments = newComments; - surveyUnitIdbService.addOrUpdate(surveyUnit); - }; - - const onBlur = event => { - saveUE(event.target.value); - }; - - const onChange = event => { - setInterviewerComment(event.target.value); - }; - const classes = useStyles(); - - return ( - <> - - - - {`${interviewerComment.length}/999`} - - ); -}; - -export default Comment; -Comment.propTypes = { - editable: PropTypes.bool.isRequired, -}; diff --git a/src/components/panel-body/UEpage/comments/comment/index.jsx b/src/components/panel-body/UEpage/comments/comment/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/panel-body/UEpage/comments/comment/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/panel-body/UEpage/comments/component.jsx b/src/components/panel-body/UEpage/comments/component.jsx deleted file mode 100644 index baf050df..00000000 --- a/src/components/panel-body/UEpage/comments/component.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import Comment from './comment'; - -const Comments = () => ; - -export default Comments; diff --git a/src/components/panel-body/UEpage/comments/index.jsx b/src/components/panel-body/UEpage/comments/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/panel-body/UEpage/comments/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/panel-body/UEpage/communication/CommuncationRequestStatus.jsx b/src/components/panel-body/UEpage/communication/CommuncationRequestStatus.jsx deleted file mode 100644 index 4d8268cd..00000000 --- a/src/components/panel-body/UEpage/communication/CommuncationRequestStatus.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import D from 'i18n'; -import { HEALTHY_COMMUNICATION_REQUEST_STATUS } from 'utils/constants'; -import MaterialIcons from 'utils/icons/materialIcons'; -import { findCommunicationStatusValueByType } from 'utils/enum/CommunicationEnums'; -import { getDateAttributes } from 'utils/functions/dateFunctions'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles((healthy = false) => ({ - row: { - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'center', - gap: '1em', - flexGrow: '1', - }, -})); - -const isHealthyStatus = status => HEALTHY_COMMUNICATION_REQUEST_STATUS.includes(status); - -export const CommunicationRequestStatus = ({ status, date }) => { - const classes = useStyles(); - const { dayOfWeek, twoDigitdayNumber, year, month } = getDateAttributes(date); - const dateLabel = `${dayOfWeek} ${twoDigitdayNumber} ${month} ${year}`; - - const healthyStatus = isHealthyStatus(status); - const statusValue = findCommunicationStatusValueByType(status); - const statusLabel = `${statusValue} ${D.communicationStatusOn} ${dateLabel}`; - return ( -
-
{statusLabel}
- -
- ); -}; diff --git a/src/components/panel-body/UEpage/communication/CommunicationRequestLine.jsx b/src/components/panel-body/UEpage/communication/CommunicationRequestLine.jsx deleted file mode 100644 index bc7cd2c3..00000000 --- a/src/components/panel-body/UEpage/communication/CommunicationRequestLine.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Divider, makeStyles } from '@material-ui/core'; -import { - findCommunicationMediumValueByType, - findCommunicationReasonValueByType, - findCommunicationTypeValueByType, -} from 'utils/enum/CommunicationEnums'; - -import { CommunicationRequestStatus } from './CommuncationRequestStatus'; -import D from 'i18n'; -import MaterialIcons from 'utils/icons/materialIcons'; -import Paper from '@material-ui/core/Paper'; -import { getCommunicationIconFromType } from 'utils/functions/communicationFunctions'; -import { getDateAttributes } from 'utils/functions/dateFunctions'; -import { grey } from '@material-ui/core/colors'; - -const useStyles = makeStyles(() => ({ - row: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: '1em', - padding: '1em', - backgroundColor: grey[100], - borderRadius: '15px', - }, - divider: { - fontWeight: 'bold', - }, -})); - -const getContentLabel = status => { - const { type, medium, reason } = status; - const mediumLabel = findCommunicationMediumValueByType(medium); - const typeLabel = findCommunicationTypeValueByType(type); - const reasonLabel = findCommunicationReasonValueByType(reason); - - return `${mediumLabel} - ${typeLabel}${reason ? ', ' + reasonLabel : ''}`; -}; - -const getDateLabel = date => { - const { dayOfWeek, twoDigitdayNumber, year, month, hour, minutes } = getDateAttributes(date); - const upcasedDayOfWeek = dayOfWeek[0].toUpperCase() + dayOfWeek.slice(1); - return `${upcasedDayOfWeek} ${twoDigitdayNumber} ${month} ${year} ${D.at} ${hour}h${minutes}`; -}; - -export const CommunicationRequestLine = ({ mailRequest }) => { - const classes = useStyles(); - const { status, emiter } = mailRequest; - const iconType = getCommunicationIconFromType(emiter); - - const sortedStatus = status.sort((s1, s2) => s1.date > s2.date); - const firstStatus = sortedStatus.at(0); - const lastStatus = sortedStatus.at(-1); - - const contentLabel = getContentLabel(mailRequest); - const dateLabel = getDateLabel(firstStatus.date); - - return ( - - -
{dateLabel}
- -
{contentLabel}
- - - ); -}; diff --git a/src/components/panel-body/UEpage/communication/component.jsx b/src/components/panel-body/UEpage/communication/component.jsx deleted file mode 100644 index 3b0422e9..00000000 --- a/src/components/panel-body/UEpage/communication/component.jsx +++ /dev/null @@ -1,87 +0,0 @@ -import { Dialog, makeStyles } from '@material-ui/core'; -import React, { useContext, useState } from 'react'; -import { - canSendCommunication, - getRecipientInformation, -} from 'utils/functions/communicationFunctions'; - -import { CommunicationRequestForm } from './form/CommunicationRequestForm'; -import { CommunicationRequestLine } from './CommunicationRequestLine'; -import D from 'i18n'; -import IconButton from 'components/common/sharedComponents/IconButton'; -import SurveyUnitContext from '../UEContext'; -import { UserContext } from 'components/panel-body/home/UserContext'; -import surveyUnitIdbService from 'utils/indexeddb/services/surveyUnit-idb-service'; - -const useStyles = makeStyles(() => ({ - column: { - display: 'flex', - flexDirection: 'column', - gap: '1em', - }, - modalPaper: { - boxShadow: 'unset', - borderRadius: '15px', - padding: '1em', - gap: '1.5em', - alignItems: 'center', - }, -})); - -const Communication = () => { - const classes = useStyles(); - const { surveyUnit } = useContext(SurveyUnitContext); - const user = useContext(UserContext); - const [isOpenModal, setOpenModal] = useState(false); - - const openModal = () => setOpenModal(true); - const closeModal = () => setOpenModal(false); - - const recipientInformation = getRecipientInformation(surveyUnit); - - const { communicationRequests = [] } = surveyUnit; - const disabled = !canSendCommunication(surveyUnit); - const addCommunicationRequest = communicationRequest => { - const previousCommunicationRequests = communicationRequests ?? []; - closeModal(); - surveyUnitIdbService.addOrUpdateSU({ - ...surveyUnit, - communicationRequests: [...previousCommunicationRequests, communicationRequest], - }); - }; - - return ( - <> -
- - {communicationRequests?.map(mailRequest => ( - - ))} -
- - - - - ); -}; - -export default Communication; diff --git a/src/components/panel-body/UEpage/communication/form/CommunicationRequestForm.jsx b/src/components/panel-body/UEpage/communication/form/CommunicationRequestForm.jsx deleted file mode 100644 index dad0907d..00000000 --- a/src/components/panel-body/UEpage/communication/form/CommunicationRequestForm.jsx +++ /dev/null @@ -1,128 +0,0 @@ -import { COMMUNICATION_REQUEST_FORM_STEPS, EMPTY_COMMUNICATION_REQUEST } from 'utils/constants'; -import { useCallback, useEffect, useState } from 'react'; - -import Button from '@material-ui/core/Button'; -import { CommunicationRequestValidation } from './CommunicationRequestValidation'; -import D from 'i18n'; -import { FormRadioGroup } from './FormRadioGroup'; -import Typography from '@material-ui/core/Typography'; -import { checkCommunicationRequestFormAddressesValidity } from 'utils/functions/communicationFunctions'; -import { communicationStatusEnum } from 'utils/enum/CommunicationEnums'; -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - title: { - fontSize: '1.5em', - justifySelf: 'center', - }, - buttons: { - display: 'flex', - flexDirection: 'row', - gap: '1em', - }, -})); - -export const CommunicationRequestForm = ({ - closeModalFunction, - saveFunction, - userInformation, - recipientInformation, -}) => { - const classes = useStyles(); - - const [communicationRequest, setCommunicationRequest] = useState(EMPTY_COMMUNICATION_REQUEST); - const steps = COMMUNICATION_REQUEST_FORM_STEPS; - const [selectedStep, setSelectedStep] = useState(steps[0]); - - const [currentStepIsValid, setCurrentStepIsValid] = useState(false); - - const getStepIndex = () => steps.findIndex(step => step.title === selectedStep.title); - const isFirstStep = () => getStepIndex() === 0; - const isLastStep = () => getStepIndex() === steps.length - 1; - - const generateCommunicationRequest = commRequ => ({ - ...commRequ, - status: [{ date: new Date().getTime(), status: communicationStatusEnum.INITIATED.type }], - }); - - const nextStepAction = () => { - if (isLastStep()) { - saveFunction(generateCommunicationRequest(communicationRequest)); - closeModalFunction(); - } else { - setSelectedStep(steps[getStepIndex() + 1]); - } - }; - - const previousStepAction = () => { - if (isFirstStep()) { - closeModalFunction(); - } else { - setSelectedStep(steps[getStepIndex() - 1]); - } - }; - - const isValueValid = value => !!value; - - const isAddressingValid = communicationRequest => - !Object.values( - checkCommunicationRequestFormAddressesValidity( - recipientInformation, - userInformation, - communicationRequest - ) - ) - .map(Object.values) - .flat() - .some(error => error === true); - - useEffect(() => { - const stepValidity = - selectedStep.valueName !== undefined - ? isValueValid(communicationRequest[selectedStep.valueName]) - : isAddressingValid(communicationRequest); - - setCurrentStepIsValid(stepValidity); - }, [communicationRequest, selectedStep]); - - const handleChange = event => { - const { - target: { value }, - } = event; - setCommunicationRequest({ ...communicationRequest, [selectedStep.valueName]: value }); - }; - - const addressesErrors = checkCommunicationRequestFormAddressesValidity( - recipientInformation, - userInformation, - communicationRequest - ); - - return ( - <> - {selectedStep.title} - {selectedStep.valueName ? ( - - ) : ( - - )} -
- - -
- - ); -}; diff --git a/src/components/panel-body/UEpage/communication/form/CommunicationRequestValidation.jsx b/src/components/panel-body/UEpage/communication/form/CommunicationRequestValidation.jsx deleted file mode 100644 index eb57312c..00000000 --- a/src/components/panel-body/UEpage/communication/form/CommunicationRequestValidation.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import { - findCommunicationMediumValueByType, - findCommunicationReasonValueByType, - findCommunicationTypeValueByType, -} from 'utils/enum/CommunicationEnums'; - -import D from 'i18n'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import { getTitle, isValidString } from 'utils/functions'; -import { makeStyles } from '@material-ui/core'; -import clsx from 'clsx'; - -const useStyles = makeStyles(() => ({ - commRequestContent: { - padding: '1.5em', - margin: '1em', - backgroundColor: '#F5F7FA', - borderRadius: '15px', - minWidth: '25em', - }, - address: { - paddingLeft: '2em', - }, - error: { - color: 'red', - }, - lines: { - fontWeight: 'bold', - }, - invalidAddress: { - border: '1px red solid', - }, -})); - -export const CommunicationRequestValidation = ({ - communicationRequest, - recipientInformation, - userInformation, - addressesErrors, -}) => { - const classes = useStyles(); - const { reason, type, medium } = communicationRequest; - const { - title: recipientTitle, - recipientFirstName, - recipientLastName, - recipientPostcode, - recipientCityName, - address, - } = recipientInformation; - - const { phoneNumber, email, title, firstName, lastName } = userInformation; - const { userError, recipientError, communicationRequestError } = addressesErrors; - - const mediumLabel = findCommunicationMediumValueByType(medium); - const typeLabel = findCommunicationTypeValueByType(type); - const reasonLabel = findCommunicationReasonValueByType(reason); - - const buildAddressFirstLine = (title, firstname, lastName) => - `${getTitle(title)} ${isValidString(firstname) ? firstname : ''} ${ - isValidString(lastName) ? lastName : '!!!' - }`; - const recipientAddress = buildAddressFirstLine( - recipientTitle, - recipientFirstName, - recipientLastName - ); - const userAddress = buildAddressFirstLine(title, firstName, lastName); - const hasError = data => Object.values(data).some(error => error === true); - - const isUserInfoValid = !hasError(userError); - const isRecipientInfoValid = !hasError(recipientError); - - return ( - - {D.communicationSummaryContent} -
    -
  • {mediumLabel}
    • -
  • {typeLabel}
    • - {reason &&
  • {reasonLabel}
    • } -
- {D.communicationSummaryRecipientAddress} -
- {recipientAddress} - {address - .filter(addressLine => addressLine.length > 0) - .map(addressLine => ( - - {addressLine} - - ))} - {`${recipientPostcode}, ${recipientCityName}`} -
- {D.communicationSummaryInterviewerAddress} -
- {userAddress} - {email} - {phoneNumber} -
- - - - - ); -}; - -const ErrorDisplayer = ({ errors, prefix }) => { - const classes = useStyles(); - return Object.entries(errors) - .filter(([, val]) => val) - .map(([key]) => ( - {`${prefix} : ${key}`} - )); -}; diff --git a/src/components/panel-body/UEpage/communication/form/FormRadioGroup.jsx b/src/components/panel-body/UEpage/communication/form/FormRadioGroup.jsx deleted file mode 100644 index e0e0deca..00000000 --- a/src/components/panel-body/UEpage/communication/form/FormRadioGroup.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import { FormControlLabel, Radio, RadioGroup, makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - radio: { - width: '100%', - minWidth: '25em', - paddingLeft: '2em', - }, -})); - -export const FormRadioGroup = ({ groupSelectedValue, groupHandleChange, groupValues }) => { - const classes = useStyles(); - - return ( - - {groupValues.map(val => ( - } - label={val.label} - /> - ))} - - ); -}; diff --git a/src/components/panel-body/UEpage/communication/index.jsx b/src/components/panel-body/UEpage/communication/index.jsx deleted file mode 100644 index b404d7fd..00000000 --- a/src/components/panel-body/UEpage/communication/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/src/components/panel-body/UEpage/component.jsx b/src/components/panel-body/UEpage/component.jsx deleted file mode 100644 index 6b99f031..00000000 --- a/src/components/panel-body/UEpage/component.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { addNewState, getLastState } from 'utils/functions'; -import { useHistory, useParams } from 'react-router-dom'; - -import D from 'i18n'; -import PropTypes from 'prop-types'; -import Router from './router'; -import { SurveyUnitProvider } from './UEContext'; -import surveyUnitMissingIdbService from 'utils/indexeddb/services/surveyUnitMissing-idb-service'; -import { surveyUnitStateEnum } from 'utils/enum/SUStateEnum'; -import { useSurveyUnit } from 'utils/hooks/database'; - -const UEPage = ({ match }) => { - const [inaccessible, setInaccessible] = useState(false); - const [loading, setLoading] = useState(true); - - const history = useHistory(); - const { id } = useParams(); - const surveyUnit = useSurveyUnit(id); - - useEffect(() => { - const updateSurveyUnit = async () => { - setLoading(true); - const isMissing = await surveyUnitMissingIdbService.getById(id); - setInaccessible(!!isMissing); - setLoading(false); - }; - if (surveyUnit) { - updateSurveyUnit(); - } - }, [id, surveyUnit]); - - useEffect(() => { - if (surveyUnit !== undefined) { - const lastState = getLastState(surveyUnit); - if (lastState.type === surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type) { - addNewState(surveyUnit, surveyUnitStateEnum.IN_PREPARATION.type); - } - } - }, [surveyUnit]); - - return ( - <> - {surveyUnit && !loading && ( - - - - )} - - {!surveyUnit && !loading && ( - <> -