From 1e632686fd175e49effece5ee8f5338935b90091 Mon Sep 17 00:00:00 2001 From: BohdanBybliv <125794488+BohdanBybliv@users.noreply.github.com> Date: Mon, 4 Dec 2023 13:18:53 +0200 Subject: [PATCH 1/5] 868 search the "no results" message always appears (#1023) * fixed popover styles * fixed the No results message styles * hide the No results message during the query execution --- .../layout/header/HeaderBlock.component.tsx | 34 +++++++++++++++++-- src/app/layout/header/HeaderBlock.styles.scss | 10 +++--- .../SearchBlock/SearchBlock.component.tsx | 25 ++------------ .../SearchBlock/SearchBlock.styles.scss | 12 +++++-- 4 files changed, 51 insertions(+), 30 deletions(-) diff --git a/src/app/layout/header/HeaderBlock.component.tsx b/src/app/layout/header/HeaderBlock.component.tsx index 6c695c32c..98764d73a 100644 --- a/src/app/layout/header/HeaderBlock.component.tsx +++ b/src/app/layout/header/HeaderBlock.component.tsx @@ -18,6 +18,8 @@ import { Button, Input, Popover, PopoverProps } from 'antd'; import { joinToStreetcodeClickEvent } from '@/app/common/utils/googleAnalytics.unility'; import SearchBlock from './SearchBlock/SearchBlock.component'; import { useMediaQuery } from 'react-responsive'; +import StreetcodeFilterRequestDTO, { StreetcodeFilterResultDTO } from '@/models/filters/streetcode-filter.model'; +import StreetcodesApi from '@/app/api/streetcode/streetcodes.api'; const HeaderBlock = () => { const [isHeaderHidden, setIsHeaderHidden] = useState(false); @@ -28,6 +30,8 @@ const HeaderBlock = () => { const searchBlockRef = useRef(null); const { modalStore: { setModal, setIsPageDimmed, isPageDimmed } } = useModalContext(); const dimWrapperRef = useRef(null); + const [searchResult, setSearchResult] = useState([]); + const [isLoading, setIsLoading] = useState(true); const isDesktop = useMediaQuery({ query: '(min-width: 1025px)', @@ -35,6 +39,9 @@ const HeaderBlock = () => { const handlePopoverVisibleChange = (visible: boolean) => { setIsPopoverVisible(visible); + if(!visible) { + setIsLoading(true); + } }; const handleInputChange = (e: React.ChangeEvent) => { @@ -75,15 +82,37 @@ const HeaderBlock = () => { toggle(); }; + const search = () => { + if (searchQuery.length === 0) { + setSearchResult([]); + return; + } + + const filter: StreetcodeFilterRequestDTO = { searchQuery }; + + StreetcodesApi.getByFilter(filter) + .then((response: StreetcodeFilterResultDTO[]) => { + setSearchResult(response); + setIsLoading(false); + }); + } + + useEffect(() => { + if(isDesktop){ + search(); + } + }, [searchQuery]); + const popoverProps: PopoverProps = { trigger: 'click', - open: isPopoverVisible, + open: isPopoverVisible && !isLoading, getPopupContainer: (trigger: HTMLElement) => trigger.parentNode as HTMLElement, content:(
- +
), + afterOpenChange: handlePopoverVisibleChange, }; const onInputClick = () => { @@ -194,6 +223,7 @@ const HeaderBlock = () => { className="searchButton" onClick={() => { handlePopoverVisibleChange(true); + search(); }} > Пошук diff --git a/src/app/layout/header/HeaderBlock.styles.scss b/src/app/layout/header/HeaderBlock.styles.scss index 4750e6cbd..aa1ae4177 100644 --- a/src/app/layout/header/HeaderBlock.styles.scss +++ b/src/app/layout/header/HeaderBlock.styles.scss @@ -8,6 +8,12 @@ $navbar-innerwidth: 500px; $navbar-hidden-innerwidth: 400px; +.HeaderBlock{ + .ant-popover-inner{ + @include mut.rem-padded(0, 6px, 0, 0); + } +} + .navBarContainer { @include mut.flexed($justify-content: space-between, $align-items: center); @include mut.sized(100%, 82px); @@ -116,10 +122,6 @@ $navbar-hidden-innerwidth: 400px; } } -.ant-popover-inner{ - @include mut.rem-padded(0, 6px, 0, 0); -} - .searchPopover{ width: calc(100vw - #{$navbar-hidden-innerwidth}); } diff --git a/src/app/layout/header/SearchBlock/SearchBlock.component.tsx b/src/app/layout/header/SearchBlock/SearchBlock.component.tsx index 4d6093916..58a825481 100644 --- a/src/app/layout/header/SearchBlock/SearchBlock.component.tsx +++ b/src/app/layout/header/SearchBlock/SearchBlock.component.tsx @@ -1,37 +1,18 @@ import './SearchBlock.styles.scss'; -import { useEffect, useState } from 'react'; - -import StreetcodesApi from '@/app/api/streetcode/streetcodes.api'; import StreetcodeFilterRequestDTO, { StreetcodeFilterResultDTO } from '@/models/filters/streetcode-filter.model'; import SearchResultItem from './SearchResultItem/SearchItem.component'; interface Props { - searchQuery: string; + searchResult: StreetcodeFilterResultDTO[]; } -const SearchBlock = ({ searchQuery } : Props) => { - const [searchResult, setSearchResult] = useState([]); - - useEffect(() => { - if (searchQuery.length === 0) { - setSearchResult([]); - return; - } - - const filter: StreetcodeFilterRequestDTO = { searchQuery }; - - StreetcodesApi.getByFilter(filter) - .then((response: StreetcodeFilterResultDTO[]) => { - setSearchResult(response); - }); - }, [searchQuery]); - +const SearchBlock = ({ searchResult } : Props) => { const blockHeight = searchResult.length > 9 ? '418px' : '100%'; return (
- {searchResult.length === 0 ?

Результатів немає

: + {searchResult.length === 0 ?

Результатів немає

: (searchResult.map((searchResultItem: StreetcodeFilterResultDTO, index) => ( )))} diff --git a/src/app/layout/header/SearchBlock/SearchBlock.styles.scss b/src/app/layout/header/SearchBlock/SearchBlock.styles.scss index 1ae2f2811..3d94e585c 100644 --- a/src/app/layout/header/SearchBlock/SearchBlock.styles.scss +++ b/src/app/layout/header/SearchBlock/SearchBlock.styles.scss @@ -8,13 +8,21 @@ overflow-y: auto; @include mut.flexed($direction: column); @include mut.rem-padded(12px, 0, 12px, 12px); + + p{ + @include mut.rem-margined($right: 20px, $left: 20px); + } } @media screen and (max-width: 1024px) { - .searchResultsBlock{ - @include mut.rem-padded($right: 6px, $left: 6px); + .searchResultsBlock{ + width: 100vw; + @include mut.rem-padded(6px, 6px, 6px, 6px); overflow-y: auto; + p{ + @include mut.rem-margined(13px, 20px, 13px, 20px); + } } } From 4982b27899ed121a0f7f555310c4b785282802b5 Mon Sep 17 00:00:00 2001 From: mykola-krai <133663112+mykola-krai@users.noreply.github.com> Date: Thu, 7 Dec 2023 11:28:55 +0200 Subject: [PATCH 2/5] Fixed partner modal save button for editing (#1051) --- .../PartnerModal/PartnerModal.component.tsx | 42 +++++++++---------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/src/features/AdminPage/PartnersPage/PartnerModal/PartnerModal.component.tsx b/src/features/AdminPage/PartnersPage/PartnerModal/PartnerModal.component.tsx index f97fc9d18..459a76e9e 100644 --- a/src/features/AdminPage/PartnersPage/PartnerModal/PartnerModal.component.tsx +++ b/src/features/AdminPage/PartnersPage/PartnerModal/PartnerModal.component.tsx @@ -45,6 +45,7 @@ const PartnerModal: React.FC< { isStreetcodeVisible = true, afterSubmit, }) => { + // eslint-disable-next-line max-len const URL_REGEX_VALIDATION_PATTERN = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/; const [form] = Form.useForm(); const [urlTitleEnabled, setUrlTitleEnabled] = useState(''); @@ -85,6 +86,16 @@ const PartnerModal: React.FC< { useEffect(() => { if (partnerItem && open) { imageId.current = partnerItem.logoId; + setFileList([{ + name: '', + thumbUrl: base64ToUrl( + partnerItem.logo?.base64, + partnerItem.logo?.mimeType, + ), + uid: partnerItem.logoId.toString(), + status: 'done', + }]); + form.setFieldsValue({ title: partnerItem.title, isKeyPartner: partnerItem.isKeyPartner, @@ -125,7 +136,7 @@ const PartnerModal: React.FC< { try { const values = await form.validateFields(); form.submit(); - message.success("Партнера успішно додано!", 2) + message.success('Партнера успішно додано!', 2); } catch (error) { message.config({ top: 100, @@ -151,9 +162,9 @@ const PartnerModal: React.FC< { setFileList([]); }; - const closeModal =() => { + const closeModal = () => { setIsModalOpen(false); - } + }; const onSuccesfulSubmitLinks = (formValues: any) => { const url = formValues.url as string; @@ -283,9 +294,11 @@ const PartnerModal: React.FC< { onCancel={closeModal} className="modalContainer" footer={null} - closeIcon={ - - } + closeIcon={( + + + + )} >
{ imageId.current = image.id; }} - defaultFileList={ - partnerItem - ? [ - { - name: '', - thumbUrl: base64ToUrl( - partnerItem.logo?.base64, - partnerItem.logo?.mimeType, - ), - uid: partnerItem.logoId.toString(), - status: 'done', - }, - ] - : [] - } >

Виберіть чи перетягніть файл

From 5306992b377f5c7f4affaaf8b108c81f1d548e25 Mon Sep 17 00:00:00 2001 From: Oleh-Kril <91199925+Oleh-Kril@users.noreply.github.com> Date: Thu, 7 Dec 2023 11:29:56 +0200 Subject: [PATCH 3/5] fix news title height and add more lines to main text on the news card (#1050) --- .../NewsSliderItem/NewsSliderItem.styles.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss b/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss index ab4b0ea82..e55ed9564 100644 --- a/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss +++ b/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss @@ -108,8 +108,8 @@ height: 100%; @include textCard.cardText( - $title-max-lines: 2, - $text-max-lines: 3); + $title-max-lines: 1, + $text-max-lines: 4); .cardTextContainer{ padding: 0; @@ -121,7 +121,11 @@ &Title{ @include mut.with-font(ft.$closer-text-font, $font-weight: 500, $font-size: 36px); - line-height: f.pxToRem(38px); + line-height: f.pxToRem(47.5px); + + @media (min-width: 360px) and (max-width: 767px) { + @include mut.truncated(2); + } @media (max-width: 1024px) { font-size: f.pxToRem(20px); From 7a4e53e41ce6a7c548cbe056e500ffcba7714cc6 Mon Sep 17 00:00:00 2001 From: Bohdan Bozhyk <53005363+Adeodonne@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:02:31 +0200 Subject: [PATCH 4/5] fix third card(for connections) on streetcode page (#1015) fix third card(for connections) on streetcode page --- .../StreetcodeCard.component.tsx | 60 ++++++++----------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx index 59899ed7d..82a4209b5 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx @@ -107,42 +107,30 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) = swipeOnClick infinite > - {images.map((image, index) => { - if (images.length > 1 && index === 0) { - return ( -
- {images[index].imageDetails?.alt} - {images[index].imageDetails?.alt} -
- ); - } - - return ( - {image.imageDetails?.alt} - ); - })} - +
+ {images[0].imageDetails?.alt} + {images[1].imageDetails?.alt} +
+ + {images[1].imageDetails?.alt}
From e0792252fa0e90d4b9bb71cb742b011eff7e1276 Mon Sep 17 00:00:00 2001 From: Kateryna Yatsiuk <113370393+KateYatsiuk@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:13:55 +0200 Subject: [PATCH 5/5] Changed streetcode datestring length to 100 (#1036) --- .../NewStreetcode/MainBlock/DatePickerPart.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/AdminPage/NewStreetcode/MainBlock/DatePickerPart.component.tsx b/src/features/AdminPage/NewStreetcode/MainBlock/DatePickerPart.component.tsx index 1b5327661..507ae7da9 100644 --- a/src/features/AdminPage/NewStreetcode/MainBlock/DatePickerPart.component.tsx +++ b/src/features/AdminPage/NewStreetcode/MainBlock/DatePickerPart.component.tsx @@ -153,7 +153,7 @@ const DatePickerPart = React.memo(({ setFirstDate, setSecondDate, form, onChange setDateString(e.target.value)} value={dateString} />