dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-28 08:26:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

filter multiple values

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-13 21:27:05 +02:00
parent 7d844fe892
commit 54fc03ec04
3 changed files with 176 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/filterparser/src/filterTool.ts
View File

@@ -1,4 +1,44 @@
export type FilterMultipleValuesMode = 'is' | 'is_not' | 'contains' | 'begins' | 'ends';
export function getFilterValueExpression(value) { export function getFilterValueExpression(value) {
if (value == null) return 'NULL'; if (value == null) return 'NULL';
return `="${value}"`; return `="${value}"`;
} }
export function createMultiLineFilter(mode: FilterMultipleValuesMode, text: string) {
let res = '';
for (let line of text.split('\n')) {
line = line.trim();
if (line.length == 0) continue;
if (res.length > 0) {
switch (mode) {
case 'is_not':
res += ' ';
break;
default:
res += ',';
break;
}
}
switch (mode) {
case 'is':
res += "='" + line + "'";
break;
case 'is_not':
res += "<>'" + line + "'";
break;
case 'contains':
res += "'" + line + "'";
break;
case 'begins':
res += "^'" + line + "'";
break;
case 'ends':
res += "$'" + line + "'";
break;
}
}
return res;
}

123
packages/web/src/datagrid/DataFilterControl.js
View File

@@ -3,8 +3,10 @@ import React from 'react';
import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropDownMenu'; import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropDownMenu';
import styled from 'styled-components'; import styled from 'styled-components';
import keycodes from '../utility/keycodes'; import keycodes from '../utility/keycodes';
import { parseFilter } from '@dbgate/filterparser'; import { parseFilter, createMultiLineFilter } from '@dbgate/filterparser';
import InlineButton from '../widgets/InlineButton'; import InlineButton from '../widgets/InlineButton';
import showModal from '../modals/showModal';
import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
// import { $ } from '../../Utility/jquery'; // import { $ } from '../../Utility/jquery';
// import autobind from 'autobind-decorator'; // import autobind from 'autobind-decorator';
// import * as React from 'react'; // import * as React from 'react';
@@ -36,7 +38,7 @@ const FilterDiv = styled.div`
const FilterInput = styled.input` const FilterInput = styled.input`
flex: 1; flex: 1;
min-width: 10px; 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` // const FilterButton = styled.button`
// color: gray; // color: gray;
@@ -47,68 +49,68 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
case 'number': case 'number':
return ( return (
<> <>
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem> <DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('=')}>Equals...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not 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...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('<')}>Less Than...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('<')}>Less Than...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
</> </>
); );
case 'logical': case 'logical':
return ( return (
<> <>
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem> <DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('TRUE')}>Is True</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('TRUE')}>Is True</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('FALSE')}>Is False</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('FALSE')}>Is False</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('TRUE, NULL')}>Is True or NULL</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('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
</> </>
); );
case 'datetime': case 'datetime':
return ( return (
<> <>
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem> <DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => openFilterWindow('<=')}>Before...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('<=')}>Before...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('>=')}>After...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('>=')}>After...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('>=;<=')}>Between...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('TODAY')}>Today</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('TODAY')}>Today</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('THIS WEEK')}>This Week</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('LAST WEEK')}>Last Week</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('THIS MONTH')}>This Month</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('LAST MONTH')}>Last Month</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('THIS YEAR')}>This Year</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('LAST YEAR')}>Last Year</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
@@ -140,24 +142,24 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
case 'string': case 'string':
return ( return (
<> <>
<DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('')}>Clear Filter</DropDownMenuItem>
<DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem> <DropDownMenuItem onClick={(x) => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('=')}>Equals...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NULL')}>Is Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not 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('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
<DropDownMenuItem onClick={x => setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem> <DropDownMenuItem onClick={(x) => setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
<DropDownMenuDivider /> <DropDownMenuDivider />
<DropDownMenuItem onClick={x => openFilterWindow('+')}>Contains...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('+')}>Contains...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('^')}>Begins With...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('^')}>Begins With...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('$')}>Ends With...</DropDownMenuItem> <DropDownMenuItem onClick={(x) => openFilterWindow('$')}>Ends With...</DropDownMenuItem>
<DropDownMenuItem onClick={x => openFilterWindow('!$')}>Does Not End 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 }) { export default function DataFilterControl({ isReadOnly = false, filterType, filter, setFilter }) {
const [filterState, setFilterState] = React.useState('empty'); const [filterState, setFilterState] = React.useState('empty');
const setFilterText = filter => { const setFilterText = (filter) => {
setFilter(filter); setFilter(filter);
editorRef.current.value = filter || ''; editorRef.current.value = filter || '';
updateFilterState(); updateFilterState();
@@ -174,12 +176,19 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
if ((filter || '') == (editorRef.current.value || '')) return; if ((filter || '') == (editorRef.current.value || '')) return;
setFilter(editorRef.current.value); setFilter(editorRef.current.value);
}; };
const filterMultipleValues = () => {}; const filterMultipleValues = () => {
const openFilterWindow = operator => {}; showModal((modalState) => (
<FilterMultipleValuesModal
modalState={modalState}
onFilter={(mode, text) => setFilterText(createMultiLineFilter(mode, text))}
/>
));
};
const openFilterWindow = (operator) => {};
const buttonRef = React.useRef(); const buttonRef = React.useRef();
const editorRef = React.useRef(); const editorRef = React.useRef();
const handleKeyDown = ev => { const handleKeyDown = (ev) => {
if (isReadOnly) return; if (isReadOnly) return;
if (ev.keyCode == keycodes.enter) { if (ev.keyCode == keycodes.enter) {
applyFilter(); applyFilter();

70
packages/web/src/modals/FilterMultipleValuesModal.js
View File

@@ -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>
);
}