IUCN Frontend - Wiring

api/src/models/project-update.ts

@@ -113,3 +113,38 @@ export class GetPartnershipsData {
       (stakeholder_partnerships?.length && stakeholder_partnerships.map((item: any) => item.name)) || [];
   }
 }
+
+interface IGetIUCN {
+  classification: number;
+  subClassification1: number;
+  subClassification2: number;
+}
+
+/**
+ * Pre-processes GET /projects/{id} IUCN classification data for editing purposes
+ *
+ * @export
+ * @class GetIUCNClassificationData
+ */
+export class GetIUCNClassificationData {
+  classificationDetails: IGetIUCN[];
+
+  constructor(iucnClassificationData?: any[]) {
+    defaultLog.debug({
+      label: 'GetIUCNClassificationData',
+      message: 'params',
+      iucnClassificationData: iucnClassificationData
+    });
+
+    this.classificationDetails =
+      (iucnClassificationData &&
+        iucnClassificationData.map((item: any) => {
+          return {
+            classification: item.classification,
+            subClassification1: item.subclassification1,
+            subClassification2: item.subclassification2
+          };
+        })) ||
+      [];
+  }
+}

api/src/openapi/schemas/project.ts

@@ -227,7 +227,29 @@ const projectUpdateProperties = {
   objectives: { type: 'object', properties: {} },
   location: { type: 'object', properties: {} },
   species: { type: 'object', properties: {} },
-  iucn: { type: 'object', properties: {} },
+  iucn: {
+    type: 'object',
+    properties: {
+      classificationDetails: {
+        type: 'array',
+        items: {
+          title: 'IUCN classification',
+          type: 'object',
+          properties: {
+            classification: {
+              type: 'number'
+            },
+            subClassification1: {
+              type: 'number'
+            },
+            subClassification2: {
+              type: 'number'
+            }
+          }
+        }
+      }
+    }
+  },
   funding: { type: 'object', properties: {} },
   partnerships: { type: 'object', properties: {} }
 };

api/src/paths/project/{projectId}/update.ts

@@ -5,6 +5,7 @@ import { getDBConnection, IDBConnection } from '../../../database/db';
 import { HTTP400, HTTP409 } from '../../../errors/CustomError';
 import {
   GetCoordinatorData,
+  GetIUCNClassificationData,
   GetPartnershipsData,
   PutCoordinatorData,
   PutLocationData,
@@ -19,7 +20,8 @@ import {
 import {
   getCoordinatorByProjectSQL,
   putProjectSQL,
-  getIndigenousPartnershipsByProjectSQL
+  getIndigenousPartnershipsByProjectSQL,
+  getIUCNActionClassificationByProjectSQL
 } from '../../../queries/project/project-update-queries';
 import { getStakeholderPartnershipsByProjectSQL } from '../../../queries/project/project-view-update-queries';
 import { getLogger } from '../../../utils/logger';
@@ -109,7 +111,7 @@ export interface IGetProjectForUpdate {
   objectives: any;
   location: any;
   species: any;
-  iucn: any;
+  iucn: GetIUCNClassificationData | null;
   funding: any;
   partnerships: GetPartnershipsData | null;
 }
@@ -164,6 +166,14 @@ function getProjectForUpdate(): RequestHandler {
         );
       }
 
+      if (entities.includes(GET_ENTITIES.iucn)) {
+        promises.push(
+          getIUCNClassificationData(projectId, connection).then((value) => {
+            results.iucn = value;
+          })
+        );
+      }
+
       await Promise.all(promises);
 
       await connection.commit();
@@ -178,6 +188,24 @@ function getProjectForUpdate(): RequestHandler {
   };
 }
 
