Tabla Detalle Productos
This commit is contained in:
Elizabeth
parent
f8b1b795a3
commit
da9758d875
|
|
@ -9,10 +9,10 @@ import SignOutConfig from '../main/sign-out/SignOutConfig';
|
|||
import Error404Page from '../main/404/Error404Page';
|
||||
import ExampleConfig from '../main/example/ExampleConfig';
|
||||
import ProjectDashboardAppConfig from '../main/dashboard/project/ProjectDashboardAppConfig';
|
||||
|
||||
import ProductoConfig from '../main/producto/ProductoConfig';
|
||||
import InvoiceConfigs from '../main/invoice/InvoiceConfig';
|
||||
|
||||
const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ...InvoiceConfigs];
|
||||
const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ProductoConfig, ...InvoiceConfigs];
|
||||
|
||||
/**
|
||||
* The routes of the application.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import DemoContent from '@fuse/core/DemoContent';
|
|||
import FusePageSimple from '@fuse/core/FusePageSimple';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ListDetalleProductoRender from './widgets/DetalleProductoRender';
|
||||
|
||||
const Root = styled(FusePageSimple)(({ theme }) => ({
|
||||
'& .FusePageSimple-header': {
|
||||
|
|
@ -25,6 +26,9 @@ function Producto() {
|
|||
<h4>{t('PRODUCTOS')}</h4>
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<ListDetalleProductoRender/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
import * as React from 'react';
|
||||
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import clsx from "clsx";
|
||||
|
||||
function ListDetalleProductoRender() {
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const { t } = useTranslation("products");
|
||||
const columns = [
|
||||
"Código",
|
||||
"Nombre",
|
||||
"Descripción",
|
||||
"Stock Mínimo",
|
||||
"Estado",
|
||||
"Acciones"
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{
|
||||
artCodigo: 1,
|
||||
artNombre: "Servicios Profesionales",
|
||||
artDescripcion: "Prestación de servicios",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "activo",
|
||||
action: true,
|
||||
},
|
||||
{
|
||||
artCodigo: 2,
|
||||
artNombre: "Servicios Varios",
|
||||
artDescripcion: "",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "inactivo",
|
||||
action: true,
|
||||
},
|
||||
{
|
||||
artCodigo: 3,
|
||||
artNombre: "Servicios Profesionales",
|
||||
artDescripcion: "Prestación de servicios",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "activo",
|
||||
action: true,
|
||||
},
|
||||
{
|
||||
artCodigo: 4,
|
||||
artNombre: "Servicios Varios",
|
||||
artDescripcion: "",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "inactivo",
|
||||
action: true,
|
||||
},
|
||||
{
|
||||
artCodigo: 5,
|
||||
artNombre: "Servicios Profesionales",
|
||||
artDescripcion: "Prestación de servicios",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "activo",
|
||||
action: true,
|
||||
},
|
||||
{
|
||||
artCodigo: 6,
|
||||
artNombre: "Servicios Varios",
|
||||
artDescripcion: "",
|
||||
artStockMinimo: 0,
|
||||
artEstado: "inactivo",
|
||||
action: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
|
||||
<div className="flex md:flex-row justify-between flex-col">
|
||||
<div>
|
||||
<Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
|
||||
{t("Detalle de productos")}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
component={Link}
|
||||
to={'/invoice/edit'}
|
||||
startIcon={
|
||||
<FuseSvgIcon
|
||||
className="text-48 text-white"
|
||||
size={24}
|
||||
color="action"
|
||||
>
|
||||
heroicons-outline:plus
|
||||
</FuseSvgIcon>
|
||||
}
|
||||
>
|
||||
Registrar Producto
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive mt-24">
|
||||
<Table className="simple w-full min-w-full h-full">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((column, index) => (
|
||||
<TableCell key={index}>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
className="font-semibold text-12 whitespace-nowrap"
|
||||
>
|
||||
{column}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{rows
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => (
|
||||
<TableRow key={index} >
|
||||
{Object.entries(row).map(([key, value]) => {
|
||||
switch (key) {
|
||||
case "artEstado": {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<Typography
|
||||
className={clsx(
|
||||
"inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
|
||||
value === "inactivo" &&
|
||||
"bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
|
||||
value === "activo" &&
|
||||
"bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "action": {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row" className="flex gap-5">
|
||||
<div>
|
||||
<IconButton size="small" color="inherit">
|
||||
<FuseSvgIcon >heroicons-outline:pencil-alt</FuseSvgIcon>
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton size="small" color="default">
|
||||
<FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
default: {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<Typography>{value}</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListDetalleProductoRender;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
type DetalleProductoRow = {
|
||||
artCodigo: number;
|
||||
artNombre: string;
|
||||
artDescripcion: string;
|
||||
artStockMinimo: number;
|
||||
artEstado: any;
|
||||
};
|
||||
|
||||
type DetalleProductoType = {
|
||||
columns: string[];
|
||||
rows: DetalleProductoRow[];
|
||||
};
|
||||
|
||||
export default DetalleProductoType;
|
||||
Loading…
Reference in New Issue