diff --git a/package.json b/package.json index 72113cf..fd5374e 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "prettier": "@aplinkosministerija/biip-prettier-config", "dependencies": { - "@aplinkosministerija/design-system": "^1.1.14", + "@aplinkosministerija/design-system": "^1.2.0", "@material-ui/core": "^4.12.4", "@reduxjs/toolkit": "^1.8.1", "@sentry/react": "^7.61.0", diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx deleted file mode 100644 index f85d26e..0000000 --- a/src/components/buttons/Button.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { ChildrenType } from '../../types'; -import Loader from '../other/Loader'; -export enum ButtonColors { - PRIMARY = 'primary', - SECONDARY = 'secondary', - TERTIARY = 'tertiary', - DANGER = 'danger', - SUCCESS = 'success', - TRANSPARENT = 'transparent', -} - -export interface ButtonProps { - variant?: ButtonColors; - route?: string; - children?: ChildrenType; - leftIcon?: JSX.Element | string; - rightIcon?: JSX.Element | string; - height?: number; - type?: string; - loading?: boolean; - padding?: string; - buttonPadding?: string; - signature?: boolean; - disabled?: boolean; -} - -const Button = ({ - variant = ButtonColors.PRIMARY, - route, - children, - height, - padding = '0', - leftIcon, - buttonPadding, - rightIcon, - type, - loading = false, - className, - disabled = false, - ...rest -}: ButtonProps & React.ButtonHTMLAttributes) => { - const isDisabled = loading || disabled; - return ( - - - {leftIcon} - {loading ? : children} - {rightIcon} - - - ); -}; - -const Wrapper = styled.div<{ - padding: string; - signature?: boolean; - disabled: boolean; -}>` - opacity: ${({ disabled }) => (disabled ? 0.48 : 1)}; - padding: ${({ padding }) => (padding ? padding : 0)}; - min-width: 100px; -`; - -const StyledButton = styled.button<{ - variant: ButtonColors; - height: number; - padding?: string; -}>` - display: flex; - justify-content: center; - align-items: center; - height: ${({ height }) => (height ? height + 'px' : '40px')}; - border-radius: 4px; - padding: ${({ padding }) => (padding ? padding : '11px 20px;')}; - background-color: ${({ variant, theme }) => theme.colors[variant]}; - color: #231f20; - border: 1px solid ${({ variant }) => (variant !== 'transparent' ? 'transparent' : ' #231F20')}; - font-weight: normal; - font-size: 1.6rem; - - :hover { - background-color: ${({ variant, theme }) => - variant !== 'transparent' ? theme.colors.hover[variant] : theme.colors.tertiaryLight}; - } - - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; - width: 100%; -`; - -export default Button; diff --git a/src/components/containers/FormHistoryContainer.tsx b/src/components/containers/FormHistoryContainer.tsx index 80835e8..1942143 100644 --- a/src/components/containers/FormHistoryContainer.tsx +++ b/src/components/containers/FormHistoryContainer.tsx @@ -3,10 +3,10 @@ import { useEffect, useRef } from 'react'; import { useInfiniteQuery } from 'react-query'; import { useParams } from 'react-router-dom'; import styled from 'styled-components'; -import { device } from '../../styles'; +import { ButtonVariants, device } from '../../styles'; import { FormHistory } from '../../types'; import { intersectionObserverConfig } from '../../utils/configs'; -import { ButtonColors, HistoryTypes } from '../../utils/constants'; +import { HistoryTypes } from '../../utils/constants'; import { formatDateAndTime } from '../../utils/format'; import { handleErrorFromServerToast } from '../../utils/functions'; import { formLabels } from '../../utils/texts'; @@ -20,13 +20,13 @@ interface FormHistoryContainerProps { name: string; } type HistoryContainerColorsType = { - [key in HistoryTypes]: ButtonColors | null; + [key in HistoryTypes]: ButtonVariants | null; }; const historyContainerColors: HistoryContainerColorsType = { - [HistoryTypes.APPROVED]: ButtonColors.SUCCESS, - [HistoryTypes.RETURNED]: ButtonColors.PRIMARY, - [HistoryTypes.REJECTED]: ButtonColors.DANGER, + [HistoryTypes.APPROVED]: ButtonVariants.SUCCESS, + [HistoryTypes.RETURNED]: ButtonVariants.PRIMARY, + [HistoryTypes.REJECTED]: ButtonVariants.DANGER, [HistoryTypes.CREATED]: null, [HistoryTypes.UPDATED]: null, [HistoryTypes.DELETED]: null, @@ -151,7 +151,7 @@ const Container = styled.div` } `; -const IMG = styled.img<{ variant: ButtonColors }>` +const IMG = styled.img<{ variant: ButtonVariants }>` width: 16px; height: 16px; background-color: ${({ theme, variant }) => theme.colors[variant]}; diff --git a/src/components/fields/PhotoUploadField.tsx b/src/components/fields/PhotoUploadField.tsx index 70614ef..1fc308d 100644 --- a/src/components/fields/PhotoUploadField.tsx +++ b/src/components/fields/PhotoUploadField.tsx @@ -7,9 +7,8 @@ import { inputLabels, validationTexts } from '../../utils/texts'; import { validateFileTypes } from '../../utils/validation'; import Icon from '../other/Icons'; import Loader from '../other/Loader'; -import Modal from '../other/Modal'; import PhotoField from './PhotoField'; -import { useKeyAction } from '@aplinkosministerija/design-system'; +import { Modal, useKeyAction } from '@aplinkosministerija/design-system'; export interface PhotoUploadFieldProps { name: string; diff --git a/src/components/map/DisplayMap.tsx b/src/components/map/DisplayMap.tsx index c8b58cb..078709e 100644 --- a/src/components/map/DisplayMap.tsx +++ b/src/components/map/DisplayMap.tsx @@ -1,3 +1,4 @@ +import { Button } from '@aplinkosministerija/design-system'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useQuery, useQueryClient } from 'react-query'; import { createSearchParams } from 'react-router-dom'; @@ -7,7 +8,6 @@ import api from '../../api'; import { device } from '../../styles'; import { Url } from '../../utils/constants'; import { handleErrorFromServerToast } from '../../utils/functions'; -import Button from '../buttons/Button'; import Icon from '../other/Icons'; import LoaderComponent from '../other/LoaderComponent'; @@ -73,7 +73,6 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps const handleToggle = (e) => { e.preventDefault(); - setShowModal(!showModal); }; @@ -99,10 +98,20 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps return ( <> - {loading ? : null} - + {loading && } + - + @@ -113,17 +122,21 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps title={'Radaviečių žemėlapis'} ref={iframeRef} src={fullUrl.toString()} - width={'100%'} + width="100%" height={showFullScreen ? '100%' : `${height || '230px'}`} style={{ border: 0 }} - allowFullScreen={true} + allowFullScreen onLoad={handleLoadMap} aria-hidden="false" - tabIndex={1} + tabIndex={0} /> - {error && {error}} + {error && ( + + {error} + + )} ); }; diff --git a/src/components/map/DrawMap.tsx b/src/components/map/DrawMap.tsx deleted file mode 100644 index 6f0adb6..0000000 --- a/src/components/map/DrawMap.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; -import styled from 'styled-components'; -import { device } from '../../styles'; -import { Url } from '../../utils/constants'; -import Button from '../buttons/Button'; -import Icon from '../other/Icons'; - -export interface MapProps { - height?: string; - onSave?: (data: any) => void; - onClose?: () => void; - error?: string; - queryString?: string; - value?: string; -} - -const DrawMap = ({ height, onSave, error = '', onClose, queryString = '', value }: MapProps) => { - const [showModal, setShowModal] = useState(false); - const iframeRef = useRef(null); - - const src = `${Url.DRAW}${queryString}`; - - const handleLoadMap = () => { - if (!value) return; - - iframeRef?.current?.contentWindow?.postMessage({ geom: value }, '*'); - }; - - const handleSaveGeom = useCallback( - (event) => { - if (!event?.data?.mapIframeMsg) return; - - const data = JSON.parse(event?.data?.mapIframeMsg?.data); - - if (!data) return; - - onSave && onSave(data); - }, - [onSave], - ); - - useEffect(() => { - window.addEventListener('message', handleSaveGeom); - return () => window.removeEventListener('message', handleSaveGeom); - }, [handleSaveGeom]); - - return ( - <> - - - { - e.preventDefault(); - if (onClose) { - return onClose(); - } - - setShowModal(!showModal); - }} - > - - - - - - - - {error && {error}} - - ); -}; - -const Container = styled.div<{ - showModal: boolean; - error: string; -}>` - width: 100%; - ${({ showModal }) => - showModal && - ` - height: 100%; - display: flex; - position: fixed; - top: 0; - left: 0; - background-color: rgba(0, 0, 0, 0.4); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; - overflow-y: auto; - position: absolute; - width: 100%; - height: 100%; - background-color: #0b1b607a; - top: 0; - left: 0; - overflow-y: auto; - z-index: 1001; - - `} - ${({ theme, error }) => error && `border: 1px solid ${theme.colors.error};`} -`; - -const InnerContainer = styled.div<{ - showModal: boolean; -}>` - position: relative; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - ${({ showModal }) => - showModal && - ` - padding: 16px; - `} - - @media ${device.mobileL} { - padding: 0; - } -`; - -const StyledIframe = styled.iframe<{ - height: string; - width: string; -}>` - width: ${({ width }) => width}; - height: ${({ height }) => height}; -`; - -const StyledButton = styled(Button)<{ popup: boolean }>` - position: absolute; - z-index: 10; - right: ${({ popup }) => (popup ? 28 : 11)}px; - top: ${({ popup }) => (popup ? 28 : 15)}px; - min-width: 28px; - - height: 28px; - @media ${device.mobileL} { - top: 80px; - right: 10px; - } - button { - border-color: #e5e7eb; - background-color: white !important; - width: 30px; - height: 30px; - padding: 0; - box-shadow: 0px 18px 41px #121a5529; - } -`; - -const StyledIcon = styled(Icon)` - font-size: 3rem; - color: #6b7280; -`; - -const StyledIconContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -const ErrorMessage = styled.label` - position: relative; - color: ${({ theme }) => theme.colors.error}; - font-size: 1.4rem; -`; - -export default DrawMap; diff --git a/src/components/other/DeleteCard.tsx b/src/components/other/DeleteCard.tsx index 66991f5..bc8b171 100644 --- a/src/components/other/DeleteCard.tsx +++ b/src/components/other/DeleteCard.tsx @@ -1,8 +1,8 @@ +import { Button, useKeyAction } from '@aplinkosministerija/design-system'; import styled from 'styled-components'; import { ButtonVariants, device } from '../../styles'; import { buttonsTitles } from '../../utils/texts'; import Icon from './Icons'; -import { Button } from '@aplinkosministerija/design-system'; interface ActionContainerInterface { onClose: () => void; @@ -23,34 +23,42 @@ const DeleteCard = ({ title, loading = false, }: ActionContainerInterface) => { + const handleKeyDown = useKeyAction(() => onClose()); + return ( - <> - - onClose()}> - - - {title} - - {descriptionFirstPart} {name} {descriptionSecondPart} - - - onClose()} - variant={ButtonVariants.TRANSPARENT} - > - {buttonsTitles.cancel} - - onClick()} - variant={ButtonVariants.DANGER} - loading={loading} - disabled={loading} - > - {buttonsTitles.delete} - - - - + + onClose()} + tabIndex={0} + role="button" + aria-label="Close delete modal" + onKeyDown={handleKeyDown()} + > + + + {title} + + {descriptionFirstPart} {name} {descriptionSecondPart} + + + onClose()} + variant={ButtonVariants.TRANSPARENT} + aria-label="Cancel" + > + {buttonsTitles.cancel} + + onClick()} + variant={ButtonVariants.DANGER} + loading={loading} + disabled={loading} + aria-label="Delete" + > + {buttonsTitles.delete} + + + ); }; @@ -63,7 +71,7 @@ const Container = styled.div` display: flex; flex-direction: column; position: relative; - + outline: none; /* Prevent outline when focused by mouse */ @media ${device.mobileL} { padding: 40px 16px 32px 16px; width: 100%; diff --git a/src/components/other/DeleteComponent.tsx b/src/components/other/DeleteComponent.tsx index 74f75a3..1d4706b 100644 --- a/src/components/other/DeleteComponent.tsx +++ b/src/components/other/DeleteComponent.tsx @@ -5,8 +5,7 @@ import { DeleteInfoProps } from '../../types'; import { buttonsTitles } from '../../utils/texts'; import DeleteCard from './DeleteCard'; import Icon from './Icons'; -import Modal from './Modal'; -import { Button } from '@aplinkosministerija/design-system'; +import { Button, Modal } from '@aplinkosministerija/design-system'; export const DeleteComponent = ({ deleteInfo }: { deleteInfo?: DeleteInfoProps }) => { const [showModal, setShowModal] = useState(false); diff --git a/src/components/other/MapPopUp.tsx b/src/components/other/MapPopUp.tsx deleted file mode 100644 index 4adb8ba..0000000 --- a/src/components/other/MapPopUp.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components'; -import { slugs } from '../../utils/routes'; -import { buttonsTitles } from '../../utils/texts'; -import Button from '../buttons/Button'; -import Icon from './Icons'; - -interface MapModalProps { - description: string; -} - -export const MapPopUp = ({ description }: MapModalProps) => { - const [showPopUp, setShowPopUp] = useState(true); - const navigate = useNavigate(); - - if (!showPopUp) return <>; - - return ( - - - {description} - setShowPopUp(false)}> - - - - - - - ); -}; - -const Row = styled.div` - display: flex; - justify-content: space-between; -`; - -const InnerContainer = styled.div` - position: absolute; - z-index: 100; - top: 12px; - background-color: white; - border: 1px solid #dfdfdf; - border-radius: 4px; - padding: 20px; - display: flex; - flex-direction: column; - gap: 12px; - max-width: 400px; -`; - -const StyledCloseButton = styled(Icon)` - color: #121926; - font-size: 2rem; -`; - -const IconContainer = styled.div` - cursor: pointer; -`; - -const Description = styled.div` - font-size: 1.6rem; - color: #121926; -`; diff --git a/src/components/other/Modal.tsx b/src/components/other/Modal.tsx deleted file mode 100644 index e844bd5..0000000 --- a/src/components/other/Modal.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useCallback, useEffect } from 'react'; -import styled from 'styled-components'; -import { device } from '../../styles'; -interface ModalProps { - visible: boolean; - onClose?: () => void; - children?: React.ReactNode; -} - -const Modal = ({ visible, children, onClose }: ModalProps) => { - const handleCloseOnEscape = useCallback( - (event: any) => { - if (event.key === 'Escape') { - onClose && onClose(); - } - }, - [onClose], - ); - - useEffect(() => { - window.addEventListener('keydown', handleCloseOnEscape); - return () => window.removeEventListener('keydown', handleCloseOnEscape); - }, [visible, handleCloseOnEscape]); - - if (!visible) { - return ; - } - return ( - { - if (e.target !== e.currentTarget) return; - - onClose && onClose(); - }} - > - {children} - - ); -}; - -const ModalContainer = styled.div` - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - margin: auto; - background-color: #0b1b607a; - z-index: 1001; - display: flex; - align-items: center; - justify-content: center; - overflow: auto; - overflow-y: auto; - padding: 16px; - @media ${device.mobileL} { - padding: 0px; - } -`; - -export default Modal; diff --git a/src/components/other/ProfilesDropdown.tsx b/src/components/other/ProfilesDropdown.tsx index 26dcc25..56ba00b 100644 --- a/src/components/other/ProfilesDropdown.tsx +++ b/src/components/other/ProfilesDropdown.tsx @@ -1,15 +1,15 @@ +import { Button, useKeyAction } from '@aplinkosministerija/design-system'; import { useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { useAppSelector } from '../../state/hooks'; +import { ButtonVariants } from '../../styles'; import { handleNavigate } from '../../utils/functions'; import { useFilteredRoutes, useGetCurrentProfile, useLogoutMutation } from '../../utils/hooks'; import { handleSelectProfile } from '../../utils/loginFunctions'; import { slugs } from '../../utils/routes'; import { buttonsTitles, inputLabels } from '../../utils/texts'; import Icon from './Icons'; -import { Button, useKeyAction } from '@aplinkosministerija/design-system'; -import { ButtonVariants } from '../../styles'; export const slugToIcon = { [slugs.requests]: 'description', @@ -48,8 +48,10 @@ const ProfilesDropdown = () => { onClick={() => setShowSelect(!showSelect)} onKeyDown={handleKeyDownOnDropdownSelect(!showSelect)} tabIndex={0} - aria-label={`Open profile select dropdown`} + aria-label="Open profile select dropdown" role="button" + aria-haspopup="menu" + aria-expanded={showSelect} > @@ -60,8 +62,8 @@ const ProfilesDropdown = () => { {showSelect && ( - - {inputLabels.profiles} + + {inputLabels.profiles} {user?.profiles?.map((profile, index) => { const selected = profile.id === currentProfile?.id; @@ -70,16 +72,15 @@ const ProfilesDropdown = () => { { - handleSelectProfile(profile.id); - }} + role="menuitem" selected={selected} - aria-label={`Select profile ${(profile?.name, profile?.email || user?.email)}`} + aria-selected={selected} + aria-labelledby={`profile-${index}-name`} + onKeyDown={handleKeyDown(profile.id)} + onClick={() => handleSelectProfile(profile.id)} >
- {profile?.name || '-'} + {profile?.name || '-'} {profile?.email || user?.email}
{selected && } @@ -95,7 +96,8 @@ const ProfilesDropdown = () => { onClick={() => navigateOnTabSelect(route.slug)} selected={location.pathname.endsWith(route.slug)} tabIndex={0} - role="button" + role="menuitem" + aria-current={location.pathname.endsWith(route.slug) ? 'page' : undefined} onKeyDown={handleKeyDownOnTab(route.slug)} > @@ -110,7 +112,8 @@ const ProfilesDropdown = () => { left={} onClick={() => mutateAsync()} tabIndex={0} - role="button" + role="menuitem" + aria-label="Log out" > {buttonsTitles.logout} diff --git a/src/components/other/StatusModal.tsx b/src/components/other/StatusModal.tsx index 4aa1c6b..a8f7814 100644 --- a/src/components/other/StatusModal.tsx +++ b/src/components/other/StatusModal.tsx @@ -1,10 +1,9 @@ +import { Button, Modal, TextAreaField, useKeyAction } from '@aplinkosministerija/design-system'; import styled from 'styled-components'; -import { device } from '../../styles'; +import { ButtonVariants, device } from '../../styles'; import { ButtonColors, StatusTypes } from '../../utils/constants'; import { buttonsTitles, inputLabels } from '../../utils/texts'; import Icon from './Icons'; -import Modal from './Modal'; -import { Button, TextAreaField } from '@aplinkosministerija/design-system'; interface StatusModalProps { handleChange: any; @@ -20,45 +19,48 @@ export const actionButtonLabels = { }; export const buttonColors = { - [StatusTypes.SUBMITTED]: ButtonColors.PRIMARY, - [StatusTypes.APPROVED]: ButtonColors.SUCCESS, - [StatusTypes.RETURNED]: ButtonColors.PRIMARY, - [StatusTypes.REJECTED]: ButtonColors.DANGER, + [StatusTypes.SUBMITTED]: ButtonVariants.PRIMARY, + [StatusTypes.APPROVED]: ButtonVariants.SUCCESS, + [StatusTypes.RETURNED]: ButtonVariants.PRIMARY, + [StatusTypes.REJECTED]: ButtonVariants.DANGER, }; export const StatusModal = ({ handleChange, values, labels }: StatusModalProps) => { const handleClose = () => handleChange('status', ''); + const handleKeyDown = useKeyAction(() => handleClose()); const { status = '', comment } = values; return ( - + - {labels?.[status]} + {labels?.[status]} handleChange('comment', comment)} /> - @@ -112,3 +114,5 @@ const Title = styled.div` margin-bottom: 20px; color: #231f20; `; + +export default StatusModal; diff --git a/src/components/other/TabBar.tsx b/src/components/other/TabBar.tsx index 3e19f0c..a5c3968 100644 --- a/src/components/other/TabBar.tsx +++ b/src/components/other/TabBar.tsx @@ -1,3 +1,4 @@ +import { useKeyAction } from '@aplinkosministerija/design-system'; import { map } from 'lodash'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; @@ -17,29 +18,39 @@ export interface Tab { const TabBar = ({ tabs, activeTabValue }: TabBarProps) => { const navigate = useNavigate(); + const handleKeyDown = useKeyAction((tab) => handleNavigate(tab)); - if (tabs.length < 2) return <>; + if (tabs.length < 2) return null; + + const handleNavigate = (tab) => { + navigate({ + ...(tab.route && { + pathname: tab.route, + }), + ...(tab.search && { + search: tab.search, + }), + }); + }; return ( - - {map(tabs, (tab) => ( - - navigate({ - ...(tab.route && { - pathname: tab.route, - }), - ...(tab.search && { - search: tab.search, - }), - }) - } - > - {tab.label} - - ))} + + {map(tabs, (tab) => { + const isSelected = tab.value === activeTabValue; + return ( + handleNavigate(tab)} + onKeyDown={handleKeyDown(tab)} + > + {tab.label} + + ); + })} ); }; @@ -58,10 +69,10 @@ const TabButton = styled.div<{ isActive: boolean }>` `2px ${isActive ? theme.colors.primary : 'transparent'} solid`}; margin-right: 24px; cursor: pointer; + padding: 8px 0; `; const TabLabel = styled.span` - margin: 8px 0; color: #121926; font-size: 1.4rem; `; diff --git a/src/pages/ObservationForm/functions.ts b/src/pages/ObservationForm/functions.ts index 6c10c3b..a4b3700 100644 --- a/src/pages/ObservationForm/functions.ts +++ b/src/pages/ObservationForm/functions.ts @@ -53,15 +53,15 @@ export const getAnimalEvolutionOptions = (activity?: AnimalActivity) => return false; }); -export const getMapQueryString = (disabled = false) => { - const queryString = `?`; +export const getMapPath = (disabled = false) => { const param = new URLSearchParams(); + let path = '/edit'; if (disabled) { param.append('preview', 'true'); - return queryString + param; + } else { + param.append('buffer', 'true'); } - param.append('buffer', 'true'); - return queryString + param; + return `${path}?${param}`; }; diff --git a/src/pages/ObservationForm/hooks/useData.ts b/src/pages/ObservationForm/hooks/useData.ts index 16c6d2c..4faaf25 100644 --- a/src/pages/ObservationForm/hooks/useData.ts +++ b/src/pages/ObservationForm/hooks/useData.ts @@ -7,7 +7,7 @@ import { deleteDescriptionSecondPart, deleteTitles, } from '../../../utils/texts'; -import { getMapQueryString } from '../functions'; +import { getMapPath } from '../functions'; import { FormProps, FormServerProps } from '../types'; import { default as api, default as Api } from './../../../api'; import { StatusTypes } from './../../../utils/constants'; @@ -50,7 +50,7 @@ export const useData = () => { }; const disabled = !!observationForm && !observationForm?.canEdit; - const mapQueryString = getMapQueryString(disabled); + const mapQueryString = getMapPath(disabled); const formMutation = useMutation( (values: FormServerProps) => diff --git a/src/pages/ObservationForm/index.tsx b/src/pages/ObservationForm/index.tsx index bf5fa0b..747f35b 100644 --- a/src/pages/ObservationForm/index.tsx +++ b/src/pages/ObservationForm/index.tsx @@ -1,6 +1,6 @@ -import { AsyncSelectField } from '@aplinkosministerija/design-system'; -import DrawMap from '../../components/map/DrawMap'; +import { AsyncSelectField, MapField } from '@aplinkosministerija/design-system'; import { StatusModal } from '../../components/other/StatusModal'; +import { mapsHost, Url } from '../../utils/constants'; import Api from './../../api'; import FormHistoryContainer from './../../components/containers/FormHistoryContainer'; import SimpleContainer from './../../components/containers/SimpleContainer'; @@ -72,11 +72,12 @@ const ObservationForm = () => { setValues={setValues} /> - handleChange('geom', data)} + onChange={(data) => handleChange('geom', data)} height={'300px'} /> diff --git a/src/pages/RequestForm/components/TaxonomiesContainer.tsx b/src/pages/RequestForm/components/TaxonomiesContainer.tsx index bbf1704..d918491 100644 --- a/src/pages/RequestForm/components/TaxonomiesContainer.tsx +++ b/src/pages/RequestForm/components/TaxonomiesContainer.tsx @@ -1,10 +1,10 @@ +import { MapField } from '@aplinkosministerija/design-system'; import { isEmpty, isEqual } from 'lodash'; import SimpleContainer from '../../../components/containers/SimpleContainer'; import Tree from '../../../components/fields/TreeSelect'; -import DrawMap from '../../../components/map/DrawMap'; -import { RequestTypes } from '../../../utils/constants'; +import { mapsHost, RequestTypes } from '../../../utils/constants'; import { inputLabels } from '../../../utils/texts'; -import { getMapQueryString } from '../function'; +import { getMapPath } from '../function'; import { useSpeciesTree } from '../hooks/useSpeciesTree'; import { Container } from '../styles'; import { SpeciesTaxonomiesProps } from '../types'; @@ -17,7 +17,7 @@ const SpeciesTaxonomiesContainer = ({ disabled, }: SpeciesTaxonomiesProps) => { const options = useSpeciesTree(); - const mapQueryString = getMapQueryString(disabled); + const mapPath = getMapPath(disabled); return ( <> @@ -42,11 +42,14 @@ const SpeciesTaxonomiesContainer = ({ /> )} {!isEqual(values.type, RequestTypes.CHECK) && ( - onChange('geom', data)} + onChange={(data) => { + onChange('geom', data); + }} height={'300px'} /> )} diff --git a/src/pages/RequestForm/function.ts b/src/pages/RequestForm/function.ts index c305ab5..b7512fd 100644 --- a/src/pages/RequestForm/function.ts +++ b/src/pages/RequestForm/function.ts @@ -57,18 +57,18 @@ export const getFormTypes = (isTenantUser: boolean) => { return formTypes; }; -export const getMapQueryString = (disabled = false) => { - const queryString = `?`; +export const getMapPath = (disabled = false) => { const param = new URLSearchParams(); + let path = '/edit'; if (disabled) { param.append('preview', 'true'); - return queryString + param; + } else { + param.append('types[]', 'polygon'); + param.append('multi', 'true'); } - param.append('types[]', 'polygon'); - param.append('multi', 'true'); - return queryString + param; + return `${path}?${param}`; }; export const getScope = (isDeletedRequest: boolean) => (isDeletedRequest ? 'deleted' : ''); diff --git a/src/pages/RequestForm/hooks/useData.ts b/src/pages/RequestForm/hooks/useData.ts index 511a32a..a6b381a 100644 --- a/src/pages/RequestForm/hooks/useData.ts +++ b/src/pages/RequestForm/hooks/useData.ts @@ -130,7 +130,7 @@ export const useData = () => { type: request?.type || RequestTypes.GET, status: undefined, comment: '', - geom: request?.geom || '', + geom: request?.geom || undefined, speciesTypes: request?.speciesTypes || [SpeciesTypes.ENDANGERED], }; diff --git a/src/pages/RequestForm/types.ts b/src/pages/RequestForm/types.ts index 6407874..9c24838 100644 --- a/src/pages/RequestForm/types.ts +++ b/src/pages/RequestForm/types.ts @@ -1,3 +1,4 @@ +import { FeatureCollection } from '@aplinkosministerija/design-system'; import { FileProps, FormHistory, HandleChangeType } from '../../types'; import { RequestTypes, SpeciesTypes, StatusTypes } from '../../utils/constants'; @@ -16,7 +17,7 @@ export interface RequestFormProps { receiveDate?: Date; exactCoordinates?: boolean; comment?: string; - geom: string; + geom?: FeatureCollection; speciesTypes: SpeciesTypes[]; } @@ -37,7 +38,7 @@ export interface RequestFormServerProps { exactCoordinates?: boolean | undefined; description: string | undefined; }; - geom?: string | undefined; + geom?: FeatureCollection; type: RequestTypes | undefined; } diff --git a/src/types.ts b/src/types.ts index 0c4a160..747110f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,4 @@ +import { FeatureCollection } from '@aplinkosministerija/design-system'; import { AnimalActivity, AnimalEvolutionState, @@ -239,7 +240,7 @@ export interface Request { error?: string; history: FormHistory[]; canEdit: boolean; - geom?: string; + geom?: FeatureCollection; speciesTypes?: SpeciesTypes[]; } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index f4d2402..69a1e32 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -223,7 +223,7 @@ export enum SpeciesTypes { INVASIVE = 'INVASIVE', } -const mapsHost = import.meta.env.VITE_MAPS_HOST; +export const mapsHost = import.meta.env.VITE_MAPS_HOST; export const Url = { DRAW: `${mapsHost}/edit`, SPECIES: `${mapsHost}/rusys`, diff --git a/yarn.lock b/yarn.lock index badcd16..313720c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -67,10 +67,10 @@ resolved "https://registry.yarnpkg.com/@aplinkosministerija/biip-prettier-config/-/biip-prettier-config-1.1.0.tgz#f62b0dde76107ab3f646cce2d54d02bd783ce388" integrity sha512-DxWGfBY2KuK8OgP2KUb96ieGlqE5gYuxI22Yt1FfoIldlDENW5I8kXj+YFB4iG65i7e1neXPZd9RGHmxxDxxSQ== -"@aplinkosministerija/design-system@^1.1.14": - version "1.1.14" - resolved "https://registry.yarnpkg.com/@aplinkosministerija/design-system/-/design-system-1.1.14.tgz#76c08d312d820215afd4cb94ee25544a3bc409c5" - integrity sha512-Az8P9lQ0dOuyqCxJ/odOv0KSc57/7XZcUJ22mecX6Riptr7dbiDCFPpNd83gQ007f8QXLnSzJOxdBlQDFgBZtQ== +"@aplinkosministerija/design-system@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@aplinkosministerija/design-system/-/design-system-1.2.0.tgz#6fd73079c32344d41b23e7ed72ff91a54d060094" + integrity sha512-BPMN3V7cKNNxQpNS8XzTsbD2ky7cV7/iugM6shLdSAx7cWkykmu0WIhuecUDZROimWOigBf4lQJ38xtQ38atRw== dependencies: "@mapbox/mapbox-gl-draw" "^1.4.3" "@mapbox/mapbox-gl-draw-static-mode" "^1.0.1"