FEAT: create new unit from question form (#119)

* Added navigation link * removed comments * Put css in one place * Fix: Some modals missing close modal button * fix: follow the same modal design pattern * FEAT: create new unit from question form * e2e test for add unit within question form feature * Fix: replaced type any with correct type * fix: add unit autoselect partially done * Fix: default selection issue fixed * Fix: fixed add new unit e2e test in number field * Fix: cleanup for some testing codes * Fix: improved test description
UserOfficeProject · Dec 28, 2022 · 8596363 · 8596363
1 parent f5d8ca9
commit 8596363
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 6 deletions.
diff --git a/apps/user-office-frontend-e2e/cypress/integration/templates_basic.ts b/apps/user-office-frontend-e2e/cypress/integration/templates_basic.ts
@@ -906,6 +906,44 @@ context('Template tests', () => {
       });
     });
 
+    it('should be able to create new unit from the Unit field', () => {
+      cy.login('officer');
+      cy.visit('/');
+
+      cy.navigateToTemplatesSubmenu('Proposal');
+      cy.contains(initialDBData.template.name)
+        .parent()
+        .find("[aria-label='Edit']")
+        .first()
+        .click();
+
+      cy.get('[data-cy=show-more-button]').first().click();
+
+      cy.get('[data-cy=add-question-menu-item]').first().click();
+
+      cy.get('[data-cy=questionPicker] [data-cy=show-more-button]')
+        .first()
+        .click();
+
+      cy.contains('Add Number').click();
+
+      cy.get('[data-cy=units]')
+        .find('#config-units')
+        .type('test_cannot_be_found');
+      cy.get('[data-cy=add-button]').click();
+      cy.get('[data-cy="unit-id"]').clear().type(numberQuestion);
+      cy.get('[data-cy="unit-name"]').clear().type(numberQuestion);
+      cy.get('[data-cy="unit-quantity"]').click();
+      cy.get('[role="presentation"] [role="option"]').first().click();
+      cy.get('[data-cy="unit-symbol"]').clear().type(numberQuestion);
+      cy.get('[data-cy="unit-siConversionFormula"]').clear().type('x');
+      cy.get('[data-cy=unit-modal] [data-cy=submit]').click();
+      cy.get('[data-tag-index=0] > span').should(
+        'include.text',
+        numberQuestion
+      );
+    });
+
     it('should render the Number field accepting only positive, negative numbers if set', () => {
       const generateId = () =>
         `${faker.lorem.word()}_${faker.lorem.word()}_${faker.lorem.word()}`;

diff --git a/.../src/components/questionary/questionaryComponents/NumberInput/QuestionNumberInputForm.tsx b/.../src/components/questionary/questionaryComponents/NumberInput/QuestionNumberInputForm.tsx
@@ -1,5 +1,8 @@
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
 import LaunchIcon from '@mui/icons-material/Launch';
 import Autocomplete from '@mui/lab/Autocomplete';
+import { Button, IconButton } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
 import MaterialTextField from '@mui/material/TextField';
@@ -10,11 +13,14 @@ import React, { FC, useState } from 'react';
 import * as Yup from 'yup';
 
 import FormikUIAutocomplete from 'components/common/FormikUIAutocomplete';
+import InputDialog from 'components/common/InputDialog';
 import TitledContainer from 'components/common/TitledContainer';
 import { QuestionFormProps } from 'components/questionary/QuestionaryComponentRegistry';
 import { QuestionFormShell } from 'components/questionary/questionaryComponents/QuestionFormShell';
-import { NumberInputConfig, NumberValueConstraint } from 'generated/sdk';
+import CreateUnit from 'components/settings/unitList/CreateUnit';
+import { NumberInputConfig, NumberValueConstraint, Unit } from 'generated/sdk';
 import { useUnitsData } from 'hooks/settings/useUnitData';
+import useDataApiWithFeedback from 'utils/useDataApiWithFeedback';
 import { useNaturalKeySchema } from 'utils/userFieldValidationSchema';
 
 const useStyles = makeStyles((theme) => ({
@@ -25,16 +31,38 @@ const useStyles = makeStyles((theme) => ({
   textRightAlign: {
     textAlign: 'right',
   },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
 }));
 
 export const QuestionNumberForm: FC<QuestionFormProps> = (props) => {
+  const [show, setShow] = useState(false);
   const field = props.question;
   const numberConfig = props.question.config as NumberInputConfig;
   const naturalKeySchema = useNaturalKeySchema(field.naturalKey);
-  const { units } = useUnitsData();
+  const { units, setUnitsWithLoading } = useUnitsData();
+  const { api } = useDataApiWithFeedback();
   const classes = useStyles();
   const [selectedUnits, setSelectedUnits] = useState(numberConfig.units);
 
+  const onCreated = (unitAdded: Unit | null): void => {
+    api()
+      .getUnits()
+      .then((result) => {
+        if (result.units) {
+          setUnitsWithLoading(result.units);
+          setShow(false);
+        }
+      })
+      .catch((err) => console.log(err));
+
+    const newUnits = [...selectedUnits, unitAdded] as Unit[];
+    setSelectedUnits(newUnits);
+  };
+
   return (
     <QuestionFormShell
       {...props}
@@ -101,14 +129,35 @@ export const QuestionNumberForm: FC<QuestionFormProps> = (props) => {
                 id="config-units"
                 multiple
                 options={units}
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                noOptionsText={
+                  <>
+                    No options - &nbsp;
+                    <Button
+                      onClick={() => setShow(true)}
+                      variant="outlined"
+                      data-cy="add-button"
+                      color="primary"
+                      startIcon={<AddCircleOutlineIcon />}
+                    >
+                      Add new unit
+                    </Button>
+                  </>
+                }
                 getOptionLabel={({ unit, symbol, quantity }) =>
                   `${symbol} (${unit}) - ${quantity}`
                 }
-                renderInput={(params) => (
-                  <MaterialTextField {...params} label="Units" margin="none" />
-                )}
+                renderInput={(params) => {
+                  return (
+                    <MaterialTextField
+                      {...params}
+                      label="Units"
+                      margin="none"
+                    />
+                  );
+                }}
                 onChange={(_event, newValue) => {
-                  setSelectedUnits(newValue);
+                  setSelectedUnits(newValue as Unit[]);
                   setFieldValue('config.units', newValue);
                 }}
                 value={selectedUnits ?? undefined}
@@ -155,6 +204,28 @@ export const QuestionNumberForm: FC<QuestionFormProps> = (props) => {
               ]}
             />
           </TitledContainer>
+          <InputDialog
+            aria-labelledby="simple-modal-title"
+            aria-describedby="simple-modal-description"
+            data-cy="unit-modal"
+            open={show}
+            fullWidth={true}
+            onClose={(_, reason) => {
+              if (reason && reason == 'backdropClick') return;
+              setShow(false);
+            }}
+          >
+            <IconButton
+              className={classes.closeButton}
+              data-cy="close-modal-btn"
+              onClick={() => {
+                setShow(false);
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+            <CreateUnit close={onCreated} unit={null} />
+          </InputDialog>
         </>
       )}
     </QuestionFormShell>