diff --git a/app/frontend/src/javascript/components/store/products-list.tsx b/app/frontend/src/javascript/components/store/products-list.tsx index 676a15c07..f800aa864 100644 --- a/app/frontend/src/javascript/components/store/products-list.tsx +++ b/app/frontend/src/javascript/components/store/products-list.tsx @@ -1,7 +1,10 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; +import FormatLib from '../../lib/format'; import { FabButton } from '../base/fab-button'; import { Product } from '../../models/product'; import { PencilSimple, Trash } from 'phosphor-react'; +import noImage from '../../../../images/no_image.png'; interface ProductsListProps { products: Array, @@ -13,6 +16,19 @@ interface ProductsListProps { * This component shows a list of all Products */ export const ProductsList: React.FC = ({ products, onEdit, onDelete }) => { + console.log('products: ', products); + const { t } = useTranslation('admin'); + + /** + * TODO, document this method + */ + const thumbnail = (id: number) => { + const image = products + ?.find(p => p.id === id) + .product_images_attributes + .find(att => att.is_main); + return image; + }; /** * Init the process of editing the given product */ @@ -31,15 +47,47 @@ export const ProductsList: React.FC = ({ products, onEdit, on }; }; + /** + * Returns CSS class from stock status + */ + const statusColor = (product: Product) => { + if (product.stock.external === 0 && product.stock.internal === 0) { + return 'out-of-stock'; + } + if (product.low_stock_alert) { + return 'low'; + } + }; + return ( <> {products.map((product) => ( -
+
- + {/* TODO: image size version ? */} +

{product.name}

-
+
+ + {product.is_active + ? t('app.admin.store.products_list.visible') + : t('app.admin.store.products_list.hidden') + } + +
+ {t('app.admin.store.products_list.stock.internal')} +

{product.stock.internal}

+
+
+ {t('app.admin.store.products_list.stock.external')} +

{product.stock.external}

+
+
+

{FormatLib.price(product.amount)}

+ / {t('app.admin.store.products_list.unit')} +
+
diff --git a/app/frontend/src/javascript/components/store/products.tsx b/app/frontend/src/javascript/components/store/products.tsx index 6d27af5b1..0192b4245 100644 --- a/app/frontend/src/javascript/components/store/products.tsx +++ b/app/frontend/src/javascript/components/store/products.tsx @@ -7,6 +7,7 @@ import { FabButton } from '../base/fab-button'; import { ProductsList } from './products-list'; import { Product } from '../../models/product'; import ProductAPI from '../../api/product'; +import { X } from 'phosphor-react'; declare const Application: IApplication; @@ -91,11 +92,11 @@ const Products: React.FC = ({ onSuccess, onError }) => {

feature name

- +

long feature name

- +