From e17691b3b58bcc0052de6c6ec141121879b6381c Mon Sep 17 00:00:00 2001 From: Bartosz Szar Date: Fri, 8 Nov 2024 17:29:45 +0100 Subject: [PATCH] feat: create application data sheet --- src/app/investments/details.tsx | 8 +- src/app/investments/form.tsx | 2 +- src/components/application-card.tsx | 17 +- .../bottom-sheet/application-sheet.tsx | 147 ++++++++++++++++++ src/components/input.tsx | 2 +- src/components/select.tsx | 11 +- src/components/status-button.tsx | 1 - src/models/investment.ts | 13 ++ src/types/data.ts | 2 +- src/utils/schemas.ts | 10 ++ 10 files changed, 191 insertions(+), 22 deletions(-) create mode 100644 src/components/bottom-sheet/application-sheet.tsx diff --git a/src/app/investments/details.tsx b/src/app/investments/details.tsx index 43bca32..a664555 100644 --- a/src/app/investments/details.tsx +++ b/src/app/investments/details.tsx @@ -13,6 +13,7 @@ import { useUpdateInvestmentMutation, } from '@/api/investments.service'; import ApplicationCard from '@/components/application-card'; +import ApplicationSheet from '@/components/bottom-sheet/application-sheet'; import DateSheet from '@/components/bottom-sheet/date-sheet'; import StatusSheet from '@/components/bottom-sheet/status-sheet'; import DateCard from '@/components/date-card'; @@ -69,6 +70,7 @@ const InvestmentDetailsScreen: FC = () => { const decisionDateSheetRef = useRef(null); const deforestationDateSheetRef = useRef(null); const plantingDateSheetRef = useRef(null); + const applicationSheetRef = useRef(null); return ( investment && ( @@ -199,7 +201,10 @@ const InvestmentDetailsScreen: FC = () => { />

Dane do wniosku

- + applicationSheetRef.current?.present()} + />

Notatki

@@ -292,6 +297,7 @@ const InvestmentDetailsScreen: FC = () => { }) } /> + ) diff --git a/src/app/investments/form.tsx b/src/app/investments/form.tsx index 72e3fef..e298292 100644 --- a/src/app/investments/form.tsx +++ b/src/app/investments/form.tsx @@ -72,7 +72,7 @@ const AddOrUpdateInvestmentScreen: FC = () => { } else { await addInvestment(data); } - router.replace('/'); + router.back(); }; return ( diff --git a/src/components/application-card.tsx b/src/components/application-card.tsx index e770ea0..f1c3db8 100644 --- a/src/components/application-card.tsx +++ b/src/components/application-card.tsx @@ -2,13 +2,13 @@ import { FC } from 'react'; import { Button, H4, Text, useTheme, XGroup, YGroup } from 'tamagui'; import { Application } from '@/types/data'; -import { formattedDate } from '@/utils/helpers'; type Props = { application: Application; + handlePress: () => void; }; -const ApplicationCard: FC = ({ application }) => { +const ApplicationCard: FC = ({ application, handlePress }) => { const theme = useTheme(); return ( @@ -29,7 +29,7 @@ const ApplicationCard: FC = ({ application }) => {

Wycinka komercyjna

- {application.isCommercial ? 'Tak' : 'Nie'} + {application.isCommercial || '-'}

Przyczyna wycinki

@@ -37,15 +37,11 @@ const ApplicationCard: FC = ({ application }) => {

Termin przeprowadzenia wycinki

- - {formattedDate(application.deforestationDate, 'D MMMM YYYY')} - + {application.deforestationDate || '-'}

Termin wykonania nasadzeń zastępczych

- - {formattedDate(application.plantingDate, 'D MMMM YYYY')} - + {application.plantingDate || '-'}

Miejsce nasadzeń

@@ -56,8 +52,7 @@ const ApplicationCard: FC = ({ application }) => { {application.species || '-'} - {/* TODO: add edit button functionality */} - diff --git a/src/components/bottom-sheet/application-sheet.tsx b/src/components/bottom-sheet/application-sheet.tsx new file mode 100644 index 0000000..009ecd9 --- /dev/null +++ b/src/components/bottom-sheet/application-sheet.tsx @@ -0,0 +1,147 @@ +import { + BottomSheetBackdrop, + BottomSheetBackdropProps, + BottomSheetModal, + BottomSheetView, +} from '@gorhom/bottom-sheet'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { router } from 'expo-router'; +import React, { forwardRef, useCallback } from 'react'; +import { useForm } from 'react-hook-form'; +import { Platform } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { Button, H4, ScrollView, useTheme, View, YStack } from 'tamagui'; + +import { useUpdateInvestmentMutation } from '@/api/investments.service'; +import Input from '@/components/input'; +import { UpdateApplicationRequest } from '@/models/investment'; +import { Investment } from '@/types/data'; +import { applicationValidationSchema } from '@/utils/schemas'; + +type Props = { investment: Investment }; + +const ApplicationSheet = forwardRef(({ investment }, ref) => { + const insets = useSafeAreaInsets(); + const theme = useTheme(); + + const renderBackdrop = useCallback( + (props: BottomSheetBackdropProps) => , + [] + ); + + const [updateInvestment] = useUpdateInvestmentMutation(); + + const getDefaultValues = () => ({ + signature: investment.application.signature || '', + isCommercial: investment.application.isCommercial || '', + deforestationCause: investment.application.deforestationCause || '', + deforestationDate: investment.application.deforestationDate || '', + plantingDate: investment.application.plantingDate || '', + plantingSite: investment.application.plantingSite || '', + species: investment.application.species || '', + }); + + const { control, handleSubmit } = useForm({ + mode: 'onChange', + defaultValues: getDefaultValues(), + resolver: zodResolver(applicationValidationSchema), + }); + + const onSubmit = async (data: UpdateApplicationRequest) => { + await updateInvestment({ + id: investment.id, + data: { ...investment, application: { ...investment.application, ...data } }, + }); + + (ref as React.RefObject).current?.dismiss(); + }; + + return ( + + +

Dane do winosku

+ + + + + + + + + + + + + + + + + + ); +}); + +export default ApplicationSheet; diff --git a/src/components/input.tsx b/src/components/input.tsx index f81e15f..7bb8389 100644 --- a/src/components/input.tsx +++ b/src/components/input.tsx @@ -57,7 +57,7 @@ const Input = (props: Props) => { case 'about': return 100; default: - return 34; + return 200; } }; diff --git a/src/components/select.tsx b/src/components/select.tsx index 7dcd979..98c6163 100644 --- a/src/components/select.tsx +++ b/src/components/select.tsx @@ -3,17 +3,13 @@ import { FieldValues, useController, UseControllerProps } from 'react-hook-form' import { Adapt, Label, Select as SelectPicker, Sheet, Text, useTheme, YStack } from 'tamagui'; import { CheckIcon, ChevronDownIcon } from '@/assets/icons'; -import { ContentTypes } from '@/types/form'; type SelectType = { name: string; label?: string; items: { id: number; label: string }[]; - autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'; - secureTextEntry?: boolean; placeholder?: string; - textContentType?: ContentTypes; - multiline?: boolean; + booleanValue?: boolean; }; export type Props = SelectType & UseControllerProps; @@ -27,12 +23,15 @@ const Select = (props: Props) => { const theme = useTheme(); + const extractValue = (value: string) => + items.find(item => item.label.toLowerCase() === value)?.id; + return ( onChange(items.find(item => item.label.toLowerCase() === v)?.id)} + onValueChange={v => onChange(extractValue(v))} disablePreventBodyScroll {...props}> = ({ status, onPress, active }) => {