cmorales
/
Front-Complete
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Formulario Registro Producto y organización de ventanas de producto

This commit is contained in:
EliAlarcon 2024-02-08 15:35:19 -05:00
parent d52c64c102
commit c5f3ea74d4
16 changed files with 369 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/configs/navigationConfig.ts
View File

@ -44,7 +44,7 @@ const navigationConfig: FuseNavItemType[] = [
translate: 'PRODUCT',
type: 'item',
icon: 'heroicons-outline:clipboard-check',
url: 'producto'
url: 'product/list'
}
];

4
src/app/configs/routesConfig.tsx
View File

@ -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 ProductoConfigs from '../main/producto/ProductoConfig'
import InvoiceConfigs from '../main/invoice/InvoiceConfig';
const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ProductoConfig, ...InvoiceConfigs];
const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ...ProductoConfigs, ...InvoiceConfigs];
/**
* The routes of the application.

2
src/app/main/producto/Producto.tsx
View File

@ -2,7 +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';
import ListDetalleProductoRender from './detalleProducto/DetalleProductoRender';
import ProductoRender from './ProductoRender';
const Root = styled(FusePageSimple)(({ theme }) => ({

10
src/app/main/producto/ProductoConfig.ts Normal file
View File

@ -0,0 +1,10 @@
import { FuseRouteConfigsType } from "@fuse/utils/FuseUtils";
import FormularioProductoConfig from "./formularioProducto/FormularioProductoConfig";
import DetalleProductoConfig from "./detalleProducto/DetalleProductoConfig";
const productoConfigs: FuseRouteConfigsType = [
DetalleProductoConfig,
FormularioProductoConfig
]
export default productoConfigs;

21
src/app/main/producto/ProductoConfig.tsx
View File

@ -1,21 +0,0 @@
import i18next from "i18next";
import { lazy } from 'react';
import en from './i18n/en';
i18next.addResourceBundle('en', 'examplePage', en);
const Producto = lazy(() => import('./Producto'));
const ProductoConfig = {
settings: {
layout: {}
},
routes: [
{
path: 'producto',
element: <Producto/>
}
]
};
export default ProductoConfig;

5
src/app/main/producto/ProductoRender.tsx
View File

@ -1,11 +1,12 @@
import BuscarProducto from "./widgets/BuscarProducto";
import ListDetalleProductoRender from "./widgets/DetalleProductoRender";
import ListDetalleProductoRender from "./detalleProducto/DetalleProductoRender";
import DetalleProducto from "./detalleProducto/DetalleProducto";
function ProductoRender() {
return(
<div className="w-full p-12 pt-16 sm:pt-24 lg:ltr:pr-0 lg:rtl:pl-0">
<BuscarProducto></BuscarProducto>
<ListDetalleProductoRender></ListDetalleProductoRender>
<DetalleProducto></DetalleProducto>
</div>
)
}

9
src/app/main/producto/detalleProducto/DetalleProducto.tsx Normal file
View File

@ -0,0 +1,9 @@
import ListDetalleProductoRender from "./DetalleProductoRender"
const DetalleProducto = () => {
return(
<ListDetalleProductoRender/>
)
}
export default DetalleProducto;

21
src/app/main/producto/detalleProducto/DetalleProductoConfig.tsx Normal file
View File

@ -0,0 +1,21 @@
import i18next from "i18next";
import { lazy } from 'react';
import es from '../i18n/es';
i18next.addResourceBundle('es', 'detailProduct', es);
const Producto = lazy(() => import('../Producto'));
const DetalleProductoConfig = {
settings: {
layout: {}
},
routes: [
{
path: 'product/list',
element: <Producto/>
}
]
};
export default DetalleProductoConfig;

124
src/app/main/producto/widgets/DetalleProductoRender.tsx → src/app/main/producto/detalleProducto/DetalleProductoRender.tsx
View File

@ -1,4 +1,4 @@
import * as React from 'react';
import * as React from "react";
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
import {
Button,
@ -15,6 +15,7 @@ import {
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import clsx from "clsx";
import ResponsiveDialog from "../widgets/DialogDelete";
function ListDetalleProductoRender() {
const [page, setPage] = React.useState(0);
@ -24,7 +25,9 @@ function ListDetalleProductoRender() {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
@ -36,7 +39,7 @@ function ListDetalleProductoRender() {
"Descripción",
"Stock Mínimo",
"Estado",
"Acciones"
"Acciones",
];
const rows = [
@ -104,7 +107,7 @@ function ListDetalleProductoRender() {
variant="contained"
color="secondary"
component={Link}
to={'/invoice/edit'}
to={"/product/form"}
startIcon={
<FuseSvgIcon
className="text-48 text-white"
@ -138,69 +141,74 @@ function ListDetalleProductoRender() {
<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"
)}
.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"
>
{value}
</Typography>
</TableCell>
);
}
case "action": {
return (
<TableCell key={key} component="th" scope="row" className="flex gap-5">
<div>
<div>
<IconButton size="small" color="inherit">
<FuseSvgIcon >heroicons-outline:pencil-alt</FuseSvgIcon>
<FuseSvgIcon>
heroicons-outline:pencil-alt
</FuseSvgIcon>
</IconButton>
</div>
<div>
<IconButton size="small" color="default">
<FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
</IconButton>
</div>
</TableCell>
);
</div>
<div>
<ResponsiveDialog></ResponsiveDialog>
</div>
</TableCell>
);
}
default: {
return (
<TableCell key={key} component="th" scope="row">
<Typography>{value}</Typography>
</TableCell>
);
}
}
default: {
return (
<TableCell key={key} component="th" scope="row">
<Typography>{value}</Typography>
</TableCell>
);
}
}
})}
</TableRow>
))}
})}
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</div>
</Paper>
)
);
}
export default ListDetalleProductoRender;

9
src/app/main/producto/formularioProducto/FormularioProducto.tsx Normal file
View File

@ -0,0 +1,9 @@
import FormularioProductoRender from "./FormularioProductoRender"
const FormularioProducto = () => {
return(
<FormularioProductoRender/>
);
};
export default FormularioProducto;

23
src/app/main/producto/formularioProducto/FormularioProductoConfig.tsx Normal file
View File

@ -0,0 +1,23 @@
import i18next from "i18next";
import es from "../i18n/es";
import { lazy } from "react";
i18next.addResourceBundle('es', 'formProducto', es);
const FormularioProducto = lazy(() => import('./FormularioProducto'));
const FormularioProductoConfig = {
settings: {
layout: {
config: {},
},
},
routes: [
{
path: 'product/form',
element: <FormularioProducto />,
},
],
};
export default FormularioProductoConfig;

158
src/app/main/producto/formularioProducto/FormularioProductoRender.tsx Normal file
View File

@ -0,0 +1,158 @@
import FusePageSimple from "@fuse/core/FusePageSimple";
import {
Autocomplete,
Card,
CardActions,
CardContent,
CardHeader,
Divider,
TextField,
styled,
Button,
Grid,
} from "@mui/material";
import { useState } from "react";
const FormularioProductoRender = () => {
const [formData, setFormData] = useState({
codigo: "",
tipo: "",
nombre: "",
descripcion: "",
stockMinimo: "",
margenGanancia: "",
estado: "",
});
const [datosCargados, setDatosCargados] = useState(false);
const cargarDatosDesdeBD = () => {
setDatosCargados(true);
};
return (
<Card className="m-20 p-24">
<CardHeader title="Registro producto" className="text-16 font-bold " />
<Divider />
<CardContent className="flex">
<Grid className="grid grid-cols-1 sm:grid-cols-6 gap-24 w-full min-w-0 p-24">
<TextField
className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
required
label="Código"
id="codigo"
name="codigo"
variant="outlined"
fullWidth
/>
<Autocomplete
className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
multiple
freeSolo
options={[]}
/* value={value }
onChange={(event, newValue) => {
onChange(newValue);
}} */
renderInput={(params) => (
<TextField
{...params}
placeholder="Seleccione el tipo de producto"
label="Tipo"
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
)}
/>
<TextField
className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
required
label="Nombre"
id="nombre"
name="nombre"
variant="outlined"
fullWidth
/>
<Autocomplete
className="mt-8 mb-16 sm:col-span-3"
multiple
freeSolo
options={["Activo", "Inactivo"]}
renderInput={(params) => (
<TextField
{...params}
placeholder="Seleccione el estado del producto"
label="Estado"
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
)}
/>
<TextField
className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
required
label="Stock Mínimo"
id="stockMinimo"
name="stockMinimo"
variant="outlined"
fullWidth
/>
<TextField
className="mt-8 mb-16 sm:col-span-3 md:col-span-3"
required
label="Margen de Ganancia"
id="margenGanancia"
name="margenGanancia"
variant="outlined"
fullWidth
/>
<TextField
className="mt-8 mb-16 sm:col-span-6 lg:col-span-6"
id="descripcion"
label="Descripción"
name="descripcion"
type="text"
multiline
rows={5}
variant="outlined"
fullWidth
/>
</Grid>
</CardContent>
<CardActions
className=""
>
<Button
className="w-320"
variant="contained"
size="small"
color="secondary"
>
Guardar{" "}
</Button>
{datosCargados && (
<Button
className="w-320"
variant="contained"
size="small"
color="primary"
>
Actualizar{" "}
</Button>
)}
</CardActions>
</Card>
);
};
export default FormularioProductoRender;

5
src/app/main/producto/i18n/en.ts
View File

@ -1,5 +0,0 @@
const locale = {
TITLE: 'Product'
};
export default locale;

5
src/app/main/producto/i18n/es.ts Normal file
View File

@ -0,0 +1,5 @@
const locale = {
TITLE: 'Producto'
};
export default locale;

59
src/app/main/producto/widgets/DialogDelete.tsx Normal file
View File

@ -0,0 +1,59 @@
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
import {
Button,
useMediaQuery,
useTheme,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
IconButton,
} from "@mui/material";
import React from "react";
function ResponsiveDialog() {
const [open, setOpen] = React.useState(false);
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<IconButton size="small" color="default"
onClick={handleClickOpen}>
<FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
</IconButton>
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="responsive-dialog-title">{"Confirmar"}</DialogTitle>
<DialogContent>
<DialogContentText>
Este elemento se eliminará permanentemente. ¿Deseas continuar?.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="primary">
Cancelar
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Aceptar
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default ResponsiveDialog;

2
tsconfig.json
View File

@ -48,5 +48,5 @@
"tailwind.config.js",
"vite.config.mts",
"vite-env.d.ts"
],
, "src/app/main/producto/.tsx" ],
}