From 2163ab2d44d6cc447ee1ca1249023b7741a7e0cf Mon Sep 17 00:00:00 2001 From: Olivier Giulieri Date: Sun, 22 Jan 2017 03:09:53 -0800 Subject: [PATCH] Started on Filters. --- js/views/action/Filter.js | 229 ++++++++++++++++++++++++++++++++++++++ sass/action-filter.scss | 116 +++++++++++++++++++ sass/evolutility.scss | 2 +- 3 files changed, 346 insertions(+), 1 deletion(-) create mode 100644 js/views/action/Filter.js create mode 100644 sass/action-filter.scss diff --git a/js/views/action/Filter.js b/js/views/action/Filter.js new file mode 100644 index 00000000..dd265ba0 --- /dev/null +++ b/js/views/action/Filter.js @@ -0,0 +1,229 @@ +import React from 'react' +import Datepicker from 'react-datepicker' + +import {i18n_filters} from '../../i18n/i18n' +import dico from '../../utils/dico' +import format from '../../utils/format' +import models from '../../models/all_models' +import NavLink from '../../widgets/NavLink' +import Field from '../../widgets/Field' + +const fOps = { + sEqual:'eq', + sNotEqual:'ne', + sStart:'sw', + sContain:'ct', + sNotContain:'nct', + sFinish:'fw', + sInList:'in', + sIsNull:'null', + sIsNotNull:'nn', + sGreater:'gt', + sSmaller:'lt', + sBetween:'bw' +}; + +function operatorsList(fType){ + const fts=dico.fieldTypes + let opts=[]; + function addOp(key, label){ + opts.push({ + id: key, + label: label + }) + } + switch (fType){ + case fts.date: + case fts.datetime: + case fts.time: + if (fType==fts.time){ + addOp(fOps.sEqual, i18n_filters.sAt) + addOp(fOps.sNotEqual, i18n_filters.sNotAt) + }else{ + addOp(fOps.sEqual, i18n_filters.sOn) + addOp(fOps.sNotEqual, i18n_filters.sNotOn) + } + addOp(fOps.sGreater, i18n_filters.sAfter) + addOp(fOps.sSmaller, i18n_filters.sBefore) + //addOp(fOps.sBetween, i18n_filters.sBetween + break; + case fts.int: + case fts.dec: + case fts.money: + addOp(fOps.sEqual, i18n_filters.sNumEqual) + addOp(fOps.sNotEqual, i18n_filters.sNumNotEqual) + addOp(fOps.sGreater, i18n_filters.sGreater) + addOp(fOps.sSmaller, i18n_filters.sSmaller) + break; + default: + addOp(fOps.sStart, i18n_filters.sStart) + addOp(fOps.sEqual, i18n_filters.sEqual) + addOp(fOps.sNotEqual, i18n_filters.sNotEqual) + addOp(fOps.sContain, i18n_filters.sContain) + addOp(fOps.sNotContain, i18n_filters.sNotContain) + addOp(fOps.sFinish, i18n_filters.sFinish) + } + addOp(fOps.sIsNull, i18n_filters.sIsNull) + addOp(fOps.sIsNotNull, i18n_filters.sIsNotNull) + + return opts +} + +function getEventKey(evt){ + return evt.target.selectedIndex ? evt.target.options[evt.target.selectedIndex].value : null +} + +export default React.createClass({ + + propTypes: { + entity: React.PropTypes.string + }, + + getInitialState() { + return { + conditions: [], + field: null, + operator: null, + value: null + } + }, + + fieldSelected(evt){ + this.setState({ + field: getEventKey(evt), + operator: null, + value: null + }) + }, + operatorSelected(evt){ + this.setState({ + operator: getEventKey(evt), + value: null + }) + }, + valueSelected(evt){ + this.setState({ + value: getEventKey(evt) + }) + }, + + clickOK(){ + console.log('OK') + }, + + clickCancel(){ + this.setState({ + field: null, + operator: null, + value: null + }) + }, + + render() { + const e = this.props.entity + const m = models[e] + const ep='/'+e+'/' + function fnOpt(f, idx){ + return ( + + ) + } + const fts = dico.fieldTypes + + if(m){ + let fn = this.state.field + let f = fn ? m.fieldsH[fn] : null + let fList = m.fields.map(fnOpt), + oList, + oPH, + fV = '' + + if(f){ + if(f.type===fts.lov){ + oPH = null//
{i18n_filters.sInList}
+ fV =
+ {f.list.map((i, idx)=>{ + return + })} +
+
+ }else if(f.type===fts.bool){ + oPH =
{i18n_filters.sEqual}
+ fV = +   +   + + }else{ + oList = operatorsList(f.type).map(fnOpt) + if(this.state.operator==null || this.state.operator==='nn'){ + fV = '' + }else{ + switch (f.type){ + case fts.date: + case fts.datetime: + fV = + break + case fts.time: + case fts.int: + case fts.dec: + case fts.money: + var iType=(f.type==fts.date)?'text':f.type; + fV = + //if(opBetween){ + // h+=''+i18n_filters.opAnd+' '+ + // ''; + //} + //addOK=false; + break; + default: + fV = ; + //addOK=false; + } + } + } + } + + return ( +
+
+ + + + {oList ? ( + + ) : null} + + {oPH} + + {fV} + + {fV ? : null} + + +
+ +
+
+ ) + }else{ + return ( +

Invalid route.

+ ) + } + } + +}) diff --git a/sass/action-filter.scss b/sass/action-filter.scss new file mode 100644 index 00000000..b904ec10 --- /dev/null +++ b/sass/action-filter.scss @@ -0,0 +1,116 @@ +/* + evolutility : action-filter +*/ + +$color-condition: #f0ad4e; + +.evo-bNew, .evo-bAdd, .evo-bDel, .evo-bSubmit { + display: inline-block; + margin:1px 6px 6px 1px; +} + +.evo-lBold{ + font-weight: bold; +} + +.evo-lLight{ + font-weight: normal; +} + +.evo-zfilters{ + + padding-bottom: 6px; + + > a { + //background-color: $color-condition; + //color: #fff; + margin: 1px 2px 2px 1px; + padding: 3px 2px; + clear: left; +/* + &:hover, + &:active{ + //background-color: $color-condition; + //color: #fff; + text-decoration: none; + } +*/ + >span.ui-button-text{ + padding: 4px 33px 4px 12px; + } + >button{ + float: none !important; + margin: 2px 2px 0 4px; + } + } + + .glyphicon-remove{ + margin:0 6px; + } +} + + +.evo-filters.panel{ + min-height:50px; + padding:6px 1px 1px 6px !important; + + > a { + margin:1px 6px 6px 1px; + } +} +.evo-filters{ + color: #333; + >.close{ + margin-right: 4px; + } +} + +.evo-editFilter{ + vertical-align: middle; + + &:last-child{ + clear:left; + } + + &:after, + > button,>a{ + clear: left; + } + + .as-Txt{ + line-height: 30px; + } + > #value{ + margin-right:5px; + line-height: 30px; + >label{ + margin-left:6px; + margin-right:6px; + >input[type="checkbox"], + >input[type="radio"]{ + margin-right: 10px; + } + } + } + > select, + > input, + > span{ + float: left; + margin:1px 6px 6px 1px; + font-size: 1.1em; + width:auto; + } + input[type="number"]#value, + input[type="time"]#value, + input[type="time"]#value2 { + width:6em; + } + + input.hasDatepicker{ + width:7em; + } + +} +.roOp{ + border: solid 1px silver; +} \ No newline at end of file diff --git a/sass/evolutility.scss b/sass/evolutility.scss index 3031b454..6173b427 100644 --- a/sass/evolutility.scss +++ b/sass/evolutility.scss @@ -19,7 +19,7 @@ @import 'many-cards'; @import 'many-charts'; -//@import 'action-filter'; +@import 'action-filter'; //@import 'action-search'; @import 'print';