Merge pull request #51 from SimonDmz/fix/search-upgrade-GUI-upgrade-c…

…ontact-forms-upgrade

Fix/search upgrade g UI upgrade contact forms upgrade

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.9",

src/App.js

@@ -1,4 +1,3 @@
-import { makeStyles } from '@material-ui/core';
 import { useAuth } from 'common-tools/auth/initAuth';
 import useServiceWorker from 'common-tools/hooks/useServiceWorker';
 import Preloader from 'components/common/loader';
@@ -10,24 +9,14 @@ import D from 'i18n';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-const useStyles = makeStyles(() => ({
-  pearlContainer: {
-    height: '100%',
-    scrollbarWidth: 'none',
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-  },
-}));
-
 function App() {
   const { authenticated } = useAuth();
   const serviceWorkerInfo = useServiceWorker(authenticated);
-  const classes = useStyles();
+
   return (
     <>
       <Notification serviceWorkerInfo={serviceWorkerInfo} />
-      <div className={classes.pearlContainer}>
+      <div>
         {!authenticated && <Preloader message={D.pleaseWait} />}
         {authenticated && (
           <>

src/common-tools/functions/surveyUnitFunctions.js

@@ -198,25 +198,32 @@ export const applyFilters = (surveyUnits, filters) => {
     priority: priorityFilter,
   } = filters;
 
+  const normalize = string =>
+    string
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase();
+
   const filterBySearch = su => {
     if (searchFilter !== '') {
+      const normalizedSearchFilter = normalize(searchFilter);
       return (
-        su.firstName.toLowerCase().includes(searchFilter) ||
-        su.lastName.toLowerCase().includes(searchFilter) ||
+        normalize(su.firstName).includes(normalizedSearchFilter) ||
+        normalize(su.lastName).includes(normalizedSearchFilter) ||
         su.id
           .toString()
           .toLowerCase()
-          .includes(searchFilter) ||
-        su.address.l6
-          .split(' ')
-          .slice(1)
-          .toString()
-          .toLowerCase()
-          .includes(searchFilter) ||
+          .includes(normalizedSearchFilter) ||
+        normalize(
+          su.address.l6
+            .split(' ')
+            .slice(1)
+            .toString()
+        ).includes(normalizedSearchFilter) ||
         convertSUStateInToDo(getLastState(su).type)
           .value.toLowerCase()
-          .includes(searchFilter) ||
-        su.campaign.toLowerCase().includes(searchFilter)
+          .includes(normalizedSearchFilter) ||
+        normalize(su.campaign).includes(normalizedSearchFilter)
       );
     }
 

src/components/common/navigation/component.js

@@ -70,7 +70,7 @@ const Navigation = ({ location, textSearch, setTextSearch, version, setOpenDrawe
 
   return (
     <>
-      <AppBar position="static" className={classes.appBar} elevation={0}>
+      <AppBar position="sticky" className={classes.appBar} elevation={0}>
         <Toolbar className={classes.appBar}>
           <Tooltip title={`Version : ${version}`}>
             <IconButton

src/components/common/palette.js

@@ -10,6 +10,10 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.primary.dark,
     height: '5em',
   },
+  primaryDarker: {
+    backgroundColor: theme.palette.primary.darker,
+    height: '5em',
+  },
   primaryLight: {
     backgroundColor: theme.palette.primary.light,
     height: '5em',
@@ -45,14 +49,21 @@ const Palette = () => {
 
   return (
     <>
+      <Paper className={classes.primaryDarker}>
+        <Typography color="textPrimary">Primary.darker text.primary</Typography>
+        <Typography color="textSecondary">Primary.darker text.secondary</Typography>
+      </Paper>
       <Paper className={classes.primaryDark}>
-        <Typography>Primary.dark</Typography>
+        <Typography color="textPrimary">Primary.dark text.primary</Typography>
+        <Typography color="textSecondary">Primary.dark text.secondary</Typography>
       </Paper>
       <Paper className={classes.primaryMain}>
-        <Typography>Primary.main</Typography>
+        <Typography color="textPrimary">Primary.main text.primary</Typography>
+        <Typography color="textSecondary">Primary.main text.secondary</Typography>
       </Paper>
       <Paper className={classes.primaryLight}>
-        <Typography>Primary.light</Typography>
+        <Typography color="textPrimary">Primary.light text.primary</Typography>
+        <Typography color="textSecondary">Primary.light text.secondary</Typography>
       </Paper>
       <Paper className={classes.secondaryDark}>
         <Typography>Secondary.dark</Typography>

src/components/panel-body/UEpage/contacts/contactAttempts/formPanel.js

@@ -14,6 +14,7 @@ const useStyles = makeStyles(() => ({
     borderRadius: '15px',
     minHeight: '200px',
     minWidth: '300px',
+    width: 'max-content',
   },
   row: {
     display: 'flex',

src/components/panel-body/UEpage/forms/addressForm.js

@@ -96,6 +96,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="deliveryPoint"
         name="deliveryPoint"
         label={D.addressName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={deliveryPoint}
@@ -106,6 +107,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="streetType"
         name="streetType"
         label={D.addressFullAddress}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={streetType}
@@ -116,6 +118,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="postcode"
         name="postcode"
         label={D.addressCity}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={postcode}
@@ -126,6 +129,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="city"
         name="city"
         label={D.addressCountry}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={city}

src/components/panel-body/UEpage/forms/contactAttemptsForm.js

@@ -1,7 +1,8 @@
 import DateFnsUtils from '@date-io/date-fns';
 import { Fab, makeStyles, Paper, Typography } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
-import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import { DatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import contactAttemptEnum from 'common-tools/enum/ContactAttemptEnum';
 import surveyUnitStateEnum from 'common-tools/enum/SUStateEnum';
 import { addNewState } from 'common-tools/functions';
@@ -12,7 +13,6 @@ import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useState } from 'react';
 import ContactAttemptLine from '../contacts/contactAttempts/contactAttemptLine';
 import FormPanel from '../contacts/contactAttempts/formPanel';
-import UpDownCounter from '../contacts/contactAttempts/upDownCounter';
 import SurveyUnitContext from '../UEContext';
 
 const useStyles = makeStyles(theme => ({
@@ -63,7 +63,10 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    margin: 0,
   },
+  root: { width: '15em', alignSelf: 'center', marginBottom: '2em' },
+  input: { fontSize: 'xxx-large', paddingLeft: '0.5em' },
 }));
 
 class FrLocalizedUtils extends DateFnsUtils {
@@ -211,20 +214,17 @@ const Form = ({ previousValue, save, deleteAction }) => {
             variant="static"
             disableToolbar
           />
-        </MuiPickersUtilsProvider>
-        <div className={classes.row}>
-          <UpDownCounter
-            selectedDate={selectedDate}
-            handleDateChange={handleDateChange}
-            type="hours"
-          />
-          <Typography className={classes.xxxLarge}>:</Typography>
-          <UpDownCounter
-            selectedDate={selectedDate}
-            handleDateChange={handleDateChange}
-            type="minutes"
+          <KeyboardTimePicker
+            classes={{ root: classes.root }}
+            value={selectedDate}
+            ampm={false}
+            onChange={date => handleDateChange(date)}
+            keyboardIcon={<ScheduleIcon />}
+            cancelLabel="Annuler"
+            okLabel="Valider"
+            inputProps={{ className: classes.input }}
           />
-        </div>
+        </MuiPickersUtilsProvider>
       </FormPanel>
 
       <FormPanel

src/components/panel-body/UEpage/forms/contactOutcomeForm.js

@@ -125,7 +125,7 @@ const Form = ({ previousValue, save }) => {
   const outcomeValue = findContactOutcomeValueByType(caType);
   const resetForm = () => {
     setSecondPanelVisible(false);
-    setContactOutcome({ date: new Date().getTime(), totalNumberOfContactAttempts: 0 });
+    setContactOutcome(previousValue);
   };
 
   useEffect(() => {

src/components/panel-body/UEpage/forms/mailForm.js

@@ -36,6 +36,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="email"
         name="email"
         label={D.surveyUnitEmail}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={email || ''}

src/components/panel-body/UEpage/forms/phoneForm.js

@@ -51,6 +51,7 @@ const Form = ({ closeModal, save, previousValue }) => {
               id={`phone-${phoneNumber.order}`}
               name={`phone-${phoneNumber.order}`}
               label={`#${phoneNumber.order + 1}`}
+              InputLabelProps={{ color: 'secondary' }}
               type="text"
               fullWidth
               defaultValue={phoneNumber.value}

src/components/panel-body/UEpage/forms/userForm.js

@@ -45,6 +45,7 @@ const Form = ({ closeModal, previousValue, save }) => {
         id="lastName"
         name="lastName"
         label={D.surveyUnitLastName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={lastName || ''}
@@ -55,6 +56,7 @@ const Form = ({ closeModal, previousValue, save }) => {
         id="firstName"
         name="firstName"
         label={D.surveyUnitFirstName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={firstName || ''}

src/components/panel-body/UEpage/navigation/component.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     position: 'sticky',
-    top: '0px',
+    top: '10.5em',
     backgroundColor: 'white',
     borderBottom: '1px solid gray',
     height: '3em',
@@ -46,7 +46,12 @@ const Navigation = ({ match, refs }) => {
   };
 
   const scrollTo = ref => {
-    ref.current.scrollIntoView({ behavior: 'smooth' });
+    // headers element are 13.5 em high, 'normal' fontSize is 14px
+    const { offsetTop } = ref.current;
+    const fontSize = getComputedStyle(ref.current)['font-style'];
+    const fontValue = fontSize === 'normal' ? 14 : fontSize;
+    const topValue = parseFloat(offsetTop - fontValue * 13.5);
+    window.scrollTo({ behavior: 'smooth', top: topValue });
   };
 
   const transmit = async () => {

src/components/panel-body/UEpage/router.js

@@ -15,7 +15,7 @@ import UeSubInfoTile from './ueSubInfoTile';
 
 const useStyles = makeStyles(() => ({
   ajustScroll: {
-    height: 'calc(100vh - 3em)',
+    height: 'calc(100vh - 13.5em)',
   },
   modal: {
     display: 'flex',
@@ -24,11 +24,12 @@ const useStyles = makeStyles(() => ({
   },
   row: {
     flexWrap: 'nowrap',
-    padding: '1em',
   },
   paperModal: {
     boxShadow: 'unset',
     backgroundColor: 'transparent',
+    margin: 0,
+    maxWidth: 'unset',
   },
 }));
 

src/components/panel-body/UEpage/stateLine.js

@@ -18,13 +18,20 @@ const StateLine = () => {
   const currentState = convertSUStateInToDo(type);
   const { order: activeState } = currentState;
 
-  const useStyles = makeStyles(() => ({
+  const useStyles = makeStyles(theme => ({
     root: {
       width: '50%',
     },
     icon: {
       color: 'green',
     },
+    background: {
+      width: '100%',
+      height: 'max-content',
+      backgroundColor: theme.palette.primary.main,
+      position: 'sticky',
+      top: '5em',
+    },
   }));
   const classes = useStyles();
 
@@ -46,7 +53,7 @@ const StateLine = () => {
   };
 
   return (
-    <>
+    <div className={classes.background}>
       <Stepper className={classes.root} activeStep={activeState}>
         {toDos.map(({ order, value }) => {
           const stepProps = {};
@@ -60,7 +67,7 @@ const StateLine = () => {
           );
         })}
       </Stepper>
-    </>
+    </div>
   );
 };
 

src/components/panel-body/UEpage/ueSubInfoTile.js

@@ -11,7 +11,6 @@ const useStyles = makeStyles(() => ({
     scrollMarginTop: '3em',
     padding: '1em',
     borderRadius: '15px',
-    minHeight: '400px',
   },
 }));
 

src/components/panel-body/home/component.js

@@ -12,7 +12,7 @@ const Home = ({ location, match }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
 
   return (
-    <div className="home">
+    <div>
       <Navigation
         location={location}
         textSearch={textSearch}

src/index.js

@@ -1,4 +1,3 @@
-import 'font-awesome/css/font-awesome.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './Root';