Skip to content

Commit

Permalink
Merge pull request #71 from fga-eps-mds/#131-alertas-homologacao
Browse files Browse the repository at this point in the history 
fix: #131 removing alert button in homologation and fixing a dateTime problem
  • Loading branch information
@italofernandes13
italofernandes13 authored Jul 10, 2023
2 parents dfe38fc + 6c697a4 commit fa35a17
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 214 deletions.
113 changes: 13 additions & 100 deletions src/components/action-buttons/approve-button-homologation/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { useCallback, useState } from 'react';
import { FaPlus, FaTrash } from 'react-icons/fa';
import { useState } from 'react';
import { FaTrash } from 'react-icons/fa';
import {
Box,
Button,
Flex,
Grid,
Divider,
Heading,
Popover,
PopoverAnchor,
Expand All @@ -18,16 +16,15 @@ import {
Text,
useDisclosure,
} from '@chakra-ui/react';
import { Controller, useFieldArray, useForm } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { ActionButtonProps } from '../types';
import { ActionButton } from '..';
import { Input } from '@/components/form-fields/input';
import { DeleteButton } from '../delete-button';
import { IssuePayloadOpen } from '@/features/issues/types';
import { parseSelectedDatetime } from '@/utils/format-date';

interface ApproveButtonProps<Data> extends ActionButtonProps<Data> {
handleApproveHomolog: (justify: string) => void;
handleApproveHomolog: (justify: string, dateTime: Date) => void;
passDateTime: Date;
}

Expand All @@ -53,22 +50,7 @@ export function ApproveButton<Data>({
},
});

const { fields, append, remove } = useFieldArray({
control,
shouldUnregister: true,
name: 'problem_types_payload',
});

const handleAddDate = useCallback(() => {
append({ label: '', value: '' });
}, [append]);

const handleRemoveDate = useCallback(
(index: number) => () => {
remove(index);
},
[remove]
);
const dateTime = watch('dateTime');

