Skip to content

Commit

Permalink
Rename search store, refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@beque
beque committed Feb 8, 2023
1 parent 4d7d5f4 commit 2c89a56
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 136 deletions.
6 changes: 2 additions & 4 deletions app/packs/src/components/navigation/search/Search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export default class Search extends React.Component {
<Button bsStyle={customClass ? null : 'primary'} className={customClass} onClick={() => this.showStructureEditor()}>
<Glyphicon glyph="pencil" id="AutoCompletedrawAddon" />
</Button>
<Button bsStyle={customClass ? null : 'info'} className={customClass} onClick={() => this.context.searchResults.showSearchModal()}>
<Button bsStyle={customClass ? null : 'info'} className={customClass} onClick={() => this.context.search.showSearchModal()}>
<i className="fa fa-search" />
</Button>
<Button bsStyle={customClass ? null : 'danger'} className={customClass} onClick={this.handleClearSearchSelection}>
Expand Down Expand Up @@ -317,9 +317,7 @@ export default class Search extends React.Component {
/>
</div>
<div className="search-modal-draw">
<SearchModal
isPublic={this.props.isPublic}
/>
<SearchModal />
</div>
<div className="search-autocomplete">
<AutoCompleteInput
Expand Down
4 changes: 1 addition & 3 deletions app/packs/src/components/searchModal/FormData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@ export default FormData = {
id: 0,
value: 'advanced',
label: 'Advanced Search',
component: 'advanced',
component_path: './forms/AdvancedSearchForm'
component: 'advanced'
},
{
id: 1,
value: 'ketcher',
label: 'ketcher-rails',
component: 'ketcher',
component_path: './forms/KetcherRailsForm',
structure: {
path: 'ketcher',
setMolfileInFrame: false,
Expand Down
66 changes: 32 additions & 34 deletions app/packs/src/components/searchModal/SearchModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, Suspense, useEffect, useContext } from 'react';
import React, { useState, Suspense, useContext } from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonToolbar, Modal, FormGroup } from 'react-bootstrap';
import Draggable from "react-draggable";
Expand All @@ -7,7 +7,6 @@ import UserStore from 'src/stores/alt/stores/UserStore';
import { observer } from 'mobx-react';
import { StoreContext } from 'src/stores/mobx/RootStore';

import FormData from './FormData';
import AdvancedSearchForm from './forms/AdvancedSearchForm';
import KetcherRailsForm from './forms/KetcherRailsForm';
import NoFormSelected from './forms/NoFormSelected';
Expand All @@ -18,17 +17,24 @@ const Components = {
empty: NoFormSelected
}

const SearchModal = ({ isPublic }) => {
const [selectedOption, setSelectedOption] = useState(FormData.forms[0]);
const [minimizeModal, setMinimizeModal] = useState(true);
const searchResultsStore = useContext(StoreContext).searchResults;
const SearchModal = () => {
const searchStore = useContext(StoreContext).search;

const FormData = [
{
value: 'advanced',
label: 'Advanced Search'
},
{
value: 'ketcher',
label: 'ketcher-rails'
}
]

const FormComponent = (block) => {
if (typeof Components[block.component] !== "undefined") {
return React.createElement(Components[block.component], {
key: block.value,
handleCancel: handleCancel,
isPublic: isPublic
if (typeof Components[block.value] !== "undefined") {
return React.createElement(Components[block.value], {
key: block.value
});
}
return React.createElement(Components['empty'], {
Expand All @@ -38,7 +44,7 @@ const SearchModal = ({ isPublic }) => {

const SearchPulldown = (props) => {
const { onChange, selected } = props;
const formOptions = FormData.forms.map((option) => option);
const formOptions = FormData.map((option) => option);

return (
<FormGroup>
Expand All @@ -60,29 +66,19 @@ const SearchModal = ({ isPublic }) => {
);
}

const handleCancel = () => {
searchResultsStore.hideSearchModal();
searchResultsStore.hideSearchResults();
searchResultsStore.clearSearchResults();
}

const handleMinimize = () => {
setMinimizeModal(current => !current)
}

const handleSearchPulldownSelection = (e) => {
setSelectedOption(FormData.forms[e.id]);
searchResultsStore.clearSearchResults();
setMinimizeModal(true);
}
//const handleCancel = () => {
// searchStore.hideSearchModal();
// searchStore.hideSearchResults();
// searchStore.clearSearchResults();
//}

let minimizedClass = minimizeModal ? '' : ' minimized';
let minimizedClass = searchStore.searchModalMinimized ? ' minimized' : '';

return (
<Draggable handle=".handle">
<Modal
show={searchResultsStore.searchModalVisible}
onHide={handleCancel}
show={searchStore.searchModalVisible}
onHide={() => searchStore.handleCancel()}
backdrop={false}
dialogas="full-search"
dialogClassName="searching"
Expand All @@ -96,18 +92,20 @@ const SearchModal = ({ isPublic }) => {
</div>
<div className="col-md-3 col-sm-5">
<SearchPulldown
onChange={handleSearchPulldownSelection}
selected={selectedOption}
onChange={(e) => searchStore.changeSearchModalSelectedForm(e)}
selected={searchStore.searchModalSelectedForm}
/>
</div>
<div className="col-md-1 col-sm-1">
<i className="fa fa-window-minimize window-minimize" onClick={handleMinimize} />
<i
className="fa fa-window-minimize window-minimize"
onClick={() => searchStore.toggleSearchModalMinimized()} />
</div>
</Modal.Header>
<Modal.Body>
<React.Suspense fallback={<Spinner />}>
<div className={`form-container${minimizedClass}`}>
{FormComponent(selectedOption)}
{FormComponent(searchStore.searchModalSelectedForm)}
</div>
</React.Suspense>
</Modal.Body>
Expand Down
60 changes: 29 additions & 31 deletions app/packs/src/components/searchModal/forms/AdvancedSearchForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import SearchResult from './SearchResult';
import { observer } from 'mobx-react';
import { StoreContext } from 'src/stores/mobx/RootStore';

const AdvancedSearchForm = ({ handleCancel }) => {
const AdvancedSearchForm = () => {
const defaultSelections = [{
link: '',
match: '=',
Expand All @@ -21,7 +21,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
}];

const [selectedOptions, setSelectedOptions] = useState(defaultSelections);
const searchResultsStore = useContext(StoreContext).searchResults;
const searchStore = useContext(StoreContext).search;

useEffect(() => {
const length = selectedOptions.length - 1;
Expand All @@ -42,8 +42,8 @@ const AdvancedSearchForm = ({ handleCancel }) => {
return (f.field && f.link && f.value) ||
(id == 0 && f.field && f.value)
});
searchResultsStore.changeSearchFilter(filteredOptions);
const storedFilter = searchResultsStore.searchFilters;
searchStore.changeSearchFilter(filteredOptions);
const storedFilter = searchStore.searchFilters;
return storedFilter.length == 0 ? [] : storedFilter[0].filters;
}

Expand All @@ -52,10 +52,11 @@ const AdvancedSearchForm = ({ handleCancel }) => {
const { currentCollection } = uiState;
const collectionId = currentCollection ? currentCollection.id : null;
const filters = filterSelectedOptions();
searchStore.changeErrorMessage("Please fill out all needed fields");

if (filters.length > 0) {
searchResultsStore.showSearchResults();
searchResultsStore.changeErrorMessage("");
searchStore.showSearchResults();
searchStore.changeErrorMessage("");

const selection = {
elementType: 'all',
Expand All @@ -64,40 +65,38 @@ const AdvancedSearchForm = ({ handleCancel }) => {
page_size: uiState.number_of_results
};

searchResultsStore.loadSearchResults({
searchStore.loadSearchResults({
selection,
collectionId: collectionId,
isSync: uiState.isSync,
});
searchResultsStore.clearSearchAndTabResults();
searchStore.clearSearchAndTabResults();
searchValuesByFilters();
} else {
searchResultsStore.changeErrorMessage("Please fill out all needed fields");
}
}

const handleClear = () => {
searchResultsStore.clearSearchResults();
searchStore.clearSearchResults();
setSelectedOptions(defaultSelections);
}

const showErrorMessage = () => {
if (searchResultsStore.error_message) {
return <Alert bsStyle="danger">{searchResultsStore.error_message}</Alert>;
if (searchStore.error_message) {
return <Alert bsStyle="danger">{searchStore.error_message}</Alert>;
}
}

const searchValuesByFilters = () => {
const storedFilter = searchResultsStore.searchFilters;
const storedFilter = searchStore.searchFilters;
const filters = storedFilter.length == 0 ? [] : storedFilter[0].filters;
let searchValues = [];

if (searchResultsStore.searchResultVisible && filters.length > 0) {
if (searchStore.searchResultVisible && filters.length > 0) {
filters.map((val, i) => {
searchValues.push([val.link, val.field.label, val.match, val.value].join(" "));
});
}
searchResultsStore.changeSearchValues(searchValues);
searchStore.changeSearchValues(searchValues);
}

const renderDynamicRow = () => {
Expand Down Expand Up @@ -142,29 +141,29 @@ const AdvancedSearchForm = ({ handleCancel }) => {
}

const togglePanel = () => () => {
if (searchResultsStore.searchResultsCount > 0) {
searchResultsStore.toggleSearch();
searchResultsStore.toggleSearchResults();
searchResultsStore.clearTabCurrentPage();
if (searchStore.searchResultsCount > 0) {
searchStore.toggleSearch();
searchStore.toggleSearchResults();
searchStore.clearTabCurrentPage();
}
}

let defaultClassName = 'collapsible-search-result';
let invisibleClassName = searchResultsStore.search_result_panel_visible ? '' : ' inactive';
let inactiveSearchClass = !searchResultsStore.searchVisible ? 'inactive' : '';
let inactiveResultClass = !searchResultsStore.searchResultVisible? 'inactive' : '';
let searchIcon = `fa fa-chevron-${searchResultsStore.search_icon} icon-right`;
let resultIcon = `fa fa-chevron-${searchResultsStore.result_icon} icon-right`;
let searchTitle = searchResultsStore.searchVisible ? 'Search' : 'Refine search';
let resultTitle = searchResultsStore.searchResultVisible ? 'Result' : 'Back to result';
let invisibleClassName = searchStore.search_result_panel_visible ? '' : ' inactive';
let inactiveSearchClass = !searchStore.searchVisible ? 'inactive' : '';
let inactiveResultClass = !searchStore.searchResultVisible? 'inactive' : '';
let searchIcon = `fa fa-chevron-${searchStore.search_icon} icon-right`;
let resultIcon = `fa fa-chevron-${searchStore.result_icon} icon-right`;
let searchTitle = searchStore.searchVisible ? 'Search' : 'Refine search';
let resultTitle = searchStore.searchResultVisible ? 'Result' : 'Back to result';

return (
<>
<Panel
id="collapsible-search"
className={defaultClassName}
onToggle={togglePanel()}
expanded={searchResultsStore.searchVisible}
expanded={searchStore.searchVisible}
>
<Panel.Heading className={inactiveSearchClass}>
<Panel.Title toggle>
Expand All @@ -187,7 +186,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
</div>
</div>
<ButtonToolbar>
<Button bsStyle="warning" onClick={handleCancel}>
<Button bsStyle="warning" onClick={() => searchStore.handleCancel()}>
Cancel
</Button>
<Button bsStyle="primary" onClick={handleSave} style={{ marginRight: '20px' }} >
Expand All @@ -201,7 +200,7 @@ const AdvancedSearchForm = ({ handleCancel }) => {
id="collapsible-result"
className={defaultClassName + invisibleClassName}
onToggle={togglePanel()}
expanded={searchResultsStore.searchResultVisible}
expanded={searchStore.searchResultVisible}
>
<Panel.Heading className={inactiveResultClass}>
<Panel.Title toggle>
Expand All @@ -212,7 +211,6 @@ const AdvancedSearchForm = ({ handleCancel }) => {
<Panel.Collapse>
<Panel.Body style={{minHeight: '120px'}}>
<SearchResult
handleCancel={handleCancel}
handleClear={handleClear}
/>
</Panel.Body>
Expand Down
Loading

0 comments on commit 2c89a56

Please sign in to comment.