[Taskman #125090] Initialize query parameters for selectors; Removed …

…pollutants from GlossarySearch
eea · Dec 14, 2020 · f2b0376 · f2b0376
1 parent 50f5b19
commit f2b0376
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 115 deletions.
diff --git a/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx b/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx
@@ -3,8 +3,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import _uniqueId from 'lodash/uniqueId';
 import View from './View';
-import { settings } from '~/config';
-import { isArray, isObject } from 'lodash';
+import { isArray } from 'lodash';
 
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { SidebarPortal } from '@plone/volto/components';

diff --git a/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx b/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx
@@ -8,46 +8,59 @@ import { setQueryParam } from 'volto-datablocks/actions';
 
 import cx from 'classnames';
 
-const components = {
-  select: (
-    options,
-    queryParameters,
-    search,
-    setQueryParam,
-    placeholder,
-    className,
-    mode,
-  ) => {
-    let activeValue = '';
-    if (queryParameters[0]?.queryParameterToSet) {
-      activeValue = search[queryParameters[0].queryParameterToSet] || '';
-    }
-    return (
-      <div className={cx(className, mode === 'edit' ? 'pa-1' : '')}>
-        <Dropdown
-          selection
-          onChange={(event, data) => {
-            const queryParametersToSet = {};
-            queryParameters.forEach((queryParam) => {
-              queryParametersToSet[
-                queryParam.queryParameterToSet
-              ] = data.options.filter((opt) => {
-                return opt.value === data.value;
-              })[0]?.[queryParam.selectorOptionKey];
-            });
-            setQueryParam({
-              queryParam: {
-                ...(queryParametersToSet || {}),
-              },
-            });
-          }}
-          placeholder={placeholder}
-          options={options}
-          value={activeValue}
-        />
-      </div>
-    );
-  },
+const Select = (props) => {
+  const {
+    options = [],
+    queryParameters = [],
+    search = {},
+    setQueryParam = () => {},
+    placeholder = '',
+    className = '',
+    mode = '',
+  } = props;
+  const [dataReady, setDataReady] = useState(false);
+
+  if (
+    !dataReady &&
+    queryParameters[0]?.queryParameterToSet &&
+    queryParameters[0]?.selectorOptionKey &&
+    !search[queryParameters[0]?.queryParameterToSet] &&
+    options.length
+  ) {
+    setQueryParam({
+      queryParam: {
+        [queryParameters[0].queryParameterToSet]:
+          options[0]?.[queryParameters[0]?.selectorOptionKey],
+      },
+    });
+    setDataReady(true);
+  }
+
+  return (
+    <div className={cx(className, mode === 'edit' ? 'pa-1' : '')}>
+      <Dropdown
+        selection
+        onChange={(event, data) => {
+          const queryParametersToSet = {};
+          queryParameters.forEach((queryParam) => {
+            queryParametersToSet[
+              queryParam.queryParameterToSet
+            ] = data.options.filter((opt) => {
+              return opt.value === data.value;
+            })[0]?.[queryParam.selectorOptionKey];
+          });
+          setQueryParam({
+            queryParam: {
+              ...(queryParametersToSet || {}),
+            },
+          });
+        }}
+        placeholder={placeholder}
+        options={options}
+        value={search[queryParameters[0]?.queryParameterToSet] || ''}
+      />
+    </div>
+  );
 };
 
 const View = ({ content, ...props }) => {
@@ -127,19 +140,16 @@ const View = ({ content, ...props }) => {
     /* eslint-disable-next-line */
   }, [props.search, props.discodata_resources, props.discodataValues])
 
-
   return (
-    <>
-      {components.select(
-        options,
-        queryParametersToSet,
-        props.search,
-        props.setQueryParam,
-        placeholder,
-        className,
-        props.mode,
-      )}
-    </>
+    <Select
+      options={options}
+      queryParameters={queryParametersToSet}
+      search={props.search}
+      setQueryParam={props.setQueryParam}
+      placeholder={placeholder}
+      className={className}
+      mode={props.mode || 'view'}
+    />
   );
 };
 

diff --git a/src/components/manage/Blocks/GlossarySearchBlock/View.jsx b/src/components/manage/Blocks/GlossarySearchBlock/View.jsx
@@ -16,7 +16,6 @@ import {
 } from 'volto-addons/actions';
 import Highlighter from 'react-highlight-words';
 import cx from 'classnames';
-import axios from 'axios';
 import { setQueryParam, deleteQueryParam } from 'volto-datablocks/actions';
 import './style.css';
 
@@ -45,7 +44,6 @@ class View extends Component {
       apiRoot: new URL(settings.apiPath).pathname,
       active: false,
       query: {},
-      pollutants: [],
       loading: false,
     };
     this.linkFormContainer = React.createRef();
@@ -56,8 +54,6 @@ class View extends Component {
     this.onClose = this.onClose.bind(this);
     this.onChange = this.onChange.bind(this);
     this.makeQuery = this.makeQuery.bind(this);
-    this.getPollutants = this.getPollutants.bind(this);
-    this.onSelectPollutant = this.onSelectPollutant.bind(this);
   }
 
   componentDidMount() {
@@ -160,25 +156,13 @@ class View extends Component {
     } else {
       this.props.quickResetSearchContent();
     }
-    this.getPollutants(value);
     this.setState({ text: value });
   }
 
   onSelectItem(item) {
     item?.['@id'] && this.props.history.push(item['@id']);
   }
 
-  onSelectPollutant(pollutant) {
-    this.props.setQueryParam({
-      queryParam: {
-        index_pollutant_group_id: parseInt(pollutant.parentId),
-        index_pollutant_id: parseInt(pollutant.pollutantId),
-      },
-    });
-    this.setState({ active: false, text: pollutant.name });
-    this.props.history.push('/glossary/pollutants/pollutant-index');
-  }
-
   onClose() {
     this.props.quickResetSearchContent();
     this.setState({ active: false });
@@ -215,30 +199,6 @@ class View extends Component {
     return queryObj;
   }
 
-  getPollutants(name) {
-    if (name) {
-      const sql = `SELECT POL.name,
-      POL_DET.pollutantId,
-      POL.parentId
-      FROM [IED].[latest].[Glo_Pollutants] as POL
-      LEFT JOIN [IED].[latest].[Glo_PollutantsDetails] AS POL_DET
-      ON POL.pollutantId = POL_DET.pollutantId
-      WHERE name LIKE '%${name}%'
-      ORDER BY name`;
-      this.setState({ loading: true });
-      axios
-        .get(this.state.providerUrl + `?query=${encodeURI(sql)}`)
-        .then((response) => {
-          this.setState({ pollutants: response.data.results, loading: false });
-        })
-        .catch((error) => {
-          this.setState({ pollutants: [], loading: false });
-        });
-    } else {
-      this.setState({ pollutants: [], loading: false });
-    }
-  }
-
   render() {
     return (
       <div ref={this.linkFormContainer}>
@@ -293,7 +253,7 @@ class View extends Component {
               {this.state.active &&
               this.props.search &&
               !this.state.loading &&
-              (this.props.search.length || this.state.pollutants.length) ? (
+              this.props.search.length ? (
                 <ul className="floating_search_results">
                   {this.props.search.map((item, index) => {
                     return (
@@ -311,24 +271,6 @@ class View extends Component {
                       </li>
                     );
                   })}
-                  {this.state.pollutants
-                    .filter((pollutant) => pollutant.pollutantId)
-                    .map((pollutant, index) => {
-                      return (
-                        <li
-                          key={`${index}_${pollutant.pollutantId}`}
-                          onClick={() => this.onSelectPollutant(pollutant)}
-                          role="presentation"
-                        >
-                          <Highlighter
-                            highlightClassName="highlight"
-                            searchWords={this.state.text?.split(' ') || []}
-                            autoEscape={true}
-                            textToHighlight={pollutant.name}
-                          />
-                        </li>
-                      );
-                    })}
                 </ul>
               ) : (
                 ''

diff --git a/src/components/manage/Blocks/PollutantIndex/View.jsx b/src/components/manage/Blocks/PollutantIndex/View.jsx
@@ -696,9 +696,9 @@ const RenderTable = (props) => {
 
 const View = (props) => {
   const [activeTab, setActiveTab] = useState(0);
-  const [initialized, setInitialized] = useState(false);
   const [currentPollutant, setCurrentPollutant] = useState(undefined);
   const [currentPollutantGroup, setCurrentPollutantGroup] = useState(undefined);
+  const [dataReady, setDataReady] = useState(false);
   const mounted = useRef(false);
   const indexPollutantId =
     props.discodata_query.search.index_pollutant_id || null;
@@ -721,6 +721,18 @@ const View = (props) => {
     (pollutant) => parseInt(pollutant.parentId) === indexPollutantGroupId,
   );
 
+  useEffect(() => {
+    if (indexPollutants.length && indexPollutantGroups.length && !dataReady) {
+      props.setQueryParam({
+        queryParam: {
+          index_pollutant_group_id: indexPollutants[0].parrentId,
+          index_pollutant_id: indexPollutants[0].pollutantId,
+        },
+      });
+      setDataReady(true);
+    }
+  }, [indexPollutants, indexPollutantGroups]);
+
   useEffect(() => {
     const newPollutant = indexPollutants.filter(
       (pollutant) => pollutant.pollutantId === indexPollutantId,
@@ -819,7 +831,7 @@ const View = (props) => {
               },
             });
           }}
-          placeholder={'Pollutant'}
+          placeholder={'Select pollutant'}
           options={indexPollutants
             .filter((pollutant) => pollutant.pollutantId)
             .map((pollutant) => ({

diff --git a/src/components/manage/Blocks/PollutantIndex/style.css b/src/components/manage/Blocks/PollutantIndex/style.css
@@ -20,6 +20,9 @@
   color: #4296B3 !important;
   font-weight: bold !important;
   border-bottom: 2px solid #4296B3 !important;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-radius: 0;
 }