Display images where they should be displayed

Author: MrBartusek

apps/client/src/assets/placeholder.png

@@ -4,14 +4,14 @@ import toast from 'react-hot-toast';
 import { BsTrash } from 'react-icons/bs';
 import { useQueryClient } from 'react-query';
 import { useNavigate } from 'react-router-dom';
-import placeholderImage from '../../assets/placeholder.png';
 import { Utils } from '../../utils';
 import Button from '../Button';
 import Form from '../Form/Form';
 import FormError from '../Form/FormError';
 import FormField from '../Form/FormField';
 import FormInput from '../Form/FormInput';
 import IconButton from '../IconButton';
+import { ImageDto } from 'shared-types/dist/ImageDto';
 
 export interface EntityDeleteDialogProps {
 	entityName: string;
@@ -20,6 +20,7 @@ export interface EntityDeleteDialogProps {
 	identifier: string;
 	deletedItems?: string[];
 	confirmBeforeDelete?: boolean;
+	image?: ImageDto;
 }
 
 function EntityDeleteDialog({
@@ -29,6 +30,7 @@ function EntityDeleteDialog({
 	identifier,
 	deletedItems = [],
 	confirmBeforeDelete = false,
+	image,
 }: EntityDeleteDialogProps) {
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
@@ -58,7 +60,7 @@ function EntityDeleteDialog({
 			<div className="my-6 flex w-96 gap-4 rounded-md border border-gray-300 p-4">
 				<div>
 					<img
-						src={placeholderImage}
+						src={image?.url || '/api/images/default'}
 						className="w-16 rounded-md"
 						width={50}
 						height={50}

apps/client/src/components/Entity/EntityDeleteDialog.tsx

@@ -1,19 +1,21 @@
 import classNames from 'classnames';
-import placeholderImage from '../../assets/placeholder.png';
+import { ImageDto } from 'shared-types/dist/ImageDto';
 
 type ImgProps = React.DetailedHTMLProps<
 	React.ImgHTMLAttributes<HTMLImageElement>,
 	HTMLImageElement
 >;
 
-export interface EntityImageColumnProps extends ImgProps {}
+export interface EntityImageColumnProps extends ImgProps {
+	image: ImageDto;
+}
 
-function EntityImageColumn({ ...props }: EntityImageColumnProps) {
+function EntityImageColumn({ image, ...props }: EntityImageColumnProps) {
 	return (
 		<div className="hidden w-48 flex-shrink-0 xl:flex">
 			<img
-				src={placeholderImage}
 				{...props}
+				src={image.url}
 				className={classNames(props.className, 'm-auto h-auto w-full rounded-md')}
 				width={50}
 				height={50}

apps/client/src/components/Entity/EntityImageColumn.tsx

@@ -21,7 +21,7 @@ function InventoryEntityInfo({ inventoryItem }: InventoryEntityInfoProps) {
 
 	return (
 		<EntityContainer>
-			<EntityImageColumn />
+			<EntityImageColumn image={inventoryItem.image} />
 			<div>
 				<HeaderWithHint
 					hint="inventory item"

apps/client/src/components/InventoryItem/InventoryEntityInfo.tsx

@@ -10,6 +10,7 @@ function InventoryItemDeleteForm({ item }: InventoryItemDeleteFormProps) {
 		<EntityDeleteDialog
 			entityName={item.name}
 			entityId={item.id}
+			image={item.image}
 			resourceName="inventory"
 			identifier="inventory item"
 		/>

apps/client/src/components/InventoryItem/InventoryItemDeleteForm.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { BasicInventoryItemDto, BasicProductDto } from 'shared-types';
 import Table from '../Helpers/Table';
 import InventoryItemActions from './InventoryItemActions';
+import TableImage from '../TableImage';
 
 const columnHelper = createColumnHelper<BasicInventoryItemDto>();
 
@@ -19,6 +20,11 @@ function InventoryTable({ items }: InventoryTableProps) {
 			cell: (info) => <div className="text-center">{info.row.index + 1}</div>,
 			size: 0,
 		}),
+		columnHelper.accessor('image', {
+			header: 'Image',
+			cell: (info) => <TableImage image={info.getValue()} />,
+			size: 0,
+		}),
 		columnHelper.accessor('name', {
 			header: 'Product Name',
 			cell: (info) => info.getValue(),

apps/client/src/components/InventoryItem/InventoryTable.tsx

@@ -10,6 +10,7 @@ function ProductDeleteForm({ product }: ProductDeleteFormProps) {
 		<EntityDeleteDialog
 			entityName={product.name}
 			entityId={product.id}
+			image={product.image}
 			resourceName="products"
 			identifier="product definition"
 			deletedItems={['Inventory items associated with this product']}

apps/client/src/components/Product/ProductDeleteForm.tsx

@@ -23,7 +23,7 @@ function ProductEntityInfo({ product }: ProductEntityInfoProps) {
 
 	return (
 		<EntityContainer>
-			<EntityImageColumn />
+			<EntityImageColumn image={product.image} />
 			<div>
 				<HeaderWithHint hint="product definition">{product?.name}</HeaderWithHint>
 

apps/client/src/components/Product/ProductEntityInfo.tsx

@@ -2,9 +2,8 @@ import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/re
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BasicProductDto } from 'shared-types';
-import placeholderImage from '../../assets/placeholder.png';
-import { Utils } from '../../utils';
 import { CurrentAppContext } from '../../context/CurrentAppContext';
+import { Utils } from '../../utils';
 import Table from '../Helpers/Table';
 import TableImage from '../TableImage';
 import ProductActions from './ProductActions';
@@ -25,9 +24,9 @@ function ProductsTable({ products }: ProductsTableProps) {
 			cell: (info) => <div className="text-center">{info.row.index + 1}</div>,
 			size: 0,
 		}),
-		columnHelper.display({
+		columnHelper.accessor('image', {
 			header: 'Image',
-			cell: (info) => <TableImage src={info.getValue<string>() || placeholderImage} />,
+			cell: (info) => <TableImage image={info.getValue()} />,
 			size: 0,
 		}),
 		columnHelper.accessor('name', {

apps/client/src/components/Product/ProductsTable.tsx

@@ -1,15 +1,20 @@
+import { ImageDto } from 'shared-types/dist/ImageDto';
+
 type ImgProps = React.DetailedHTMLProps<
 	React.ImgHTMLAttributes<HTMLImageElement>,
 	HTMLImageElement
 >;
 
-export interface TableImageProps extends ImgProps {}
+export interface TableImageProps extends ImgProps {
+	image: ImageDto;
+}
 
-function TableImage(props: TableImageProps) {
+function TableImage({ image, ...props }: TableImageProps) {
 	return (
 		<div className="m-auto h-12 w-12 ">
 			<img
 				{...props}
+				src={image.url}
 				className="rounded-md"
 				width={50}
 				height={50}