Updated user submissions page so that people can see what they have s…

…ubmitted, as well as check submission status

src/api/src/graphql/resolvers/types/submission.js

@@ -9,9 +9,5 @@ export default {
    * If more fields are required this will need
    * to be made into a batching function
    */
-  createdBy: async ({ createdBy, args, ctx }) => {
-    return {
-      id: createdBy,
-    }
-  },
+  createdBy: async ({ createdBy: id }) => ({ id }),
 }

src/api/src/graphql/schema/type-defs/main.graphql

@@ -66,6 +66,7 @@ type SubmissionTemplate {
 
 type Submission {
   id: ID!
+  _id: Int
   isSubmitted: Boolean
   validationStatus: JSON
   validationComments: String

src/client/src/components/project-form/index.jsx

@@ -9,6 +9,7 @@ import SyncStatus from './_sync-status'
 import useMediaQuery from '@material-ui/core/useMediaQuery'
 import BottomNav from './bottom-nav'
 import SyncIcon from 'mdi-react/SyncIcon'
+import Fade from '@material-ui/core/Fade'
 
 const GeneralDetailsForm = lazy(() => import('./sections/general-details'))
 const MitigationDetailsForm = lazy(() => import('./sections/mitigation-details'))
@@ -52,6 +53,7 @@ const FormController = () => {
   const navItems = useMemo(
     () => [
       {
+        Section: GeneralDetailsForm,
         primaryText: 'General',
         secondaryText: 'Basic project details',
         Icon: () => (
@@ -63,6 +65,7 @@ const FormController = () => {
         ),
       },
       {
+        Section: MitigationDetailsForm,
         disabled: !mitigationsRequired,
         primaryText: 'Mitigation details',
         secondaryText: 'Project mitigation details',
@@ -75,6 +78,7 @@ const FormController = () => {
         ),
       },
       {
+        Section: AdaptationDetailsForm,
         disabled: !adaptationsRequired,
         primaryText: 'Adaptation details',
         secondaryText: 'Project adaptation details',
@@ -134,31 +138,64 @@ const FormController = () => {
     <ContentNav
       navItems={mode === 'edit' ? [...navItems, syncingNavItem] : [...navItems, submitNavItem]}
     >
-      {({ activeIndex, setActiveIndex }) => {
-        return (
-          <>
-            {activeIndex === 0 && (
-              <Suspense fallback={<Loading />}>
-                <GeneralDetailsForm key="project-form" />
-              </Suspense>
-            )}
-            {activeIndex === 1 && (
-              <Suspense fallback={<Loading />}>
-                <MitigationDetailsForm key="mitigation-form" />
-              </Suspense>
-            )}
-            {activeIndex === 2 && (
-              <Suspense fallback={<Loading />}>
-                <AdaptationDetailsForm key="adaptation-form" />
-              </Suspense>
-            )}
-            {activeIndex === 3 && (mode !== 'edit' ? <Submit key="submit" /> : null)}
-            {mode !== 'edit' ? (
-              <BottomNav currentIndex={activeIndex} setActiveIndex={setActiveIndex} />
-            ) : null}
-          </>
-        )
-      }}
+      {({ activeIndex, setActiveIndex }) => (
+        <>
+          {[navItems[0], navItems[1], navItems[2]].map(({ Section, primaryText }, i) => (
+            <Suspense
+              key={primaryText}
+              fallback={
+                <Fade
+                  timeout={theme.transitions.duration.standard}
+                  in={activeIndex === i}
+                  key={'loading'}
+                >
+                  <span>
+                    <Loading />
+                  </span>
+                </Fade>
+              }
+            >
+              <Fade
+                timeout={theme.transitions.duration.standard}
+                in={activeIndex === i}
+                key={'loaded'}
+              >
+                <span style={{ display: activeIndex === i ? 'inherit' : 'none' }}>
+                  <Section />
+                </span>
+              </Fade>
+            </Suspense>
+          ))}
+
+          <Suspense
+            fallback={
+              <Fade
+                timeout={theme.transitions.duration.standard}
+                in={activeIndex === 3}
+                key={'loading'}
+              >
+                <span>
+                  <Loading />
+                </span>
+              </Fade>
+            }
+          >
+            <Fade
+              timeout={theme.transitions.duration.standard}
+              in={activeIndex === 3}
+              key={'loaded'}
+            >
+              <span style={{ display: activeIndex === 3 ? 'inherit' : 'none' }}>
+                <Submit key="submit" />
+              </span>
+            </Fade>
+          </Suspense>
+
+          {mode !== 'edit' ? (
+            <BottomNav currentIndex={activeIndex} setActiveIndex={setActiveIndex} />
+          ) : null}
+        </>
+      )}
     </ContentNav>
   )
 }

src/client/src/pages/access/index.jsx

@@ -1,18 +1,21 @@
-import { useContext } from 'react'
+import { useContext, Suspense, lazy } from 'react'
 import { context as authenticationContext } from '../../contexts/authentication'
 import { context as authorizationContext } from '../../contexts/authorization'
 import Loading from '../../components/loading'
 import ContentNav from '../../components/content-nav'
 import UsersIcon from 'mdi-react/AccountMultipleIcon'
 import RolesIcon from 'mdi-react/AccountLockIcon'
 import PermissionsIcon from 'mdi-react/AxisLockIcon'
-import Users from './users'
-import Roles from './roles'
-import Permissions from './permissions'
 import Wrapper from '../../components/page-wrapper'
 import ToolbarHeader from '../../components/toolbar-header'
 import AccessDenied from '../../components/access-denied'
 import UserRolesProvider from './context'
+import useTheme from '@material-ui/core/styles/useTheme'
+import Fade from '@material-ui/core/Fade'
+
+const Users = lazy(() => import('./users'))
+const Roles = lazy(() => import('./roles'))
+const Permissions = lazy(() => import('./permissions'))
 
 const sections = [
   {
@@ -39,6 +42,7 @@ const sections = [
 ]
 
 export default () => {
+  const theme = useTheme()
   const isAuthenticated = useContext(authenticationContext).authenticate()
   const { hasPermission } = useContext(authorizationContext)
 
@@ -61,15 +65,36 @@ export default () => {
         <ContentNav
           navItems={sections.filter(({ requiredPermission }) => hasPermission(requiredPermission))}
         >
-          {({ activeIndex }) => {
-            return sections
+          {({ activeIndex }) =>
+            sections
               .filter(({ requiredPermission }) => hasPermission(requiredPermission))
-              .map(({ Section, primaryText, requiredPermission }, i) =>
-                activeIndex === i ? (
-                  <Section permission={requiredPermission} key={primaryText} />
-                ) : null
-              )
-          }}
+              .map(({ Section, primaryText, requiredPermission }, i) => (
+                <Suspense
+                  key={primaryText}
+                  fallback={
+                    <Fade
+                      timeout={theme.transitions.duration.regular}
+                      in={activeIndex === i}
+                      key={'loading'}
+                    >
+                      <span>
+                        <Loading />
+                      </span>
+                    </Fade>
+                  }
+                >
+                  <Fade
+                    timeout={theme.transitions.duration.regular}
+                    in={activeIndex === i}
+                    key={'loaded'}
+                  >
+                    <span style={{ display: activeIndex === i ? 'inherit' : 'none' }}>
+                      <Section permission={requiredPermission} />
+                    </span>
+                  </Fade>
+                </Suspense>
+              ))
+          }
         </ContentNav>
       </Wrapper>
     </UserRolesProvider>

src/client/src/pages/submission-new/header/delete-submission/index.jsx

@@ -36,7 +36,7 @@ export default ({ id }) => {
       text="Are you sure you want to delete this submission? All data will be lost"
       tooltipProps={{
         placement: 'bottom',
-        title: 'Reset form',
+        title: 'Delete submission',
       }}
       Button={openFn => {
         return (

src/client/src/pages/user-submissions/completed-submissions/index.jsx

@@ -0,0 +1,92 @@
+import { useMemo } from 'react'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import { DataGrid } from '@material-ui/data-grid'
+import useTheme from '@material-ui/core/styles/useTheme'
+import Link from '@material-ui/core/Link'
+import { Link as RouterLink } from 'react-router-dom'
+
+export default ({ submissions }) => {
+  const theme = useTheme()
+  const _submissions = useMemo(
+    () => [...submissions].filter(({ isSubmitted }) => isSubmitted),
+    [submissions]
+  )
+
+  return (
+    <Card
+      style={{ border: 'none', width: '100%', backgroundColor: theme.backgroundColor }}
+      variant="outlined"
+    >
+      <CardContent style={{ padding: 0 }}>
+        <div style={{ height: 1000 }}>
+          <DataGrid
+            pageSize={25}
+            rowHeight={theme.spacing(5)}
+            columns={[
+              {
+                field: 'title',
+                headerName: 'Title',
+                width: 120,
+              },
+              {
+                field: 'intervention',
+                headerName: 'Intervention',
+                width: 160,
+              },
+              {
+                field: 'isSubmitted',
+                headerName: 'Submitted',
+                sortable: false,
+                filterable: false,
+                disableColumnMenu: true,
+                width: 120,
+              },
+              {
+                field: 'status',
+                headerName: 'Status',
+                width: 140,
+              },
+              {
+                field: 'comments',
+                headerName: 'Comments',
+                width: 180,
+              },
+              {
+                field: '_edit',
+                headerName: ` `,
+                sortable: false,
+                filterable: false,
+                disableColumnMenu: true,
+                flex: 1,
+                renderCell: ({ row: { formNumber } }) => (
+                  <Link component={RouterLink} to={`/submissions/${formNumber}/edit`}>
+                    Edit submission
+                  </Link>
+                ),
+              },
+            ]}
+            rows={_submissions.map(
+              ({
+                id,
+                _id,
+                project: { title, interventionType: { term: intervention = '' } = {} },
+                isSubmitted,
+                validationStatus: { term: status },
+                validationComments: comments,
+              }) => ({
+                id: _id,
+                formNumber: id,
+                title,
+                status,
+                intervention,
+                comments,
+                isSubmitted: isSubmitted ? 'Yes' : 'No',
+              })
+            )}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}