mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-21 15:16:01 +00:00
filter multiple values
This commit is contained in:
Jan Prochazka
@@ -3,8 +3,10 @@ import React from 'react';
|
||||
import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropDownMenu';
|
||||
import styled from 'styled-components';
|
||||
import keycodes from '../utility/keycodes';
|
||||
import { parseFilter } from '@dbgate/filterparser';
|
||||
import { parseFilter, createMultiLineFilter } from '@dbgate/filterparser';
|
||||
import InlineButton from '../widgets/InlineButton';
|
||||
import showModal from '../modals/showModal';
|
||||
import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
|
||||
// import { $ } from '../../Utility/jquery';
|
||||
// import autobind from 'autobind-decorator';
|
||||
// import * as React from 'react';
|
||||
@@ -36,7 +38,7 @@ const FilterDiv = styled.div`
|
||||
const FilterInput = styled.input`
|
||||
flex: 1;
|
||||
min-width: 10px;
|
||||
background-color: ${props => (props.state == 'ok' ? '#CCFFCC' : props.state == 'error' ? '#FFCCCC' : 'white')};
|
||||
background-color: ${(props) => (props.state == 'ok' ? '#CCFFCC' : props.state == 'error' ? '#FFCCCC' : 'white')};
|
||||
`;
|
||||
// const FilterButton = styled.button`
|
||||
// color: gray;
|
||||
@@ -47,68 +49,68 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
|
||||
case 'number':
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('>')}>Greater Than...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('<')}>Less Than...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('>')}>Greater Than...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('<')}>Less Than...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
|
||||
</>
|
||||
);
|
||||
case 'logical':
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('TRUE')}>Is True</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('FALSE')}>Is False</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('TRUE, NULL')}>Is True or NULL</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('TRUE')}>Is True</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('FALSE')}>Is False</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('TRUE, NULL')}>Is True or NULL</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
|
||||
</>
|
||||
);
|
||||
case 'datetime':
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('<=')}>Before...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('>=')}>After...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('<=')}>Before...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('>=')}>After...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('TODAY')}>Today</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('TODAY')}>Today</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
@@ -140,24 +142,24 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
|
||||
case 'string':
|
||||
return (
|
||||
<>
|
||||
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('+')}>Contains...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('^')}>Begins With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('$')}>Ends With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => openFilterWindow('!$')}>Does Not End With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('+')}>Contains...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('^')}>Begins With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('$')}>Ends With...</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={(x) => openFilterWindow('!$')}>Does Not End With...</DropDownMenuItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -165,7 +167,7 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
|
||||
|
||||
export default function DataFilterControl({ isReadOnly = false, filterType, filter, setFilter }) {
|
||||
const [filterState, setFilterState] = React.useState('empty');
|
||||
const setFilterText = filter => {
|
||||
const setFilterText = (filter) => {
|
||||
setFilter(filter);
|
||||
editorRef.current.value = filter || '';
|
||||
updateFilterState();
|
||||
@@ -174,12 +176,19 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
|
||||
if ((filter || '') == (editorRef.current.value || '')) return;
|
||||
setFilter(editorRef.current.value);
|
||||
};
|
||||
const filterMultipleValues = () => {};
|
||||
const openFilterWindow = operator => {};
|
||||
const filterMultipleValues = () => {
|
||||
showModal((modalState) => (
|
||||
<FilterMultipleValuesModal
|
||||
modalState={modalState}
|
||||
onFilter={(mode, text) => setFilterText(createMultiLineFilter(mode, text))}
|
||||
/>
|
||||
));
|
||||
};
|
||||
const openFilterWindow = (operator) => {};
|
||||
const buttonRef = React.useRef();
|
||||
const editorRef = React.useRef();
|
||||
|
||||
const handleKeyDown = ev => {
|
||||
const handleKeyDown = (ev) => {
|
||||
if (isReadOnly) return;
|
||||
if (ev.keyCode == keycodes.enter) {
|
||||
applyFilter();
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import ModalBase from './ModalBase';
|
||||
import FormStyledButton from '../widgets/FormStyledButton';
|
||||
import styled from 'styled-components';
|
||||
import { FontIcon } from '../icons';
|
||||
import { FormButtonRow, FormSubmit } from '../utility/forms';
|
||||
import ModalHeader from './ModalHeader';
|
||||
import ModalFooter from './ModalFooter';
|
||||
import ModalContent from './ModalContent';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const OptionsWrapper = styled.div`
|
||||
margin-left: 10px;
|
||||
`;
|
||||
|
||||
function RadioGroupItem({ text, value, defaultChecked = undefined, setMode }) {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
name="multiple_values_option"
|
||||
id={`multiple_values_option_${value}`}
|
||||
defaultChecked={defaultChecked}
|
||||
onClick={() => setMode(value)}
|
||||
/>
|
||||
<label htmlFor={`multiple_values_option_${value}`}>{text}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FilterMultipleValuesModal({ modalState, onFilter }) {
|
||||
const editorRef = React.useRef(null);
|
||||
const [text, setText] = React.useState('');
|
||||
const [mode, setMode] = React.useState('is');
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (editorRef.current) editorRef.current.focus();
|
||||
}, 1);
|
||||
}, []);
|
||||
|
||||
const handleOk = () => {
|
||||
onFilter(mode, text);
|
||||
modalState.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalBase modalState={modalState}>
|
||||
<ModalHeader modalState={modalState}>Filter multiple values</ModalHeader>
|
||||
<ModalContent>
|
||||
<Wrapper>
|
||||
<textarea rows={10} ref={editorRef} value={text} onChange={(e) => setText(e.target.value)} />
|
||||
<OptionsWrapper>
|
||||
<RadioGroupItem text="Is one of line" value="is" defaultChecked setMode={setMode} />
|
||||
<RadioGroupItem text="Is not one of line" value="is_not" setMode={setMode} />
|
||||
<RadioGroupItem text="Contains" value="contains" setMode={setMode} />
|
||||
<RadioGroupItem text="Begins" value="begins" setMode={setMode} />
|
||||
<RadioGroupItem text="Ends" value="ends" setMode={setMode} />
|
||||
</OptionsWrapper>
|
||||
</Wrapper>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<FormStyledButton type="button" value="OK" onClick={handleOk} />
|
||||
<FormStyledButton type="button" value="Close" onClick={modalState.close} />
|
||||
</ModalFooter>
|
||||
</ModalBase>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user