mirror of
https://github.com/dbgate/dbgate
synced 2024-11-07 20:26:23 +00:00
filter controls
This commit is contained in:
Jan Prochazka
parent
8da0c359ff
commit
8f6b211b1b
@ -1,12 +1,16 @@
|
||||
import { DisplayColumn } from './GridDisplay';
|
||||
import { TableInfo } from '@dbgate/types';
|
||||
|
||||
export interface GridConfig {
|
||||
export interface GridConfigColumns {
|
||||
hiddenColumns: string[];
|
||||
expandedColumns: string[];
|
||||
addedColumns: string[];
|
||||
}
|
||||
|
||||
export interface GridConfig extends GridConfigColumns {
|
||||
filters: { [uniqueName: string]: string };
|
||||
}
|
||||
|
||||
export interface GridCache {
|
||||
tables: { [uniqueName: string]: TableInfo };
|
||||
refreshTime: number;
|
||||
@ -17,6 +21,7 @@ export function createGridConfig(): GridConfig {
|
||||
hiddenColumns: [],
|
||||
expandedColumns: [],
|
||||
addedColumns: [],
|
||||
filters: {},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import _ from 'lodash';
|
||||
import { GridConfig, GridCache } from './GridConfig';
|
||||
import { GridConfig, GridCache, GridConfigColumns } from './GridConfig';
|
||||
import { ForeignKeyInfo, TableInfo, ColumnInfo } from '@dbgate/types';
|
||||
import { filterName } from './filterName';
|
||||
import { Select } from '@dbgate/sqltree';
|
||||
@ -54,7 +54,7 @@ export abstract class GridDisplay {
|
||||
});
|
||||
}
|
||||
|
||||
includeInColumnSet(field: keyof GridConfig, uniqueName: string, isIncluded: boolean) {
|
||||
includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
|
||||
if (isIncluded) {
|
||||
this.setConfig({
|
||||
...this.config,
|
||||
@ -248,13 +248,15 @@ export abstract class GridDisplay {
|
||||
}
|
||||
|
||||
getDisplayColumns(table: TableInfo, parentPath: string[]) {
|
||||
return table?.columns
|
||||
return (
|
||||
table?.columns
|
||||
?.map(col => this.getDisplayColumn(table, col, parentPath))
|
||||
?.map(col => ({
|
||||
...col,
|
||||
isChecked: this.isColumnChecked(col),
|
||||
hintColumnName: col.foreignKey ? `hint_${col.uniqueName}` : null,
|
||||
}));
|
||||
})) || []
|
||||
);
|
||||
}
|
||||
|
||||
getColumns(columnFilter) {
|
||||
@ -272,4 +274,19 @@ export abstract class GridDisplay {
|
||||
toggleExpandedColumn(uniqueName: string) {
|
||||
this.includeInColumnSet('expandedColumns', uniqueName, !this.isExpandedColumn(uniqueName));
|
||||
}
|
||||
|
||||
getFilter(uniqueName: string) {
|
||||
return this.config.filters[uniqueName];
|
||||
}
|
||||
|
||||
setFilter(uniqueName, value) {
|
||||
this.setConfig({
|
||||
...this.config,
|
||||
filters: {
|
||||
...this.config.filters,
|
||||
[uniqueName]: value,
|
||||
},
|
||||
});
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@ export class TableGridDisplay extends GridDisplay {
|
||||
}
|
||||
|
||||
createSelect() {
|
||||
if (!this.table.columns) return null;
|
||||
const orderColumnName = this.table.columns[0].columnName;
|
||||
const select: Select = {
|
||||
commandType: 'select',
|
||||
|
||||
401
packages/web/src/datagrid/DataFilterControl.js
Normal file
401
packages/web/src/datagrid/DataFilterControl.js
Normal file
@ -0,0 +1,401 @@
|
||||
import React from 'react';
|
||||
import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropDownMenu';
|
||||
import styled from 'styled-components';
|
||||
import keycodes from '../utility/keycodes';
|
||||
// import { $ } from '../../Utility/jquery';
|
||||
// import autobind from 'autobind-decorator';
|
||||
// import * as React from 'react';
|
||||
|
||||
// import { createMultiLineFilter } from '../../DataLib/FilterTools';
|
||||
// import { ModalDialog } from '../Dialogs';
|
||||
// import { FilterDialog } from '../Dialogs/FilterDialog';
|
||||
// import { FilterMultipleValuesDialog } from '../Dialogs/FilterMultipleValuesDialog';
|
||||
// import { IconSpan } from '../Navigation/NavUtils';
|
||||
// import { KeyCodes } from '../ReactDataGrid/KeyCodes';
|
||||
// import { DropDownMenu, DropDownMenuDivider, DropDownMenuItem, DropDownSubmenuItem } from './DropDownMenu';
|
||||
// import { FilterParserType } from '../../SwaggerClients';
|
||||
// import { IFilterHolder } from '../CommonControls';
|
||||
// import { GrayFilterIcon } from '../Icons';
|
||||
|
||||
// export interface IDataFilterControlProps {
|
||||
// filterType: FilterParserType;
|
||||
// getFilter: Function;
|
||||
// setFilter: Function;
|
||||
// width: number;
|
||||
// onControlKey?: Function;
|
||||
// isReadOnly?: boolean;
|
||||
// inputElementId?: string;
|
||||
// }
|
||||
|
||||
const FilterDiv = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
const FilterInput = styled.input`
|
||||
flex: 1;
|
||||
width: 10px;
|
||||
`;
|
||||
const FilterButton = styled.button`
|
||||
color: gray;
|
||||
`;
|
||||
|
||||
function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilterWindow }) {
|
||||
switch (filterType) {
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
{/* <DropDownSubmenuItem title="All dates in period">
|
||||
<DropDownMenuItem onClick={x => setFilter('JAN')}>January</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('FEB')}>February</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('MAR')}>March</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('APR')}>April</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('JUN')}>June</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('JUL')}>July</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('AUG')}>August</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('SEP')}>September</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('OCT')}>October</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('NOV')}>November</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('DEC')}>December</DropDownMenuItem>
|
||||
|
||||
<DropDownMenuDivider />
|
||||
|
||||
<DropDownMenuItem onClick={x => setFilter('MON')}>Monday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('TUE')}>Tuesday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('WED')}>Wednesday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('THU')}>Thursday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('FRI')}>Friday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('SAT')}>Saturday</DropDownMenuItem>
|
||||
<DropDownMenuItem onClick={x => setFilter('SUN')}>Sunday</DropDownMenuItem>
|
||||
</DropDownSubmenuItem> */}
|
||||
</>
|
||||
);
|
||||
case 'string':
|
||||
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 => 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function DataFilterControl({ isReadOnly = false, filterType, filter, setFilter }) {
|
||||
const setFilterText = filter => {
|
||||
setFilter(filter);
|
||||
editorRef.current.value = filter || '';
|
||||
};
|
||||
const applyFilter = () => {
|
||||
setFilter(editorRef.current.value);
|
||||
};
|
||||
const filterMultipleValues = () => {};
|
||||
const openFilterWindow = operator => {};
|
||||
const buttonRef = React.createRef();
|
||||
const editorRef = React.createRef();
|
||||
|
||||
const handleKeyDown = ev => {
|
||||
if (isReadOnly) return;
|
||||
if (ev.keyCode == keycodes.enter) {
|
||||
applyFilter();
|
||||
}
|
||||
if (ev.keyCode == keycodes.escape) {
|
||||
setFilterText('');
|
||||
}
|
||||
// if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
|
||||
// if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
|
||||
// }
|
||||
};
|
||||
|
||||
const handleShowMenu = () => {
|
||||
const rect = buttonRef.current.getBoundingClientRect();
|
||||
showMenu(
|
||||
rect.left,
|
||||
rect.bottom,
|
||||
<DropDownContent
|
||||
filterType={filterType}
|
||||
setFilter={setFilterText}
|
||||
filterMultipleValues={filterMultipleValues}
|
||||
openFilterWindow={openFilterWindow}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FilterDiv>
|
||||
<FilterInput ref={editorRef} onKeyDown={handleKeyDown} type="text" readOnly={isReadOnly} />
|
||||
<FilterButton ref={buttonRef} onClick={handleShowMenu}>
|
||||
<i className="fas fa-filter" />
|
||||
</FilterButton>
|
||||
</FilterDiv>
|
||||
);
|
||||
}
|
||||
// domEditor: Element;
|
||||
|
||||
// @autobind
|
||||
// applyFilter() {
|
||||
// this.props.setFilter($(this.domEditor).val());
|
||||
// }
|
||||
|
||||
// @autobind
|
||||
// clearFilter() {
|
||||
// $(this.domEditor).val('');
|
||||
// this.applyFilter();
|
||||
// }
|
||||
|
||||
// setFilter(value: string) {
|
||||
// $(this.domEditor).val(value);
|
||||
// this.applyFilter();
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// render() {
|
||||
// let dropDownContent = null;
|
||||
|
||||
// let filterIconSpan = <span className='fa fa-filter' style={{color: 'gray', display: 'inline-block', width: '8px', height: '0', whiteSpace: 'nowrap'}} ></span>;
|
||||
// //filterIconSpan = null;
|
||||
|
||||
// if (this.props.filterType == 'Number') {
|
||||
// dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('>')}>Greater Than...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('<')}>Less Than...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
|
||||
// </DropDownMenu>;
|
||||
// }
|
||||
|
||||
// if (this.props.filterType == 'Logical') {
|
||||
// dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('TRUE')}>Is True</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('FALSE')}>Is False</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('TRUE, NULL')}>Is True or NULL</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
|
||||
// </DropDownMenu>;
|
||||
// }
|
||||
|
||||
// if (this.props.filterType == 'DateTime') {
|
||||
// dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('<=')}>Before...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('>=')}>After...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('TODAY')}>Today</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownSubmenuItem title='All dates in period'>
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('JAN')}>January</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('FEB')}>February</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('MAR')}>March</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('APR')}>April</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('JUN')}>June</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('JUL')}>July</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('AUG')}>August</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('SEP')}>September</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('OCT')}>October</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOV')}>November</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('DEC')}>December</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('MON')}>Monday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('TUE')}>Tuesday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('WED')}>Wednesday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('THU')}>Thursday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('FRI')}>Friday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('SAT')}>Saturday</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('SUN')}>Sunday</DropDownMenuItem>
|
||||
|
||||
// </DropDownSubmenuItem>
|
||||
// </DropDownMenu>;
|
||||
// }
|
||||
|
||||
// if (this.props.filterType == 'String') {
|
||||
// dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('=')}>Equals...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
|
||||
|
||||
// <DropDownMenuDivider />
|
||||
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('+')}>Contains...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('^')}>Begins With...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('$')}>Ends With...</DropDownMenuItem>
|
||||
// <DropDownMenuItem onClick={x => this.openFilterWindow('!$')}>Does Not End With...</DropDownMenuItem>
|
||||
// </DropDownMenu>;
|
||||
// }
|
||||
|
||||
// if (this.props.isReadOnly) {
|
||||
// dropDownContent = <GrayFilterIcon style={{marginLeft: '5px'}} />;
|
||||
// }
|
||||
|
||||
// return <div style={{ minWidth: `${this.props.width}px`, maxWidth: `${this.props.width}px`, width: `${this.props.width}` }}>
|
||||
// <input id={this.props.inputElementId} type='text' style={{ 'width': `${(this.props.width - 20)}px` }} readOnly={this.props.isReadOnly}
|
||||
// onBlur={this.applyFilter} ref={x => this.setDomEditor(x)} onKeyDown={this.editorKeyDown} placeholder='Search' ></input>
|
||||
|
||||
// {dropDownContent}
|
||||
// </div>;
|
||||
// }
|
||||
|
||||
// async filterMultipleValues() {
|
||||
// let result = await ModalDialog.run(<FilterMultipleValuesDialog header='Filter multiple values' />);
|
||||
// if (!result) return;
|
||||
// let { mode, text } = result;
|
||||
// let filter = createMultiLineFilter(mode, text);
|
||||
// this.setFilter(filter);
|
||||
// }
|
||||
|
||||
// openFilterWindow(selectedOperator: string) {
|
||||
// FilterDialog.runFilter(this, this.props.filterType, selectedOperator);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// setDomEditor(editor) {
|
||||
// this.domEditor = editor;
|
||||
// $(editor).val(this.props.getFilter());
|
||||
// }
|
||||
|
||||
// @autobind
|
||||
// editorKeyDown(ev) {
|
||||
// if (this.props.isReadOnly) return;
|
||||
// if (ev.keyCode == KeyCodes.Enter) {
|
||||
// this.applyFilter();
|
||||
// }
|
||||
// if (ev.keyCode == KeyCodes.Escape) {
|
||||
// this.clearFilter();
|
||||
// }
|
||||
// if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
|
||||
// if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
|
||||
// }
|
||||
// }
|
||||
|
||||
// focus() {
|
||||
// $(this.domEditor).focus();
|
||||
// }
|
||||
// }
|
||||
@ -7,6 +7,7 @@ import useDimensions from '../utility/useDimensions';
|
||||
import { SeriesSizes } from './SeriesSizes';
|
||||
import axios from '../utility/axios';
|
||||
import ColumnLabel from './ColumnLabel';
|
||||
import DataFilterControl from './DataFilterControl';
|
||||
|
||||
const GridContainer = styled.div`
|
||||
position: absolute;
|
||||
@ -40,10 +41,10 @@ const TableHeaderRow = styled.tr`
|
||||
const TableBodyRow = styled.tr`
|
||||
// height: 35px;
|
||||
background-color: #ffffff;
|
||||
&:nth-child(6n + 4) {
|
||||
&:nth-child(6n + 3) {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
&:nth-child(6n + 7) {
|
||||
&:nth-child(6n + 6) {
|
||||
background-color: #ebf5ff;
|
||||
}
|
||||
`;
|
||||
@ -56,6 +57,12 @@ const TableHeaderCell = styled.td`
|
||||
background-color: #f6f7f9;
|
||||
overflow: hidden;
|
||||
`;
|
||||
const TableFilterCell = styled.td`
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
`;
|
||||
const TableBodyCell = styled.td`
|
||||
font-weight: normal;
|
||||
border: 1px solid #c0c0c0;
|
||||
@ -308,6 +315,20 @@ export default function DataGridCore(props) {
|
||||
</TableHeaderCell>
|
||||
))}
|
||||
</TableHeaderRow>
|
||||
<TableHeaderRow>
|
||||
{realColumns.map(col => (
|
||||
<TableFilterCell
|
||||
key={col.uniqueName}
|
||||
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
|
||||
>
|
||||
<DataFilterControl
|
||||
filterType="string"
|
||||
filter={display.getFilter(col.uniqueName)}
|
||||
setFilter={value => display.setFilter(col.uniqueName, value)}
|
||||
/>
|
||||
</TableFilterCell>
|
||||
))}
|
||||
</TableHeaderRow>
|
||||
</TableHead>
|
||||
<TableBody ref={tableBodyRef}>
|
||||
{loadedRows
|
||||
|
||||
@ -39,6 +39,12 @@ const StyledLink = styled.a`
|
||||
}
|
||||
`;
|
||||
|
||||
export const DropDownMenuDivider = styled.li`
|
||||
margin: 9px 0px 9px 0px;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
border-bottom: 1px solid #fff;
|
||||
`;
|
||||
|
||||
export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
|
||||
const handleMouseEnter = () => {
|
||||
// if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
|
||||
|
||||
99
packages/web/src/utility/keycodes.js
Normal file
99
packages/web/src/utility/keycodes.js
Normal file
@ -0,0 +1,99 @@
|
||||
export default {
|
||||
backspace: 8,
|
||||
tab: 9,
|
||||
enter: 13,
|
||||
shift: 16,
|
||||
ctrl: 17,
|
||||
alt: 18,
|
||||
pauseBreak: 19,
|
||||
capsLock: 20,
|
||||
escape: 27,
|
||||
pageUp: 33,
|
||||
pageDown: 34,
|
||||
end: 35,
|
||||
home: 36,
|
||||
leftArrow: 37,
|
||||
ppArrow: 38,
|
||||
rightArrow: 39,
|
||||
downArrow: 40,
|
||||
insert: 45,
|
||||
delete: 46,
|
||||
n0: 48,
|
||||
n1: 49,
|
||||
n2: 50,
|
||||
n3: 51,
|
||||
n4: 52,
|
||||
n5: 53,
|
||||
n6: 54,
|
||||
n7: 55,
|
||||
n8: 56,
|
||||
n9: 57,
|
||||
a: 65,
|
||||
b: 66,
|
||||
c: 67,
|
||||
d: 68,
|
||||
e: 69,
|
||||
f: 70,
|
||||
g: 71,
|
||||
h: 72,
|
||||
i: 73,
|
||||
j: 74,
|
||||
k: 75,
|
||||
l: 76,
|
||||
m: 77,
|
||||
n: 78,
|
||||
o: 79,
|
||||
p: 80,
|
||||
q: 81,
|
||||
r: 82,
|
||||
s: 83,
|
||||
t: 84,
|
||||
u: 85,
|
||||
v: 86,
|
||||
w: 87,
|
||||
x: 88,
|
||||
y: 89,
|
||||
z: 90,
|
||||
leftWindowKey: 91,
|
||||
rightWindowKey: 92,
|
||||
selectKey: 93,
|
||||
numPad0: 96,
|
||||
numPad1: 97,
|
||||
numPad2: 98,
|
||||
numPad3: 99,
|
||||
numPad4: 100,
|
||||
numPad5: 101,
|
||||
numPad6: 102,
|
||||
numPad7: 103,
|
||||
numPad8: 104,
|
||||
numPad9: 105,
|
||||
multiply: 106,
|
||||
add: 107,
|
||||
subtract: 109,
|
||||
decimalPoint: 110,
|
||||
divide: 111,
|
||||
f1: 112,
|
||||
f2: 113,
|
||||
f3: 114,
|
||||
f4: 115,
|
||||
f5: 116,
|
||||
f6: 117,
|
||||
f7: 118,
|
||||
f8: 119,
|
||||
f9: 120,
|
||||
f10: 121,
|
||||
f12: 123,
|
||||
numLock: 144,
|
||||
scrollLock: 145,
|
||||
semiColon: 186,
|
||||
equalSign: 187,
|
||||
comma: 188,
|
||||
dash: 189,
|
||||
period: 190,
|
||||
forwardSlash: 191,
|
||||
graveAccent: 192,
|
||||
openBracket: 219,
|
||||
backSlash: 220,
|
||||
closeBracket: 221,
|
||||
singleQuote: 222,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user