From 2c8323adee53fdec813e3b016ebbfc9952d3d96f Mon Sep 17 00:00:00 2001 From: Siarhei Karol Date: Tue, 15 Oct 2024 18:15:42 +0500 Subject: [PATCH 01/22] default selected Search controls values --- src/common/hooks/useSearch.ts | 9 ++++++- src/common/i18n/messages.ts | 1 + .../ComplexLookupField/ComplexLookupField.tsx | 1 + .../Mar\321\201PreviewComplexLookup.tsx" | 2 +- .../ComplexLookupField/ModalComplexLookup.tsx | 27 ++++++++++++++++--- src/components/Select/Select.scss | 12 +++++++++ src/components/Select/Select.tsx | 12 ++++++--- .../complexLookup/complexLookup.config.ts | 6 ++++- .../complexLookupSearchBy.config.ts | 10 ++++--- src/types/complexLookup.d.ts | 5 ++++ src/types/search.d.ts | 1 + 11 files changed, 72 insertions(+), 14 deletions(-) diff --git a/src/common/hooks/useSearch.ts b/src/common/hooks/useSearch.ts index 2e5fe276..11f6424f 100644 --- a/src/common/hooks/useSearch.ts +++ b/src/common/hooks/useSearch.ts @@ -20,6 +20,7 @@ export const useSearch = () => { isSortedResults, hasSearchParams, defaultSearchBy, + defaultQuery, navigationSegment, isVisibleSegments, endpointUrlsBySegments, @@ -39,6 +40,7 @@ export const useSearch = () => { const [data, setData] = useRecoilState(state.search.data); const resetData = useResetRecoilState(state.search.data); const [pageMetadata, setPageMetadata] = useRecoilState(state.search.pageMetadata); + const resetPageMetadata = useResetRecoilState(state.search.pageMetadata); const setStatusMessages = useSetRecoilState(state.status.commonMessages); const setForceRefreshSearch = useSetRecoilState(state.search.forceRefresh); const resetPreviewContent = useResetRecoilState(state.inputs.previewContent); @@ -52,7 +54,11 @@ export const useSearch = () => { useEffect(() => { setSearchBy(defaultSearchBy); - }, [setSearchBy, defaultSearchBy]); + + if (defaultQuery) { + setQuery(defaultQuery); + } + }, [setSearchBy, setQuery, defaultSearchBy, defaultQuery]); const clearPagination = useCallback(() => { setPageMetadata(DEFAULT_PAGES_METADATA); @@ -199,6 +205,7 @@ export const useSearch = () => { useEffect(() => { if (!query) { resetData(); + resetPageMetadata(); resetMessage(); return; diff --git a/src/common/i18n/messages.ts b/src/common/i18n/messages.ts index d9e60bd2..e30fa7bd 100644 --- a/src/common/i18n/messages.ts +++ b/src/common/i18n/messages.ts @@ -183,6 +183,7 @@ export const BASE_LOCALE = { 'ld.fetchingExternalResourceById': 'Fetching external resource id {resourceId}...', 'ld.lastUpdated': 'Last updated', 'ld.marcAuthorityRecord': 'MARC authority record', + 'ld.selectBrowseOption': 'Select a browse option' }; export const i18nMessages = { diff --git a/src/components/ComplexLookupField/ComplexLookupField.tsx b/src/components/ComplexLookupField/ComplexLookupField.tsx index 4b3da975..7f743bf2 100644 --- a/src/components/ComplexLookupField/ComplexLookupField.tsx +++ b/src/components/ComplexLookupField/ComplexLookupField.tsx @@ -73,6 +73,7 @@ export const ComplexLookupField: FC = ({ value = undefined, id, entry, on = ({ const subLabel = ( <> {marcPreviewMetadata?.headingType} • : - + diff --git a/src/components/ComplexLookupField/ModalComplexLookup.tsx b/src/components/ComplexLookupField/ModalComplexLookup.tsx index a8b7904f..62294d09 100644 --- a/src/components/ComplexLookupField/ModalComplexLookup.tsx +++ b/src/components/ComplexLookupField/ModalComplexLookup.tsx @@ -1,4 +1,4 @@ -import { FC, memo, useCallback, useMemo } from 'react'; +import { FC, memo, useCallback, useEffect, useMemo } from 'react'; import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'; import classNames from 'classnames'; import { FormattedMessage, FormattedNumber } from 'react-intl'; @@ -23,12 +23,20 @@ interface ModalComplexLookupProps { isOpen: boolean; onAssign: ({ id, title, linkedFieldValue }: ComplexLookupAssignRecordDTO) => void; onClose: VoidFunction; + value?: string; assignEntityName?: string; baseLabelType?: string; } export const ModalComplexLookup: FC = memo( - ({ isOpen, onAssign, onClose, assignEntityName = ComplexLookupType.Authorities, baseLabelType = 'creator' }) => { + ({ + isOpen, + onAssign, + onClose, + value, + assignEntityName = ComplexLookupType.Authorities, + baseLabelType = 'creator', + }) => { const { api, segments, @@ -41,12 +49,19 @@ export const ModalComplexLookup: FC = memo( const searchResultsFormatter = SEARCH_RESULTS_FORMATTER[assignEntityName] || SEARCH_RESULTS_FORMATTER.default; const setIsMarcPreviewOpen = useSetRecoilState(state.ui.isMarcPreviewOpen); + const setSearchQuery = useSetRecoilState(state.search.query); const searchResultsMetadata = useRecoilValue(state.search.pageMetadata); const setMarcMetadata = useSetRecoilState(state.data.marcPreviewMetadata); const clearMarcMetadata = useResetRecoilState(state.data.marcPreviewMetadata); const { getFacetsData, getSourceData } = useComplexLookupApi(api, filters, isOpen); const { fetchMarcData, clearMarcData } = useMarcData(state.data.marcPreviewData); + useEffect(() => { + if (!value) return; + + setSearchQuery(value); + }, [value]); + const onCloseMarcPreview = () => { setIsMarcPreviewOpen(false); }; @@ -130,8 +145,12 @@ export const ModalComplexLookup: FC = memo( isSortedResults={false} filters={filters} hasSearchParams={false} - defaultNavigationSegment={SearchSegment.Search} - defaultSearchBy={searchBy[SearchSegment.Search]?.[0].value as unknown as SearchIdentifiers} + defaultNavigationSegment={segments.defaultValues?.segment || SearchSegment.Search} + defaultSearchBy={ + segments.defaultValues?.searchBy || + (searchBy[SearchSegment.Search]?.[0]?.value as unknown as SearchIdentifiers) + } + defaultQuery={value} renderSearchControlPane={renderSearchControlPane} renderResultsList={renderResultsList} renderMarcPreview={renderMarcPreview} diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index b55869cd..fd89b5d8 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -1,6 +1,18 @@ +@import '@common/styles/common.scss'; + .select-input { border-radius: 0; border: 1px solid gray; padding: 4px; height: 27px; + + option:disabled, + &.placeholder, + &.placeholder option:disabled { + color: $gray-400; + } + + &.placeholder option { + color: #000; + } } diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 0a8c4acf..664484b8 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -6,6 +6,7 @@ import './Select.scss'; type SelectValue = { value: string; label?: string; + isDisabled?: boolean; [x: string]: any; }; @@ -20,11 +21,13 @@ type Select = { }; export const Select: FC { const selectedValue = options.find(item => (typeof item === 'string' ? item === value : item.value === value)); @@ -33,10 +36,11 @@ export const Select: FC