feat: 1594 adjustments for orchard screen (#1599)

Co-authored-by: mgaseta <[email protected]> Co-authored-by: mgaseta <[email protected]> Co-authored-by: Ricardo Campos <[email protected]>
bcgov · Sep 24, 2024 · 62ff7b9 · 62ff7b9
1 parent 7de522b
commit 62ff7b9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-orchard.cy.ts b/frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-orchard.cy.ts
@@ -57,24 +57,22 @@ describe('A Class Seedlot Registration form, Orchard', () => {
       .eq(0)
       .should('have.text', regFormData.orchard.subtitle);
 
-    cy.get('.seedlot-orchard-title-row')
+    cy.get('.seedlot-gamete-title-row')
       .find('h2')
-      .eq(1)
       .should('have.text', regFormData.orchard.gameteTitle);
 
-    cy.get('.seedlot-orchard-title-row')
+    cy.get('.seedlot-gamete-title-row')
       .find('.subtitle-section')
-      .eq(1)
       .should('have.text', regFormData.orchard.gameteSubtitle);
 
     cy.get('.seedlot-orchard-title-row')
       .find('h2')
-      .eq(2)
+      .eq(1)
       .should('have.text', regFormData.orchard.pollenTitle);
 
     cy.get('.seedlot-orchard-title-row')
       .find('.subtitle-section')
-      .eq(2)
+      .eq(1)
       .should('have.text', regFormData.orchard.pollenSubtitle);
   });
 

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/OrchardWarnModal/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/OrchardWarnModal/index.tsx
@@ -9,12 +9,13 @@ interface OrchardWarnModalProps {
   open: boolean;
   setOpen: Function;
   confirmEdit: Function;
+  cancelEdit: Function;
   modalType: keyof orchardModalOptions;
 }
 
 const OrchardWarnModal = (
   {
-    open, setOpen, confirmEdit, modalType
+    open, setOpen, confirmEdit, modalType, cancelEdit
   }: OrchardWarnModalProps
 ) => (
   <Modal
@@ -25,6 +26,7 @@ const OrchardWarnModal = (
     secondaryButtonText={modalConfig[modalType].buttons.secondary}
     open={open}
     onRequestClose={() => {
+      cancelEdit();
       setOpen(false);
     }}
     onRequestSubmit={() => {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -67,6 +67,8 @@ const OrchardStep = ({
   const [modalType, setModalType] = useState<keyof orchardModalOptions>('change');
   // Store the orchard selection until the user has confirmed the warning modal
   const [stagedOrchard, setStagedOrchard] = useState<OptionsInputType | null>(null);
+  const [forceUpdatePrimary, setForceUpdatePrimary] = useState<number>(0);
+  const [forceUpdateSecondary, setForceUpdateSecondary] = useState<number>(0);
 
   const gameticMethodologyQuery = useQuery({
     queryKey: ['gametic-methodologies'],
@@ -187,19 +189,22 @@ const OrchardStep = ({
         orchards
       }
     );
+
+    if (isPrimary) {
+      setForceUpdatePrimary((prev) => prev + 1);
+    } else {
+      setForceUpdateSecondary((prev) => prev + 1);
+    }
   };
 
   // Remove options that are already selected by a user
-  const removeSelectedOption = (data: MultiOptionsObj[]) => {
-    const filteredOptions: MultiOptionsObj[] = structuredClone(data);
-    const orchardId = state.orchards.primaryOrchard.value.code;
-    // The index of a matching orchard in filteredOptions
-    const orchardOptIndex = filteredOptions.findIndex((option) => option.code === orchardId);
-    if (orchardOptIndex > -1) {
-      // Remove found option
-      filteredOptions.splice(orchardOptIndex, 1);
+  const filterOrchardOpts = (codeToFilter: string) => {
+    if (orchardQuery.data) {
+      return orchardQuery.data.filter(
+        (orchards) => orchards.code !== codeToFilter
+      );
     }
-    return filteredOptions;
+    return [];
   };
 
   const isTableEmpty = Object.keys(tableRowData).length === 0;
@@ -217,6 +222,18 @@ const OrchardStep = ({
     }
   };
 
+  const cancelEdit = () => {
+    if (modalType === 'change' && stagedOrchard) {
+      const value = stagedOrchard.id === state.orchards.primaryOrchard.id
+        ? state.orchards.primaryOrchard.value
+        : state.orchards.secondaryOrchard.value;
+      setOrchard(
+        stagedOrchard.id === state.orchards.primaryOrchard.id,
+        value
+      );
+    }
+  };
+
   const renderOrchardButtons = () => {
     if (!isFormSubmitted && !isReview) {
       return state.orchards.secondaryOrchard.enabled
@@ -301,13 +318,14 @@ const OrchardStep = ({
                 <>
                   <ComboBox
                     id={state.orchards.primaryOrchard.id}
+                    key={forceUpdatePrimary}
                     placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                     items={
                       orchardQuery.status === 'success'
-                        ? removeSelectedOption(orchardQuery.data)
+                        ? filterOrchardOpts(state.orchards.secondaryOrchard.value.code)
                         : []
                     }
-                    selectedItem={state.orchards.primaryOrchard.value}
+                    initialSelectedItem={state.orchards.primaryOrchard.value}
                     titleText={
                       orchardStepText.orchardSection.orchardInput.label
                     }
@@ -356,13 +374,14 @@ const OrchardStep = ({
                   <>
                     <ComboBox
                       id={state.orchards.secondaryOrchard.id}
+                      key={forceUpdateSecondary}
                       placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                       items={
                         orchardQuery.status === 'success'
-                          ? removeSelectedOption(orchardQuery.data)
+                          ? filterOrchardOpts(state.orchards.primaryOrchard.value.code)
                           : []
                       }
-                      selectedItem={state.orchards.secondaryOrchard.value}
+                      initialSelectedItem={state.orchards.secondaryOrchard.value}
                       titleText={
                         orchardStepText.orchardSection.orchardInput.secondaryLabel
                       }
@@ -449,7 +468,7 @@ const OrchardStep = ({
         </Column>
       </Row>
       <Row className="orchard-row">
-        <Column sm={4} md={8} lg={16} xlg={12} max={10}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           {
             gameticMethodologyQuery.isFetching
               ? <DropdownSkeleton />
@@ -469,13 +488,14 @@ const OrchardStep = ({
                   onChange={(e: ComboBoxEvent) => setGametic(e, true)}
                   readOnly={isFormSubmitted && !isReview}
                   selectedItem={state.femaleGametic.value}
+                  initialSelectedItem={state.femaleGametic.value}
                 />
               )
           }
         </Column>
       </Row>
       <Row className="orchard-row">
-        <Column sm={4} md={8} lg={16} xlg={12} max={10}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           {
             gameticMethodologyQuery.isFetching
               ? <DropdownSkeleton />
@@ -495,6 +515,7 @@ const OrchardStep = ({
                   onChange={(e: ComboBoxEvent) => setGametic(e, false)}
                   readOnly={isFormSubmitted && !isReview}
                   selectedItem={state.maleGametic.value}
+                  initialSelectedItem={state.maleGametic.value}
                 />
               )
           }
@@ -592,13 +613,14 @@ const OrchardStep = ({
           ? (
             <>
               <Row className="pollen-contam-row">
-                <Column sm={4} md={8} lg={16} xlg={12}>
+                <Column sm={4} md={4} lg={8} xlg={6}>
                   <NumberInput
                     id={state.breedingPercentage.id}
                     name="breedingPercentage"
                     defaultValue={state.breedingPercentage.value}
                     step={10}
                     disableWheel
+                    hideSteppers
                     type="number"
                     label={orchardStepText.pollenSection.breedingPercentage.label}
                     helperText={orchardStepText.pollenSection.breedingPercentage.helper}
@@ -647,6 +669,7 @@ const OrchardStep = ({
         setOpen={setModalOpen}
         modalType={modalType}
         confirmEdit={proceedEdit}
+        cancelEdit={cancelEdit}
       />
     </FlexGrid>
   );