return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement="auto">
Expand All @@ -84,6 +66,7 @@ export function ApproveButton<Data>({
{...props}
/>
</PopoverAnchor>

<PopoverContent
height="200%"
width="150%"
Expand Down Expand Up @@ -126,13 +109,12 @@ export function ApproveButton<Data>({
}) => (
<>
<Input
{...register('dateTime', {
required: 'Campo obrigatório',
})}
{...register('dateTime')}
label="Data do Evento"
type="datetime-local"
name="dateTime"
id="dateTime"
min={parseSelectedDatetime(String(new Date()))}
onChange={onChange}
ref={ref}
onBlur={onBlur}
Expand All @@ -145,85 +127,16 @@ export function ApproveButton<Data>({
)}
/>
</Box>
<Box>
<Flex gap={4} alignItems="center" my="0.5rem">
<Text>Alertas</Text>
</Flex>
<Divider mb={4} mt={1} />
<Grid
templateColumns="repeat(auto-fill, minmax(220px, 1fr))"
gap={6}
>
{fields?.map((field, index) => {
return (
<Flex key={field.id} gap={1}>
<Controller
control={control}
name="alerts"
rules={{
min: {
value: new Date().toISOString(),
message: 'Informe uma data no futuro.',
},
required: 'Informe a data ou exclua o alerta',
}}
render={({
field: { onChange, onBlur, ref, value },
fieldState: { error },
}) => (
<Box w="full">
<Input
label="alert_dates"
type="date"
name={`alert_dates.${index}.date`}
id={`alert_dates.${index}.date`}
onChange={onChange}
min={new Date().toISOString()}
ref={ref}
onBlur={onBlur}
w="full"
value={value?.[0]?.toISOString() || ''}
/>
<Text color="red.400" mt=".5rem">
{error ? error.message : null}
</Text>
</Box>
)}
/>

<DeleteButton
label={`Alerta ${index + 1}`}
onClick={handleRemoveDate(index)}
variant="ghost"
alignSelf="flex-end"
_hover={{
backgroundColor: 'blackAlpha.300',
}}
/>
</Flex>
);
})}
</Grid>
<Flex my="0.3rem">
<ActionButton
label="Adicionar Alerta"
icon={<FaPlus />}
variant="outline"
disabled
color="primary"
tooltipProps={{
placement: 'bottom',
}}
onClick={handleAddDate}
/>
</Flex>
</Box>
</PopoverBody>

<PopoverFooter borderBottomRadius="base" border={0} bg="blackAlpha.300">
<Flex justifyContent="space-between">
<Button
onClick={() => props.handleApproveHomolog(justification)}
// only push dateTime if it is bigger than now

onClick={() =>
props.handleApproveHomolog(justification, dateTime)
}
colorScheme="green"
variant="solid"
size="lg"
Expand Down
116 changes: 4 additions & 112 deletions src/features/homologations/components/issue-open-edit-form/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import {
Box,
Button,
Divider,
Flex,
Grid,
GridItem,
Icon,
InputLeftElement,
Text,
} from '@chakra-ui/react';
import { useCallback, useEffect, useState } from 'react';
import { Controller, useFieldArray, useForm } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { BsPersonCircle, BsTelephoneFill } from 'react-icons/bs';
import { HiOutlineMail } from 'react-icons/hi';
import { useLocation } from 'react-router-dom';
import { FaPlus } from 'react-icons/fa';
import { ControlledSelect } from '@/components/form-fields';
import { Input } from '@/components/form-fields/input';
import { useGetAllCities } from '@/features/cities/api/get-all-cities';
Expand All @@ -28,8 +25,6 @@ import { parseSelectedDatetime } from '@/utils/format-date';
import { useGetAllWorkstations } from '@/features/workstations/api/get-all-workstations';
import { useGetAllProblemCategories } from '@/features/problem/api/get-all-problem-category';
import { maskPhoneField } from '@/utils/form-utils';
import { DeleteButton } from '@/components/action-buttons/delete-button';
import { ActionButton } from '@/components/action-buttons';

export function UpdateExternIssueForm() {
const locate = useLocation();
Expand All @@ -46,7 +41,6 @@ export function UpdateExternIssueForm() {
formState: { errors },
} = useForm<IssuePayloadOpen>({
// define alguns valores padrão para os campos abaixo.

defaultValues: {
city_payload: {
label: locate.state.city.name ?? '',
Expand Down Expand Up @@ -107,6 +101,7 @@ export function UpdateExternIssueForm() {
const category = watch('problem_category_payload');
const problemTypes = watch('problem_types_payload');

// função que retorna os postos de trabalho de acordo com a cidade selecionada
const workstationsOptions = city
? workstations
?.filter((workstation) => workstation.city.id === city.value)
Expand All @@ -116,6 +111,7 @@ export function UpdateExternIssueForm() {
}))
: [];

// função que retorna os tipos de problemas de acordo com a categoria selecionada
const problemTypesOptions = category
? problem_categories
?.filter((cat) => cat.id === category.value)
Expand Down Expand Up @@ -168,23 +164,6 @@ export function UpdateExternIssueForm() {
}
}, [problemTypes]);

const { fields, append, remove } = useFieldArray({
control,
shouldUnregister: true,
name: 'alerts' as any,
});

const handleAddDate = useCallback(() => {
append({ label: '', value: '' });
}, [append]);

const handleRemoveDate = useCallback(
(index: number) => () => {
remove(index);
},
[remove]
);

return (
<form id="update-issue-form" onSubmit={handleSubmit(onSubmit)}>
<Grid templateColumns="repeat(2, 1fr)" gap={8}>
Expand Down Expand Up @@ -279,10 +258,6 @@ export function UpdateExternIssueForm() {
/>

<ControlledSelect
// defaultValue={{
// label: city.name,
// value: city.id,
// }}
control={control}
name="city_payload"
id="city_payload"
Expand All @@ -293,17 +268,6 @@ export function UpdateExternIssueForm() {
rules={{ required: 'Campo obrigatório' }}
/>

{/* <Select
aria-label="Filtrar por cidade"
placeholder="Cidade"
options={citiesOptions}
onChange={(option) => setSelectedCity(option?.value || '')}
isClearable
isSearchable={false}
chakraStyles={chakraStyles}
components={customComponents}
/> */}

<ControlledSelect
control={control}
name="workstation_payload"
Expand Down Expand Up @@ -353,7 +317,7 @@ export function UpdateExternIssueForm() {
},
}}
render={({
field: { onChange, onBlur, ref, value },
field: { onChange, onBlur, ref },
fieldState: { error },
}) => (
<>
Expand All @@ -376,78 +340,6 @@ export function UpdateExternIssueForm() {
/>
</Box>

<Box>
<Flex gap={4} alignItems="center" my="-0.2rem">
<Text>Alertas</Text>
</Flex>
<Divider mb={4} mt={1} />
<Grid templateColumns="repeat(auto-fill, minmax(220px, 1fr))" gap={6}>
{fields?.map((field, index) => {
return (
<Flex key={field.id} gap={1}>
<Controller
control={control}
name="alerts"
rules={{
min: {
value: new Date().toISOString(),
message: 'Informe uma data no futuro.',
},
required: 'Informe a data ou exclua o alerta',
}}
render={({
field: { onChange, onBlur, ref, value },
fieldState: { error },
}) => (
<Box w="full">
<Input
label={`Alerta ${index + 1}`}
type="date"
name={`alert_dates.${index}.date`}
id={`alert_dates.${index}.date`}
onChange={onChange}
min={new Date().toISOString()}
ref={ref}
onBlur={onBlur}
w="full"
// value={value}
value={value?.[0]?.toISOString() || ''}
/>
<Text color="red.400" mt=".5rem">
{error ? error.message : null}
</Text>
</Box>
)}
/>

<DeleteButton
label={`Alerta ${index + 1}`}
onClick={handleRemoveDate(index)}
variant="ghost"
alignSelf="flex-end"
_hover={{
backgroundColor: 'blackAlpha.300',
}}
/>
</Flex>
);
})}
</Grid>
<Flex my="-0.3rem">
<ActionButton
label="Adicionar Alerta"
icon={<FaPlus />}
variant="outline"
disabled
color="primary"
tooltipProps={{
placement: 'bottom',
}}
onClick={handleAddDate}
/>
</Flex>
</Box>

<GridItem colSpan={2} display="center" justifyContent="center">
<Input
minHeight="150px"
Expand Down
5 changes: 3 additions & 2 deletions src/features/homologations/components/issue-open-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,9 @@ export function ExternIssueItem({
onDelete(externIssue.id);
};

const handleApproveHomolog = (justify: string) => {
const updatedExternIssue = { ...externIssue };
// função de aprovar agendamento que passa os dados pro serviço de envio de email e criação de agendamento
const handleApproveHomolog = (justify: string, dateTime: Date) => {
const updatedExternIssue = { ...externIssue, dateTime };

const issueOpenId = updatedExternIssue?.id ?? '';

Expand Down

0 comments on commit fa35a17

Please sign in to comment.