Grievance People Update (#4483)

* upd fields

* people changes

* update IndividualDataUpdateService

* fix update country

* add edit people gf

* size smol

* add test

* imports

* fix text

* build fix

* fix country display

---------

Co-authored-by: Maciej Szewczyk <maciej.szewczyk@tivix.com>
Co-authored-by: Maciej Szewczyk <34482854+mmaciekk@users.noreply.github.com>

src/frontend/src/components/grievances/EditHouseholdDataChange/EditHouseholdDataChange.tsx

@@ -7,13 +7,11 @@ import { useTranslation } from 'react-i18next';
 import {
   AllHouseholdsQuery,
   useAllEditHouseholdFieldsQuery,
-  useAllEditPeopleFieldsQuery,
   useHouseholdLazyQuery,
 } from '@generated/graphql';
 import { LoadingComponent } from '@core/LoadingComponent';
 import { Title } from '@core/Title';
 import { EditHouseholdDataChangeFieldRow } from './EditHouseholdDataChangeFieldRow';
-import { useProgramContext } from 'src/programContext';
 
 export interface EditHouseholdDataChangeProps {
   values;
@@ -25,7 +23,6 @@ export function EditHouseholdDataChange({
 }: EditHouseholdDataChangeProps): ReactElement {
   const { t } = useTranslation();
   const location = useLocation();
-  const { isSocialDctType } = useProgramContext();
   const isEditTicket = location.pathname.includes('edit-ticket');
   const household: AllHouseholdsQuery['allHouseholds']['edges'][number]['node'] =
     values.selectedHousehold;
@@ -50,22 +47,14 @@ export function EditHouseholdDataChange({
   }, []);
   const { data: householdFieldsData, loading: householdFieldsLoading } =
     useAllEditHouseholdFieldsQuery();
-  const { data: allEditPeopleFieldsData, loading: allEditPeopleFieldsLoading } =
-    useAllEditPeopleFieldsQuery();
 
-  const fieldsByDctType = isSocialDctType
-    ? allEditPeopleFieldsData?.allEditPeopleFieldsAttributes
-    : householdFieldsData?.allEditHouseholdFieldsAttributes;
+  const householdFieldsDict =
+    householdFieldsData?.allEditHouseholdFieldsAttributes;
 
   if (!household) {
     return <div>{t('You have to select a household earlier')}</div>;
   }
-  if (
-    fullHouseholdLoading ||
-    householdFieldsLoading ||
-    allEditPeopleFieldsLoading ||
-    !fullHousehold
-  ) {
+  if (fullHouseholdLoading || householdFieldsLoading || !fullHousehold) {
     return <LoadingComponent />;
   }
   const notAvailableItems = (values.householdDataUpdateFields || []).map(
@@ -89,7 +78,7 @@ export function EditHouseholdDataChange({
                     itemValue={item}
                     index={index}
                     household={fullHousehold.household}
-                    fields={fieldsByDctType}
+                    fields={householdFieldsDict}
                     notAvailableFields={notAvailableItems}
                     onDelete={() => arrayHelpers.remove(index)}
                     values={values}

src/frontend/src/components/grievances/EditPeopleDataChange/CurrentValue.tsx

@@ -0,0 +1,69 @@
+import { Grid } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { AllAddIndividualFieldsQuery } from '@generated/graphql';
+import { LabelizedField } from '@core/LabelizedField';
+import { GrievanceFlexFieldPhotoModal } from '../GrievancesPhotoModals/GrievanceFlexFieldPhotoModal';
+import { GrievanceFlexFieldPhotoModalNewIndividual } from '../GrievancesPhotoModals/GrievanceFlexFieldPhotoModalNewIndividual';
+import { ReactElement } from 'react';
+
+export interface CurrentValueProps {
+  field: AllAddIndividualFieldsQuery['allAddIndividualsFieldsAttributes'][number];
+  value;
+  values;
+}
+
+export function CurrentValue({
+  field,
+  value,
+  values,
+}: CurrentValueProps): ReactElement {
+  const location = useLocation();
+  const isNewTicket = location.pathname.indexOf('new-ticket') !== -1;
+
+  const { t } = useTranslation();
+  let displayValue = value;
+  switch (field?.type) {
+    case 'SELECT_ONE':
+      displayValue =
+        field.choices.find((item) => item.value === value)?.labelEn || '-';
+      break;
+    case 'SELECT_MANY':
+      displayValue =
+        field.choices.find((item) => item.value === value)?.labelEn || '-';
+      if (value instanceof Array) {
+        displayValue = value
+          .map(
+            (choice) =>
+              field.choices.find((item) => item.value === choice)?.labelEn ||
+              '-',
+          )
+          .join(', ');
+      }
+      break;
+    case 'BOOL':
+      /* eslint-disable-next-line no-nested-ternary */
+      displayValue = value === null ? '-' : value ? t('Yes') : t('No');
+      break;
+    case 'IMAGE':
+      return isNewTicket ? (
+        <Grid item xs={3}>
+          <GrievanceFlexFieldPhotoModalNewIndividual
+            flexField={field}
+            individualId={values?.selectedIndividual?.id || null}
+          />
+        </Grid>
+      ) : (
+        <Grid item xs={3}>
+          <GrievanceFlexFieldPhotoModal isCurrent isIndividual field={field} />
+        </Grid>
+      );
+    default:
+      displayValue = value;
+  }
+  return (
+    <Grid item xs={3}>
+      <LabelizedField label="Current Value" value={displayValue} />
+    </Grid>
+  );
+}

src/frontend/src/components/grievances/EditPeopleDataChange/EditPeopleDataChange.tsx

@@ -0,0 +1,127 @@
+import { Button, Grid, Typography } from '@mui/material';
+import { AddCircleOutline } from '@mui/icons-material';
+import { useLocation } from 'react-router-dom';
+import { FieldArray } from 'formik';
+import { ReactElement, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import {
+  AllIndividualsQuery,
+  useAllEditPeopleFieldsQuery,
+  useIndividualLazyQuery,
+} from '@generated/graphql';
+import { LoadingComponent } from '@core/LoadingComponent';
+import { Title } from '@core/Title';
+import { EditPeopleDataChangeFieldRow } from './EditPeopleDataChangeFieldRow';
+
+const BoxWithBorders = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.hctPalette.lighterGray};
+  padding: 15px 0;
+`;
+
+export interface EditPeopleDataChangeProps {
+  values;
+  setFieldValue;
+  form;
+  field;
+}
+
+export function EditPeopleDataChange({
+  values,
+  setFieldValue,
+}: EditPeopleDataChangeProps): ReactElement {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const isEditTicket = location.pathname.indexOf('edit-ticket') !== -1;
+  const individual: AllIndividualsQuery['allIndividuals']['edges'][number]['node'] =
+    values.selectedIndividual;
+  const { data: editPeopleFieldsData, loading: editPeopleFieldsLoading } =
+    useAllEditPeopleFieldsQuery();
+
+  const [
+    getIndividual,
+    { data: fullIndividual, loading: fullIndividualLoading },
+  ] = useIndividualLazyQuery({ variables: { id: individual?.id } });
+
+  useEffect(() => {
+    if (individual) {
+      getIndividual();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.selectedIndividual]);
+
+  useEffect(() => {
+    if (
+      !values.individualDataUpdateFields ||
+      values.individualDataUpdateFields.length === 0
+    ) {
+      setFieldValue('individualDataUpdateFields', [
+        { fieldName: null, fieldValue: null },
+      ]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!individual) {
+    return <div>{t('You have to select an individual earlier')}</div>;
+  }
+  if (
+    editPeopleFieldsLoading ||
+    fullIndividualLoading ||
+    editPeopleFieldsLoading ||
+    !fullIndividual
+  ) {
+    return <LoadingComponent />;
+  }
+  const notAvailableItems = (values.individualDataUpdateFields || []).map(
+    (fieldItem) => fieldItem.fieldName,
+  );
+
+  return (
+    <>
+      {!isEditTicket && (
+        <BoxWithBorders>
+          <Title>
+            <Typography variant="h6">{t('Bio Data')}</Typography>
+          </Title>
+          <Grid container spacing={3}>
+            <FieldArray
+              name="individualDataUpdateFields"
+              render={(arrayHelpers) => (
+                <>
+                  {values.individualDataUpdateFields.map((item, index) => (
+                    <EditPeopleDataChangeFieldRow
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`${index}-${item?.fieldName}`}
+                      itemValue={item}
+                      index={index}
+                      individual={fullIndividual.individual}
+                      fields={
+                        editPeopleFieldsData.allEditPeopleFieldsAttributes
+                      }
+                      notAvailableFields={notAvailableItems}
+                      onDelete={() => arrayHelpers.remove(index)}
+                      values={values}
+                    />
+                  ))}
+                  <Grid item xs={4}>
+                    <Button
+                      color="primary"
+                      onClick={() => {
+                        arrayHelpers.push({ fieldName: null, fieldValue: '' });
+                      }}
+                      startIcon={<AddCircleOutline />}
+                      data-cy="button-add-new-field"
+                      disabled={isEditTicket}
+                    >
+                      {t('Add new field')}
+                    </Button>
+                  </Grid>
+                </>
+              )}
+            />
+          </Grid>
+        </BoxWithBorders>
+      )}
+    </>
+  );
+}

src/frontend/src/components/grievances/EditPeopleDataChange/EditPeopleDataChangeField.tsx

@@ -0,0 +1,110 @@
+import { Grid } from '@mui/material';
+import { Field } from 'formik';
+import { useLocation } from 'react-router-dom';
+import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
+import { FormikDateField } from '@shared/Formik/FormikDateField';
+import { FormikDecimalField } from '@shared/Formik/FormikDecimalField';
+import { FormikFileField } from '@shared/Formik/FormikFileField';
+import { FormikSelectField } from '@shared/Formik/FormikSelectField';
+import { FormikTextField } from '@shared/Formik/FormikTextField';
+import { AllAddIndividualFieldsQuery } from '@generated/graphql';
+import { FormikBoolFieldGrievances } from '../FormikBoolFieldGrievances';
+import { GrievanceFlexFieldPhotoModalEditable } from '../GrievancesPhotoModals/GrievanceFlexFieldPhotoModalEditable';
+import { ReactElement } from 'react';
+
+export interface EditPeopleDataChangeFieldProps {
+  field: AllAddIndividualFieldsQuery['allAddIndividualsFieldsAttributes'][number];
+  name: string;
+}
+export const EditPeopleDataChangeField = ({
+  name,
+  field,
+}: EditPeopleDataChangeFieldProps): ReactElement => {
+  const location = useLocation();
+  const isNewTicket = location.pathname.indexOf('new-ticket') !== -1;
+  const isEditTicket = location.pathname.indexOf('edit-ticket') !== -1;
+
+  let fieldProps;
+  if (!field) return null;
+
+  switch (field.type) {
+    case 'DECIMAL':
+      fieldProps = {
+        fullWidth: true,
+        component: FormikDecimalField,
+      };
+      break;
+    case 'INTEGER':
+      fieldProps = {
+        component: FormikTextField,
+        type: 'number',
+      };
+      break;
+    case 'STRING':
+      fieldProps = {
+        fullWidth: true,
+        component: FormikTextField,
+      };
+      break;
+    case 'SELECT_ONE':
+      fieldProps = {
+        choices: field.choices,
+        fullWidth: true,
+        component: FormikSelectField,
+      };
+      break;
+    case 'SELECT_MANY':
+      fieldProps = {
+        choices: field.choices,
+        fullWidth: true,
+        component: FormikSelectField,
+        multiple: true,
+      };
+      break;
+    case 'SELECT_MULTIPLE':
+      fieldProps = {
+        choices: field.choices,
+        fullWidth: true,
+        component: FormikSelectField,
+      };
+      break;
+    case 'DATE':
+      fieldProps = {
+        component: FormikDateField,
+        fullWidth: true,
+        decoratorEnd: <CalendarTodayRoundedIcon color="disabled" />,
+      };
+      break;
+
+    case 'BOOL':
+      fieldProps = {
+        component: FormikBoolFieldGrievances,
+        required: field.required,
+      };
+      break;
+    case 'IMAGE':
+      fieldProps = {
+        component: isNewTicket
+          ? FormikFileField
+          : GrievanceFlexFieldPhotoModalEditable,
+        flexField: field,
+        isIndividual: true,
+      };
+      break;
+    default:
+      fieldProps = {};
+  }
+  return (
+    <Grid item xs={4}>
+      <Field
+        name={name}
+        variant="outlined"
+        label={field.labelEn}
+        required={field.required}
+        data-cy={`input-individual-data-${field.labelEn}`}
+        disabled={isEditTicket}
+        {...fieldProps}
+      />
+    </Grid>
+  );
+};