Merge branch 'dev' into psp-9475-uiux-arrow-alignment

bcgov · Nov 8, 2024 · e15f77c · e15f77c
2 parents 96ee2ec + 9032528
commit e15f77c
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 56 deletions.
diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.7.0-93.2</Version>
-    <Version>5.7.0-93.2</Version>
+    <Version>5.7.0-93.3</Version>
+    <Version>5.7.0-93.3</Version>
     <AssemblyVersion>5.7.0.93</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>

diff --git a/source/frontend/package.json b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.7.0-93.2",
+  "version": "5.7.0-93.3",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",

diff --git a/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx b/source/frontend/src/features/documents/documentDetail/DocumentDetailForm.tsx
@@ -1,4 +1,5 @@
 import { Formik, FormikProps } from 'formik';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import styled from 'styled-components';
@@ -17,6 +18,7 @@ import { ApiGen_CodeTypes_DocumentRelationType } from '@/models/api/generated/Ap
 import { ApiGen_Concepts_DocumentType } from '@/models/api/generated/ApiGen_Concepts_DocumentType';
 import { ApiGen_Mayan_DocumentTypeMetadataType } from '@/models/api/generated/ApiGen_Mayan_DocumentTypeMetadataType';
 import { ApiGen_Requests_DocumentUpdateRequest } from '@/models/api/generated/ApiGen_Requests_DocumentUpdateRequest';
+import { exists } from '@/utils/utils';
 
 import { StyledH3, StyledScrollable } from '../commonStyles';
 import { ComposedDocument, DocumentUpdateFormData } from '../ComposedDocument';
@@ -58,6 +60,34 @@ export const DocumentDetailForm: React.FunctionComponent<
     [props.documentTypes],
   );
 
+  const [documentTypePurpose, setDocumentTypePurpose] = useState(null);
+
+  const matchDocumentType = useCallback(
+    (documentTypeId: number) => {
+      const purpose = props.documentTypes.find(x => x.id === documentTypeId)?.documentTypePurpose;
+
+      setDocumentTypePurpose(purpose);
+    },
+    [props.documentTypes],
+  );
+
+  useEffect(() => {
+    const documentTypeId = Number(props.formikRef.current?.values?.documentTypeId);
+    matchDocumentType(documentTypeId);
+  }, [matchDocumentType, props.formikRef]);
+
+  const onDocumentTypeChange = useCallback(
+    async (changeEvent: ChangeEvent<HTMLInputElement>) => {
+      if (changeEvent.target.value) {
+        const documentTypeId = Number(changeEvent.target.value);
+        matchDocumentType(documentTypeId);
+      }
+
+      props.onDocumentTypeChange(changeEvent);
+    },
+    [matchDocumentType, props],
+  );
+
   return (
     <StyledContainer>
       <LoadingBackdrop show={props.isLoading} />
@@ -105,13 +135,18 @@ export const DocumentDetailForm: React.FunctionComponent<
                         }
                         field={'documentTypeId'}
                         options={documentTypeOptions}
-                        onChange={props.onDocumentTypeChange}
+                        onChange={onDocumentTypeChange}
                         disabled={
                           documentTypeOptions.length === 1 ||
                           props.relationshipType === ApiGen_CodeTypes_DocumentRelationType.Templates
                         }
                       />
                     </SectionField>
+                    {exists(documentTypePurpose) && (
+                      <SectionField label={null}>
+                        <StyledPurposeText>{documentTypePurpose}</StyledPurposeText>
+                      </SectionField>
+                    )}
                     <SectionField label="Status" labelWidth="4">
                       <Select field="documentStatusCode" options={documentStatusTypes} />
                     </SectionField>
@@ -161,3 +196,8 @@ export const DocumentDetailForm: React.FunctionComponent<
 export const StyledDiv = styled.div`
   margin-bottom: 1rem;
 `;
+
+const StyledPurposeText = styled.div`
+  color: black;
+  font-style: italic;
+`;
diff --git a/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx b/source/frontend/src/features/documents/documentDetail/DocumentDetailView.tsx
@@ -8,6 +8,7 @@ import { SectionField } from '@/components/common/Section/SectionField';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import Claims from '@/constants/claims';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
+import { exists } from '@/utils';
 
 import { StyledH3, StyledNoData, StyledScrollable } from '../commonStyles';
 import { ComposedDocument } from '../ComposedDocument';
@@ -31,6 +32,9 @@ export const DocumentDetailView: React.FunctionComponent<
   const documentTypeLabel =
     props.document.pimsDocumentRelationship?.document?.documentType?.documentTypeDescription;
 
+  const documentTypePurpose =
+    props.document.pimsDocumentRelationship?.document?.documentType?.documentTypePurpose;
+
   return (
     <StyledContainer>
       <LoadingBackdrop show={props.isLoading} />
@@ -70,6 +74,11 @@ export const DocumentDetailView: React.FunctionComponent<
             >
               {documentTypeLabel}
             </SectionField>
+            {exists(documentTypePurpose) && (
+              <SectionField label={null}>
+                <StyledPurposeText>{documentTypePurpose}</StyledPurposeText>
+              </SectionField>
+            )}
             <SectionField label="Status" labelWidth="4">
               {props.document.pimsDocumentRelationship?.document?.statusTypeCode?.description}
             </SectionField>
@@ -99,3 +108,8 @@ const RightFlexDiv = styled.div`
   display: flex;
   flex-direction: row-reverse;
 `;
+
+const StyledPurposeText = styled.div`
+  color: black;
+  font-style: italic;
+`;