From 4ad2ec8d768b1055bff7baea547a6fce552379fe Mon Sep 17 00:00:00 2001 From: Joe Karow <58997957+JoeKarow@users.noreply.github.com> Date: Tue, 12 Dec 2023 17:38:25 -0500 Subject: [PATCH] start selection handling --- .../ui/modals/CoverageArea/index.stories.tsx | 11 ++ packages/ui/modals/CoverageArea/index.tsx | 149 ++++++++++-------- 2 files changed, 90 insertions(+), 70 deletions(-) diff --git a/packages/ui/modals/CoverageArea/index.stories.tsx b/packages/ui/modals/CoverageArea/index.stories.tsx index b8dd8d0ea2..82f4f31867 100644 --- a/packages/ui/modals/CoverageArea/index.stories.tsx +++ b/packages/ui/modals/CoverageArea/index.stories.tsx @@ -1,6 +1,8 @@ import { type Meta } from '@storybook/react' import { Button } from '~ui/components/core' +import { fieldOpt } from '~ui/mockData/fieldOpt' +import { serviceArea } from '~ui/mockData/serviceArea' import { CoverageArea } from '.' @@ -14,6 +16,15 @@ export default { }, layout: 'fullscreen', layoutWrapper: 'centeredHalf', + msw: [ + fieldOpt.govDistsByCountryNoSub, + fieldOpt.getSubDistricts, + fieldOpt.countries, + fieldOpt.govDists, + serviceArea.getServiceArea, + ], + rqDevtools: true, + whyDidYouRender: { collapseGroups: true }, }, args: { component: Button, diff --git a/packages/ui/modals/CoverageArea/index.tsx b/packages/ui/modals/CoverageArea/index.tsx index c07d7fd7ee..682a3d7d49 100644 --- a/packages/ui/modals/CoverageArea/index.tsx +++ b/packages/ui/modals/CoverageArea/index.tsx @@ -5,7 +5,6 @@ import { Box, Button, type ButtonProps, - Checkbox, CloseButton, createPolymorphicComponent, Divider, @@ -14,13 +13,11 @@ import { Modal, Select, Stack, - Tabs, Text, Title, } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' import compact from 'just-compact' -import { rest } from 'msw' import { useTranslation } from 'next-i18next' import { forwardRef, useState } from 'react' import { useForm } from 'react-hook-form' @@ -34,17 +31,43 @@ import { ModalTitle } from '../ModalTitle' const MOCK_SELECT_VALUES = ['One', 'Two', 'Three'] -const CoverageAreaModal = forwardRef(({ id }, ref) => { +const CoverageAreaModal = forwardRef(({ id, ...props }, ref) => { const { classes } = useStyles() const { t, i18n } = useTranslation(['common', 'gov-dist']) const countryTranslation = new Intl.DisplayNames(i18n.language, { type: 'region' }) - const [opened, { open, close }] = useDisclosure() + const [opened, { open, close }] = useDisclosure(true) //TODO: remove `true` when done with dev const [activeTab, setActiveTab] = useState('united-states') - const [subDistParent, setSubDistParent] = useState('') + const [selected, setSelected] = useState({ country: null, govDist: null, subDist: null }) + const setVal = { + country: (value: string) => setSelected((prev) => ({ ...prev, country: value })), + govDist: (value: string) => setSelected((prev) => ({ ...prev, govDist: value })), + subDist: (value: string) => setSelected((prev) => ({ ...prev, subDist: value })), + blank: () => setSelected({ country: null, govDist: null, subDist: null }), + } + + const [subDistParent, setSubDistParent] = useState('gdst_01GW2HJ1D3W61ZMBGY0FGKY9EC') const { data: dataServiceArea } = api.serviceArea.getServiceArea.useQuery(id) - const { data: dataCountry } = api.fieldOpt.govDistsByCountryNoSub.useQuery() - const { data: dataSubDist } = api.fieldOpt.getSubDistricts.useQuery(subDistParent, { - enabled: subDistParent !== '', + const { data: dataCountry } = api.fieldOpt.countries.useQuery( + { activeForOrgs: true }, + { + select: (data) => data.map(({ id, cca2 }) => ({ value: id, label: countryTranslation.of(cca2) })) ?? [], + placeholderData: [], + } + ) + const { data: dataDistrict } = api.fieldOpt.govDists.useQuery( + { countryId: selected.country ?? '', parentsOnly: true }, + { + enabled: selected.country !== null, + select: (data) => + data?.map(({ id, tsKey, tsNs }) => ({ value: id, label: t(tsKey, { ns: tsNs }) })) ?? [], + placeholderData: [], + } + ) + const { data: dataSubDist } = api.fieldOpt.getSubDistricts.useQuery(selected.govDist ?? '', { + enabled: selected.govDist !== null, + select: (data) => + data?.map(({ id, tsKey, tsNs }) => ({ value: id, label: t(tsKey, { ns: tsNs }) })) ?? [], + placeholderData: [], }) const apiUtils = api.useUtils() const form = useForm({ @@ -60,53 +83,44 @@ const CoverageAreaModal = forwardRef(({ id }, ref) => }, }) - const LocationSelect = ({ placeholder, data /*, inputPropsName*/ }: SelectFieldProps) => { - // Display close button when field is not empty - // const displayClose = form.getInputProps(inputPropsName).value.length > 0 - const rightSection = ( - - { - //displayClose && ( - <> - console.log('clicked')} - variant='transparent' - style={{ pointerEvents: 'all' }} - > - - - - - /*)*/ - } - - - ) + // const LocationSelect = ({ placeholder, data /*, inputPropsName*/ }: SelectFieldProps) => { + // // Display close button when field is not empty + // // const displayClose = form.getInputProps(inputPropsName).value.length > 0 + // const rightSection = ( + // + // { + // //displayClose && ( + // <> + // console.log('clicked')} + // variant='transparent' + // style={{ pointerEvents: 'all' }} + // > + // + // + // + // + // /*)*/ + // } + // + // + // ) - // Disable Select fields unless it's the state select field, or the state field has a value - // const disabled = inputPropsName.includes('state) || form.getInputProps('state').value.length === 0 + // // Disable Select fields unless it's the state select field, or the state field has a value + // // const disabled = inputPropsName.includes('state) || form.getInputProps('state').value.length === 0 - return ( - + // ) + // } const activeAreas = compact( [ @@ -143,18 +157,7 @@ const CoverageAreaModal = forwardRef(({ id }, ref) => {`${t('organization')}: `} - - - {t('united-states')} - {t('canada')} - {t('mexico')} - - - - + {activeAreas} @@ -162,9 +165,13 @@ const CoverageAreaModal = forwardRef(({ id }, ref) => - - - +