Adding volunteer, ready-to-startinfo to organizer edit mission screen

src/app/component/UsersAutocomplete.jsx

@@ -15,20 +15,24 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: theme.spacing(1),
   },
 }));
+
 /**
  * This version get values from outside, this mean we already
  * load in all relevant users from somewhere else
  */
-const SearchUsers = ({ handleChange, users }) => {
+const SearchUsers = ({ editable, handleChange, selected, users }) => {
   const classes = useStyles();
 
   const reducer = (options, user) => {
     if (!user.displayName && !user.phoneNumber) return options;
-    let searchString = user.displayName + user.phoneNumber;
+    let searchString = user.displayName + " " + user.phoneNumber;
     options.push({ ...user, searchString });
     return options;
   };
   const options = users?.reduce(reducer, []) || [];
+  const optionSelected = options.find((option) => option && selected && option.id === selected.id);
+  const defaultValue = editable ? optionSelected : "";
+  const value = !editable ? optionSelected : "";
 
   return (
     <Autocomplete
@@ -38,6 +42,8 @@ const SearchUsers = ({ handleChange, users }) => {
       classes={{ root: classes.root }}
       getOptionLabel={(user) => user.searchString}
       onChange={(event, newValue) => handleChange(newValue)}
+      value={value}
+      defaultValue={defaultValue}
       renderInput={(params) => (
         <TextField
           {...params}

src/app/dashboard/Missions/ListView.jsx

@@ -4,14 +4,14 @@ import { makeStyles } from "@material-ui/core/styles";
 import React, { useEffect, useState } from "react";
 import GroupWorkIcon from "@material-ui/icons/GroupWork";
 import Divider from "@material-ui/core/Divider";
+import EditView from "./MissionEditView";
 
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
 import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import Card from "@material-ui/core/Card";
 import Paper from "@material-ui/core/Paper";
 
-import EditView from "./MissionEditView";
 import DetailsView from "./DetailsView";
 import ListItem from "./ListItem";
 import { Mission } from "../../model";
@@ -188,6 +188,7 @@ const MissionsListView = ({
             setSelectedMission={setSelectedMission}
             toListView={() => setView(Views.list)}
             toDetailsView={toDetailsView}
+            volunteers={volunteers}
           />
         )}
       </Box>

src/app/dashboard/Missions/MissionEditView.jsx

@@ -9,12 +9,15 @@ import PersonIcon from "@material-ui/icons/Person";
 import React, { useState } from "react";
 import { isEmpty, isLoaded } from "react-redux-firebase";
 import { Button, Body2, H3 } from "../../component";
+import Switch from "@material-ui/core/Switch";
 import DateTimeInput from "../../component/DateTimeInput";
 import ScheduleIcon from "@material-ui/icons/Schedule";
 import { Mission } from "../../model";
 import _ from "../../utils/lodash";
 import AddressInput from "../../component/AddressInput";
+import UsersAutocomplete from "../../component/UsersAutocomplete";
 import { useForm } from "../../hooks";
+import { MissionStatus } from "../../model/schema";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -30,6 +33,9 @@ const useStyles = makeStyles((theme) => ({
   missionTypeText: {
     paddingTop: theme.spacing(0.5),
   },
+  label: {
+    fontWeight: 600,
+  },
   rowLabel: {
     fontWeight: 600,
     marginTop: theme.spacing(2),
@@ -193,11 +199,20 @@ const MissionDetailsRow = ({ mission }) => {
   return null;
 };
 
+const volunteerStatus = [MissionStatus.unassigned, MissionStatus.tentative, MissionStatus.assigned];
+
+const getVolunteerAttribute = (selectedVolunteer, status, attr, tentativeClause) => {
+  if (selectedVolunteer && tentativeClause) {
+    return selectedVolunteer[attr];
+  }
+  return "";
+};
+
 /**
  * Component for editing mission details
  * @component
  */
-const MissionEditView = ({ mission, toDetailsView, toListView }) => {
+const MissionEditView = ({ mission, toDetailsView, toListView, volunteers }) => {
   const classes = useStyles();
 
   const { handleChange, values } = useForm(mission);
@@ -211,9 +226,14 @@ const MissionEditView = ({ mission, toDetailsView, toListView }) => {
     date: values.deliveryWindow.startTime,
     location: "",
   });
+  const [selectedVolunteer, setSelectedVolunteer] = useState(
+    volunteers.find((el) => el.id === mission.volunteerUid)
+  );
 
   const props = { classes, mission };
 
+  const volunteerEditable = volunteerStatus.includes(mission.status);
+
   function changeFormValue(name, value) {
     handleChange({ target: { name, value } });
   }
@@ -223,6 +243,10 @@ const MissionEditView = ({ mission, toDetailsView, toListView }) => {
     changeFormValue("location", location);
   }
 
+  function handleChangeReadyToStart(e) {
+    changeFormValue("readyToStart", e.target.checked);
+  }
+
   function handleSave(e) {
     e.preventDefault();
     const pickUpTime = new Date(pickUp.date);
@@ -246,6 +270,43 @@ const MissionEditView = ({ mission, toDetailsView, toListView }) => {
       deliveryWindow: {
         startTime: delivery.toString(),
       },
+      volunteerUid: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerUid",
+        values.status !== MissionStatus.tentative
+      ),
+      volunteerDisplayname: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerDisplayName",
+        values.status !== MissionStatus.tentative
+      ),
+      volunteerPhoneNumber: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerPhoneNumber",
+        values.status !== MissionStatus.tentative
+      ),
+      tentativeVolunteerUid: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerUid",
+        values.status === MissionStatus.tentative
+      ),
+      tentativeVolunteerDisplayName: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerDisplayName",
+        values.status === MissionStatus.tentative
+      ),
+      tentativeVolunteerPhoneNumber: getVolunteerAttribute(
+        selectedVolunteer,
+        values.status,
+        "volunteerPhoneNumber",
+        values.status === MissionStatus.tentative
+      ),
+      readyToStart: values.readyToStart,
     }).then((result) => {
       toDetailsView();
     });
@@ -384,6 +445,33 @@ const MissionEditView = ({ mission, toDetailsView, toListView }) => {
                 </Grid>
               </Grid>
             </Card>
+
+            <Card label="Volunteer Information" classes={classes}>
+              <UsersAutocomplete
+                editable={volunteerEditable}
+                handleChange={setSelectedVolunteer}
+                users={volunteers}
+                selected={selectedVolunteer}
+              />
+            </Card>
+
+            <Row classes={classes}>
+
+              <Grid container direction="row" spacing={1} className={classes.rowBody}>
+                <Grid item>
+                  <Switch
+                    size="normal"
+                    name="readyToStart"
+                    checked={values.readyToStart}
+                    onChange={handleChangeReadyToStart}
+                  />
+                </Grid>
+                <Grid item className={classes.label}>
+                  Ready To Start?
+                </Grid>
+              </Grid>
+            </Row>
+
             <Label classes={classes}>Delivery Notes</Label>
             <Row classes={classes}>
               <TextField