Skip to content

Commit

Permalink
Merge pull request #39 from fga-eps-mds/FIX-125-controlled-select
Browse files Browse the repository at this point in the history 
 #125 FIX: Componente de Controlled Select
  • Loading branch information
@JPedroCh
JPedroCh authored Jun 14, 2023
2 parents 15d3539 + 1ac7334 commit efd06df
Show file tree
Hide file tree
Showing 13 changed files with 256 additions and 532 deletions.
53 changes: 31 additions & 22 deletions src/components/equipment-edit-form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { AxiosResponse } from 'axios';
import { useEffect } from 'react';
import { Button, Flex, Grid, GridItem } from '@chakra-ui/react';
import { Datepicker } from '../form-fields/date';
import { ControlledSelect } from '../form-fields/controlled-select';

import {
ESTADOS_EQUIPAMENTO,
Expand All @@ -16,28 +15,29 @@ import { Input } from '../form-fields/input';
import { TextArea } from '../form-fields/text-area';
import { toast } from '@/utils/toast';
import { api } from '@/config/lib/axios';
import { NewControlledSelect } from '../form-fields/new-controlled-select';

export type EditEquipFormValues = {
tippingNumber: string;
serialNumber: string;
type: { value: string; label: string };
type: string;
situacao: string;
model: string;
description?: string;
initialUseDate: { value: number; label: string };
initialUseDate: number;
acquisitionDate: Date;
screenSize?: string;
invoiceNumber: string;
power?: string;
screenType?: { value: string; label: string };
screenType?: string;
processor?: string;
storageType?: { value: string; label: string };
storageType?: string;
storageAmount?: string;
brandName: string;
acquisition: { name: string };
unitId?: string;
ram_size?: string;
estado: { value: string; label: string };
estado: string;
};

interface EditEquipmentFormProps {
Expand Down Expand Up @@ -114,11 +114,11 @@ export default function EquipmentEditForm({
const dateString = formatDate(acquisitionDate);

const payload = {
type: type.value,
estado: estado.value,
initialUseDate: initialUseDate.value,
storageType: storageType?.value,
screenType: screenType?.value,
type,
estado,
initialUseDate,
storageType,
screenType,
acquisitionDate: dateString,
...rest,
};
Expand All @@ -141,13 +141,15 @@ export default function EquipmentEditForm({
return (
<form id="equipment-register-form" onSubmit={onSubmit}>
<Grid templateColumns="repeat(3, 3fr)" gap={6}>
<ControlledSelect
<NewControlledSelect
label="Tipo de equipamento"
control={control}
name="type"
id="type"
options={TIPOS_EQUIPAMENTO}
placeholder="Selecione uma opção"
label="Tipo de equipamento"
placeholder="Tipo"
cursor="pointer"
defaultValue={equip?.type}
rules={{ required: 'Campo obrigatório', shouldUnregister: true }}
/>

Expand Down Expand Up @@ -215,24 +217,28 @@ export default function EquipmentEditForm({
})}
/>

<ControlledSelect
<NewControlledSelect
control={control}
name="estado"
id="estado"
options={ESTADOS_EQUIPAMENTO}
placeholder="Selecione uma opção"
label="Estado do equipamento"
rules={{ required: 'Campo obrigatório', shouldUnregister: true }}
cursor="pointer"
defaultValue={equip?.estado}
/>

<ControlledSelect
<NewControlledSelect
control={control}
name="initialUseDate"
id="initialUseDate"
options={listOfYears}
placeholder="Selecione uma opção"
label="Ano da aquisição"
rules={{ required: 'Campo obrigatório', shouldUnregister: true }}
cursor="pointer"
defaultValue={equip?.initialUseDate}
/>

<Datepicker
Expand All @@ -242,7 +248,7 @@ export default function EquipmentEditForm({
control={control}
/>

{watchType.value === 'CPU' && (
{watchType === 'CPU' && (
<>
<Input
label="Qtd. Memória RAM (GB)"
Expand All @@ -256,14 +262,16 @@ export default function EquipmentEditForm({
})}
/>

<ControlledSelect
<NewControlledSelect
control={control}
name="storageType"
id="storageType"
options={TIPOS_ARMAZENAMENTO}
placeholder="Selecione uma opção"
label="Tipo de armazenamento"
rules={{ required: 'Campo obrigatório' }}
cursor="pointer"
defaultValue={equip?.storageType}
/>

<Input
Expand All @@ -288,16 +296,18 @@ export default function EquipmentEditForm({
</>
)}

{watchType.value === 'Monitor' && (
{watchType === 'Monitor' && (
<>
<ControlledSelect
<NewControlledSelect
control={control}
name="screenType"
id="screenType"
options={TIPOS_MONITOR}
placeholder="Selecione uma opção"
label="Tipo de monitor"
rules={{ required: 'Campo obrigatório' }}
cursor="pointer"
defaultValue={equip?.screenType}
/>

<Input
Expand All @@ -310,8 +320,7 @@ export default function EquipmentEditForm({
</>
)}

{(watchType.value === 'Estabilizador' ||
watchType.value === 'Nobreak') && (
{(watchType === 'Estabilizador' || watchType === 'Nobreak') && (
<Input
label="Potência (VA)"
errors={errors.storageAmount}
Expand Down
26 changes: 2 additions & 24 deletions src/components/equipment-edit-modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,8 @@ function transformFields(data: any) {
if (!data) return;
const transformedData = { ...data };

transformedData.type = {
label: transformedData.type,
value: transformedData.type,
};

transformedData.estado = {
label: transformedData.estado,
value: transformedData.estado,
};

transformedData.storageType = {
label: transformedData.storageType,
value: transformedData.storageType,
};

transformedData.screenType = {
label: transformedData.screenType,
value: transformedData.screenType,
};

transformedData.initialUseDate = {
label: transformedData.initialUseDate.split('-')[0],
value: transformedData.initialUseDate.split('-')[0],
};
transformedData.initialUseDate =
transformedData.initialUseDate?.split('-')?.[0];

transformedData.brandName = transformedData.brand.name;

Expand Down
41 changes: 20 additions & 21 deletions src/components/equipment-form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useForm } from 'react-hook-form';
import { useEffect } from 'react';
import { Button, Flex, Grid, GridItem } from '@chakra-ui/react';
import { Datepicker } from '../form-fields/date';
import { ControlledSelect } from '../form-fields/controlled-select';

import {
ESTADOS_EQUIPAMENTO,
Expand All @@ -14,28 +13,29 @@ import { Input } from '../form-fields/input';
import { TextArea } from '../form-fields/text-area';
import { toast } from '@/utils/toast';
import { api } from '@/config/lib/axios';
import { NewControlledSelect } from '../form-fields/new-controlled-select';

type FormValues = {
tippingNumber: string;
serialNumber: string;
type: { value: string; label: string };
type: string;
situacao: string;
model: string;
description?: string;
initialUseDate: { value: string; label: string };
initialUseDate: string;
acquisitionDate: string;
screenSize?: string;
invoiceNumber: string;
power?: string;
screenType?: { value: string; label: string };
screenType?: string;
processor?: string;
storageType?: { value: string; label: string };
storageType?: string;
storageAmount?: string;
brandName: string;
acquisitionName: string;
unitId?: string;
ram_size?: string;
estado: { value: string; label: string };
estado: string;
};

interface EquipmentFormProps {
Expand All @@ -58,7 +58,7 @@ export default function EquipmentForm({
formState: { errors },
} = useForm<FormValues>();

const watchType = watch('type', { label: '', value: '' });
const watchType = watch('type');

useEffect(() => {
resetField('power');
Expand Down Expand Up @@ -86,11 +86,11 @@ export default function EquipmentForm({
formData;

const payload = {
type: type.value,
estado: estado.value,
initialUseDate: initialUseDate.value,
storageType: storageType?.value,
screenType: screenType?.value,
type,
estado,
initialUseDate,
storageType,
screenType,
...rest,
};

Expand Down Expand Up @@ -121,7 +121,7 @@ export default function EquipmentForm({
return (
<form id="equipment-register-form" onSubmit={onSubmit}>
<Grid templateColumns="repeat(3, 3fr)" gap={6}>
<ControlledSelect
<NewControlledSelect
control={control}
name="type"
id="type"
Expand Down Expand Up @@ -194,7 +194,7 @@ export default function EquipmentForm({
})}
/>

<ControlledSelect
<NewControlledSelect
control={control}
name="estado"
id="estado"
Expand All @@ -204,7 +204,7 @@ export default function EquipmentForm({
rules={{ required: 'Campo obrigatório', shouldUnregister: true }}
/>

<ControlledSelect
<NewControlledSelect
control={control}
name="initialUseDate"
id="initialUseDate"
Expand All @@ -220,7 +220,7 @@ export default function EquipmentForm({
required
control={control}
/>
{watchType.value === 'CPU' && (
{watchType === 'CPU' && (
<>
<Input
label="Qtd. Memória RAM (GB)"
Expand All @@ -233,7 +233,7 @@ export default function EquipmentForm({
},
})}
/>
<ControlledSelect
<NewControlledSelect
control={control}
name="storageType"
id="storageType"
Expand Down Expand Up @@ -263,9 +263,9 @@ export default function EquipmentForm({
</>
)}

{watchType.value === 'Monitor' && (
{watchType === 'Monitor' && (
<>
<ControlledSelect
<NewControlledSelect
control={control}
name="screenType"
id="screenType"
Expand All @@ -284,8 +284,7 @@ export default function EquipmentForm({
</>
)}

{(watchType.value === 'Estabilizador' ||
watchType.value === 'Nobreak') && (
{(watchType === 'Estabilizador' || watchType === 'Nobreak') && (
<Input
label="Potência (VA)"
errors={errors.storageAmount}
Expand Down
Loading

0 comments on commit efd06df

Please sign in to comment.