Skip to content

Commit e1c4695

Browse files
rihorrihor
committed
Criando popup para criação de ouvidoria e prefeitura
1 parent 9dc4bd0 commit e1c4695

File tree

5 files changed

+203
-2
lines changed

5 files changed

+203
-2
lines changed

‎src/pages/InformationPage/CreateOmbudsmanPopup.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react"
2+
import { FormContext, useForm } from "react-hook-form"
3+
import { toast } from "react-toastify"
4+
5+
import Api from "../../services/api"
6+
import { createOmbudsmanSchema } from "../../validations"
7+
import Field from "../../components/Form/Field"
8+
import { PopupContainer } from "./styles"
9+
10+
interface OmbudsmanFormData {
11+
site: string
12+
location: string
13+
email: string
14+
telephone: string
15+
attendance: string
16+
}
17+
18+
const CreateOmbudsmanPopup: React.FC = () => {
19+
const form = useForm<OmbudsmanFormData>({
20+
validationSchema: createOmbudsmanSchema,
21+
})
22+
23+
async function submitNewOmbudsman(data: OmbudsmanFormData) {
24+
const result = await Api.post<IOmbudsman>({ pathUrl: "/ombudsman", data })
25+
26+
if (result && result.data) {
27+
toast.success("Ouvidoria criada com sucesso")
28+
}
29+
}
30+
31+
return (
32+
<PopupContainer>
33+
<FormContext {...form}>
34+
<form onSubmit={form.handleSubmit(submitNewOmbudsman)}>
35+
<Field name="site" label="Site oficial" />
36+
<Field name="location" label="Local" />
37+
<Field name="email" label="Email" />
38+
<Field
39+
name="telephone"
40+
label="Telefone"
41+
placeholder="(**) ****-****"
42+
/>
43+
<Field
44+
name="attendance"
45+
component="textarea"
46+
label="Atendimento"
47+
placeholder="De segunda a sexta: 08:00 até 17:00, Aos sabados e domingos: 12:00 até 16:00"
48+
/>
49+
<button type="submit">Salvar</button>
50+
</form>
51+
</FormContext>
52+
</PopupContainer>
53+
)
54+
}
55+
56+
export default CreateOmbudsmanPopup

‎src/pages/InformationPage/CreatePrefecturePopup.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react"
2+
import { FormContext, useForm } from "react-hook-form"
3+
import { toast } from "react-toastify"
4+
5+
import Api from "../../services/api"
6+
import { createPrefectureSchema } from "../../validations"
7+
import Field from "../../components/Form/Field"
8+
import { PopupContainer } from "./styles"
9+
10+
interface PrefectureFormData {
11+
name: string
12+
site: string
13+
location: string
14+
email: string
15+
telephone: string
16+
attendance: string
17+
}
18+
19+
const CreatePrefecturePopup: React.FC = () => {
20+
const form = useForm<PrefectureFormData>({
21+
validationSchema: createPrefectureSchema,
22+
})
23+
24+
async function submitNewOmbudsman(data: PrefectureFormData) {
25+
const result = await Api.post<IPrefecture>({ pathUrl: "/prefecture", data })
26+
27+
if (result && result.data) {
28+
toast.success("Ouvidoria criada com sucesso")
29+
}
30+
}
31+
32+
return (
33+
<PopupContainer>
34+
<FormContext {...form}>
35+
<form onSubmit={form.handleSubmit(submitNewOmbudsman)}>
36+
<Field name="name" label="Nome da cidade" />
37+
<Field name="site" label="Site oficial" />
38+
<Field name="location" label="Local" />
39+
<Field name="email" label="Email" />
40+
<Field
41+
name="telephone"
42+
label="Telefone"
43+
placeholder="(**) ****-****"
44+
/>
45+
<Field
46+
name="attendance"
47+
component="textarea"
48+
label="Atendimento"
49+
placeholder="De segunda a sexta: 08:00 até 17:00, Aos sabados e domingos: 12:00 até 16:00"
50+
/>
51+
<button type="submit">Salvar</button>
52+
</form>
53+
</FormContext>
54+
</PopupContainer>
55+
)
56+
}
57+
58+
export default CreatePrefecturePopup

