Compare commits
3 Commits
8e8dc6af55
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| a7dea2dce7 | |||
| da814d469b | |||
| 7835fda0a5 |
@@ -70,7 +70,7 @@ cd NAPPDesafio
|
|||||||
### Passo 3: Configure as Variáveis de Ambiente
|
### Passo 3: Configure as Variáveis de Ambiente
|
||||||
|
|
||||||
Crie um arquivo `.env` no diretório raiz do projeto e configure as variáveis de ambiente necessárias. Você pode usar o arquivo `.env.example` como referência.
|
Crie um arquivo `.env` no diretório raiz do projeto e configure as variáveis de ambiente necessárias. Você pode usar o arquivo `.env.example` como referência.
|
||||||
Para api preencha:
|
Para api preencha no diretório `/api`:
|
||||||
|
|
||||||
#### .env
|
#### .env
|
||||||
|
|
||||||
@@ -81,7 +81,7 @@ DATABASE_URL=postgresql://postgres:postgres@postgres-db-api:5432/postgres?sslmod
|
|||||||
```
|
```
|
||||||
|
|
||||||
Crie um arquivo `.env` no diretório raiz do projeto e configure as variáveis de ambiente necessárias. Você pode usar o arquivo `.env.example` como referência.
|
Crie um arquivo `.env` no diretório raiz do projeto e configure as variáveis de ambiente necessárias. Você pode usar o arquivo `.env.example` como referência.
|
||||||
Para spa preencha:
|
Para spa preencha no diretório `/spa`:
|
||||||
|
|
||||||
#### .env
|
#### .env
|
||||||
|
|
||||||
@@ -117,6 +117,8 @@ http://localhost:3000
|
|||||||
|
|
||||||
## Funcionalidades Principais
|
## Funcionalidades Principais
|
||||||
|
|
||||||
|
- Username:admin Senha:admin
|
||||||
|
|
||||||
- **Login**: Fazer login na aplicação.
|
- **Login**: Fazer login na aplicação.
|
||||||
|
|
||||||
- **CRUD Produtos**: CRUD básico de produtos.
|
- **CRUD Produtos**: CRUD básico de produtos.
|
||||||
|
|||||||
@@ -2,11 +2,11 @@ import { useNavigate } from "react-router";
|
|||||||
import { Button, Title } from "../../shared/components/default";
|
import { Button, Title } from "../../shared/components/default";
|
||||||
import { FlexContainer } from "../../shared/components/home";
|
import { FlexContainer } from "../../shared/components/home";
|
||||||
|
|
||||||
import { ProductProps, setProductSlice } from "../../shared/store/slices/productSlice";
|
import { setProductSlice } from "../../shared/store/slices/productSlice";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import TableProducts from "./components/TableProducts";
|
import TableProducts from "./components/TableProducts";
|
||||||
import { setProductsSlice } from "../../shared/store/slices/productsSlice";
|
import { ProductsProps, setProductsSlice } from "../../shared/store/slices/productsSlice";
|
||||||
|
|
||||||
|
|
||||||
const Products = () => {
|
const Products = () => {
|
||||||
@@ -25,7 +25,7 @@ const Products = () => {
|
|||||||
|
|
||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
|
|
||||||
dispatch(setProductsSlice(data?.payload as ProductProps[]))
|
dispatch(setProductsSlice(data?.payload as ProductsProps[]))
|
||||||
|
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
|
|||||||
@@ -40,6 +40,8 @@ export default function TableProducts () {
|
|||||||
<Table>
|
<Table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
<th>Criado</th>
|
||||||
|
<th>Editado</th>
|
||||||
<th>Código</th>
|
<th>Código</th>
|
||||||
<th>Nome</th>
|
<th>Nome</th>
|
||||||
<th>Estoque Total</th>
|
<th>Estoque Total</th>
|
||||||
@@ -53,8 +55,12 @@ export default function TableProducts () {
|
|||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
{ !!products && products.map((p,index)=>{
|
{ !!products && products.map((p,index)=>{
|
||||||
|
const createdAt = new Date(p.createdAt*1000)
|
||||||
|
const updatedAt = p.updatedAt === null? null : new Date(p.updatedAt*1000)
|
||||||
return(
|
return(
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
|
<td>{createdAt.toLocaleDateString() + "-" + createdAt.toLocaleTimeString()}</td>
|
||||||
|
<td>{updatedAt !== null? updatedAt.toLocaleDateString() + "-" + updatedAt.toLocaleTimeString(): "-"}</td>
|
||||||
<td>{p.codigo}</td>
|
<td>{p.codigo}</td>
|
||||||
<td>{p.nome}</td>
|
<td>{p.nome}</td>
|
||||||
<td>{p.estoqueTotal}</td>
|
<td>{p.estoqueTotal}</td>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
import { PayloadAction, createSlice } from "@reduxjs/toolkit"
|
import { PayloadAction, createSlice } from "@reduxjs/toolkit"
|
||||||
|
|
||||||
export interface ProductProps {
|
export interface ProductsProps {
|
||||||
|
createdAt: number
|
||||||
|
updatedAt: number | null
|
||||||
nome: string
|
nome: string
|
||||||
codigo: string
|
codigo: string
|
||||||
estoqueTotal: number
|
estoqueTotal: number
|
||||||
@@ -10,13 +12,13 @@ export interface ProductProps {
|
|||||||
precoPor: number
|
precoPor: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState : ProductProps[] = []
|
const initialState : ProductsProps[] = []
|
||||||
|
|
||||||
const productsSlice = createSlice({
|
const productsSlice = createSlice({
|
||||||
name: "products",
|
name: "products",
|
||||||
initialState,
|
initialState,
|
||||||
reducers: {
|
reducers: {
|
||||||
setProductsSlice: (_, action: PayloadAction<ProductProps[]>) => {
|
setProductsSlice: (_, action: PayloadAction<ProductsProps[]>) => {
|
||||||
return action.payload
|
return action.payload
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user