add toggle entre busca básica e busca avançada

projetos-codic-ibict · Sep 18, 2023 · 2134847 · 2134847
1 parent 02b5b06
commit 2134847
Show file tree

Hide file tree

Showing 25 changed files with 216 additions and 141 deletions.
diff --git a/src/components/AdvancedSearchBox.tsx b/src/components/AdvancedSearchBox.tsx
@@ -7,13 +7,13 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 
 interface CustomSearchBoxProps extends SearchContextState {
-  updateQueryConfig: (advancedQuery: string) => void;
+  toogleAdvancedConfig: (advanced: boolean) => void;
 }
 
-const AdvancedSearchBox = ({ searchTerm, setSearchTerm, updateQueryConfig }: CustomSearchBoxProps) => {
+const AdvancedSearchBox = ({ searchTerm, setSearchTerm, toogleAdvancedConfig }: CustomSearchBoxProps) => {
   const { t } = useTranslation('common');
   const router = useRouter();
-  const [field, setField] = useState('All fields');
+  const [field, setField] = useState('title_text');
   const [value, setValue] = useState('');
   const [op, setOp] = useState('&');
   const [fullQuery, setFullQuery] = useState(searchTerm || '');
@@ -25,7 +25,6 @@ const AdvancedSearchBox = ({ searchTerm, setSearchTerm, updateQueryConfig }: Cus
 
   return (
     <div className="d-flex flex-column flex-gap-1 advanced">
-      <span className="">Basic Search </span>
       <div className="d-flex flex-gap-1">
         <select
           id={`field`}
@@ -70,9 +69,9 @@ const AdvancedSearchBox = ({ searchTerm, setSearchTerm, updateQueryConfig }: Cus
       <SearchBox
         onSubmit={(searchTerm) => {
           searchTerm = fullQuery || searchTerm;
-          updateQueryConfig(fullQuery);
+          // updateQueryConfig(fullQuery);
           setSearchTerm(fullQuery);
-          router.query.q = `advanced=true&&${searchTerm}`;
+          router.query.q = `${searchTerm}`;
           router.push(router);
         }}
         view={({ onChange, onSubmit }) => (
@@ -99,6 +98,9 @@ const AdvancedSearchBox = ({ searchTerm, setSearchTerm, updateQueryConfig }: Cus
           </form>
         )}
       />
+      <span onClick={() => toogleAdvancedConfig(false)} className="link-color">
+        Basic Search
+      </span>
     </div>
   );
 };

diff --git a/src/components/BasicSearchBox.tsx b/src/components/BasicSearchBox.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SearchBox } from '@elastic/react-search-ui';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import ElasticSearchStatsService from '../services/ElasticSearchStatsService';
+
+const VIVO_URL_ITEM_BASE = process.env.VIVO_URL_ITEM_BASE;
+
+export type BasicSearchBoxProps = {
+  titleFieldName: string;
+  itemLinkPrefix: string;
+  indexName: string;
+  updateOpetatorConfig: (operator: string) => void;
+  toogleAdvancedConfig: (advanced: boolean) => void;
+};
+
+const BasicSearchBox = ({
+  titleFieldName,
+  itemLinkPrefix,
+  indexName,
+  updateOpetatorConfig,
+  toogleAdvancedConfig,
+}: BasicSearchBoxProps) => {
+  const { t } = useTranslation('common');
+  const router = useRouter();
+  const [docsCount, setDocsCount] = useState(localStorage.getItem(indexName));
+
+  useEffect(() => {
+    ElasticSearchStatsService(indexName)
+      .then((res) => {
+        const count = res['docs.count'];
+        localStorage.setItem(indexName, count);
+        setDocsCount(count);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, []);
+
+  return (
+    <SearchBox
+      autocompleteMinimumCharacters={3}
+      searchAsYouType={false}
+      autocompleteResults={{
+        linkTarget: '_blank',
+        sectionTitle: t('Open link') || '',
+        titleField: titleFieldName,
+        urlField: '',
+        shouldTrackClickThrough: true,
+      }}
+      autocompleteSuggestions={true}
+      debounceLength={0}
+      onSubmit={(searchTerm) => {
+        updateOpetatorConfig('OR');
+        router.query.q = searchTerm;
+        router.push(router);
+      }}
+      onSelectAutocomplete={(selection: any, item: any, defaultOnSelectAutocomplete: any) => {
+        if (selection.suggestion) {
+          updateOpetatorConfig('AND');
+          defaultOnSelectAutocomplete(selection);
+        } else {
+          router.push(`${VIVO_URL_ITEM_BASE}/${itemLinkPrefix}${selection.id.raw}&lang=${router.locale}`);
+        }
+      }}
+      inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
+        <div className="d-flex flex-column flex-gap-1 basic-search">
+          <div className="d-flex flex-gap-1 align-items-center">
+            <div className="sui-search-box__wrapper">
+              <input
+                {...getInputProps({
+                  placeholder: `${t('Enter at least 3 characters and search among')} ${t('numberFormat', {
+                    value: docsCount,
+                  })} ${t('documents')}`,
+                })}
+              />
+              {getAutocomplete()}
+            </div>
+            <input
+              {...getButtonProps({
+                disabled: getInputProps()?.value?.trim().length < 3,
+              })}
+            />
+          </div>
+          <span onClick={() => toogleAdvancedConfig(true)} className="link-color">
+            Advanced Search
+          </span>
+        </div>
+      )}
+    ></SearchBox>
+  );
+};
+
+export default BasicSearchBox;
diff --git a/src/components/CustomSearchBox.tsx b/src/components/CustomSearchBox.tsx
@@ -1,82 +1,30 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { SearchBox } from '@elastic/react-search-ui';
-import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import ElasticSearchStatsService from '../services/ElasticSearchStatsService';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useContext } from 'react';
+import AdvancedSearchBox from './AdvancedSearchBox';
+import BasicSearchBox from './BasicSearchBox';
+import CustomContext from './context/CustomContext';
 
-const VIVO_URL_ITEM_BASE = process.env.VIVO_URL_ITEM_BASE;
-
-type CustomSearchBoxProps = {
+export type CustomSearchBoxProps = {
   titleFieldName: string;
   itemLinkPrefix: string;
   indexName: string;
   updateOpetatorConfig: (operator: string) => void;
 };
 
 const CustomSearchBox = ({ titleFieldName, itemLinkPrefix, indexName, updateOpetatorConfig }: CustomSearchBoxProps) => {
-  const { t } = useTranslation('common');
-  const router = useRouter();
-  const [docsCount, setDocsCount] = useState(localStorage.getItem(indexName));
-
-  useEffect(() => {
-    ElasticSearchStatsService(indexName)
-      .then((res) => {
-        const count = res['docs.count'];
-        localStorage.setItem(indexName, count);
-        setDocsCount(count);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }, []);
+  const { advanced, setAdvanced } = useContext(CustomContext);
 
-  return (
-    <SearchBox
-      autocompleteMinimumCharacters={3}
-      searchAsYouType={false}
-      autocompleteResults={{
-        linkTarget: '_blank',
-        sectionTitle: t('Open link') || '',
-        titleField: titleFieldName,
-        urlField: '',
-        shouldTrackClickThrough: true,
-      }}
-      autocompleteSuggestions={true}
-      debounceLength={0}
-      onSubmit={(searchTerm) => {
-        updateOpetatorConfig('OR');
-        router.query.q = searchTerm;
-        router.push(router);
-      }}
-      onSelectAutocomplete={(selection: any, item: any, defaultOnSelectAutocomplete: any) => {
-        if (selection.suggestion) {
-          updateOpetatorConfig('AND');
-          defaultOnSelectAutocomplete(selection);
-        } else {
-          router.push(`${VIVO_URL_ITEM_BASE}/${itemLinkPrefix}${selection.id.raw}&lang=${router.locale}`);
-        }
-      }}
-      inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
-        <>
-          <div className="sui-search-box__wrapper">
-            <input
-              {...getInputProps({
-                placeholder: `${t('Enter at least 3 characters and search among')} ${t('numberFormat', {
-                  value: docsCount,
-                })} ${t('documents')}`,
-              })}
-            />
-            {getAutocomplete()}
-          </div>
-          <input
-            {...getButtonProps({
-              disabled: getInputProps()?.value?.trim().length < 3,
-            })}
-          />
-        </>
-      )}
-    ></SearchBox>
+  return advanced ? (
+    //@ts-ignore
+    <AdvancedSearchBox toogleAdvancedConfig={setAdvanced} />
+  ) : (
+    <BasicSearchBox
+      titleFieldName={titleFieldName}
+      itemLinkPrefix={itemLinkPrefix}
+      updateOpetatorConfig={updateOpetatorConfig}
+      indexName={indexName}
+      toogleAdvancedConfig={setAdvanced}
+    />
   );
 };
 

diff --git a/src/components/DefaultQueryConfig.ts b/src/components/DefaultQueryConfig.ts
@@ -5,6 +5,7 @@ const DefaultQueryConfig = (indexName: string) => {
   return {
     debug: false,
     indicators: [],
+    advanced: false,
     urlPushDebounceLength: 500,
     alwaysSearchOnInitialLoad: false,
     hasA11yNotifications: true,

diff --git a/src/components/context/IndicatorsContext.tsx → src/components/context/CustomContext.tsx b/src/components/context/IndicatorsContext.tsx → src/components/context/CustomContext.tsx
@@ -1,17 +1,20 @@
 import { PropsWithChildren, createContext, useState } from 'react';
 import { IndicatorType } from '../../types/Entities';
 
-interface IndicadorContextProps {
+interface CustomContextProps {
   indicators: IndicatorType[][];
   setIndicatorsData: (data: Array<IndicatorType[]>) => void;
   isEmpty: () => boolean;
+  advanced: boolean;
+  setAdvanced: (advanced: boolean) => void;
 }
 
-const IndicatorContext = createContext<IndicadorContextProps>({} as IndicadorContextProps);
-export default IndicatorContext;
+const CustomContext = createContext<CustomContextProps>({} as CustomContextProps);
+export default CustomContext;
 
-export function IndicatorProvider(props: PropsWithChildren<object>) {
+export function CustomProvider(props: PropsWithChildren<object>) {
   const [indicators, setIndicators] = useState<Array<IndicatorType[]>>([] as Array<IndicatorType[]>);
+  const [advanced, setAdvanced] = useState(false);
 
   function setIndicatorsData(data: Array<IndicatorType[]>) {
     setIndicators(data);
@@ -22,14 +25,16 @@ export function IndicatorProvider(props: PropsWithChildren<object>) {
   }
 
   return (
-    <IndicatorContext.Provider
+    <CustomContext.Provider
       value={{
         indicators,
         setIndicatorsData,
         isEmpty,
+        advanced,
+        setAdvanced,
       }}
     >
       {props.children}
-    </IndicatorContext.Provider>
+    </CustomContext.Provider>
   );
 }
diff --git a/src/components/indicators/GroupsIndicators.tsx b/src/components/indicators/GroupsIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar, OptionsPie } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/JornalsIndicators.tsx b/src/components/indicators/JornalsIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/OrgUnitIndicators.tsx b/src/components/indicators/OrgUnitIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/PatentsIndicators.tsx b/src/components/indicators/PatentsIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar, OptionsPie } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/PeopleIndicators.tsx b/src/components/indicators/PeopleIndicators.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'next-i18next';
 import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Utils';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsPie } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/ProgramsIndicators.tsx b/src/components/indicators/ProgramsIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/components/indicators/PublicationsIndicators.tsx b/src/components/indicators/PublicationsIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar, OptionsPie } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 
@@ -48,7 +48,7 @@ function PublicationsIndicators({ filters, searchTerm, isLoading }: IndicatorsPr
     options.plugins.title.text = t(options.title);
     // @ts-ignore
     optionsType.plugins.title.text = t(optionsType.title);
-
+    console.log(isLoading);
     isLoading
       ? ElasticSearchService(
           [

diff --git a/src/components/indicators/SoftwaresIndicators.tsx b/src/components/indicators/SoftwaresIndicators.tsx
@@ -14,7 +14,7 @@ import { CHART_BACKGROUD_COLORS, CHART_BORDER_COLORS } from '../../../utils/Util
 import ElasticSearchService from '../../services/ElasticSearchService';
 import { CustomSearchQuery, IndicatorType } from '../../types/Entities';
 import { IndicatorsProps } from '../../types/Propos';
-import IndicatorContext from '../context/IndicatorsContext';
+import IndicatorContext from '../context/CustomContext';
 import { OptionsBar, OptionsPie } from './options/ChartsOptions';
 import getFormatedQuery from './query/Query';
 

diff --git a/src/pages/api/search.ts b/src/pages/api/search.ts
@@ -18,7 +18,7 @@ function builConnector(index: string) {
       // transforming the query before sending to Elasticsearch using the requestState and queryConfig
       const searchFields: any = queryConfig.search_fields;
       // @ts-ignore
-      if (queryConfig.advanced) {
+      if (requestState.searchTerm.indexOf('=') > 0) {
         if (requestState.searchTerm.indexOf('(') >= 0) {
           let fullQuery = stringify(parseElasticsearchQuery(requestState.searchTerm));
           fullQuery = fullQuery.replace(',null', '');