‎src/pages/InformationPage/index.tsx

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React, { useState, useEffect } from "react"
22
import { toast } from "react-toastify"
3+
import Popup from "reactjs-popup"
34

45
import { Background } from "../../styles"
5-
import { GridContainer } from "./styles"
6+
import { GridContainer, CreateNewContainer } from "./styles"
67
import Api from "../../services/api"
78
import { useSession } from "../../store/session"
89
import Ombudsman from "./Ombudsman"
910
import Prefecture from "./Prefecture"
11+
import CreateOmbudsmanPopup from "./CreateOmbudsmanPopup"
12+
import CreatePrefecturePopup from "./CreatePrefecturePopup"
1013

1114
interface ResponseOmbudsman {
1215
attendance: string
@@ -33,7 +36,7 @@ interface ResponsePrefecture {
3336
}
3437

3538
const InformationPage: React.FC = () => {
36-
const { city } = useSession()
39+
const { city, profile } = useSession()
3740
const [prefecture, setPrefecture] = useState<IPrefecture>()
3841
const [ombudsman, setOmbudsman] = useState<IOmbudsman>()
3942

@@ -65,6 +68,24 @@ const InformationPage: React.FC = () => {
6568

6669
return (
6770
<Background>
71+
{profile.role === "master" && (
72+
<CreateNewContainer>
73+
<Popup
74+
trigger={<button>Criar nova ouvidoria</button>}
75+
position="center center"
76+
modal
77+
>
78+
<CreateOmbudsmanPopup />
79+
</Popup>
80+
<Popup
81+
trigger={<button>Criar nova ouvidoria</button>}
82+
position="center center"
83+
modal
84+
>
85+
<CreatePrefecturePopup />
86+
</Popup>
87+
</CreateNewContainer>
88+
)}
6889
<GridContainer>
6990
{ombudsman && prefecture && (
7091
<>

‎src/pages/InformationPage/styles.ts

+45
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
11
import styled from "styled-components"
22

3+
export const CreateNewContainer = styled.div`
4+
display: flex;
5+
flex: 1;
6+
align-items: center;
7+
justify-content: space-evenly;
8+
9+
button {
10+
border-radius: 4px;
11+
border: 2px solid #ddd;
12+
background: #ddd;
13+
padding: 5px 10px;
14+
transition: border 0.3s;
15+
}
16+
17+
button:hover {
18+
border: 2px solid #aaa;
19+
}
20+
`
21+
22+
export const PopupContainer = styled.div`
23+
padding: 20px 40px;
24+
25+
form {
26+
label {
27+
margin-bottom: 5px;
28+
}
29+
input,
30+
textarea {
31+
background: #eee;
32+
border: 2px solid #eee;
33+
}
34+
35+
button {
36+
margin-top: 10px;
37+
background: #86e670;
38+
border: 2px solid #86e670;
39+
transition: border 0.3s;
40+
}
41+
42+
button:hover {
43+
border: 2px solid #54a341;
44+
}
45+
}
46+
`
47+
348
export const GridContainer = styled.div`
449
display: grid;
550
grid-template-columns: 1fr 1fr;

‎src/validations/index.ts

+21
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,24 @@ export const createUserSchema = object().shape({
8080
.required("É necessário confirmar a senha"),
8181
isAdmin: boolean(),
8282
})
83+
84+
export const createOmbudsmanSchema = object().shape({
85+
site: string().required("O site é necessário"),
86+
location: string().required("A localização é necessária"),
87+
email: string()
88+
.email("Insira um email válido.")
89+
.required("O email é necessário"),
90+
telephone: string().required("O telefone é necessário"),
91+
attendance: string().required("O horário de atendimento é necessário"),
92+
})
93+
94+
export const createPrefectureSchema = object().shape({
95+
name: string().required("O nome da cidade é necessário"),
96+
site: string().required("O site é necessário"),
97+
location: string().required("A localização é necessária"),
98+
email: string()
99+
.email("Insira um email válido.")
100+
.required("O email é necessário"),
101+
telephone: string().required("O telefone é necessário"),
102+
attendance: string().required("O horário de atendimento é necessário"),
103+
})

0 commit comments

Comments
 (0)