Adding filters

datahub-project · Feb 24, 2021 · 91d2b90 · 91d2b90
1 parent 806814f
commit 91d2b90
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 30 deletions.
diff --git a/datahub-web-react/src/app/search/EntitySearchResults.tsx b/datahub-web-react/src/app/search/EntitySearchResults.tsx
@@ -1,12 +1,13 @@
+import React, { useState, useEffect } from 'react';
 import { FilterOutlined } from '@ant-design/icons';
-import { Alert, Button, Card, Divider, List, Pagination, Row, Typography } from 'antd';
-import * as React from 'react';
+import { Alert, Button, Card, Divider, List, Modal, Pagination, Row, Typography } from 'antd';
 import { SearchCfg } from '../../conf';
 import { useGetSearchResultsQuery } from '../../graphql/search.generated';
 import { EntityType, FacetFilterInput } from '../../types.generated';
 import { IconStyleType } from '../entity/Entity';
 import { Message } from '../shared/Message';
 import { useEntityRegistry } from '../useEntityRegistry';
+import { SearchFilters } from './SearchFilters';
 
 const styles = {
     loading: { marginTop: '10%' },
@@ -24,11 +25,17 @@ interface Props {
     query: string;
     page: number;
     filters: Array<FacetFilterInput>;
-    onAddFilters: () => void;
+    onChangeFilters: (filters: Array<FacetFilterInput>) => void;
     onChangePage: (page: number) => void;
 }
 
-export const EntitySearchResults = ({ type, query, page, filters, onAddFilters, onChangePage }: Props) => {
+export const EntitySearchResults = ({ type, query, page, filters, onChangeFilters, onChangePage }: Props) => {
+    const [isEditingFilters, setIsEditingFilters] = useState(false);
+    const [selectedFilters, setSelectedFilters] = useState(filters);
+    useEffect(() => {
+        setSelectedFilters(filters);
+    }, [filters]);
+
     const entityRegistry = useEntityRegistry();
     const { loading, error, data } = useGetSearchResultsQuery({
         variables: {
@@ -49,17 +56,45 @@ export const EntitySearchResults = ({ type, query, page, filters, onAddFilters,
     const lastResultIndex =
         pageStart * pageSize + pageSize > totalResults ? totalResults : pageStart * pageSize + pageSize;
 
+    const onFilterSelect = (selected: boolean, field: string, value: string) => {
+        const newFilters = selected
+            ? [...selectedFilters, { field, value }]
+            : selectedFilters.filter((filter) => filter.field !== field || filter.value !== value);
+        setSelectedFilters(newFilters);
+    };
+
+    const onEditFilters = () => {
+        setIsEditingFilters(true);
+    };
+
+    const onCloseEditFilters = () => {
+        onChangeFilters(selectedFilters);
+        setIsEditingFilters(false);
+    };
+
     if (error || (!loading && !error && !data)) {
         return <Alert type="error" message={error?.message || 'Entity failed to load'} />;
     }
 
     return (
         <div style={styles.resultsContainer}>
             {loading && <Message type="loading" content="Loading..." style={styles.loading} />}
-            <Button style={styles.addFilters} onClick={onAddFilters}>
+            <Button style={styles.addFilters} onClick={onEditFilters}>
                 <FilterOutlined />
                 Add Filters
             </Button>
+            <Modal
+                title="Filters"
+                footer={<Button onClick={onCloseEditFilters}>Apply</Button>}
+                visible={isEditingFilters}
+                closable={false}
+            >
+                <SearchFilters
+                    facets={data?.search?.facets || []}
+                    selectedFilters={selectedFilters}
+                    onFilterSelect={onFilterSelect}
+                />
+            </Modal>
             <Typography.Paragraph style={styles.resultSummary}>
                 Showing{' '}
                 <b>

diff --git a/datahub-web-react/src/app/search/SearchFilters.tsx b/datahub-web-react/src/app/search/SearchFilters.tsx
@@ -1,5 +1,4 @@
-// import { Card } from 'antd';
-import { Card, Checkbox } from 'antd';
+import { Checkbox } from 'antd';
 import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import * as React from 'react';
 
@@ -22,11 +21,7 @@ interface Props {
 
 export const SearchFilters = ({ facets, selectedFilters, onFilterSelect }: Props) => {
     return (
-        <Card
-            style={{ border: '1px solid #d2d2d2' }}
-            title={<h3 style={{ marginBottom: '0px' }}>Filters</h3>}
-            bodyStyle={{ padding: '24px 0px' }}
-        >
+        <>
             {facets.map((facet) => (
                 <div key={facet.field} style={{ padding: '0px 25px 15px 25px' }}>
                     <div style={{ fontWeight: 'bold', marginBottom: '10px' }}>
@@ -53,6 +48,6 @@ export const SearchFilters = ({ facets, selectedFilters, onFilterSelect }: Props
                     ))}
                 </div>
             ))}
-        </Card>
+        </>
     );
 };
diff --git a/datahub-web-react/src/app/search/SearchPage.tsx b/datahub-web-react/src/app/search/SearchPage.tsx
@@ -47,7 +47,7 @@ export const SearchPage = () => {
         navigateToSearchUrl({ type: activeType, query: q, page: 1, history, entityRegistry });
     };
 
-    const onSearchTypeChange = (newType: string) => {
+    const onChangeSearchType = (newType: string) => {
         if (newType === ALL_ENTITIES_TAB_NAME) {
             navigateToSearchUrl({ query, page: 1, history, entityRegistry });
         } else {
@@ -56,21 +56,11 @@ export const SearchPage = () => {
         }
     };
 
-    const onAddFilters = () => {
-        // TODO.
-        return null;
+    const onChangeFilters = (newFilters: Array<FacetFilterInput>) => {
+        navigateToSearchUrl({ type: activeType, query, page: 1, filters: newFilters, history, entityRegistry });
     };
 
-    // TODO: Implement filters
-    // const onFilterSelect = (selected: boolean, field: string, value: string) => {
-    //     const newFilters = selected
-    //         ? [...filters, { field, value }]
-    //         : filters.filter((filter) => filter.field !== field || filter.value !== value);
-
-    //     navigateToSearchUrl({ type: activeType, query, page: 1, filters: newFilters, history, entityRegistry });
-    // };
-
-    const onResultsPageChange = (newPage: number) => {
+    const onChangePage = (newPage: number) => {
         navigateToSearchUrl({ type: activeType, query, page: newPage, filters, history, entityRegistry });
     };
 
@@ -81,7 +71,7 @@ export const SearchPage = () => {
                     tabBarStyle={styles.tabs}
                     activeKey={activeType ? entityRegistry.getCollectionName(activeType) : ALL_ENTITIES_TAB_NAME}
                     size="large"
-                    onChange={onSearchTypeChange}
+                    onChange={onChangeSearchType}
                 >
                     <Tabs.TabPane
                         style={styles.tab}
@@ -107,8 +97,8 @@ export const SearchPage = () => {
                     page={page}
                     query={query}
                     filters={filters}
-                    onAddFilters={onAddFilters}
-                    onChangePage={onResultsPageChange}
+                    onChangeFilters={onChangeFilters}
+                    onChangePage={onChangePage}
                 />
             ) : (
                 entityRegistry