OCD-4783: expanded system maintenance page

src/app/api/standards.jsx

@@ -84,6 +84,38 @@ const useFetchAccessibilityStandards = () => {
   });
 };
 
+const useFetchCodeSets = () => {
+  const axios = useAxios();
+  return useQuery(['code-sets'], async () => {
+    const response = await axios.get('code-sets');
+    return response.data;
+  });
+};
+
+const useFetchConformanceMethods = () => {
+  const axios = useAxios();
+  return useQuery(['conformance-methods'], async () => {
+    const response = await axios.get('conformance-methods');
+    return response.data;
+  });
+};
+
+const useFetchCqms = (props = { active: true }) => {
+  const params = Object
+    .entries(props)
+    .filter(([key, value]) => key !== 'active' && value)
+    .filter(([key]) => (key !== 'active'))
+    .map(([key, value]) => `${key}=${value}`)
+    .join('&');
+  let query = 'cqms';
+  if (params.length > 0) { query += `?${params}`; }
+  const axios = useAxios();
+  return useQuery(['cqms', params], async () => {
+    const response = await axios.get(query);
+    return response.data.filter((cc) => !props.active || cc.startDay < jsJoda.LocalDate.now());
+  });
+};
+
 const useFetchCriteria = (props = { enabled: true, active: true }) => {
   const params = Object
     .entries(props)
@@ -142,6 +174,14 @@ const useFetchFunctionalitiesTested = () => {
   });
 };
 
