Merge branch 'OCD-2838' into qa

src/app/api/sed.jsx

@@ -0,0 +1,24 @@
+import { useQuery } from 'react-query';
+
+import { useAxios } from './axios';
+
+const useFetchSedAgeRanges = () => {
+  const axios = useAxios();
+  return useQuery(['data/age_ranges'], async () => {
+    const response = await axios.get('data/age_ranges');
+    return response.data;
+  });
+};
+
+const useFetchSedEducation = () => {
+  const axios = useAxios();
+  return useQuery(['data/education_types'], async () => {
+    const response = await axios.get('data/education_types');
+    return response.data;
+  });
+};
+
+export {
+  useFetchSedAgeRanges,
+  useFetchSedEducation,
+};

src/app/components/listing/details/sed/edit/details.jsx

@@ -0,0 +1,97 @@
+import React, { useContext } from 'react';
+import {
+  CircularProgress,
+  makeStyles,
+} from '@material-ui/core';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+import { ChplTextField } from 'components/util';
+import { ListingContext } from 'shared/contexts';
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+});
+
+const validationSchema = yup.object({
+  sedReportFileLocation: yup.string()
+    .url('Improper format (http://www.example.com)')
+    .max(250, 'Field is too long'),
+  sedIntendedUserDescription: yup.string(),
+  sedTestingEndDay: yup.date(),
+});
+
+function ChplSedDetailsEdit() {
+  const { listing, setListing } = useContext(ListingContext);
+  const classes = useStyles();
+  let formik;
+
+  const handleBasicChange = (event) => {
+    setListing((prev) => ({
+      ...prev,
+      [event.target.name]: event.target.value,
+    }));
+    formik.setFieldValue(event.target.name, event.target.value);
+  };
+
+  formik = useFormik({
+    initialValues: {
+      sedReportFileLocation: listing.sedReportFileLocation || '',
+      sedIntendedUserDescription: listing.sedIntendedUserDescription || '',
+      sedTestingEndDay: listing.sedTestingEndDay || '',
+    },
+    validationSchema,
+  });
+
+  if (!listing) {
+    return (
+      <CircularProgress />
+    );
+  }
+
+  return (
+    <div className={classes.container}>
+      <ChplTextField
+        id="sed-report-file-location"
+        name="sedReportFileLocation"
+        label="Full Usability Report"
+        value={formik.values.sedReportFileLocation}
+        onChange={handleBasicChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched.sedReportFileLocation && !!formik.errors.sedReportFileLocation}
+        helperText={formik.touched.sedReportFileLocation && formik.errors.sedReportFileLocation}
+      />
+      <ChplTextField
+        id="sed-intended-user-description"
+        name="sedIntendedUserDescription"
+        label="SED Intended User Description"
+        value={formik.values.sedIntendedUserDescription}
+        multiline
+        onChange={handleBasicChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched.sedIntendedUserDescription && !!formik.errors.sedIntendedUserDescription}
+        helperText={formik.touched.sedIntendedUserDescription && formik.errors.sedIntendedUserDescription}
+      />
+      <ChplTextField
+        id="sed-testing-end-day"
+        name="sedTestingEndDay"
+        label="SED Testing Completion Date"
+        type="date"
+        value={formik.values.sedTestingEndDay}
+        onChange={handleBasicChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched.sedTestingEndDay && !!formik.errors.sedTestingEndDay}
+        helperText={formik.touched.sedTestingEndDay && formik.errors.sedTestingEndDay}
+      />
+    </div>
+  );
+}
+
+export default ChplSedDetailsEdit;
+
+ChplSedDetailsEdit.propTypes = {
+};

src/app/components/listing/details/sed/edit/edit.jsx

@@ -0,0 +1,92 @@
+import React, { useContext, useState } from 'react';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CircularProgress,
+} from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+
+import ChplSedDetailsEdit from './details';
+import ChplSedTaskAdd from './sed-task-add';
+import ChplSedTaskEdit from './sed-task-edit';
+import ChplUcdProcessesEdit from './processes-edit';
+
+import { ListingContext } from 'shared/contexts';
+
+const sortTestTasks = (a, b) => (a.description < b.description ? -1 : 1);
+
+function ChplSedEdit() {
+  const { listing } = useContext(ListingContext);
+  const [addingTask, setAddingTask] = useState(false);
+
+  const handleDispatch = () => {
+    setAddingTask(false);
+  };
+
+  if (!listing) {
+    return (
+      <CircularProgress />
+    );
+  }
+
+  return (
+    <Box display="flex" gridGap={16} flexDirection="column">
+      <Card>
+        <CardHeader title="SED Summary" />
+        <CardContent>
+          <ChplSedDetailsEdit />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader title="SED Tested Certification Criteria &amp; Associated UCD Processes" />
+        <CardContent>
+          <ChplUcdProcessesEdit />
+        </CardContent>
+      </Card>
+      { (listing.edition === null || listing.edition.name === '2015')
+        && (
+          <Card>
+            <CardHeader title="SED Testing Tasks" />
+            <CardContent>
+              { listing.sed.testTasks
+                .sort(sortTestTasks)
+                .map((task) => (
+                  <ChplSedTaskEdit
+                    key={task.id ?? task.uniqueId}
+                    task={task}
+                  />
+                ))}
+              { !addingTask
+                && (
+                  <Box pt={4}>
+                    <Button
+                      size="medium"
+                      color="primary"
+                      variant="outlined"
+                      onClick={() => setAddingTask(true)}
+                      endIcon={<AddIcon fontSize="medium" />}
+                    >
+                      Add Test Task
+                    </Button>
+                  </Box>
+                )}
+              { addingTask
+                && (
+                  <ChplSedTaskAdd
+                    dispatch={handleDispatch}
+                  />
+                )}
+            </CardContent>
+          </Card>
+        )}
+    </Box>
+  );
+}
+
+export default ChplSedEdit;
+
+ChplSedEdit.propTypes = {
+};