LF-4415 Animals IDs not sorted in order

packages/webapp/public/locales/de/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "Vitamin B12",
   "MAX_ROOTING": "Maximale Wurzelentwicklung",
   "NUTRIENT_CREDITS": "Nährstoffgutschriften"
-}
+}

packages/webapp/public/locales/es/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "Vitamina B12",
   "MAX_ROOTING": "Enraizamiento máximo",
   "NUTRIENT_CREDITS": "Creditos nutricionales"
-}
+}

packages/webapp/public/locales/fr/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "Vitamine B12",
   "MAX_ROOTING": "Enracinement Maximal",
   "NUTRIENT_CREDITS": "Nutriments supplémentaires"
-}
+}

packages/webapp/public/locales/hi/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "विटामिन B12",
   "MAX_ROOTING": "अधिकतम जड़न",
   "NUTRIENT_CREDITS": "पोषक तत्व क्रेडिट"
-}
+}

packages/webapp/public/locales/ml/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "വിറ്റാമിൻ  ബി12",
   "MAX_ROOTING": "പരമാവധി വേരൂന്നാൻ",
   "NUTRIENT_CREDITS": "പോഷകങ്ങളുടെ ക്രെഡിറ്റ്"
-}
+}

packages/webapp/public/locales/pa/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "ਵਿਟਾਮਿਨ ਬੀ 12",
   "MAX_ROOTING": "ਅਧਿਕਤਮ ਰੀਫਲੈਕਸ",
   "NUTRIENT_CREDITS": "ਪੌਸ਼ਟਿਕ ਕ੍ਰੈਡਿਟ"
-}
+}

packages/webapp/public/locales/pt/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "Vitamina B12",
   "MAX_ROOTING": "Enraizamento máximo",
   "NUTRIENT_CREDITS": "Créditos de nutriente"
-}
+}

packages/webapp/src/components/Table/TableV2.jsx

@@ -151,14 +151,20 @@ export default function TableV2(props) {
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - data.length) : 0;
 
-  const visibleRows = useMemo(
-    () =>
-      data
-        .slice()
-        .sort(getComparator(order, orderBy))
-        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-    [order, orderBy, page, rowsPerPage, data],
-  );
+  const visibleRows = useMemo(() => {
+    const column = columns.find((col) => col.id == orderBy);
+    const comparator = column && column.comparator;
+    return data
+      .slice()
+      .sort(
+        comparator
+          ? order === 'desc'
+            ? (a, b) => -comparator(a, b)
+            : comparator
+          : getComparator(order, orderBy),
+      )
+      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+  }, [order, orderBy, page, rowsPerPage, data]);
 
   return (
     <Box sx={{ width: '100%' }}>

packages/webapp/src/components/Table/types.ts

@@ -58,6 +58,7 @@ export type TableV2Column = {
   columnProps?: Object;
   label?: string;
   sortable?: boolean;
+  comparator?: any;
 };
 
 export type TableRowData = { id?: string | number };

packages/webapp/src/containers/Animals/Inventory/index.tsx

@@ -24,7 +24,7 @@ import { Paper, useMediaQuery } from '@mui/material';
 import { History } from 'history';
 import Cell from '../../../components/Table/Cell';
 import { CellKind } from '../../../components/Table/types';
-import useAnimalInventory from './useAnimalInventory';
+import useAnimalInventory, { animalIDComparator } from './useAnimalInventory';
 import type { AnimalInventoryItem } from './useAnimalInventory';
 import ActionMenu, { iconAction } from '../../../components/ActionMenu';
 import FixedHeaderContainer, {
@@ -309,6 +309,7 @@ export default function AnimalInventory({
             highlightedText={d.batch ? d.count : null}
           />
         ),
+        comparator: (a: any, b: any) => animalIDComparator(a, b),
       },
       {
         id: isDesktop ? 'type' : null,

packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx

@@ -45,6 +45,8 @@ export type AnimalInventoryItem = {
   id: string;
   iconName: AnimalTypeIconKey;
   identification: string;
+  internal_identifier: number;
+  name: string | null;
   type: string;
   breed: string;
   path: string;
@@ -153,11 +155,13 @@ const formatAnimalsData = (
         id: generateInventoryId(AnimalOrBatchKeys.ANIMAL, animal),
         iconName: getDefaultAnimalIconName(defaultAnimalTypes, animal.default_type_id),
         identification: chooseIdentification(animal),
+        internal_identifier: animal.internal_identifier,
         type: chooseAnimalTypeLabel(animal, defaultAnimalTypes, customAnimalTypes),
         breed: chooseAnimalBreedLabel(animal, defaultAnimalBreeds, customAnimalBreeds),
         path: createSingleAnimalViewURL(animal.internal_identifier),
         count: 1,
         batch: false,
+        name: animal.name,
         location: animal.location_id ? locationsMap[animal.location_id] : '',
         // preserve some untransformed data for filtering
         sex_id: animal.sex_id,
@@ -190,10 +194,12 @@ const formatAnimalBatchesData = (
         id: generateInventoryId(AnimalOrBatchKeys.BATCH, batch),
         iconName: 'BATCH',
         identification: chooseIdentification(batch),
+        internal_identifier: batch.internal_identifier,
         type: chooseAnimalTypeLabel(batch, defaultAnimalTypes, customAnimalTypes),
         breed: chooseAnimalBreedLabel(batch, defaultAnimalBreeds, customAnimalBreeds),
         path: createSingleAnimalViewURL(batch.internal_identifier),
         count: batch.count,
+        name: batch.name,
         batch: true,
         location: batch.location_id ? locationsMap[batch.location_id] : '',
         // preserve some untransformed data for filtering
@@ -218,6 +224,34 @@ interface BuildInventoryArgs {
   locationsMap: { [key: string]: string };
 }
 
+export const animalIDComparator = (a: AnimalInventoryItem, b: AnimalInventoryItem) => {
+  if (a.name && !b.name) {
+    return -1;
+  }
+  if (b.name && !a.name) {
+    return 1;
+  }
+  if (a.identification && !b.identification) {
+    return -1;
+  }
+  if (b.identification && !a.identification) {
+    return 1;
+  }
+
+  return (
+    (a.name && b.name && (a.name.length - b.name.length || a.name.localeCompare(b.name))) ||
+    (a.identification &&
+      b.identification &&
+      (a.identification.length - b.identification.length ||
+        a.identification.localeCompare(b.identification))) ||
+    a.internal_identifier - b.internal_identifier
+  );
+};
+
+const sortAnimalsIDs = (inventory: AnimalInventoryItem[]) => {
+  return inventory.sort(animalIDComparator);
+};
+
 export const buildInventory = ({
   animals,
   animalBatches,
@@ -246,7 +280,7 @@ export const buildInventory = ({
     ),
   ];
 
-  const sortedInventory = inventory.sort(getComparator(orderEnum.ASC, 'identification'));
+  const sortedInventory = sortAnimalsIDs(inventory);
 
   return sortedInventory;
 };