+const useFetchG1g2 = () => {
+  const axios = useAxios();
+  return useQuery(['g1g2'], async () => {
+    const response = await axios.get('data/measures');
+    return response.data.data;
+  });
+};
+
 const useFetchQmsStandards = () => {
   const axios = useAxios();
   return useQuery(['qms-standards'], async () => {
@@ -174,6 +214,14 @@ const useFetchSvaps = () => {
   });
 };
 
+const useFetchTestData = () => {
+  const axios = useAxios();
+  return useQuery(['test-data'], async () => {
+    const response = await axios.get('data/test_data');
+    return response.data.data;
+  });
+};
+
 const useFetchTestTools = () => {
   const axios = useAxios();
   return useQuery(['test-tools'], async () => {
@@ -345,16 +393,21 @@ export {
   useDeleteTestTool,
   useDeleteUcdProcess,
   useFetchAccessibilityStandards,
+  useFetchCodeSets,
+  useFetchConformanceMethods,
+  useFetchCqms,
   useFetchCriteria,
   useFetchCriteriaForFunctionalitiesTested,
   useFetchCriteriaForStandards,
   useFetchCriteriaForSvaps,
   useFetchCriteriaForTestTools,
   useFetchFunctionalitiesTested,
+  useFetchG1g2,
   useFetchQmsStandards,
   useFetchRules,
   useFetchStandards,
   useFetchSvaps,
+  useFetchTestData,
   useFetchTestTools,
   useFetchUcdProcesses,
   usePostAccessibilityStandard,

src/app/components/system-maintenance/code-set/code-sets-view.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  makeStyles,
+} from '@material-ui/core';
+import { arrayOf, object } from 'prop-types';
+
+import { ChplSortableHeaders, sortComparator } from 'components/util/sortable-headers';
+import { sortCriteria } from 'services/criteria.service';
+import { getDisplayDateFormat } from 'services/date-util';
+import { utilStyles } from 'themes';
+
+const headers = [
+  { property: 'name', text: 'Name', sortable: true },
+  { property: 'startDay', text: 'Start Date', sortable: true },
+  { property: 'requiredDay', text: 'Required Date', sortable: true },
+  { text: 'Applicable Criteria' },
+];
+
+const useStyles = makeStyles({
+  ...utilStyles,
+});
+
+function ChplCodeSetsView({ codeSets: initialCodeSets }) {
+  const [codeSets, setCodeSets] = useState([]);
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const classes = useStyles();
+
+  useEffect(() => {
+    setCodeSets(initialCodeSets
+      .map((item) => ({
+        ...item,
+        criteriaDisplay: item.criteria
+          .sort(sortCriteria)
+          .map((c) => c.number)
+          .join(', '),
+      }))
+      .sort(sortComparator('name')));
+  }, [initialCodeSets]);
+
+  const handleTableSort = (event, property, orderDirection) => {
+    const descending = orderDirection === 'desc';
+    const updated = codeSets.sort(sortComparator(property, descending));
+    setOrderBy(property);
+    setOrder(orderDirection);
+    setCodeSets(updated);
+  };
+
+  return (
+    <>
+      <TableContainer className={classes.container} component={Paper}>
+        <Table
+          aria-label="Code Set table"
+        >
+          <ChplSortableHeaders
+            headers={headers}
+            onTableSort={handleTableSort}
+            orderBy={orderBy}
+            order={order}
+            stickyHeader
+          />
+          <TableBody>
+            { codeSets
+              .map((item) => (
+                <TableRow key={`${item.id}`}>
+                  <TableCell className={classes.firstColumn}>
+                    { item.name }
+                  </TableCell>
+                  <TableCell>
+                    { getDisplayDateFormat(item.startDay) }
+                  </TableCell>
+                  <TableCell>
+                    { getDisplayDateFormat(item.requiredDay) }
+                  </TableCell>
+                  <TableCell>
+                    { item.criteriaDisplay }
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}
+
+export default ChplCodeSetsView;
+
+ChplCodeSetsView.propTypes = {
+  codeSets: arrayOf(object).isRequired,
+};

src/app/components/system-maintenance/code-set/code-sets.jsx

@@ -0,0 +1,60 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CircularProgress,
+} from '@material-ui/core';
+
+import ChplCodeSetsView from './code-sets-view';
+
+import { useFetchCodeSets } from 'api/standards';
+import { BreadcrumbContext } from 'shared/contexts';
+
+function ChplCodeSets() {
+  const { append, display } = useContext(BreadcrumbContext);
+  const { data, isLoading, isSuccess } = useFetchCodeSets();
+  const [codeSets, setCodeSets] = useState([]);
+
+  useEffect(() => {
+    append(
+      <Button
+        key="codeSets.viewall.disabled"
+        depth={1}
+        variant="text"
+        disabled
+      >
+        Code Sets
+      </Button>,
+    );
+    display('codeSets.viewall.disabled');
+  }, []);
+
+  useEffect(() => {
+    if (isLoading || !isSuccess) { return; }
+    setCodeSets(data);
+  }, [data, isLoading, isSuccess]);
+
+  if (isLoading) {
+    return (
+      <CircularProgress />
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader title="Code Sets" />
+      <CardContent>
+        <ChplCodeSetsView
+          codeSets={codeSets}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+export default ChplCodeSets;
+
+ChplCodeSets.propTypes = {
+};

src/app/components/system-maintenance/conformance-method/conformance-methods-view.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  makeStyles,
+} from '@material-ui/core';
+import { arrayOf, object } from 'prop-types';
+
+import { ChplSortableHeaders, sortComparator } from 'components/util/sortable-headers';
+import { sortCriteria } from 'services/criteria.service';
+import { getDisplayDateFormat } from 'services/date-util';
+import { utilStyles } from 'themes';
+
+const headers = [
+  { property: 'name', text: 'Name', sortable: true },
+  { property: 'removalDate', text: 'Removal Date', sortable: true },
+  { text: 'Applicable Criteria' },
+];
+
+const useStyles = makeStyles({
+  ...utilStyles,
+});
+
+function ChplConformanceMethodsView({ conformanceMethods: initialConformanceMethods }) {
+  const [conformanceMethods, setConformanceMethods] = useState([]);
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const classes = useStyles();
+
+  useEffect(() => {
+    setConformanceMethods(initialConformanceMethods
+      .map((item) => ({
+        ...item,
+        criteriaDisplay: item.criteria
+          .sort(sortCriteria)
+          .map((c) => c.number)
+          .join(', '),
+      }))
+      .sort(sortComparator('name')));
+  }, [initialConformanceMethods]);
+
+  const handleTableSort = (event, property, orderDirection) => {
+    const descending = orderDirection === 'desc';
+    const updated = conformanceMethods.sort(sortComparator(property, descending));
+    setOrderBy(property);
+    setOrder(orderDirection);
+    setConformanceMethods(updated);
+  };
+
+  return (
+    <>
+      <TableContainer className={classes.container} component={Paper}>
+        <Table
+          aria-label="Conformance Method table"
+        >
+          <ChplSortableHeaders
+            headers={headers}
+            onTableSort={handleTableSort}
+            orderBy={orderBy}
+            order={order}
+            stickyHeader
+          />
+          <TableBody>
+            { conformanceMethods
+              .map((item) => (
+                <TableRow key={`${item.id}`}>
+                  <TableCell className={classes.firstColumn}>
+                    { item.removed
+                      && (
+                        <>
+                          Removed |
+                        </>
+                      )}
+                    { item.name }
+                  </TableCell>
+                  <TableCell>
+                    { getDisplayDateFormat(item.removalDate) }
+                  </TableCell>
+                  <TableCell>
+                    { item.criteriaDisplay }
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}
+
+export default ChplConformanceMethodsView;
+
+ChplConformanceMethodsView.propTypes = {
+  conformanceMethods: arrayOf(object).isRequired,
+};