Skip to content

Commit

Permalink
working on add panel searchbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@flash1293
flash1293 committed Feb 27, 2019
1 parent 4d91ae4 commit d7a572f
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 67 deletions.
1 change: 1 addition & 0 deletions src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ function discoverController(
localStorage,
i18n,
) {
debugger;
const visualizeLoader = Private(VisualizeLoaderProvider);
let visualizeHandler;
const Vis = Private(VisProvider);
Expand Down
156 changes: 89 additions & 67 deletions src/legacy/ui/public/saved_objects/components/saved_object_finder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,16 @@ import React from 'react';
import chrome from 'ui/chrome';

import {
EuiButton,
EuiButtonEmpty,
EuiCheckboxGroup,
EuiFieldSearch,
// @ts-ignore
EuiFilterButton,
// @ts-ignore
EuiFilterSelectItem,
EuiFlexGroup,
EuiFlexItem,
// @ts-ignore
EuiFormRow,
// @ts-ignore
EuiListGroup,
Expand All @@ -36,6 +41,9 @@ import {
EuiPagination,
EuiPopover,
EuiRadioGroup,
EuiRadioGroupOption,
// @ts-ignore
EuiFilterGroup,
EuiSpacer,
EuiTablePagination,
EuiTitle,
Expand Down Expand Up @@ -67,6 +75,7 @@ interface SavedObjectFinderUIState {
sortField?: string;
sortDirection?: Direction;
filterOpen: boolean;
sortOpen: boolean;
filteredTypes: string[];
}

Expand Down Expand Up @@ -160,6 +169,7 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj
perPage: props.initialPageSize || props.fixedPageSize || 15,
filter: '',
filterOpen: false,
sortOpen: false,
filteredTypes: [],
};
}
Expand Down Expand Up @@ -211,7 +221,7 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj
const items = this.state.items.slice();
const { sortDirection } = this.state;

if (sortDirection) {
if (sortDirection || this.state.filter) {
items.sort((a, b) => {
const fieldA = _.get(a, 'title', '');
const fieldB = _.get(b, 'title', '');
Expand Down Expand Up @@ -246,7 +256,7 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj

private renderSearchBar() {
return (
<EuiFlexGroup>
<EuiFlexGroup gutterSize="m">
<EuiFlexItem grow={true}>
<EuiFieldSearch
placeholder={i18n.translate('common.ui.savedObjects.finder.searchPlaceholder', {
Expand All @@ -265,72 +275,84 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj
data-test-subj="savedObjectFinderSearchInput"
/>
</EuiFlexItem>

{this.props.callToActionButton && (
<EuiFlexItem grow={false}>{this.props.callToActionButton}</EuiFlexItem>
)}
{this.props.showFilter && (
<EuiFlexItem grow={false}>
<EuiPopover
id="popover"
button={
<EuiButton
iconType="arrowDown"
iconSide="right"
onClick={() =>
this.setState(({ filterOpen }) => ({
filterOpen: !filterOpen,
}))
}
>
Sort and Filter
</EuiButton>
}
isOpen={this.state.filterOpen}
closePopover={() => this.setState({ filterOpen: false })}
>
<EuiRadioGroup
options={[
{ id: 'no_sort', label: "Don't sort" },
{ id: 'asc', label: 'Sort ascending' },
{ id: 'desc', label: 'Sort descending' },
]}
idSelected={this.state.sortDirection || 'no_sort'}
onChange={optionId =>
this.setState({
sortDirection: optionId === 'no_sort' ? undefined : (optionId as Direction),
})
<EuiFlexItem grow={false}>
<EuiFilterGroup>
{this.props.showFilter && (
<EuiPopover
id="popover"
panelClassName="euiFilterGroup__popoverPanel"
isOpen={this.state.sortOpen}
closePopover={() => this.setState({ sortOpen: false })}
button={
<EuiFilterButton
onClick={() =>
this.setState(({ sortOpen }) => ({
sortOpen: !sortOpen,
}))
}
>
Sort
</EuiFilterButton>
}
/>
<EuiSpacer size="m" />

<EuiTitle size="xxs">
<h3>Only show the following objects:</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiCheckboxGroup
options={this.props.savedObjectMetaData.map(metaData => ({
id: metaData.type,
label: metaData.name,
}))}
idToSelectedMap={this.state.filteredTypes.reduce(
(map, type) => ({ ...map, [type]: true }),
{}
)}
onChange={(selectedType: any) =>
this.setState(({ filteredTypes }) => ({
filteredTypes: filteredTypes.includes(selectedType)
? filteredTypes.filter(t => t !== selectedType)
: [...filteredTypes, selectedType],
page: 0,
}))
>
<EuiRadioGroup
options={(this.state.filter
? [{ id: 'auto', label: 'Best match' }]
: ([] as EuiRadioGroupOption[])
).concat([
{ id: 'asc', label: 'Sort ascending' },
{ id: 'desc', label: 'Sort descending' },
])}
idSelected={this.state.sortDirection || 'auto'}
onChange={optionId =>
this.setState({
sortDirection: optionId === 'auto' ? undefined : (optionId as Direction),
})
}
/>
</EuiPopover>
)}
{this.props.showFilter && (
<EuiPopover
id="popover"
panelClassName="euiFilterGroup__popoverPanel"
panelPaddingSize="none"
isOpen={this.state.filterOpen}
closePopover={() => this.setState({ filterOpen: false })}
button={
<EuiFilterButton
onClick={() =>
this.setState(({ filterOpen }) => ({
filterOpen: !filterOpen,
}))
}
>
Filter
</EuiFilterButton>
}
/>
</EuiPopover>
</EuiFlexItem>
)}
>
<div className="euiFilterSelect__items">
{this.props.savedObjectMetaData.map(metaData => (
<EuiFilterSelectItem
key={metaData.type}
checked={this.state.filteredTypes.includes(metaData.type) ? 'on' : false}
onClick={() =>
this.setState(({ filteredTypes }) => ({
filteredTypes: filteredTypes.includes(metaData.type)
? filteredTypes.filter(t => t !== metaData.type)
: [...filteredTypes, metaData.type],
page: 0,
}))
}
>
{metaData.name}
</EuiFilterSelectItem>
))}
</div>
</EuiPopover>
)}
</EuiFilterGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
}
Expand Down

0 comments on commit d7a572f

Please sign in to comment.