feat(form-admin-app): support navigation to next result

GovAlta · Jan 28, 2025 · b625d44 · b625d44
1 parent c1184f9
commit b625d44
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/apps/form-admin-app/src/app/components/DetailsLayout.tsx b/apps/form-admin-app/src/app/components/DetailsLayout.tsx
@@ -12,19 +12,20 @@ const DetailsLayoutContainer = styled.div`
   right: 0;
   display: flex;
   flex-direction: column;
-  & > * {
-    flex: 1
-  }
   & > :first-child {
     background: var(--goa-color-greyscale-100);
     border-bottom: 1px solid var(--goa-color-greyscale-200);
     flex: 0;
   }
+  & > :first-child [trailingicon='arrow-forward'] {
+    margin-left: auto;
+  }
 `;
 
 interface DetailsLayoutProps {
   initialized: boolean;
   navButtons?: ReactNode;
+  nextTo?: string;
   header: ReactNode;
   children: ReactNode;
   actionsForm?: ReactNode;
@@ -33,6 +34,7 @@ interface DetailsLayoutProps {
 export const DetailsLayout: FunctionComponent<DetailsLayoutProps> = ({
   initialized,
   navButtons,
+  nextTo,
   header,
   children,
   actionsForm,
@@ -42,11 +44,16 @@ export const DetailsLayout: FunctionComponent<DetailsLayoutProps> = ({
   return (
     <DetailsLayoutContainer>
       <div>
-        <GoAButtonGroup alignment="start" mt="s" ml="s">
+        <GoAButtonGroup alignment="start" mt="s" ml="s" mr="s">
           <GoAButton type="secondary" leadingIcon="arrow-back" onClick={() => navigate(-1)}>
             Back
           </GoAButton>
           {navButtons}
+          {nextTo && (
+            <GoAButton type="secondary" trailingIcon="arrow-forward" onClick={() => navigate(nextTo)}>
+              Next
+            </GoAButton>
+          )}
         </GoAButtonGroup>
         {header}
       </div>

diff --git a/apps/form-admin-app/src/app/components/Tabs.tsx b/apps/form-admin-app/src/app/components/Tabs.tsx
@@ -16,6 +16,7 @@ const TabContainer = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 0;
+  flex: 1;
   & > .heading {
     flex: 0;
     border-bottom: 1px solid var(--goa-color-greyscale-100);

diff --git a/apps/form-admin-app/src/app/containers/Form.tsx b/apps/form-admin-app/src/app/containers/Form.tsx
@@ -42,7 +42,7 @@ export const Form = () => {
   const [showArchiveConfirm, setShowArchiveConfirm] = useState(false);
 
   const definition = useSelector(definitionSelector);
-  const form = useSelector(formSelector);
+  const { form, next } = useSelector(formSelector);
   const files = useSelector(formFilesSelector);
   const topic = useSelector((state: AppState) => topicSelector(state, form?.urn));
 
@@ -88,6 +88,7 @@ export const Form = () => {
           </PropertiesContainer>
         )
       }
+      nextTo={next && `../forms/${next}`}
     >
       <Tabs>
         <Tab heading="Form">

diff --git a/apps/form-admin-app/src/app/containers/FormSubmission.tsx b/apps/form-admin-app/src/app/containers/FormSubmission.tsx
@@ -36,7 +36,7 @@ export const FormSubmission = () => {
   const { submissionId } = useParams();
   const busy = useSelector(formBusySelector);
   const definition = useSelector(definitionSelector);
-  const submission = useSelector(submissionSelector);
+  const { submission, next } = useSelector(submissionSelector);
   const files = useSelector(submissionFilesSelector);
   const draft = useSelector(dispositionDraftSelector);
 
@@ -54,6 +54,7 @@ export const FormSubmission = () => {
           </GoAButton>
         )
       }
+      nextTo={next && `../submissions/${next}`}
       header={
         submission && (
           <PropertiesContainer>

diff --git a/apps/form-admin-app/src/app/state/form.slice.ts b/apps/form-admin-app/src/app/state/form.slice.ts
@@ -990,26 +990,36 @@ export const submissionsSelector = createSelector(
 export const formSelector = createSelector(
   (state: AppState) => state.form.forms,
   (state: AppState) => state.form.selectedForm,
-  (forms, selected) => forms[selected]
+  (state: AppState) => state.form.results.forms,
+  (forms, selected, results) => {
+    const selectedIndex = results.indexOf(selected);
+    const next = selectedIndex >= 0 ? results[selectedIndex + 1] : undefined;
+    return { form: forms[selected], next };
+  }
 );
 
 export const formFilesSelector = createSelector(
   formSelector,
   (state: AppState) => state.file.metadata,
-  (form, metadata) =>
+  ({ form }, metadata) =>
     Object.entries(form?.files || {}).reduce((files, [key, urn]) => ({ ...files, [key]: metadata[urn] }), {})
 );
 
 export const submissionSelector = createSelector(
   (state: AppState) => state.form.submissions,
   (state: AppState) => state.form.selectedSubmission,
-  (submissions, selected) => submissions[selected]
+  (state: AppState) => state.form.results.submissions,
+  (submissions, selected, results) => {
+    const selectedIndex = results.indexOf(selected);
+    const next = selectedIndex >= 0 ? results[selectedIndex + 1] : undefined;
+    return { submission: submissions[selected], next };
+  }
 );
 
 export const submissionFilesSelector = createSelector(
   (state: AppState) => state.file.metadata,
   submissionSelector,
-  (metadata, submission) =>
+  (metadata, { submission }) =>
     Object.entries(submission?.formFiles || {}).reduce((files, [key, urn]) => ({ ...files, [key]: metadata[urn] }), {})
 );