Embargo saving issue (#426)

* fixed script driver not saving * Fixed Embargo Time not saving and prepopulate issue --------- Co-authored-by: tianywan819 <[email protected]>
biocompute-objects · Jul 18, 2024 · 73c7cc5 · 73c7cc5
1 parent d6be28f
commit 73c7cc5
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 20 deletions.
diff --git a/client/src/components/builder/provenanceDomain.js b/client/src/components/builder/provenanceDomain.js
@@ -4,7 +4,7 @@ import {Card, CardContent, CardHeader, Typography, Grid, Button, TextField } fro
 import { Formik, Form, FieldArray } from "formik";
 import { Contribution, FormObserver, Reviewer, Next } from "./components";
 import { useSelector, useDispatch } from "react-redux"
-import { BaisicDateTimePicker, MyTextField } from "./specialFeilds";
+import { BaisicDateTimePicker, MyTextField, EmbargoDateTimePicker } from "./specialFeilds";
 import { updateProvenanceDomain, updateModified } from "../../slices/bcoSlice";
 import "../../App.css";
 import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
@@ -48,6 +48,10 @@ export const  ProvenanceDomain = ({onSave} ) => {
               "obsolete_after": has_obsolete ? provenanceDomain["obsolete_after"] : [],
               "contributors": has_contributors ?  provenanceDomain["contributors"] : [],
               "review": has_review ? provenanceDomain["review"] : [],
+              "embargo": embargo ? {
+                start_time: (provenanceDomain["embargo"] && provenanceDomain["embargo"].start_time) || null,
+                end_time: (provenanceDomain["embargo"] && provenanceDomain["embargo"].end_time) || null,
+              } : { start_time: null, end_time: null },
             }
           }
           validationSchema={Yup.object().shape({
@@ -182,13 +186,13 @@ export const  ProvenanceDomain = ({onSave} ) => {
                             <Typography> Start time: </Typography>
                           </Grid>
                           <Grid item xs>
-                            <BaisicDateTimePicker name="embargo.start_time" placeholder="Start Time" isRequired isFullWidth/>
+                            <EmbargoDateTimePicker name="embargo.start_time" placeholder="Start Time" isRequired isFullWidth/>
                           </Grid>
                           <Grid item xs> 
                             <Typography> End Time: </Typography>     
                           </Grid>
                           <Grid item xs>
-                            <BaisicDateTimePicker  name="embargo.end_time"  placeholder="End Time" isRequired isFullWidth/>     
+                            <EmbargoDateTimePicker  name="embargo.end_time"  placeholder="End Time" isRequired isFullWidth/>     
                           </Grid>
                           <Button
                             variant="outlined"
@@ -290,4 +294,4 @@ export const  ProvenanceDomain = ({onSave} ) => {
       </Card>
     </>
   )
-}
+}
diff --git a/client/src/components/builder/specialFeilds.js b/client/src/components/builder/specialFeilds.js
@@ -6,6 +6,7 @@ import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { FormHelperText } from "@mui/material";
+import { Grid, Typography, Button } from "@mui/material";
 
 export const MyTextField = ({placeholder,label, isFullWidth, isRequired, type, isDisabled,...props}) => {
   const [field, meta] = useField(props);
@@ -63,31 +64,83 @@ export const MyDateTimeField = ({placeholder,label, isFullWidth, isRequired, isD
   )
 }
 
-export const BaisicDateTimePicker = ({placeholder, label, isFullWidth, isRequired, isDisabled, ...props}) => {
+export const BaisicDateTimePicker = ({ label, isRequired, isDisabled, ...props }) => {
+  const { setFieldValue } = useFormikContext();
   const [field, meta] = useField(props);
+
+  const handleChange = (value) => {
+    setFieldValue(field.name, value);
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateTimePicker
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            fullWidth
+            variant="outlined"
+            label={label}
+            required={isRequired}
+            disabled={isDisabled}
+            error={meta.touched && meta.error ? true : false}
+            helperText={meta.touched && meta.error ? meta.error : ""}
+          />
+        )}
+        {...field}
+        value={field.value ? new Date(field.value) : null}
+        onChange={handleChange}
+        {...props}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export const EmbargoDateTimePicker = ({ name, label }) => {
   const { setFieldValue } = useFormikContext();
-  const errorText = meta.error && meta.touched ? meta.error : "";
+  const [field] = useField(name);
+
+  const handleChange = (value) => {
+    setFieldValue(field.name, value);
+  };
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateTimePicker
-        renderInput={(props) => {
-          return <TextField {...props} onKeyDown={(e) => e.preventDefault()} />}
-        }
         label={label}
-        required={isRequired}
-        {...field}
-        disabled={isDisabled} selected={(field.value && new Date(field.value)) || null}
-        onChange={(val) => {
-          if (val.isValid()) {
-            setFieldValue(field.name, val.toISOString());
-          }
-        }
-        }
+        value={field.value ? new Date(field.value) : null}
+        onChange={(val) => setFieldValue(name, val ? val.toISOString() : null)}
+        renderInput={(props) => <TextField {...props} fullWidth />}
       />
     </LocalizationProvider>
+  );
+};
+export default EmbargoDateTimePicker;
+// export const BaisicDateTimePicker = ({placeholder, label, isFullWidth, isRequired, isDisabled, ...props}) => {
+//   const [field, meta] = useField(props);
+//   const { setFieldValue } = useFormikContext();
+//   const errorText = meta.error && meta.touched ? meta.error : "";
+//   return (
+//     <LocalizationProvider dateAdapter={AdapterDayjs}>
+//       <DateTimePicker
+//         renderInput={(props) => {
+//           return <TextField {...props} onKeyDown={(e) => e.preventDefault()} />}
+//         }
+//         label={label}
+//         required={isRequired}
+//         {...field}
+//         disabled={isDisabled} selected={(field.value && new Date(field.value)) || null}
+//         onChange={(val) => {
+//           if (val.isValid()) {
+//             setFieldValue(field.name, val.toISOString());
+//           }
+//         }
+//         }
+//       />
+//     </LocalizationProvider>
 
-  )
-}
+//   )
+// }
 
 export const Selector = ({placeholder,label, isFullWidth, isRequired, isDisabled, ...props}) => {
   const [field, meta] = useField(props);