From d7162000250fc6212515a3df5e55622233c85ecd Mon Sep 17 00:00:00 2001 From: Mateusz Ziarko Date: Mon, 15 Mar 2021 16:18:06 +0100 Subject: [PATCH] fix: content types search limit --- README.md | 2 +- admin/src/components/Select/index.js | 4 ++- .../containers/DataManagerProvider/index.js | 11 +++++-- .../components/NavigationItemForm/index.js | 32 +++++++++++++++---- package.json | 6 ++-- 5 files changed, 42 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 4f0b9198..874f02ea 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ Complete installation requirements are exact same as for Strapi itself and can b **Supported Strapi versions**: -- Strapi v3.5.2 (recently tested) +- Strapi v3.5.3 (recently tested) - Strapi v3.x (This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.) diff --git a/admin/src/components/Select/index.js b/admin/src/components/Select/index.js index 2aad1030..d0171089 100644 --- a/admin/src/components/Select/index.js +++ b/admin/src/components/Select/index.js @@ -10,7 +10,7 @@ import IndicatorSeparator from './IndicatorSeparator'; import MultiValueContainer from './MultiValueContainer'; import { useIntl } from 'react-intl'; -const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, value, defaultValue, options }) => { +const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, onInputChange, value, inputValue, defaultValue, options }) => { const { formatMessage } = useIntl(); const translatedError = error && error.id ? formatMessage(error) : null; @@ -29,6 +29,7 @@ const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, value, onChange={data => { onChange({ target: { name, value: data } }); }} + onInputChange={onInputChange} isClearable isDisabled={isDisabled} isLoading={isLoading} @@ -36,6 +37,7 @@ const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, value, options={isLoading ? [] : options} styles={styles} defaultValue={defaultValue} + inputValue={inputValue} value={isLoading ? undefined : value} /> {error && value.length === 0 ? ( diff --git a/admin/src/containers/DataManagerProvider/index.js b/admin/src/containers/DataManagerProvider/index.js index 4f3566b2..5924727c 100644 --- a/admin/src/containers/DataManagerProvider/index.js +++ b/admin/src/containers/DataManagerProvider/index.js @@ -161,12 +161,19 @@ const DataManagerProvider = ({ children }) => { } }, [autoReload, currentEnvironment]); - const getContentTypeItems = async (type, plugin = "") => { + const getContentTypeItems = async ({type, query}, plugin = "") => { dispatch({ type: GET_CONTENT_TYPE_ITEMS, }); const url = plugin ? `/${plugin}/${type}` : `/${type}`; - const contentTypeItems = await request(`${url}?_publicationState=preview`, { + + const queryParams = new URLSearchParams(); + queryParams.append('_publicationState', 'preview'); + if (query) { + queryParams.append('_q', query); + } + + const contentTypeItems = await request(`${url}?${queryParams.toString()}`, { method: "GET", signal, }); diff --git a/admin/src/containers/View/components/NavigationItemForm/index.js b/admin/src/containers/View/components/NavigationItemForm/index.js index 3cd17058..99903b87 100644 --- a/admin/src/containers/View/components/NavigationItemForm/index.js +++ b/admin/src/containers/View/components/NavigationItemForm/index.js @@ -1,7 +1,7 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState, useCallback } from 'react'; import { Button, Enumeration, Flex, Label, Text, Toggle } from '@buffetjs/core'; import { useIntl } from 'react-intl'; -import { find, get, isEmpty, isEqual, isNil, isString } from 'lodash'; +import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash'; import PropTypes from 'prop-types'; import { ButtonModal, ModalBody, ModalForm } from 'strapi-helper-plugin'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -33,6 +33,8 @@ const NavigationItemForm = ({ }) => { const [hasBeenInitialized, setInitializedState] = useState(false); const [hasChanged, setChangedState] = useState(false); + const [contentTypeSearchQuery, setContentTypeSearchQuery] = useState(undefined); + const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = useState(undefined); const [form, setFormState] = useState({}); const [formErrors, setFormErrorsState] = useState({}); const { relatedType } = form; @@ -98,6 +100,8 @@ const NavigationItemForm = ({ const onChangeRelatedType = ({ target: { name, value } }) => { const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value)); + setContentTypeSearchQuery(undefined); + setContentTypeSearchInputValue(undefined); setFormState(prevState => ({ ...prevState, updated: true, @@ -186,6 +190,18 @@ const NavigationItemForm = ({ return null; }; + const debouncedSearch = useCallback( + debounce(nextValue => setContentTypeSearchQuery(nextValue), 500), + [], + ); + + const debounceContentTypeSearchQuery = value => { + setContentTypeSearchInputValue(value); + debouncedSearch(value); + }; + + const thereAreNoMoreContentTypes = isEmpty(relatedSelectOptions) && !contentTypeSearchQuery; + useEffect( () => { const value = get(relatedSelectOptions, '0'); @@ -205,12 +221,15 @@ const NavigationItemForm = ({ (_) => _.uid === value, ); if (item) { - await getContentTypeEntities(item.endpoint || item.collectionName, item.plugin); + await getContentTypeEntities({ + type: item.endpoint || item.collectionName, + query: contentTypeSearchQuery, + }, item.plugin); } } }; fetchContentTypeEntities(); - }, [relatedType]); + }, [relatedType, contentTypeSearchQuery]); return (
@@ -323,12 +342,13 @@ const NavigationItemForm = ({ name={relatedFieldName} error={get(formErrors, relatedFieldName)} onChange={onChange} + onInputChange={debounceContentTypeSearchQuery} + inputValue={contentTypeSearchInputValue} isLoading={isLoading} - isDisabled={isEmpty(relatedSelectOptions)} options={relatedSelectOptions} value={relatedSelectValue} /> - {!isLoading && isEmpty(relatedSelectOptions) && ( + {!isLoading && thereAreNoMoreContentTypes && (