Merge pull request #757 from caseychoiniere/mobile_search_filter_sele…

…ction Fix search filters and dropzone on mobile
Duke-Translational-Bioinformatics · Oct 30, 2017 · 348eebb · 348eebb
2 parents ec004b2 + db3ff3c
commit 348eebb
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 27 deletions.
diff --git a/__test__/mainStore.test.js b/__test__/mainStore.test.js
@@ -555,10 +555,6 @@ describe('Main Store', () => {
         expect(mainStore.showTemplateDetails).toBe(true);
     });
 
-    // it('@action searchObjects - searches files and folders', () => {
-    //  Todo: This service is being rebuilt. Implement tests after new service is in place
-    // });
-
     it('@action toggleSearch - toggles search field', () => {
         mainStore.toggleSearch();
         expect(mainStore.searchValue).toBeNull();
@@ -580,6 +576,30 @@ describe('Main Store', () => {
         expect(mainStore.searchTagsPostFilters["tags.label"].length).toBe(0);
     });
 
+    it('@action resetSearchResults - clears search results', () => {
+        mainStore.searchResults = fake.list_items_json.results;
+        mainStore.searchResultsProjects = fake.list_items_json.results;
+        mainStore.searchResultsTags = fake.list_items_json.results;
+        mainStore.searchResultsFiles = fake.list_items_json.results;
+        mainStore.searchResultsFolders = fake.list_items_json.results;
+        mainStore.totalItems = 2;
+        expect(mainStore.searchResults.length).toBe(2);
+        expect(mainStore.searchResultsProjects.length).toBe(2);
+        expect(mainStore.searchResultsTags.length).toBe(2);
+        expect(mainStore.searchResultsFiles.length).toBe(2);
+        expect(mainStore.searchResultsFolders.length).toBe(2);
+        expect(mainStore.totalItems).toBe(2);
+        mainStore.resetSearchResults();
+        expect(mainStore.searchResults.length).toBe(0);
+        expect(mainStore.searchResultsProjects.length).toBe(0);
+        expect(mainStore.searchResultsTags.length).toBe(0);
+        expect(mainStore.searchResultsFiles.length).toBe(0);
+        expect(mainStore.searchResultsFolders.length).toBe(0);
+        expect(mainStore.searchValue).toBe(null);
+        expect(mainStore.totalItems).toBe(null);
+        expect(mainStore.nextPage).toBe(null);
+    });
+
     it('@action toggleModals - toggles a modal', () => {
         mainStore.toggleModals(fake.modal_json.id);
         expect(mainStore.toggleModal.open).toBe(true);

diff --git a/app/scripts/components/fileComponents/customMetadata.jsx b/app/scripts/components/fileComponents/customMetadata.jsx
@@ -40,16 +40,15 @@ class CustomMetadata extends React.Component {
                     </div>
                </span>
         }) : null;
-        let customMetadata = <Card className="project-container mdl-color--white content mdl-color-text--grey-800"
-                                   style={styles.card}>
-            <div className="mdl-cell mdl-cell--12-col content-block" style={styles.list}>
+        let customMetadata = <Card style={styles.card}>
+            <div className="mdl-cell mdl-cell--12-col" style={styles.list}>
                 <div className="list-block">
                     {metadataItems}
                 </div>
             </div>
         </Card>;
         return (
-            <div className="project-container" style={styles.wrapper}>
+            <div className="project-container mdl-cell mdl-cell--12-col" style={styles.wrapper}>
                 <h5 className="mdl-color-text--grey-800" style={styles.heading}>Custom Metadata</h5>
                 {customMetadata}
             </div>
@@ -89,7 +88,7 @@ const styles = {
         paddingRight: 0
     },
     wrapper: {
-        marginTop: 0
+        margin: '0 auto'
     }
 };
 

diff --git a/app/scripts/components/folderComponents/folderPath.jsx b/app/scripts/components/folderComponents/folderPath.jsx
@@ -5,7 +5,6 @@ import mainStore from '../../stores/mainStore';
 import { Color } from '../../theme/customTheme';
 import { Path } from '../../util/urlEnum';
 import FolderOptionsMenu from './folderOptionsMenu.jsx';
-import UploadManager from '../globalComponents/uploadManager.jsx';
 import BaseUtils from '../../util/baseUtils';
 import Card from 'material-ui/Card';
 import FontIcon from 'material-ui/FontIcon';
@@ -20,16 +19,13 @@ class FolderPath extends React.Component {
         let parentId = entityObj ? entityObj.parent.id : null;
         let name = entityObj ? entityObj.name : '';
         let prjPrm = projPermissions && projPermissions !== null ? projPermissions : null;
-        let uploadMdl = null;
         let optionsMenu = null;
         if (prjPrm !== null) {
-            uploadMdl = prjPrm === 'viewOnly' || prjPrm === 'flDownload' ? null : <UploadManager {...this.props}/>;
             optionsMenu = prjPrm === 'prjCrud' || prjPrm === 'flCrud' ? optionsMenu = <FolderOptionsMenu {...this.props} clickHandler={()=>this.setSelectedEntity()} /> : null;
         }
         let path = ancestors !== null ? BaseUtils.getFilePath(ancestors) : '';
         return (
             <Card className="project-container mdl-cell mdl-cell--12-col" style={styles.container}>
-                { uploadMdl }
                 <div className="mdl-cell mdl-cell--12-col mdl-color-text--grey-800">
                     <div className="mdl-cell mdl-cell--12-col mdl-color-text--grey-800" style={styles.arrow}>
                         <a href={'/#/' + BaseUtils.getUrlPath(parentKind) + parentId } className="mdl-color-text--grey-800 external" onTouchTap={() => this.goBack()}>

diff --git a/app/scripts/components/globalComponents/dropzone.jsx b/app/scripts/components/globalComponents/dropzone.jsx
@@ -14,7 +14,7 @@ class DropZone extends React.Component {
     }
 
     componentDidMount () {
-        let changeColor = () => {this.setState({dropzoneHover: !this.state.dropzoneHover})};
+        const changeColor = () => {this.setState({dropzoneHover: !this.state.dropzoneHover})};
         Dropzone.autoDiscover = false;
         this.dropzone = new Dropzone('#dropArea', {
             autoProcessQueue: false,
@@ -33,12 +33,12 @@ class DropZone extends React.Component {
         let dropzoneColor = this.state.dropzoneHover ? '#C8E6C9' : '#F5F5F5';
 
         return (
-            <form action="/" className="dropzone needsclick dz-clickable" id="dropArea">
+            <form action="/" className="dropzone needsclick dz-clickable no-fastclick" id="dropArea">
                 <div className="needsclick" style={{height: 144, width: '100%', border: '2px dashed #BDBDBD', backgroundColor: dropzoneColor, display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
                     justifyContent: 'center'}}>
-                    <div className="dz-message" style={styles.dropzoneText}>
+                    <div className="dz-message needsclick" style={styles.dropzoneText}>
                         Drag and drop files or folders here, or click to select files to upload<br/>
                         Folders must be dropped here to upload and cannot be selected by clicking this box<br/>
                         <small>Uploading folders is only supported in Chrome, Firefox and Microsoft Edge browsers</small>
@@ -51,6 +51,7 @@ class DropZone extends React.Component {
 
 const styles = {
     dropzoneText: {
+        height: '100%',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',

diff --git a/app/scripts/components/globalComponents/search.jsx b/app/scripts/components/globalComponents/search.jsx
@@ -43,7 +43,11 @@ class Search extends React.Component {
 
     search() {
         let query = this.refs.searchInput.getValue();
-        mainStore.searchObjects(query, null, null, null, null);
+        if(query.length){
+            mainStore.searchObjects(query, null, null, null, null);
+        } else {
+            mainStore.resetSearchResults();
+        }
         !this.props.location.pathname.includes('search') ? this.props.router.push('/search') : null;
     }
 

diff --git a/app/scripts/components/globalComponents/searchFilters.jsx b/app/scripts/components/globalComponents/searchFilters.jsx
@@ -32,17 +32,19 @@ class SearchFilters extends React.Component {
             const projectPostFilter = obj.key;
             let text = <span style={styles.checkbox.label}>{`${obj.key} `}<span style={styles.checkbox.count}>{` (${obj.doc_count})`}</span></span>;
             return <ListItem key={obj.key}
+                        onClick={() => mainStore.searchObjects(searchValue, null, projectPostFilter, null, null)}
                         primaryText={text}
-                        leftCheckbox={<Checkbox style={styles.checkbox} checked={searchProjectsPostFilters['project.name'].includes(obj.key)} onCheck={() => mainStore.searchObjects(searchValue, null, projectPostFilter, null, null)}/>}
+                        leftCheckbox={<Checkbox style={styles.checkbox} checked={searchProjectsPostFilters['project.name'].includes(obj.key)} />}
                         style={styles.listItem}/>;
         });
 
         let tags = searchResultsTags.map((obj) => {
             const tagPostFilter = obj.key;
             let text = <span style={styles.checkbox.label}>{`${obj.key} `}<span style={styles.checkbox.count}>{` (${obj.doc_count})`}</span></span>;
             return <ListItem key={obj.key}
+                    onClick={() => mainStore.searchObjects(searchValue, null, null, tagPostFilter, null)}
                     primaryText={text}
-                    leftCheckbox={<Checkbox style={styles.checkbox} checked={searchTagsPostFilters['tags.label'].includes(obj.key)} onCheck={() => mainStore.searchObjects(searchValue, null, null, tagPostFilter, null)}/>}
+                    leftCheckbox={<Checkbox style={styles.checkbox} checked={searchTagsPostFilters['tags.label'].includes(obj.key)} />}
                     style={styles.listItem}/>;
         });
 
@@ -54,12 +56,14 @@ class SearchFilters extends React.Component {
                 onNestedListToggle={() => this.toggleNestedList('kindListToggleIcon')}
                 nestedItems={[
                     <ListItem key={BaseUtils.generateUniqueKey()}
+                        onClick={() => mainStore.searchObjects(searchValue, Kind.DDS_FILE, null, null, null)}
                         primaryText={<span style={styles.checkbox.label}>Files</span>}
-                        leftCheckbox={<Checkbox style={styles.checkbox} disabled={!searchResultsFiles.length} checked={searchFilters.includes(Kind.DDS_FILE)} onCheck={() => mainStore.searchObjects(searchValue, Kind.DDS_FILE, null, null, null)}/>}
+                        leftCheckbox={<Checkbox style={styles.checkbox} disabled={!searchResultsFiles.length} checked={searchFilters.includes(Kind.DDS_FILE)} />}
                         style={styles.listItem}/>,
                     <ListItem key={BaseUtils.generateUniqueKey()}
+                        onClick={() => mainStore.searchObjects(searchValue, Kind.DDS_FOLDER, null, null, null)}
                         primaryText={<span style={styles.checkbox.label}>Folders</span>}
-                        leftCheckbox={<Checkbox style={styles.checkbox} disabled={!searchResultsFolders.length} checked={searchFilters.includes(Kind.DDS_FOLDER)} onCheck={() => mainStore.searchObjects(searchValue, Kind.DDS_FOLDER, null, null, null)}/>}
+                        leftCheckbox={<Checkbox style={styles.checkbox} disabled={!searchResultsFolders.length} checked={searchFilters.includes(Kind.DDS_FOLDER)} />}
                         style={styles.listItem}/>
                 ]}
                 initiallyOpen={true}

diff --git a/app/scripts/components/projectComponents/projectDetails.jsx b/app/scripts/components/projectComponents/projectDetails.jsx
@@ -7,7 +7,6 @@ import { UrlGen } from '../../util/urlEnum';
 import ProjectOptionsMenu from './projectOptionsMenu.jsx';
 import ProjectOptions from './projectOptions.jsx';
 import Details from './details.jsx';
-import UploadManager from '../globalComponents/uploadManager.jsx';
 import FlatButton from 'material-ui/FlatButton';
 import FontIcon from 'material-ui/FontIcon';
 import Card from 'material-ui/Card';
@@ -30,15 +29,12 @@ class ProjectDetails extends React.Component {
         let createdBy = project && project.audit ? project.audit.created_by.full_name : '';
         let projectName = project ? project.name : '';
         let prjPrm = projPermissions && projPermissions !== null ? projPermissions : null;
-        let uploadMdl = null;
         let optionsMenu = null;
         if (prjPrm !== null) {
-            uploadMdl = prjPrm === 'viewOnly' || prjPrm === 'flDownload' ? null : <UploadManager {...this.props}/>;
             optionsMenu = prjPrm === 'prjCrud' ? <ProjectOptionsMenu {...this.props} /> : null;
         }
         return (
             <Card className="mdl-cell mdl-cell--12-col" style={styles.container}>
-                { uploadMdl }
                 <div className="mdl-cell mdl-cell--12-col mdl-color-text--grey-800">
                     <div className="mdl-cell mdl-cell--12-col mdl-color-text--grey-800" style={styles.arrow}>
                         <a href={UrlGen.routes.home()} style={styles.back} className="external mdl-color-text--grey-800">

diff --git a/app/scripts/pages/app.jsx b/app/scripts/pages/app.jsx
@@ -7,6 +7,7 @@ import Header from '../components/globalComponents/header.jsx';
 import Footer from '../components/globalComponents/footer.jsx';
 import LeftMenu from '../components/globalComponents/leftMenu.jsx';
 import RetryUploads from '../components/globalComponents/retryUploads.jsx';
+import UploadManager from '../components/globalComponents/uploadManager.jsx';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import Snackbar from 'material-ui/Snackbar';
@@ -230,6 +231,7 @@ class App extends React.Component {
                                     {this.props.children}
                                     {tsts}
                                     {dialogs}
+                                    <UploadManager {...this.props}/>
                                     <RetryUploads {...this.props} {...this.state}/>
                                 </div>
                             </div>

diff --git a/app/scripts/pages/project.jsx b/app/scripts/pages/project.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { observer, inject } from 'mobx-react';
+import { observer } from 'mobx-react';
 import mainStore from '../stores/mainStore';
 import ListItems from '../components/globalComponents/listItems.jsx';
 import ProjectDetails from '../components/projectComponents/projectDetails.jsx';
 import FileOptions from '../components/fileComponents/fileOptions.jsx';
 import FolderOptions from '../components/folderComponents/folderOptions.jsx';
 import TagManager from '../components/globalComponents/tagManager.jsx'
 import VersionUpload from '../components/fileComponents/versionUpload.jsx';
-import { Path, Kind } from '../util/urlEnum';
+import { Path } from '../util/urlEnum';
 
 @observer
 class Project extends React.Component {

diff --git a/app/scripts/stores/mainStore.js b/app/scripts/stores/mainStore.js
@@ -1555,6 +1555,18 @@ export class MainStore {
         this.searchTagsPostFilters = {"tags.label": []};
     }
 
+    @action resetSearchResults() {
+        this.searchResults = [];
+        this.searchResultsProjects = [];
+        this.searchResultsTags = [];
+        this.searchResultsFiles = [];
+        this.searchResultsFolders = [];
+        this.searchValue = null;
+        this.responseHeaders = {};
+        this.nextPage = null;
+        this.totalItems = null;
+    }
+
     @action clearSearchFilesData() {
         this.searchFilesList = [];
     }