LF-4384: End to end animal details

packages/api/src/controllers/animalBatchController.js

@@ -124,6 +124,11 @@ const animalBatchController = {
           'origin_id',
           'group_ids',
           'animal_batch_use_relationships',
+          'birth_date',
+          'dam',
+          'sire',
+          'brought_in_date',
+          'weaning_date',
         ];
 
         // select only allowed properties to edit

packages/api/src/middleware/validation/checkAnimalOrBatch.js

@@ -396,7 +396,7 @@ const getRecordIfExists = async (animalOrBatch, animalOrBatchKey, farm_id) => {
   return await AnimalOrBatchModel[animalOrBatchKey]
     .query()
     .findById(animalOrBatch.id)
-    .where({ farm_id })
+    .where({ farm_id, animal_removal_reason_id: null })
     .whereNotDeleted()
     .withGraphFetched(relations);
 };

packages/webapp/src/App.jsx

@@ -24,11 +24,11 @@ import { NotistackSnackbar } from './containers/Snackbar/NotistackSnackbar';
 import { OfflineDetector } from './containers/hooks/useOfflineDetector/OfflineDetector';
 import styles from './styles.module.scss';
 import Routes from './routes';
-import { ANIMALS_INVENTORY_URL } from './util/siteMapConstants';
+import { ANIMALS_INVENTORY_URL, ANIMALS_URL } from './util/siteMapConstants';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
-  const FULL_WIDTH_ROUTES = ['/map', ANIMALS_INVENTORY_URL];
+  const FULL_WIDTH_ROUTES = ['/map', ANIMALS_INVENTORY_URL, ANIMALS_URL];
   const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
   return (

packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx

@@ -83,6 +83,7 @@ type ContainerWithButtonsProps = {
   children: ReactNode;
   contentClassName?: string;
   isCompactView?: boolean;
+  showMenu: boolean;
   isEditing?: boolean;
   options: { label: ReactNode; onClick: () => void }[];
   onBack: () => void;
@@ -93,6 +94,7 @@ const ContainerWithButtons = ({
   children,
   contentClassName,
   isCompactView,
+  showMenu = true,
   isEditing,
   options,
   onBack,
@@ -106,16 +108,20 @@ const ContainerWithButtons = ({
       <div className={clsx(styles.content, contentClassName)}>{children}</div>
       <div className={styles.statusAndButton}>
         {!isCompactView && isEditing ? <div>{t('common:EDITING')}</div> : null}
-        <MeatballsMenu
-          options={options}
-          classes={{ button: isEditing ? styles.editingStatusButton : '' }}
-        />
+        {showMenu && (
+          <MeatballsMenu
+            disabled={!!isEditing}
+            options={options}
+            classes={{ button: isEditing ? styles.editingStatusButton : '' }}
+          />
+        )}
       </div>
     </div>
   );
 };
 
 export type AnimalSingleViewHeaderProps = {
+  showMenu: boolean;
   isEditing?: boolean;
   onEdit: () => void;
   onRemove: () => void;
@@ -128,6 +134,7 @@ export type AnimalSingleViewHeaderProps = {
 };
 
 const AnimalSingleViewHeader = ({
+  showMenu = true,
   isEditing,
   onEdit,
   onRemove,
@@ -163,7 +170,7 @@ const AnimalSingleViewHeader = ({
     { label: <MenuItem iconName="TRASH" text={t('common:REMOVE')} />, onClick: onRemove },
   ];
 
-  const commonProp = { t, isEditing, isCompactView, options: menuOptions, onBack };
+  const commonProp = { t, showMenu, isEditing, isCompactView, options: menuOptions, onBack };
 
   const renderCompactHeader = () => (
     <div>

packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss

@@ -82,7 +82,8 @@
   padding-left: 16px;
 }
 
-.editingStatusButton {
+.editingStatusButton,
+.editingStatusButton:disabled {
   background: var(--Btn-primary-hover);
   box-shadow: 1px 1px 0px 0px var(--Colors-Primary-Primary-teal-300);
 
@@ -152,6 +153,8 @@
   bottom: 8px;
 
   height: 24px;
+  min-width: 20px;
+  max-width: 44px;
   padding: 4px;
   border-radius: 2px;
   background: var(--Colors-Accent---singles-Purple-light);
@@ -160,6 +163,10 @@
   color: var(--Colors-Accent---singles-Purple-full);
   font-size: 12px;
   font-weight: 600;
+  text-align: center;
+
+  /* Counts with more than five digits will be visually cut off */
+  overflow: hidden;
 }
 
 .desktopBasicInfo {

packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx

@@ -13,10 +13,16 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode, useEffect, useRef, useState } from 'react';
-import { UseFormHandleSubmit, FieldValues, FormState, UseFormReset } from 'react-hook-form';
+import { ReactNode, useEffect, useState } from 'react';
+import {
+  UseFormHandleSubmit,
+  FieldValues,
+  FormState,
+  UseFormReset,
+  UseFormGetValues,
+} from 'react-hook-form';
 import { History } from 'history';
-import StepperProgressBar from '../../StepperProgressBar';
+import StepperProgressBar, { StepperProgressBarProps } from '../../StepperProgressBar';
 import FloatingContainer from '../../FloatingContainer';
 import FormNavigationButtons from '../FormNavigationButtons';
 import FixedHeaderContainer from '../../Animals/FixedHeaderContainer';
@@ -45,6 +51,7 @@ interface WithStepperProgressBarProps {
   onCancel: () => void;
   onGoForward: () => void;
   reset: UseFormReset<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
   formState: FormState<FieldValues>;
   handleSubmit: UseFormHandleSubmit<FieldValues>;
   setFormResultData: (data: any) => void;
@@ -70,6 +77,7 @@ export const WithStepperProgressBar = ({
   onGoForward,
   handleSubmit,
   reset,
+  getValues,
   formState: { isValid, isDirty },
   setFormResultData,
   isEditing,
@@ -109,6 +117,7 @@ export const WithStepperProgressBar = ({
     if (isFinalStep) {
       setIsSaving(true);
       await handleSubmit((data: FieldValues) => onSave(data, onGoForward, setFormResultData))();
+      reset(getValues());
       setIsSaving(false);
       setIsEditing?.(false);
       return;
@@ -134,17 +143,12 @@ export const WithStepperProgressBar = ({
   };
 
   return (
-    <FixedHeaderContainer
-      header={
-        isSingleStep ? null : (
-          <StepperProgressBar
-            {...stepperProgressBarConfig}
-            title={stepperProgressBarTitle}
-            steps={steps.map(({ title }) => title)}
-            activeStep={activeStepIndex}
-          />
-        )
-      }
+    <StepperProgressBarWrapper
+      isSingleStep={isSingleStep}
+      {...stepperProgressBarConfig}
+      title={stepperProgressBarTitle}
+      steps={steps.map(({ title }) => title)}
+      activeStep={activeStepIndex}
     >
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
@@ -166,6 +170,27 @@ export const WithStepperProgressBar = ({
           handleCancel={handleCancel}
         />
       )}
+    </StepperProgressBarWrapper>
+  );
+};
+
+type StepperProgressBarWrapperProps = StepperProgressBarProps & {
+  children: ReactNode;
+  isSingleStep: boolean;
+};
+
+const StepperProgressBarWrapper = ({
+  children,
+  isSingleStep,
+  ...stepperProgressBarProps
+}: StepperProgressBarWrapperProps) => {
+  if (isSingleStep) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FixedHeaderContainer header={<StepperProgressBar {...stepperProgressBarProps} />}>
+      {children}
     </FixedHeaderContainer>
   );
 };

packages/webapp/src/components/Form/DropDownButton/index.jsx

@@ -29,6 +29,7 @@ export default function DropdownButton({
   type,
   classes: propClasses = {},
   menuPositionOffset,
+  disabled = false,
 }) {
   const classes = useStyles();
   const [isOpen, setOpen] = useState(defaultOpen);
@@ -68,6 +69,7 @@ export default function DropdownButton({
         aria-controls={isOpen ? 'composition-menu' : undefined}
         aria-expanded={isOpen ? 'true' : undefined}
         aria-haspopup="true"
+        disabled={disabled}
       >
         {children}
         {!noIcon && (

packages/webapp/src/components/Menu/MeatballsMenu/index.tsx

@@ -22,9 +22,10 @@ import styles from './styles.module.scss';
 export type MeatballsMenuProps = {
   classes?: { button?: string };
   options: { label: ReactNode; onClick: () => void }[];
+  disabled: boolean;
 };
 
-const MeatballsMenu = ({ options, classes }: MeatballsMenuProps) => {
+const MeatballsMenu = ({ options, classes, disabled = false }: MeatballsMenuProps) => {
   return (
     <DropdownButton
       type={'v2'}
@@ -39,6 +40,7 @@ const MeatballsMenu = ({ options, classes }: MeatballsMenuProps) => {
         />
       ))}
       menuPositionOffset={[0, 1]}
+      disabled={disabled}
     >
       <BsThreeDots className={styles.menuIcon} />
     </DropdownButton>

packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Dispatch, SetStateAction, useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import {
   useDeleteAnimalBatchesMutation,
   useDeleteAnimalsMutation,
@@ -31,7 +31,7 @@ import { useTranslation } from 'react-i18next';
 
 const useAnimalOrBatchRemoval = (
   selectedInventoryIds: string[],
-  setSelectedInventoryIds: Dispatch<SetStateAction<string[]>>,
+  setSelectedInventoryIds?: Dispatch<SetStateAction<string[]>>,
 ) => {
   const dispatch = useDispatch();
   const { t } = useTranslation(['message']);
@@ -52,6 +52,7 @@ const useAnimalOrBatchRemoval = (
     const animalBatchRemovalArray = [];
     const selectedAnimalIds: string[] = [];
     const selectedBatchIds: string[] = [];
+    let result;
 
     for (const id of selectedInventoryIds) {
       const { kind, id: entity_id } = parseInventoryId(id);
@@ -74,40 +75,44 @@ const useAnimalOrBatchRemoval = (
       }
     }
 
-    try {
-      if (animalRemovalArray.length) {
-        await mutations['removeAnimals'].trigger(animalRemovalArray).unwrap();
-        setSelectedInventoryIds((selectedInventoryIds) =>
+    if (animalRemovalArray.length) {
+      result = await mutations['removeAnimals'].trigger(animalRemovalArray);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
+      } else {
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
     }
 
-    try {
-      if (animalBatchRemovalArray.length) {
-        await mutations['removeBatches'].trigger(animalBatchRemovalArray).unwrap();
-        setSelectedInventoryIds((selectedInventoryIds) =>
+    if (animalBatchRemovalArray.length) {
+      result = await mutations['removeBatches'].trigger(animalBatchRemovalArray);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
+      } else {
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
     }
 
     setRemovalModalOpen(false);
+    return result;
   };
 
   const handleAnimalOrBatchDeletion = async () => {
     const animalIds: number[] = [];
     const selectedAnimalIds: string[] = [];
     const animalBatchIds: number[] = [];
     const selectedBatchIds: string[] = [];
+    let result;
 
     for (const id of selectedInventoryIds) {
       const { kind, id: entity_id } = parseInventoryId(id);
@@ -120,40 +125,42 @@ const useAnimalOrBatchRemoval = (
       }
     }
 
-    try {
-      if (animalIds.length) {
-        await mutations['deleteAnimals'].trigger(animalIds).unwrap();
-        setSelectedInventoryIds((selectedInventoryIds) =>
+    if (animalIds.length) {
+      result = await mutations['deleteAnimals'].trigger(animalIds);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
+      } else {
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
     }
 
-    try {
-      if (animalBatchIds.length) {
-        await mutations['deleteBatches'].trigger(animalBatchIds).unwrap();
-        setSelectedInventoryIds((selectedInventoryIds) =>
+    if (animalBatchIds.length) {
+      result = await mutations['deleteBatches'].trigger(animalBatchIds);
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
+      } else {
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
     }
 
     setRemovalModalOpen(false);
+    return result;
   };
 
-  const onConfirmRemoveAnimals = (formData: FormFields) => {
+  const onConfirmRemoveAnimals = async (formData: FormFields) => {
     if (Number(formData.reason) === CREATED_IN_ERROR_ID) {
-      handleAnimalOrBatchDeletion();
+      return handleAnimalOrBatchDeletion();
     } else {
-      handleAnimalOrBatchRemoval(formData);
+      return handleAnimalOrBatchRemoval(formData);
     }
   };