tableee
import React from 'react'; import { IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography, Switch, TableContainer, } from '@mui/material'; import { observer } from 'mobx-react-lite'; import { useTranslation } from 'react-i18next'; import { ProductMaterial } from '../../models/entities/product-material'; import LinkIcon from '@mui/icons-material/Link'; import LinkOffIcon from '@mui/icons-material/LinkOff'; import InfoIcon from '@mui/icons-material/Info'; import { useRootStore } from '../../providers/root-store-provider'; import { CurrencyEnum, LocaleEnum, Price } from 'common'; import { MaterialsListDialog } from 'components/dialogs/materials-list-dialog'; import { Material } from 'models/entities/material'; import { Product } from 'models/entities/product'; interface ProductMaterialsDetailTableProps { productMaterials: ProductMaterial[]; row: Product; materials: Material[]; } export const ProductMaterialsDetailTable: React.FC<ProductMaterialsDetailTableProps> = observer( ({ productMaterials, row, materials }) => { const { t } = useTranslation('web'); const rootStore = useRootStore(); const productStore = rootStore.productStore; const findCurrency = (language: LocaleEnum): CurrencyEnum => { switch (language) { case LocaleEnum.cz: return CurrencyEnum.CZK; case LocaleEnum.sk: return CurrencyEnum.EUR; case LocaleEnum.pl: return CurrencyEnum.PLN; case LocaleEnum.de: return CurrencyEnum.EUR; default: throw new Error('Unsupported language'); } }; return ( <TableContainer sx={{ border: (theme) => `1px solid ${theme.palette.divider}`, borderRadius: '4px', width: 'fit-content', minWidth: '385px', overflow: 'hidden', }} > <Table size="small" sx={{ '& .MuiTableCell-root': { fontSize: '0.75rem', lineHeight: '155%', letterSpacing: '0.15px', padding: '5px', height: '19px', whiteSpace: 'nowrap', verticalAlign: 'bottom', borderRight: (theme) => `1px solid ${theme.palette.divider}`, '&:last-child': { borderRight: 'none', }, }, '& .MuiTableHead-root .MuiTableCell-root': { fontWeight: 700, }, '& .MuiTableBody-root tr:last-child td': { borderBottom: 'none', }, '& .toggle-cell': { width: '50px', padding: '0px 5px', textAlign: 'left', '& .MuiSwitch-root': { margin: '-4px', }, }, '& .MuiSvgIcon-root.info-icon': { fontSize: '1.25rem' }, '& .MuiSvgIcon-root.edit-icon': { fontSize: '1rem' }, }} > <TableHead> <TableRow> <TableCell>{t('pages.index.productMaterialsDetail.shopsysId')}</TableCell> <TableCell>{t('pages.index.productMaterialsDetail.priceExcludingVat')}</TableCell> <TableCell width={50}>{t('pages.index.productMaterialsDetail.inSale')}</TableCell> <TableCell> <Stack direction="row" alignItems="center" justifyContent="space-between"> {t('pages.index.productMaterialsDetail.material')} <MaterialsListDialog product={row} materials={materials} /> </Stack> </TableCell> <TableCell width={20} /> </TableRow> </TableHead> <TableBody> {productMaterials.map((material) => ( <TableRow key={material.shopsysId}> <TableCell>{material.shopsysId}</TableCell> <TableCell> <Stack direction="row" alignItems="center" justifyContent={'space-between'}> {`${material.prices[0]?.price || 0} Kč`} <Tooltip placement="left" title={ <> <Typography variant="button" gutterBottom> {t('pages.index.productMaterialsDetail.tooltips.prices.title')} </Typography> <table> <thead> <tr> <th /> <th> {t( 'pages.index.productMaterialsDetail.tooltips.prices.excludingVat', )} </th> <th> {t( 'pages.index.productMaterialsDetail.tooltips.prices.vat', )} </th> </tr> </thead> <tbody> {material.prices.map((p: Price) => ( <tr key={p.languageCode}> <td> <b>{p.languageCode}</b> </td> <td> {p.price} <Typography fontSize="smaller" sx={{ ml: 1 }} component="span" > {findCurrency(p.languageCode)} </Typography> </td> <td> {p.priceVat} <Typography fontSize="smaller" sx={{ ml: 1 }} component="span" > {findCurrency(p.languageCode)} </Typography> </td> </tr> ))} </tbody> </table> </> } > <InfoIcon className="info-icon" color="secondary" /> </Tooltip> </Stack> </TableCell> <TableCell className="toggle-cell"> <Switch checked={material.isSaleActive} /* onChange={() => productStore.toggleProductMaterialSaleStatus(material)} */ color="secondary" /> {/* TODO: add method for this */} </TableCell> <TableCell className="text-cell">{material.material?.code}</TableCell> <TableCell className="button-cell"> <IconButton size="small" sx={{ width: 20, height: 20, }} href={material.eshopUrl || ''} target="_blank" rel="noopener noreferrer" disabled={!material.eshopUrl} > {/* TODO: add tool tip with links */} {material.eshopUrl ? ( <LinkIcon className="link-icon" color="secondary" /> ) : ( <LinkOffIcon className="link-icon" color="disabled" /> )} </IconButton> </TableCell> </TableRow> ))}{' '} </TableBody> </Table> </TableContainer> ); }, );
Leave a Comment