Merge pull request #946 from bcgov/dev

Release to Test
bcgov · Feb 13, 2023 · 55c37bc · 55c37bc
2 parents 853e69b + 1f15975
commit 55c37bc
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 157 deletions.
diff --git a/api/src/paths/project/{projectId}/update.ts b/api/src/paths/project/{projectId}/update.ts
@@ -247,7 +247,8 @@ GET.apiDoc = {
                           description: 'ISO 8601 date string for the funding end_date'
                         },
                         agency_project_id: {
-                          type: 'string'
+                          type: 'string',
+                          nullable: true
                         },
                         revision_count: {
                           type: 'number'

diff --git a/app/src/components/fields/ReadMoreField.tsx b/app/src/components/fields/ReadMoreField.tsx
@@ -1,12 +1,14 @@
+import { Typography, TypographyProps } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import Icon from '@mdi/react';
 import React, { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 export interface IReadMoreFieldProps {
   text: string;
   maxCharLength: number;
+  TypographyProps?: Partial<TypographyProps>;
 }
 
 /**
@@ -15,78 +17,51 @@ export interface IReadMoreFieldProps {
  * @return {*}
  */
 export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
-  const { text, maxCharLength } = props;
+  const { text, maxCharLength, TypographyProps } = props;
+  const [showTruncated, setShowTruncated] = useState(false);
 
-  /*
-    Determines whether or not the given body of text will be truncated based on
-    the max character length.
-  */
-  const willTruncateText = (content: string): boolean => {
-    return content?.trim().length > maxCharLength || false;
-  };
+  if (!text || maxCharLength <= 0) {
+    return <></>;
+  }
 
-  const [isTruncatedText, setIsTruncatedText] = useState(willTruncateText(text));
+  const sanitizedText = String(text).trim();
+  const willTruncateText = sanitizedText.length > maxCharLength;
 
-  const renderParagraph = (paragraph: string) => {
-    if (paragraph) {
-      return (
-        <Typography color="textSecondary" key={uuidv4()}>
-          {paragraph}
-        </Typography>
-      );
-    }
-    return <p key={uuidv4()}></p>;
-  };
+  if (!willTruncateText) {
+    return <span>{sanitizedText}</span>;
+  }
 
-  /*
-    Function that finds a nice index (at a period ending a sentence)
-    to truncate objectives longer than maxCharLength characters
-  */
-  const determineTruncatingLength = () => {
-    const periodIndices = [];
+  let truncationIndex = sanitizedText.slice(0, maxCharLength).lastIndexOf(' ');
+  if (truncationIndex < 0) {
+    truncationIndex = maxCharLength;
+  }
 
-    for (let i = 0; i < text.length; i++) {
-      if (text[i - 1] === '.' && text[i] === ' ') {
-        periodIndices.push(i);
-      }
-    }
-
-    return periodIndices.reduce((prev, curr) => {
-      return Math.abs(curr - maxCharLength) < Math.abs(prev - maxCharLength) ? curr : prev;
-    });
-  };
+  const persistentTextPortion = sanitizedText.slice(0, truncationIndex);
 
   return (
     <Box>
-      {isTruncatedText && (
-        <>
-          {text
-            .slice(0, determineTruncatingLength())
-            .split('\n')
-            .map((paragraph: string) => {
-              return renderParagraph(paragraph);
-            })}
-          <Box mt={0.5} mb={-0.75} ml="-5px">
-            <Button size="small" variant="text" onClick={() => setIsTruncatedText(false)} style={{ color: '#757575' }}>
-              READ MORE...
-            </Button>
-          </Box>
-        </>
-      )}
-      {!isTruncatedText && (
-        <>
-          {text?.split('\n').map((paragraph: string) => {
-            return renderParagraph(paragraph);
-          })}
-          {willTruncateText(text) && (
-            <Box mt={0.5} mb={-0.75} ml="-5px">
-              <Button size="small" variant="text" onClick={() => setIsTruncatedText(true)} style={{ color: '#757575' }}>
-                READ LESS
-              </Button>
-            </Box>
-          )}
-        </>
-      )}
+      <Typography {...TypographyProps}>
+        {showTruncated ? (
+          <span>{sanitizedText}</span>
+        ) : (
+          <>
+            <span>{persistentTextPortion}</span>
+            <span>&hellip;</span>
+          </>
+        )}
+      </Typography>
+      <Box mt={0.5} mb={-0.75} ml="-5px">
+        <Button
+          size="small"
+          variant="text"
+          onClick={() => setShowTruncated(!showTruncated)}
+          style={{ color: '#757575', fontWeight: 600, textTransform: 'uppercase' }}>
+          <>
+            <Icon path={showTruncated ? mdiChevronUp : mdiChevronDown} size={1} />
+            <span>{showTruncated ? 'Read Less' : 'Read More'}</span>
+          </>
+        </Button>
+      </Box>
     </Box>
   );
 };

diff --git a/app/src/components/surveys/SurveysList.tsx b/app/src/components/surveys/SurveysList.tsx
@@ -8,6 +8,7 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Typography from '@material-ui/core/Typography';
+import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface';
 import { SurveyViewObject } from 'interfaces/useSurveyApi.interface';
 import React, { useState } from 'react';
 
@@ -20,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export interface ISurveysListProps {
   surveysList: SurveyViewObject[];
   projectId: number;
+  codes: IGetAllCodeSetsResponse;
 }
 
 const SurveysList: React.FC<ISurveysListProps> = (props) => {
@@ -54,7 +56,12 @@ const SurveysList: React.FC<ISurveysListProps> = (props) => {
                   <TableCell>
                     {[...row.species?.focal_species_names, ...row.species?.ancillary_species_names].join(', ')}
                   </TableCell>
-                  <TableCell>Community Composition</TableCell>
+                  <TableCell>
+                    {row.purpose_and_methodology.intended_outcome_id &&
+                      props.codes?.intended_outcomes?.find(
+                        (item: any) => item.id === row.purpose_and_methodology.intended_outcome_id
+                      )?.name}
+                  </TableCell>
                 </TableRow>
               ))}
             {!props.surveysList.length && (

diff --git a/app/src/features/projects/create/CreateProjectPage.tsx b/app/src/features/projects/create/CreateProjectPage.tsx
@@ -90,7 +90,7 @@ const CreateProjectPage: React.FC = () => {
     if (draftDataLoader.data?.data) {
       setFormikValues(draftDataLoader.data?.data);
     }
-  }, [draftDataLoader]);
+  }, [draftDataLoader.data]);
 
   // Whether or not to show the 'Save as draft' dialog
   const [openDraftDialog, setOpenDraftDialog] = useState(false);