+export const getIUCNClassificationData = async (projectId: number, connection: IDBConnection): Promise<any> => {
+  const sqlStatement = getIUCNActionClassificationByProjectSQL(projectId);
+
+  if (!sqlStatement) {
+    throw new HTTP400('Failed to build SQL statement');
+  }
+
+  const response = await connection.query(sqlStatement.text, sqlStatement.values);
+
+  const result = (response && response.rows) || null;
+
+  if (!result) {
+    throw new HTTP400('Failed to get project IUCN data');
+  }
+
+  return new GetIUCNClassificationData(result);
+};
+
 export const getProjectCoordinatorData = async (
   projectId: number,
   connection: IDBConnection

api/src/queries/project/project-update-queries.test.ts

@@ -1,6 +1,9 @@
 import { expect } from 'chai';
 import { describe } from 'mocha';
-import { getIndigenousPartnershipsByProjectSQL } from './project-update-queries';
+import {
+  getIndigenousPartnershipsByProjectSQL,
+  getIUCNActionClassificationByProjectSQL
+} from './project-update-queries';
 
 describe('getIndigenousPartnershipsByProjectSQL', () => {
   it('Null projectId', () => {
@@ -15,3 +18,17 @@ describe('getIndigenousPartnershipsByProjectSQL', () => {
     expect(response).to.not.be.null;
   });
 });
+
+describe('getIUCNActionClassificationByProjectSQL', () => {
+  it('returns null response when null projectId provided', () => {
+    const response = getIUCNActionClassificationByProjectSQL((null as unknown) as number);
+
+    expect(response).to.be.null;
+  });
+
+  it('returns non null response when valid projectId provided', () => {
+    const response = getIUCNActionClassificationByProjectSQL(1);
+
+    expect(response).to.not.be.null;
+  });
+});

api/src/queries/project/project-update-queries.ts

@@ -4,6 +4,56 @@ import { getLogger } from '../../utils/logger';
 
 const defaultLog = getLogger('queries/project/project-update-queries');
 
+/**
+ * SQL query to get IUCN action classifications.
+ *
+ * @param {number} projectId
+ * @returns {SQLStatement} sql query object
+ */
+export const getIUCNActionClassificationByProjectSQL = (projectId: number): SQLStatement | null => {
+  defaultLog.debug({ label: 'getIUCNActionClassificationByProjectSQL', message: 'params', projectId });
+
+  if (!projectId) {
+    return null;
+  }
+
+  const sqlStatement = SQL`
+    SELECT
+      ical1c.id as classification,
+      ical2s.id as subClassification1,
+      ical3s.id as subClassification2
+    FROM
+      project_iucn_action_classification as piac
+    LEFT OUTER JOIN
+      iucn_conservation_action_level_3_subclassification as ical3s
+    ON
+      piac.iucn3_id = ical3s.id
+    LEFT OUTER JOIN
+      iucn_conservation_action_level_2_subclassification as ical2s
+    ON
+      ical3s.iucn2_id = ical2s.id
+    LEFT OUTER JOIN
+      iucn_conservation_action_level_1_classification as ical1c
+    ON
+      ical2s.iucn1_id = ical1c.id
+    WHERE
+      piac.p_id = ${projectId}
+    GROUP BY
+      ical2s.id,
+      ical1c.id,
+      ical3s.id;
+  `;
+
+  defaultLog.debug({
+    label: 'getIUCNActionClassificationByProjectSQL',
+    message: 'sql',
+    'sqlStatement.text': sqlStatement.text,
+    'sqlStatement.values': sqlStatement.values
+  });
+
+  return sqlStatement;
+};
+
 /**
  * SQL query to get project indigenous partnerships.
  * @param {number} projectId

app/src/components/dialog/EditDialog.tsx

@@ -31,7 +31,7 @@ export interface IEditDialogProps {
   component: IEditDialogComponentProps;
 
   /**
-   * error message to display when the error exists
+   * Error message to display when an error exists
    */
   dialogError?: string;
 
@@ -76,6 +76,7 @@ export const EditDialog: React.FC<IEditDialogProps> = (props) => {
         }}>
         {(formikProps) => (
           <Dialog
+            maxWidth="xl"
             open={props.open}
             onClose={props.onClose}
             aria-labelledby="edit-dialog-title"

app/src/components/dialog/__snapshots__/EditDialog.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`EditDialog matches snapshot with error message 1`] = `
       <div
         aria-describedby="edit-dialog-description"
         aria-labelledby="edit-dialog-title"
-        class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiPaper-elevation24 MuiPaper-rounded"
         role="dialog"
       >
         <div
@@ -201,7 +201,7 @@ exports[`EditDialog matches the snapshot with no error message 1`] = `
       <div
         aria-describedby="edit-dialog-description"
         aria-labelledby="edit-dialog-title"
-        class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiPaper-elevation24 MuiPaper-rounded"
         role="dialog"
       >
         <div

app/src/constants/i18n.ts

@@ -16,15 +16,15 @@ export const UploadProjectArtifactsI18N = {
 
 export const EditPartnershipsI18N = {
   editTitle: 'Edit Partnerships',
-  createErrorTitle: 'Error Editing Partnerships',
-  createErrorText:
+  editErrorTitle: 'Error Editing Partnerships',
+  editErrorText:
     'An error has occurred while attempting to edit your partnerships, please try again. If the error persists, please contact your system administrator.'
 };
 
 export const EditObjectivesI18N = {
   editTitle: 'Edit Project Objectives',
-  createErrorTitle: 'Error Editing Project Objectives',
-  createErrorText:
+  editErrorTitle: 'Error Editing Project Objectives',
+  editErrorText:
     'An error has occurred while attempting to edit your project objectives, please try again. If the error persists, please contact your system administrator.'
 };
 
@@ -37,14 +37,21 @@ export const EditCoordinatorI18N = {
 
 export const EditGeneralInformationI18N = {
   editTitle: 'Edit General Information',
-  createErrorTitle: 'Error Editing General Information',
-  createErrorText:
+  editErrorTitle: 'Error Editing General Information',
+  editErrorText:
     'An error has occurred while attempting to edit your general information, please try again. If the error persists, please contact your system administrator.'
 };
 
 export const EditLocationBoundaryI18N = {
   editTitle: 'Edit Location / Project Boundary',
-  createErrorTitle: 'Error Editing Location / Project Boundary',
-  createErrorText:
+  editErrorTitle: 'Error Editing Location / Project Boundary',
+  editErrorText:
     'An error has occurred while attempting to edit your location boundary, please try again. If the error persists, please contact your system administrator.'
 };
+
+export const EditIUCNI18N = {
+  editTitle: 'Edit IUCN Classification',
+  editErrorTitle: 'Error Editing IUCN Classification',
+  editErrorText:
+    'An error has occurred while attempting to edit your IUCN classification, please try again. If the error persists, please contact your system administrator.'
+};

app/src/features/projects/components/ProjectIUCNForm.tsx

@@ -23,8 +23,9 @@ const useStyles = makeStyles((theme) => ({
     overflowX: 'hidden'
   },
   iucnInput: {
-    flex: '0 0 auto',
-    width: '33.333%'
+    flex: '1 0 200px',
+    width: '33.333%',
+    maxWidth: '200px'
   }
 }));
 
@@ -97,8 +98,8 @@ const ProjectIUCNForm: React.FC<IProjectIUCNFormProps> = (props) => {
                 return (
                   <Grid item xs={12} key={index}>
                     <Box display="flex" alignItems="center" mt={-2}>
-                      <Box display="flex" className={classes.iucnInputContainer}>
-                        <Box className={classes.iucnInput} my={2} pr={2}>
+                      <Box display="flex" className={classes.iucnInputContainer} flexWrap="wrap">
+                        <Box className={classes.iucnInput} my={2} mr={2}>
                           <FormControl variant="outlined" fullWidth>
                             <InputLabel id="classification">Classification</InputLabel>
                             <Select
@@ -123,7 +124,7 @@ const ProjectIUCNForm: React.FC<IProjectIUCNFormProps> = (props) => {
                             <FormHelperText>{classificationMeta.error}</FormHelperText>
                           </FormControl>
                         </Box>
-                        <Box className={classes.iucnInput} my={2} pr={2}>
+                        <Box className={classes.iucnInput} my={2} mr={2}>
                           <FormControl variant="outlined" fullWidth>
                             <InputLabel id="subClassification1">Sub-classification</InputLabel>
                             <Select
@@ -151,7 +152,7 @@ const ProjectIUCNForm: React.FC<IProjectIUCNFormProps> = (props) => {
                             <FormHelperText>{subClassification1Meta.error}</FormHelperText>
                           </FormControl>
                         </Box>
-                        <Box className={classes.iucnInput} my={2}>
+                        <Box my={2} mr={2} className={classes.iucnInput}>
                           <FormControl variant="outlined" fullWidth>
                             <InputLabel id="subClassification2">Sub-classification</InputLabel>
                             <Select

app/src/features/projects/view/ProjectDetails.tsx

@@ -71,7 +71,7 @@ const ProjectDetails: React.FC<IProjectDetailsProps> = (props) => {
       <Box mb={4}>
         <Paper>
           <Box m={3}>
-            <IUCNClassification projectForViewData={projectForViewData} />
+            <IUCNClassification projectForViewData={projectForViewData} codes={codes} />
           </Box>
         </Paper>
       </Box>