create new user

ipti · Jul 2, 2024 · 72f3f2e · 72f3f2e
1 parent b055af4
commit 72f3f2e
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 48 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
-# REACT_APP_API_PATH=http://localhost:3000/
-REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
+REACT_APP_API_PATH=http://localhost:3000/
+# REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
diff --git a/src/Context/Users/state.tsx b/src/Context/Users/state.tsx
@@ -25,7 +25,13 @@ export const UsersState = () => {
         username: data.username,
         password: data.password,
         role: data.role,
-        project: GetId(data.project)
+        project: GetId(data.project),
+        sex: data.sex,
+        color_race: data.color_race,
+        birthday:data.birthday,
+        email: data.email,
+        initial_date: data.initial_date,
+        phone: data.phone
     }
     props.requestUserMutation.mutate(body);
   };
@@ -35,7 +41,13 @@ export const UsersState = () => {
         name: data.name,
         username: data.username,
         role: data.role,
-        project: GetId(data.project)
+        project: GetId(data.project),
+        sex: data.sex,
+        color_race: data.color_race,
+        birthday:data.birthday,
+        email: data.email,
+        initial_date: data.initial_date,
+        phone: data.phone
     }
     props.requestUpdateUserMutation.mutate({data: body, id: id});
   };

diff --git a/src/Context/Users/type.tsx b/src/Context/Users/type.tsx
@@ -12,6 +12,12 @@ export interface CreateUser {
     password?: string;
     project: number[];
     role?: {name: string, id: string}
+    email?: string,
+    phone?: string,
+    sex: number,
+    color_race: number,
+    initial_date: string,
+    birthday: string
   }
 
   export interface User {

diff --git a/src/Pages/Users/CreateUser/index.tsx b/src/Pages/Users/CreateUser/index.tsx
@@ -1,11 +1,13 @@
-import { Formik } from "formik";
+import { Form, Formik } from "formik";
 import { useContext } from "react";
 import * as Yup from "yup";
 import ContentPage from "../../../Components/ContentPage";
 import UsersProvider, { UsersContext } from "../../../Context/Users/context";
 import { UsersTypes } from "../../../Context/Users/type";
 import { Padding } from "../../../Styles/styles";
 import InputsUser from "../Inputs";
+import PasswordInput from "../../../Components/TextPassword";
+import { Button } from "primereact/button";
 
 const CreateUser = () => {
   return (
@@ -19,11 +21,24 @@ const CreateUserPage = () => {
   const props = useContext(UsersContext) as UsersTypes;
 
   const CreateUserSchema = Yup.object().shape({
-    name: Yup.string().required("Campo Obrigatório").min(16, "Nome deve ter pelo menos 16 caracteres"),
-    username: Yup.string().required("Campo Obrigatório").min(8, "Nome do usuário deve ter pelo menos 8 caracteres"),
-    password: Yup.string().required("Campo Obrigatório").min(8, "Senha deve ter pelo menos 8 caracteres"),
+    name: Yup.string()
+      .required("Campo Obrigatório")
+      .min(16, "Nome deve ter pelo menos 16 caracteres"),
+    username: Yup.string()
+      .required("Campo Obrigatório")
+      .min(8, "Nome do usuário deve ter pelo menos 8 caracteres"),
+    password: Yup.string()
+      .required("Campo Obrigatório")
+      .min(8, "Senha deve ter pelo menos 8 caracteres"),
     role: Yup.object().required("Campo Obrigatório"),
     project: Yup.array().required("Campo Obrigatório"),
+    initial_date: Yup.string().required("Campo Obrigatório"),
+    birthday: Yup.string().required("Campo Obrigatório"),
+
+    phone: Yup.string(),
+    email: Yup.string(),
+    sex: Yup.string().required("Campo Obrigatório"),
+    color_race: Yup.string().required("Campo Obrigatório"),
     confirmPassword: Yup.string()
       .label("Confirmar senha")
       .required("Campo Obrigatório")
@@ -40,16 +55,71 @@ const CreateUserPage = () => {
           role: undefined,
           password: "",
           project: [],
+          initial_date: "",
+          phone: "",
+          email: "",
+          color_race: "",
+          sex: "",
+          birthday: "",
           confirmPassword: "",
         }}
         onSubmit={(values) => {
-          props.CreateUser(values);
+          props.CreateUser({
+            ...values,
+            sex: parseInt(values.sex),
+            color_race: parseInt(values.color_race),
+          });
         }}
         validationSchema={CreateUserSchema}
       >
         {({ values, handleChange, errors, touched }) => {
           return (
-            <InputsUser errors={errors} handleChange={handleChange} touched={touched} values={values} />
+            <Form>
+              <InputsUser
+                errors={errors}
+                handleChange={handleChange}
+                touched={touched}
+                values={values}
+              />
+              <div className="grid">
+                <div className="col-12 md:col-6">
+                  <label>Senha</label>
+                  <Padding />
+                  <PasswordInput
+                    placeholder="Senha"
+                    name="password"
+                    onChange={handleChange}
+                    value={values.password}
+                  />
+                  <Padding />
+                  {errors.password && touched.password ? (
+                    <div style={{ color: "red" }}>
+                      {errors.password}
+                      <Padding />
+                    </div>
+                  ) : null}
+                </div>
+                <div className="col-12 md:col-6">
+                  <label>Confirmar senha</label>
+                  <Padding />
+                  <PasswordInput
+                    placeholder="Senha"
+                    name="confirmPassword"
+                    value={values.confirmPassword}
+                    onChange={handleChange}
+                  />
+                  <Padding />
+                  {errors.confirmPassword && touched.confirmPassword ? (
+                    <div style={{ color: "red" }}>
+                      {errors.confirmPassword}
+                      <Padding />
+                    </div>
+                  ) : null}
+                </div>
+              </div>{" "}
+              <Padding padding="16px" />
+              <Button label="Criar" />
+            </Form>
           );
         }}
       </Formik>

diff --git a/src/Pages/Users/EditUser/index.tsx b/src/Pages/Users/EditUser/index.tsx
@@ -48,7 +48,7 @@ const EditUserPage = () => {
           confirmPassword: "",
         }}
         onSubmit={(values) => {
-          props.UpdateUser(values, parseInt(id!));
+          // props.UpdateUser(values, parseInt(id!));
         }}
         validationSchema={CreateUserSchema}
       >

diff --git a/src/Pages/Users/Inputs/index.tsx b/src/Pages/Users/Inputs/index.tsx
@@ -1,14 +1,18 @@
 import { Form } from "formik";
-import { Button } from "primereact/button";
 import { MultiSelect } from "primereact/multiselect";
+import { useContext } from "react";
+import CalendarComponent from "../../../Components/Calendar";
 import DropdownComponent from "../../../Components/Dropdown";
+import MaskInput from "../../../Components/InputMask";
 import TextInput from "../../../Components/TextInput";
-import PasswordInput from "../../../Components/TextPassword";
-import { ROLE } from "../../../Controller/controllerGlobal";
+import { AplicationContext } from "../../../Context/Aplication/context";
+import {
+  color_race,
+  ROLE,
+  typesex,
+} from "../../../Controller/controllerGlobal";
 import { useFetchRequestSocialTechnologyLists } from "../../../Services/SocialTechnology/query";
 import { Padding } from "../../../Styles/styles";
-import { useContext } from "react";
-import { AplicationContext } from "../../../Context/Aplication/context";
 import { PropsAplicationContext } from "../../../Types/types";
 
 const InputsUser = ({
@@ -24,8 +28,8 @@ const InputsUser = ({
 }) => {
   const { data: projects } = useFetchRequestSocialTechnologyLists();
 
-  const props = useContext(AplicationContext) as PropsAplicationContext
-
+  const props = useContext(AplicationContext) as PropsAplicationContext;
+  console.log(errors);
   return (
     <Form>
       <div className="grid">
@@ -75,14 +79,18 @@ const InputsUser = ({
             optionsLabel="name"
             value={values.role}
             onChange={handleChange}
-            options={props.user?.role === ROLE.ADMIN ? [
-              { id: ROLE.ADMIN, name: "Admin" },
-              { id: ROLE.COORDINATORS, name: "Coordenador" },
-              { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
-            ] : [
-              { id: ROLE.COORDINATORS, name: "Coordenador" },
-              { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
-            ]}
+            options={
+              props.user?.role === ROLE.ADMIN
+                ? [
+                    { id: ROLE.ADMIN, name: "Admin" },
+                    { id: ROLE.COORDINATORS, name: "Coordenador" },
+                    { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
+                  ]
+                : [
+                    { id: ROLE.COORDINATORS, name: "Coordenador" },
+                    { id: ROLE.REAPPLICATORS, name: "Reaplicador" },
+                  ]
+            }
           />
           <Padding />
           {errors.role && touched.role ? (
@@ -117,42 +125,108 @@ const InputsUser = ({
       </div>
       <div className="grid">
         <div className="col-12 md:col-6">
-          <label>Senha</label>
+          <div>
+            <label>Cor/Raça *</label>
+            <Padding />
+            <DropdownComponent
+              placerholder="Cor/Raça *"
+              value={values.color_race}
+              onChange={handleChange}
+              name="color_race"
+              optionsValue="id"
+              optionsLabel="name"
+              options={color_race}
+            />
+          </div>
+          {errors.color_race && touched.color_race ? (
+            <div style={{ color: "red", marginTop: "8px" }}>
+              {errors.color_race}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="col-12 md:col-6">
+          <div>
+            <label>Data de Nascimento *</label>
+            <Padding />
+            <CalendarComponent
+              placeholder="Data de Nascimento *"
+              name="birthday"
+              dateFormat="dd/mm/yy"
+              value={values.birthday}
+              onChange={handleChange}
+            />
+          </div>
+          {errors.birthday && touched.birthday ? (
+            <div style={{ color: "red", marginTop: "8px" }}>
+              {errors.birthday}
+            </div>
+          ) : null}
+        </div>
+      </div>{" "}
+      <div className="grid">
+        <div className="col-12 md:col-6">
+          <label>Sexo *</label>
           <Padding />
-          <PasswordInput
-            placeholder="Senha"
-            name="password"
+          <DropdownComponent
+            placerholder="Sexo *"
+            optionsValue="id"
+            value={values.sex}
+            options={typesex}
+            name="sex"
             onChange={handleChange}
-            value={values.password}
+            optionsLabel="type"
           />
+          {errors.sex && touched.sex ? (
+            <div style={{ color: "red", marginTop: "8px" }}>{errors.sex}</div>
+          ) : null}
+        </div>
+        <div className="col-12 md:col-6">
+          <label>Data de inicio *</label>
           <Padding />
-          {errors.password && touched.password ? (
-            <div style={{ color: "red" }}>
-              {errors.password}
-              <Padding />
+          <CalendarComponent
+            placeholder="Data de inicio *"
+            name="initial_date"
+            dateFormat="dd/mm/yy"
+            value={values.initial_date}
+            onChange={handleChange}
+          />
+          {errors.initial_date && touched.initial_date ? (
+            <div style={{ color: "red", marginTop: "8px" }}>
+              {errors.initial_date}
             </div>
           ) : null}
         </div>
+      </div>
+      <div className="grid">
         <div className="col-12 md:col-6">
-          <label>Confirmar senha</label>
+          <label>Email *</label>
           <Padding />
-          <PasswordInput
-            placeholder="Senha"
-            name="confirmPassword"
-            value={values.confirmPassword}
+          <TextInput
+            placeholder="Email"
+            value={values.email}
             onChange={handleChange}
+            name="email"
           />
+          {errors.email && touched.email ? (
+            <div style={{ color: "red", marginTop: "8px" }}>{errors.email}</div>
+          ) : null}
+        </div>
+        <div className="col-12 md:col-6">
+          <label>Telefone para contato*</label>
           <Padding />
-          {errors.confirmPassword && touched.confirmPassword ? (
-            <div style={{ color: "red" }}>
-              {errors.confirmPassword}
-              <Padding />
-            </div>
+          <MaskInput
+            mask="(99) 9 9999-9999"
+            placeholder="Telefone *"
+            name="phone"
+            onChange={handleChange}
+            value={values.phone}
+          />
+          {errors.phone && touched.phone ? (
+            <div style={{ color: "red", marginTop: "8px" }}>{errors.phone}</div>
           ) : null}
         </div>
-      </div>{" "}
-      <Padding padding="16px" />
-      <Button label="Criar" />
+      </div>
     </Form>
   );
 };