@@ -170,9 +170,16 @@ const CreateProjectPage: React.FC = () => {
       const draftId = Number(queryParams.draftId) || draft?.id;
 
       if (draftId) {
-        response = await biohubApi.draft.updateDraft(draftId, values.draft_name, draftFormData);
+        response = await biohubApi.draft.updateDraft(
+          draftId,
+          draftFormData?.project?.project_name || values.draft_name,
+          draftFormData
+        );
       } else {
-        response = await biohubApi.draft.createDraft(values.draft_name, draftFormData);
+        response = await biohubApi.draft.createDraft(
+          draftFormData?.project?.project_name || values.draft_name,
+          draftFormData
+        );
       }
 
       setOpenDraftDialog(false);

diff --git a/app/src/features/projects/edit/EditProjectPage.tsx b/app/src/features/projects/edit/EditProjectPage.tsx
@@ -197,14 +197,7 @@ const EditProjectPage: React.FC = (props) => {
               </Typography>
             </Box>
             <Box flex="0 0 auto" className={classes.pageTitleActions}>
-              <Button
-                color="primary"
-                variant="contained"
-                onClick={() => {
-                  if (formikRef && formikRef.current && formikRef.current.values) {
-                    updateProject(formikRef.current?.values);
-                  }
-                }}>
+              <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
                 Save Project
               </Button>
               <Button color="primary" variant="outlined" onClick={handleCancel}>

diff --git a/app/src/features/projects/view/ProjectPage.tsx b/app/src/features/projects/view/ProjectPage.tsx
@@ -85,7 +85,7 @@ const ProjectPage: React.FC = () => {
             <Grid item md={12} lg={8}>
               <Box mb={3}>
                 <Paper elevation={0}>
-                  <SurveysListPage projectForViewData={projectWithDetails} />
+                  <SurveysListPage projectForViewData={projectWithDetails} codes={codes} />
                 </Paper>
               </Box>
               <Box mb={3}>

diff --git a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
@@ -31,18 +31,12 @@ exports[`ProjectDetails renders correctly 1`] = `
         <hr
           class="MuiDivider-root"
         />
-        <div
-          class="MuiBox-root MuiBox-root-8"
-        >
-          <p
-            class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-          >
-            Et ad et in culpa si
-          </p>
-        </div>
+        <span>
+          Et ad et in culpa si
+        </span>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-9"
+        class="MuiBox-root MuiBox-root-8"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -53,7 +47,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <dl
-          class="MuiBox-root MuiBox-root-10"
+          class="MuiBox-root MuiBox-root-9"
         >
           <div
             class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -104,7 +98,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </dl>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-11"
+        class="MuiBox-root MuiBox-root-10"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -115,7 +109,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-12"
+          class="MuiBox-root MuiBox-root-11"
         >
           <div
             class="MuiTypography-root MuiTypography-body1"
@@ -140,7 +134,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-13"
+        class="MuiBox-root MuiBox-root-12"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -157,10 +151,10 @@ exports[`ProjectDetails renders correctly 1`] = `
             class="MuiListItem-root MuiListItem-divider"
           >
             <div
-              class="MuiBox-root MuiBox-root-15"
+              class="MuiBox-root MuiBox-root-14"
             >
               <div
-                class="MuiBox-root MuiBox-root-16"
+                class="MuiBox-root MuiBox-root-15"
               >
                 <span
                   class="MuiTypography-root MuiTypography-body1"
@@ -174,7 +168,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <dl
-                class="MuiBox-root MuiBox-root-17 makeStyles-fundingSourceMeta-14"
+                class="MuiBox-root MuiBox-root-16 makeStyles-fundingSourceMeta-13"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -228,7 +222,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </ul>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-18"
+        class="MuiBox-root MuiBox-root-17"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -239,43 +233,43 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-19"
+          class="MuiBox-root MuiBox-root-18"
         >
           <dl
-            class="MuiBox-root MuiBox-root-21"
+            class="MuiBox-root MuiBox-root-20"
           >
             <div
-              class="MuiBox-root MuiBox-root-22"
+              class="MuiBox-root MuiBox-root-21"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
               >
                 Indigenous
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 First nations code
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               />
             </div>
             <div
-              class="MuiBox-root MuiBox-root-23"
+              class="MuiBox-root MuiBox-root-22"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
               >
                 Other Partnerships
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 3
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 4
               </dd>
@@ -284,7 +278,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-24"
+        class="MuiBox-root MuiBox-root-23"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"