{items.length === 0 ? (
-
{noneText}
+
{noneText}
) : (
{items[0]}
)}
diff --git a/packages/webapp/src/components/Table/Cell/styles.module.scss b/packages/webapp/src/components/Table/Cell/styles.module.scss
index b4dbba0620..2433accedd 100644
--- a/packages/webapp/src/components/Table/Cell/styles.module.scss
+++ b/packages/webapp/src/components/Table/Cell/styles.module.scss
@@ -6,7 +6,8 @@
font-weight: 400;
}
-.overflowText, .overflowText div {
+.overflowText,
+.overflowText div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -45,7 +46,6 @@
width: 32px;
padding: 4px;
@include svgColorFill(var(--Colors-Primary-Primary-teal-300));
-
}
.withSubtextText {
@@ -73,7 +73,7 @@
padding: 4px;
border-radius: 2px;
background: var(--Colors-Accent---singles-Purple-light);
- box-shadow: 1px 1px 0px 0px #FFF;
+ box-shadow: 1px 1px 0px 0px #fff;
color: var(--Colors-Accent---singles-Purple-full);
font-size: 12px;
font-weight: 700;
@@ -84,7 +84,3 @@
align-items: center;
gap: 8px;
}
-
-.italics {
- font-style: italic;
-}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 84d4c7ace9..3ca1d70f48 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -48,6 +48,7 @@ import useExpandable from '../../../components/Expandable/useExpandableItem';
import clsx from 'clsx';
import AnimalsBetaSpotlight from './AnimalsBetaSpotlight';
import { sumObjectValues } from '../../../util';
+import Icon from '../../../components/Icons';
const HEIGHTS = {
filterAndSearch: 64,
@@ -319,6 +320,22 @@ export default function AnimalInventory({
),
sortable: false,
},
+ {
+ id: isDesktop ? 'location' : null,
+ label: t('ANIMAL.ANIMAL_LOCATIONS').toLocaleUpperCase(),
+ format: (d: AnimalInventoryType) => (
+
+ {d.location ? (
+ <>
+
+ {d.location}
+
+ ) : (
+ t('common:UNKNOWN')
+ )}
+
+ ),
+ },
{
id: showLinks ? 'path' : null,
label: '',
@@ -335,7 +352,14 @@ export default function AnimalInventory({
);
const makeAnimalsSearchableString = (animal: AnimalInventoryType) => {
- return [animal.identification, animal.type, animal.breed, ...animal.groups, animal.count]
+ return [
+ animal.identification,
+ animal.type,
+ animal.breed,
+ ...animal.groups,
+ animal.count,
+ animal.location,
+ ]
.filter(Boolean)
.join(' ');
};
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index ff9f2ad854..5696ed4c9a 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -33,9 +33,11 @@
height: auto;
overflow-y: auto;
}
-
+
.taskViewMaxHeight {
- max-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
+ max-height: calc(
+ 100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height)
+ );
}
.summaryViewHeight {
@@ -105,4 +107,28 @@
.disableHover {
pointer-events: none;
-}
\ No newline at end of file
+}
+
+.location {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--Colors-Neutral-Neutral-600);
+
+ &.unknown {
+ font-weight: normal;
+ }
+}
+
+.locationIcon {
+ padding: 0;
+ min-width: 16px;
+ background-color: transparent;
+}
+
+.locationText {
+ width: calc(100% - 20px); // icon width 16px + gap 4px
+ @include truncateText();
+}
diff --git a/packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx b/packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx
index 97b864e8b2..56372fe84f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx
@@ -39,6 +39,9 @@ import { AnimalOrBatchKeys } from '../types';
import { generateInventoryId } from '../../../util/animal';
import { AnimalTypeIconKey, isAnimalTypeIconKey } from '../../../components/Icons/icons';
import { createSingleAnimalViewURL } from '../../../util/siteMapConstants';
+import { useSelector } from 'react-redux';
+import { locationsSelector } from '../../locationSlice';
+import { Location } from '../../../types';
export type AnimalInventory = {
id: string;
@@ -51,12 +54,14 @@ export type AnimalInventory = {
count: number;
batch: boolean;
group_ids: number[];
+ location: string;
sex_id?: number;
sex_detail?: { sex_id: number; count: number }[];
custom_type_id: number | null;
default_type_id: number | null;
custom_breed_id: number | null;
default_breed_id: number | null;
+ location_id?: string | null;
tasks: Animal['tasks'];
};
@@ -140,6 +145,7 @@ const formatAnimalsData = (
customAnimalTypes: CustomAnimalType[],
defaultAnimalBreeds: DefaultAnimalBreed[],
defaultAnimalTypes: DefaultAnimalType[],
+ locationsMap: { [key: string]: string },
): AnimalInventory[] => {
return animals
.filter(
@@ -158,6 +164,7 @@ const formatAnimalsData = (
path: createSingleAnimalViewURL(animal.internal_identifier),
count: 1,
batch: false,
+ location: animal.location_id ? locationsMap[animal.location_id] : '',
// preserve some untransformed data for filtering
group_ids: animal.group_ids,
sex_id: animal.sex_id,
@@ -165,6 +172,7 @@ const formatAnimalsData = (
default_type_id: animal.default_type_id,
custom_breed_id: animal.custom_breed_id,
default_breed_id: animal.default_breed_id,
+ location_id: animal.location_id,
tasks: animal.tasks,
};
});
@@ -177,6 +185,7 @@ const formatAnimalBatchesData = (
customAnimalTypes: CustomAnimalType[],
defaultAnimalBreeds: DefaultAnimalBreed[],
defaultAnimalTypes: DefaultAnimalType[],
+ locationsMap: { [key: string]: string },
): AnimalInventory[] => {
return animalBatches
.filter(
@@ -195,6 +204,7 @@ const formatAnimalBatchesData = (
path: createSingleAnimalViewURL(batch.internal_identifier),
count: batch.count,
batch: true,
+ location: batch.location_id ? locationsMap[batch.location_id] : '',
// preserve some untransformed data for filtering
group_ids: batch.group_ids,
sex_detail: batch.sex_detail,
@@ -202,6 +212,7 @@ const formatAnimalBatchesData = (
default_type_id: batch.default_type_id,
custom_breed_id: batch.custom_breed_id,
default_breed_id: batch.default_breed_id,
+ location_id: batch.location_id,
tasks: batch.tasks,
};
});
@@ -215,6 +226,7 @@ interface BuildInventoryArgs {
customAnimalTypes: CustomAnimalType[];
defaultAnimalBreeds: DefaultAnimalBreed[];
defaultAnimalTypes: DefaultAnimalType[];
+ locationsMap: { [key: string]: string };
}
export const buildInventory = ({
@@ -225,6 +237,7 @@ export const buildInventory = ({
customAnimalTypes,
defaultAnimalBreeds,
defaultAnimalTypes,
+ locationsMap,
}: BuildInventoryArgs) => {
const inventory = [
...formatAnimalsData(
@@ -234,6 +247,7 @@ export const buildInventory = ({
customAnimalTypes,
defaultAnimalBreeds,
defaultAnimalTypes,
+ locationsMap,
),
...formatAnimalBatchesData(
animalBatches,
@@ -242,6 +256,7 @@ export const buildInventory = ({
customAnimalTypes,
defaultAnimalBreeds,
defaultAnimalTypes,
+ locationsMap,
),
];
@@ -272,6 +287,12 @@ const useAnimalInventory = () => {
defaultAnimalTypes,
} = data;
+ const locations: Location[] = useSelector(locationsSelector);
+ const locationsMap = locations?.reduce(
+ (map, { location_id, name }) => ({ ...map, [location_id]: name }),
+ {},
+ );
+
const inventory = useMemo(() => {
if (isLoading) {
return [];
@@ -283,7 +304,8 @@ const useAnimalInventory = () => {
customAnimalBreeds &&
customAnimalTypes &&
defaultAnimalBreeds &&
- defaultAnimalTypes
+ defaultAnimalTypes &&
+ locationsMap
) {
return buildInventory({
animals,
@@ -293,6 +315,7 @@ const useAnimalInventory = () => {
customAnimalTypes,
defaultAnimalBreeds,
defaultAnimalTypes,
+ locationsMap,
});
}
return [];
diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index acdb3677d0..8d4eb627ca 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -70,10 +70,9 @@ export const useFilteredInventory = (
isInactive(groupsFilter) ||
entity.group_ids.some((groupId) => groupsFilter[groupId]?.active);
- // *** Location is not yet implemented as a property on animal or batch ***
- const locationMatches = isInactive(locationsFilter);
- // const locationMatches =
- // isInactive(locationsFilter) || locationsFilter[entity.location]?.active;
+ const locationMatches =
+ isInactive(locationsFilter) ||
+ (entity.location_id && locationsFilter[entity.location_id]?.active);
return (
animalOrBatchMatches &&
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 90847ec046..1a9ad60fc2 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -34,6 +34,7 @@ import {
useGetDefaultAnimalBreedsQuery,
useGetDefaultAnimalTypesQuery,
} from '../../../store/api/apiSlice';
+import { locationsSelector } from '../../locationSlice';
import {
formatAnimalDetailsToDBStructure,
formatBatchDetailsToDBStructure,
@@ -44,7 +45,7 @@ import { AnimalDetailsFormFields } from '../AddAnimals/types';
import RemoveAnimalsModal, { FormFields } from '../../../components/Animals/RemoveAnimalsModal';
import useAnimalOrBatchRemoval from '../Inventory/useAnimalOrBatchRemoval';
import { generateInventoryId } from '../../../util/animal';
-import { CustomRouteComponentProps } from '../../../types';
+import { CustomRouteComponentProps, Location } from '../../../types';
import { isAdminSelector } from '../../userFarmSlice';
export const STEPS = {
@@ -90,6 +91,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
// Form setup
const dispatch = useDispatch();
+ const locations: Location[] = useSelector(locationsSelector);
const getFormSteps = () => [
{
@@ -106,6 +108,9 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
});
const isRemoved = !!defaultFormValues?.animal_removal_reason_id;
+ const locationText = locations?.find(
+ ({ location_id }) => location_id === defaultFormValues?.location_id,
+ )?.name;
useEffect(() => {
if (!isFetchingAnimalsOrBatches && !selectedAnimal && !selectedBatch) {
@@ -203,6 +208,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
onBack={history.back}
/* @ts-ignore */
animalOrBatch={defaultFormValues}
+ locationText={locationText}
defaultBreeds={defaultAnimalBreeds}
defaultTypes={defaultAnimalTypes}
customBreeds={customAnimalBreeds}
diff --git a/packages/webapp/src/containers/Filter/Animals/index.tsx b/packages/webapp/src/containers/Filter/Animals/index.tsx
index bc4c0de7aa..2500047e11 100644
--- a/packages/webapp/src/containers/Filter/Animals/index.tsx
+++ b/packages/webapp/src/containers/Filter/Animals/index.tsx
@@ -17,7 +17,8 @@ import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import FilterGroup from '../../../components/Filter/FilterGroup';
-import type { ReduxFilterEntity, ContainerOnChangeCallback, Location, FilterState } from '../types';
+import type { ReduxFilterEntity, ContainerOnChangeCallback, FilterState } from '../types';
+import { Location } from '../../../types';
import { FilterType, type ComponentFilter } from '../../../components/Filter/types';
import {
useGetDefaultAnimalTypesQuery,
diff --git a/packages/webapp/src/containers/Filter/types.ts b/packages/webapp/src/containers/Filter/types.ts
index 67c8ad5c5c..69367cd084 100644
--- a/packages/webapp/src/containers/Filter/types.ts
+++ b/packages/webapp/src/containers/Filter/types.ts
@@ -32,11 +32,3 @@ export interface FilterState {
}
export type ContainerOnChangeCallback = (filterKey: string, filterState: FilterState) => void;
-
-// Only typing the properties relevant to filtering on location; there are no .ts files yet related to this entity
-export interface Location {
- name: string;
- location_id: string;
-
- [key: string]: any;
-}
diff --git a/packages/webapp/src/store/api/types/index.ts b/packages/webapp/src/store/api/types/index.ts
index eba843f884..fc6e31d0ac 100644
--- a/packages/webapp/src/store/api/types/index.ts
+++ b/packages/webapp/src/store/api/types/index.ts
@@ -53,6 +53,7 @@ export interface Animal {
animal_removal_reason_id: number | null;
removal_explanation: string | null;
removal_date: string | null;
+ location_id: string | null;
tasks: { task_id: number }[];
type_name?: string; // request only
breed_name?: string; // request only
@@ -93,6 +94,7 @@ export interface AnimalBatch {
animal_removal_reason_id: number | null;
removal_explanation: string | null;
removal_date: string | null;
+ location_id: string | null;
tasks: { task_id: number }[];
type_name?: string; // request only
breed_name?: string; // request only
diff --git a/packages/webapp/src/stories/Animals/AnimalSingleViewHeader.stories.tsx b/packages/webapp/src/stories/Animals/AnimalSingleViewHeader.stories.tsx
index 7d6e6936f7..78309d64a0 100644
--- a/packages/webapp/src/stories/Animals/AnimalSingleViewHeader.stories.tsx
+++ b/packages/webapp/src/stories/Animals/AnimalSingleViewHeader.stories.tsx
@@ -49,13 +49,15 @@ type Story = StoryObj
;
export const AnimalHeader: Story = {
args: {
- animalOrBatch: { ...mockAnimal1, location: 'Pig House' },
+ locationText: 'Pig House',
+ animalOrBatch: mockAnimal1,
},
};
export const AnimalWithoutPhoto: Story = {
args: {
- animalOrBatch: { ...mockAnimal1, location: 'Pig House', photo_url: null },
+ locationText: 'Pig House',
+ animalOrBatch: { ...mockAnimal1, photo_url: null },
},
};
@@ -67,32 +69,37 @@ export const AnimalWithoutLocation: Story = {
export const AnimalWithoutAge: Story = {
args: {
- animalOrBatch: { ...mockAnimal1, location: 'Pig House', birth_date: null },
+ locationText: 'Pig House',
+ animalOrBatch: { ...mockAnimal1, birth_date: null },
},
};
export const AnimalWithLongTexts: Story = {
args: {
- animalOrBatch: { ...mockAnimal2, location: 'Pig House ABCDEFG', birth_date: null },
+ locationText: 'Pig House ABCDEFG',
+ animalOrBatch: { ...mockAnimal2, birth_date: null },
},
};
export const EditMode: Story = {
args: {
- animalOrBatch: { ...mockAnimal1, location: 'Pig House' },
+ locationText: 'Pig House',
+ animalOrBatch: mockAnimal1,
isEditing: true,
},
};
export const EditModeWithLongText: Story = {
args: {
- animalOrBatch: { ...mockAnimal2, location: 'Pig House ABCDEFG', birth_date: null },
+ locationText: 'Pig House ABCDEFG',
+ animalOrBatch: { ...mockAnimal2, birth_date: null },
isEditing: true,
},
};
export const BatchHeader: Story = {
args: {
- animalOrBatch: { ...mockBatch1, location: 'Chicken coop' },
+ locationText: 'Chicken coop',
+ animalOrBatch: mockBatch1,
},
};
diff --git a/packages/webapp/src/stories/Animals/mockData.ts b/packages/webapp/src/stories/Animals/mockData.ts
index 0757bab292..ea7faf892e 100644
--- a/packages/webapp/src/stories/Animals/mockData.ts
+++ b/packages/webapp/src/stories/Animals/mockData.ts
@@ -76,6 +76,7 @@ export const mockAnimal1: Animal = {
price: 1000,
internal_identifier: 12,
group_ids: [],
+ location_id: 'xxxxx',
tasks: [],
};
@@ -119,5 +120,6 @@ export const mockBatch1: AnimalBatch = {
{ sex_id: 1, count: 30 },
{ sex_id: 2, count: 40 },
],
+ location_id: 'xxxxx',
tasks: [],
};
diff --git a/packages/webapp/src/stories/Table/TableCells.stories.jsx b/packages/webapp/src/stories/Table/TableCells.stories.jsx
index 732c55f1fe..07f965d6e1 100644
--- a/packages/webapp/src/stories/Table/TableCells.stories.jsx
+++ b/packages/webapp/src/stories/Table/TableCells.stories.jsx
@@ -16,7 +16,6 @@ import React from 'react';
import { v2TableDecorator } from '../Pages/config/Decorators';
import Table from '../../components/Table';
import Cell from '../../components/Table/Cell';
-import { ReactComponent as CropIcon } from '../../assets/images/nav/crops.svg';
import { TableKind, CellKind } from '../../components/Table/types';
export default {
@@ -30,7 +29,7 @@ const getFakeColumns = () => {
{
id: 'crop',
label: 'Crops',
- format: (d) => | ,
+ format: (d) => | ,
},
{
id: 'tasks',
@@ -56,29 +55,34 @@ const getFakeData = (length) => {
return [
{
crop: 'White corn, Corn',
- icon: CropIcon,
+ iconName: 'CROP',
tasks: ['Task 1', 'Task 2', 'Task 3'],
revenue: 8796.0,
},
{
crop: 'Koto, Buckwheat',
- icon: CropIcon,
+ iconName: 'CROP',
tasks: ['Task 1', 'Task 2', 'Task 3'],
revenue: 692.5,
},
{
crop: 'Lutz green leaf, Beetroot',
- icon: CropIcon,
+ iconName: 'CROP',
tasks: ['Task 1', 'Task 2'],
revenue: 210.0,
},
- { crop: 'Cox’s orange pippin, Apple', icon: CropIcon, tasks: ['Task 1'], revenue: 340.0 },
- { crop: 'Macoun, Apples', icon: CropIcon, tasks: [], revenue: 1234.0 },
- { crop: 'Butter Boy Hybrid, Butternut ', icon: CropIcon, tasks: ['Task 1'], revenue: 785.5 },
- { crop: 'King Edward, Potato', icon: CropIcon, tasks: ['Task 1'], revenue: 237.0 },
- { crop: 'Blanco Veneto, Celeriac', icon: CropIcon, tasks: ['Task 1'], revenue: 895.0 },
- { crop: 'Hollow Crown, Parsnips ', icon: CropIcon, tasks: ['Task 1'], revenue: 354.0 },
- { crop: 'Early White Hybrid, Cauliflower', icon: CropIcon, tasks: ['Task 1'], revenue: 789.5 },
+ { crop: 'Cox’s orange pippin, Apple', iconName: 'CROP', tasks: ['Task 1'], revenue: 340.0 },
+ { crop: 'Macoun, Apples', iconName: 'CROP', tasks: [], revenue: 1234.0 },
+ { crop: 'Butter Boy Hybrid, Butternut ', iconName: 'CROP', tasks: ['Task 1'], revenue: 785.5 },
+ { crop: 'King Edward, Potato', iconName: 'CROP', tasks: ['Task 1'], revenue: 237.0 },
+ { crop: 'Blanco Veneto, Celeriac', iconName: 'CROP', tasks: ['Task 1'], revenue: 895.0 },
+ { crop: 'Hollow Crown, Parsnips ', iconName: 'CROP', tasks: ['Task 1'], revenue: 354.0 },
+ {
+ crop: 'Early White Hybrid, Cauliflower',
+ iconName: 'CROP',
+ tasks: ['Task 1'],
+ revenue: 789.5,
+ },
].slice(0, length);
};
diff --git a/packages/webapp/src/types/index.ts b/packages/webapp/src/types/index.ts
index d6c6fc890a..318ee7f60b 100644
--- a/packages/webapp/src/types/index.ts
+++ b/packages/webapp/src/types/index.ts
@@ -29,3 +29,11 @@ export type CustomRouteComponentProps & {
history: History; // Custom history type
};
+
+// Only typing the properties in use; additional properties are expected in the Location object
+export interface Location {
+ name: string;
+ location_id: string;
+
+ [key: string]: any;
+}