diff --git a/src/apps/content-editor/src/app/views/ItemList/TableCells/OneToManyCell.tsx b/src/apps/content-editor/src/app/views/ItemList/TableCells/OneToManyCell.tsx index 8c8df58e85..70f1a4ef24 100644 --- a/src/apps/content-editor/src/app/views/ItemList/TableCells/OneToManyCell.tsx +++ b/src/apps/content-editor/src/app/views/ItemList/TableCells/OneToManyCell.tsx @@ -29,22 +29,14 @@ type OneToManyCellProps = { items: any[]; }; export const OneToManyCell = ({ items }: OneToManyCellProps) => { - const dispatch = useDispatch(); const allItems = useSelector((state: AppState) => state.content); const chipContainerRef = useRef(); - const [lastValidIndex, setLastValidIndex] = useState(allItems?.length - 1); + const [lastValidIndex, setLastValidIndex] = useState( + Object.keys(allItems)?.length - 1 + ); const parentWidth = chipContainerRef.current?.parentElement?.clientWidth; const hiddenItems = items?.length - lastValidIndex - 1; - useEffect(() => { - items?.forEach((item) => { - // If value starts with '7-', that means it was unable to find the item in the store so we need to fetch it - if (item?.startsWith("7-")) { - dispatch(searchItems(item)); - } - }); - }, [items, dispatch]); - useEffect(() => { setLastValidIndex( getNumOfItemsToRender(parentWidth, chipContainerRef.current?.children) @@ -54,15 +46,11 @@ export const OneToManyCell = ({ items }: OneToManyCellProps) => { return ( <> - {items?.slice(0, lastValidIndex + 1)?.map((id: string) => { - return ( - - ); - })} + {items + ?.slice(0, lastValidIndex + 1) + ?.map((id: string, index: number) => { + return ; + })} {!!hiddenItems && ( { {/** Element below is only needed to calculate the actual chip widths */} - {items?.map((id: string) => { - return ( - - ); + {items?.map((id: string, index: number) => { + return ; })} diff --git a/src/apps/content-editor/src/app/views/ItemList/TableCells/SingleRelationshipCell.tsx b/src/apps/content-editor/src/app/views/ItemList/TableCells/SingleRelationshipCell.tsx index d952e5a12f..5963905d67 100644 --- a/src/apps/content-editor/src/app/views/ItemList/TableCells/SingleRelationshipCell.tsx +++ b/src/apps/content-editor/src/app/views/ItemList/TableCells/SingleRelationshipCell.tsx @@ -1,20 +1,10 @@ import { GridRenderCellParams } from "@mui/x-data-grid-pro"; import { Chip } from "@mui/material"; -import { useEffect } from "react"; -import { useDispatch } from "react-redux"; -import { searchItems } from "../../../../../../../shell/store/content"; export const SingleRelationshipCell = ({ params, }: { params: GridRenderCellParams; }) => { - const dispatch = useDispatch(); - useEffect(() => { - // If value starts with '7-', that means it was unable to find the item in the store so we need to fetch it - if (params.value?.startsWith("7-")) { - dispatch(searchItems(params.value)); - } - }, [params.value, dispatch]); return ; }; diff --git a/src/apps/content-editor/src/app/views/ItemList/index.tsx b/src/apps/content-editor/src/app/views/ItemList/index.tsx index 15b77667ab..73f9fcf42a 100644 --- a/src/apps/content-editor/src/app/views/ItemList/index.tsx +++ b/src/apps/content-editor/src/app/views/ItemList/index.tsx @@ -9,7 +9,14 @@ import { import { theme } from "@zesty-io/material"; import { ItemListEmpty } from "./ItemListEmpty"; import { ItemListActions } from "./ItemListActions"; -import { useEffect, useMemo, useRef, useState, useContext } from "react"; +import { + useEffect, + useMemo, + useRef, + useState, + useContext, + useCallback, +} from "react"; import { SearchRounded, RestartAltRounded } from "@mui/icons-material"; import noSearchResults from "../../../../../../../public/images/noSearchResults.svg"; import { ItemListFilters } from "./ItemListFilters"; @@ -29,9 +36,11 @@ import { useGetUsersQuery } from "../../../../../../shell/services/accounts"; import { ContentItem, ContentItemWithDirtyAndPublishing, + ContentModelFieldDataType, } from "../../../../../../shell/services/types"; import { fetchItems } from "../../../../../../shell/store/content"; import { TableSortContext } from "./TableSortProvider"; +import { fetchFields } from "../../../../../../shell/store/fields"; const formatDateTime = (source: string) => { const dateObj = new Date(source); @@ -94,6 +103,7 @@ export const ItemList = () => { const items = useSelector((state: AppState) => selectFilteredItems(state, modelZUID, activeLangId, !hasMounted) ); + const allFields = useSelector((state: AppState) => state.fields); const { data: users, isFetching: isUsersFetching } = useGetUsersQuery(); const [isModelItemsFetching, setIsModelItemsFetching] = useState(true); @@ -114,7 +124,44 @@ export const ItemList = () => { }, [params]); const userFilter = params.get("user"); + const resolveFieldRelationshipTitle = useCallback( + ( + fieldName: string, + fieldDataType: ContentModelFieldDataType, + relatedContentItemZUID: string + ) => { + if ( + !fields?.length || + !allFields || + !allItems || + !fieldName || + !fieldDataType || + !relatedContentItemZUID + ) { + return; + } + + // Finds the related field zuid that's stored in the specific field's data + const fieldData = fields?.find( + (field) => + field.name === fieldName && + !field.deletedAt && + field.datatype === fieldDataType + ); + + // Gets the data of the related field determined above + const relatedFieldData = allFields?.[fieldData?.relatedFieldZUID]; + + return ( + allItems?.[relatedContentItemZUID]?.data?.[relatedFieldData?.name] ?? + relatedContentItemZUID + ); + }, + [allItems, fields, allFields, modelZUID] + ); + useEffect(() => { + dispatch(fetchFields(modelZUID)); setTimeout(() => { setHasMounted(true); }, 0); @@ -215,12 +262,16 @@ export const ItemList = () => { break; case "internal_link": case "one_to_one": - clonedItem.data[key] = allItems?.[value]?.web?.metaTitle || value; + clonedItem.data[key] = resolveFieldRelationshipTitle( + key, + fieldType, + value + ); break; case "one_to_many": clonedItem.data[key] = value ?.split(",") - ?.map((id) => allItems?.[id]?.web?.metaTitle || id) + ?.map((id) => resolveFieldRelationshipTitle(key, fieldType, id)) ?.join(","); break; case "date":