rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-15 12:29:16 +01:00
Code Issues Releases Activity

(ui) fix product card's status colors

Browse Source
This commit is contained in:
vincent 2022-10-20 11:39:44 +02:00
parent ab796991a6
commit 1db8bd8537
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/frontend/src/javascript/components/store/product-item.tsx
View File

@ -46,7 +46,19 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
/**
* Returns CSS class from stock status
*/
const statusColor = (product: Product, stockType: string) => {
const statusColor = (product: Product) => {
if (product.stock.internal < (product.quantity_min || 1) ||
product.stock.external < (product.quantity_min || 1) ||
(product.low_stock_threshold && product.stock.internal <= product.low_stock_threshold) ||
(product.low_stock_threshold && product.stock.external <= product.low_stock_threshold)) {
return 'warning';
}
return '';
};
/**
* Returns CSS class from stock status
*/
const stockColor = (product: Product, stockType: string) => {
if (product.stock[stockType] < (product.quantity_min || 1)) {
return 'out-of-stock';
}
@ -57,7 +69,7 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
};
return (
<div className='product-item'>
<div className={`product-item ${statusColor(product)}`}>
<div className='itemInfo'>
<img src={thumbnail()?.thumb_attachment_url || noImage} alt='' className='itemInfo-thumbnail' />
<p className="itemInfo-name">{product.name}</p>
@ -69,11 +81,11 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
: t('app.admin.store.product_item.hidden')
}
</FabStateLabel>
<div className={`stock ${statusColor(product, 'internal')}`}>
<div className={`stock ${stockColor(product, 'internal')}`}>
<span>{t('app.admin.store.product_item.stock.internal')}</span>
<p>{product.stock.internal}</p>
</div>
<div className={`stock ${statusColor(product, 'external')}`}>
<div className={`stock ${stockColor(product, 'external')}`}>
<span>{t('app.admin.store.product_item.stock.external')}</span>
<p>{product.stock.external}</p>
</div>

7
app/frontend/src/stylesheets/modules/store/products-grid.scss
View File

@ -6,11 +6,7 @@
.store-product-item {
--status-color: var(--success);
&.low { --status-color: var(--alert-light); }
&.out-of-stock {
--status-color: var(--alert);
background-color: var(--gray-soft-light);
border: none;
}
&.out-of-stock { --status-color: var(--alert); }
padding: 1.6rem 2.4rem;
display: grid;
@ -29,6 +25,7 @@
grid-area: image;
@include imageRatio(50%);
border-radius: var(--border-radius);
img { object-fit: contain; }
}
.name {
margin: 1.6rem 0 0.8rem;

4
app/frontend/src/stylesheets/modules/store/products-list.scss
View File

@ -20,7 +20,7 @@
border: 1px solid var(--gray-soft-dark);
border-radius: var(--border-radius);
background-color: var(--gray-soft-lightest);
&.out-of-stock { border-color: var(--status-color); }
&.warning { border-color: var(--alert-light); }
.itemInfo {
grid-area: 1 / 1 / 2 / 2;
@ -31,7 +31,7 @@
width: 4.8rem;
height: 4.8rem;
margin-right: 1.6rem;
object-fit: cover;
object-fit: contain;
border-radius: var(--border-radius);
background-color: var(--gray-soft);
}