Create form modals

fga-eps-mds · Sep 11, 2022 · 63479fd · 63479fd
1 parent 5cbd738
commit 63479fd
Show file tree

Hide file tree

Showing 29 changed files with 925 additions and 528 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint --fix ",
+    "lint": "next lint --fix",
     "type-check": "tsc --noEmit",
     "test": "jest",
     "prepare": "husky install"

diff --git a/src/components/Forms/CategoriaForm/index.tsx b/src/components/Forms/CategoriaForm/index.tsx
@@ -1,4 +1,4 @@
-import { useForm } from "react-hook-form"
+import { SubmitHandler, useForm } from "react-hook-form"
 import {
   Box,
   Button,
@@ -11,9 +11,7 @@ import {
 
 interface CategoriaFormProps {
   defaultValues?: Category | undefined
-  onSubmit:
-    | ((data: CategoryPayload) => void)
-    | ((data: ProblemTypePayload) => void)
+  onSubmit: SubmitHandler<CategoryPayload> | SubmitHandler<ProblemTypePayload>
 }
 
 export const CategoriaForm = ({
@@ -37,7 +35,6 @@ export const CategoriaForm = ({
             <Input
               {...register("name", { required: "Campo obrigatório" })}
               placeholder="Nome"
-              variant="flushed"
             />
             {errors?.name && (
               <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
@@ -49,7 +46,6 @@ export const CategoriaForm = ({
             <Input
               {...register("description", { required: "Campo obrigatório" })}
               placeholder="Descrição"
-              variant="flushed"
             />
             {errors?.description && (
               <FormErrorMessage>

diff --git a/src/components/Forms/ChamadoForm/ChamadoFormWrapper.tsx b/src/components/Forms/ChamadoForm/ChamadoFormWrapper.tsx
@@ -30,8 +30,7 @@ import { chamadosDefaultValues } from "@components/Forms/ChamadoForm/helpers"
 import { WorkstationModal } from "@components/Modals/WorkstationModal"
 import { useRequest } from "@hooks/useRequest"
 import { getCities } from "@services/Cidades"
-import { request } from "@services/request"
-import { getWorkstations, updateWorkstation } from "@services/Workstation"
+import { getWorkstations } from "@services/Workstation"
 import { getSelectOptions } from "@utils/getSelectOptions"
 
 export interface ChamadoFormProps {
@@ -157,28 +156,17 @@ export const ChamadoFormWrapper = ({
   )
 
   const handleWorkstationEdit = useCallback(
-    async (data: CreateWorkstationPayload) => {
-      const payload = {
-        ...data,
-        phones: (data.phones as unknown as { number: string }[])?.map(
-          (phone) => phone?.number
-        )
-      }
-
-      const response = await request<Workstation>(
-        updateWorkstation(getValues("workstation_id.value"))(payload)
-      )
-
-      if (response.type === "success") {
-        toast.success(response.value?.message)
+    (result: Result<ApiResponse<Workstation>>) => {
+      if (result.type === "success") {
+        toast.success(result.value?.message)
         mutateWorkstations()
       } else {
-        toast.error(response.error?.message)
+        toast.error(result.error?.message)
       }
 
       closeWorkstationModal()
     },
-    [getValues, closeWorkstationModal, mutateWorkstations]
+    [closeWorkstationModal, mutateWorkstations]
   )
 
   return (
@@ -310,7 +298,7 @@ export const ChamadoFormWrapper = ({
       </FormProvider>
 
       <WorkstationModal
-        defaultValues={workstations?.data?.find(
+        workstation={workstations?.data?.find(
           (station) => station.id === getValues("workstation_id.value")
         )}
         isOpen={isWorkstationModalOpen}

diff --git a/src/components/Forms/ChamadoForm/index.tsx b/src/components/Forms/ChamadoForm/index.tsx
@@ -18,7 +18,7 @@ import { ControlledSelect } from "@components/ControlledSelect"
 import { EventForm } from "@components/Forms/ChamadoForm/EventForm"
 import { EventInfo } from "@components/Forms/ChamadoForm/EventInfo"
 import { useDropdownData } from "@components/Forms/ChamadoForm/useDropdowData"
-import { Modal } from "@components/Modal/Modal"
+import { Modal } from "@components/Modal"
 import {
   ChamadoPriority,
   ChamadoStatus,

diff --git a/src/components/Forms/CidadeForm/index.tsx b/src/components/Forms/CidadeForm/index.tsx
diff --git a/src/components/Forms/CityForm/index.tsx b/src/components/Forms/CityForm/index.tsx
@@ -0,0 +1,40 @@
+import { useForm } from "react-hook-form"
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input
+} from "@chakra-ui/react"
+
+interface CityFormProps {
+  defaultValues?: City | undefined
+  onSubmit: (data: CityPayload) => void
+}
+
+export const CityForm = ({ defaultValues, onSubmit }: CityFormProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<CityPayload>({
+    defaultValues
+  })
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <FormControl isInvalid={Boolean(errors?.name)} mb={8}>
+        <FormLabel>Nome</FormLabel>
+        <Input
+          {...register("name", { required: "Campo obrigatório" })}
+          placeholder="Nome"
+        />
+        <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
+      </FormControl>
+
+      <Button type="submit" width="100%" isLoading={isSubmitting}>
+        Registrar
+      </Button>
+    </form>
+  )
+}
diff --git a/src/components/Forms/UserForm/index.tsx b/src/components/Forms/UserForm/index.tsx
@@ -44,7 +44,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
               <Input
                 {...register("name", { required: "Campo obrigatório" })}
                 placeholder="Nome completo"
-                variant="flushed"
               />
               {errors?.name && (
                 <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
@@ -56,7 +55,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
               <Input
                 {...register("username", { required: "Campo obrigatório" })}
                 placeholder="Nome de Usuário"
-                variant="flushed"
               />
               {errors?.username && (
                 <FormErrorMessage>{errors?.username?.message}</FormErrorMessage>
@@ -66,11 +64,7 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
 
           <Box>
             <FormLabel htmlFor="email">E-mail</FormLabel>
-            <Input
-              {...register("email")}
-              placeholder="Descrição"
-              variant="flushed"
-            />
+            <Input {...register("email")} placeholder="Descrição" />
             {errors?.email && (
               <FormErrorMessage>{errors?.email?.message}</FormErrorMessage>
             )}
@@ -86,7 +80,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
                   isUpdating ? {} : { required: "Campo obrigatório" }
                 )}
                 placeholder="Senha"
-                variant="flushed"
               />
               {errors?.password && (
                 <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
@@ -111,7 +104,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
                       }
                 )}
                 placeholder="Confirmar Senha"
-                variant="flushed"
               />
               {errors?.confirmPassword && (
                 <FormErrorMessage>
@@ -129,7 +121,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
                   required: "Campo obrigatório"
                 })}
                 defaultValue=""
-                variant="flushed"
               >
                 <option disabled value="">
                   Escolha um Acesso
@@ -148,7 +139,6 @@ export const UserForm = ({ defaultValues, onSubmit }: UserFormProps) => {
               <Input
                 {...register("job_role", { required: "Campo obrigatório" })}
                 placeholder="Cargo"
-                variant="flushed"
               />
               {errors?.job_role && (
                 <FormErrorMessage>{errors?.job_role?.message}</FormErrorMessage>