#9901 - Disable the operator dropdown in Edit mode (#9903)

geosolutions-it · Jan 23, 2024 · a6f588a · a6f588a
1 parent 2985e23
commit a6f588a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 34 deletions.
diff --git a/web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx b/web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx
@@ -85,7 +85,7 @@ class AttributeFilter extends React.PureComponent {
         const placeholder = getMessageById(this.context.messages, this.props.placeholderMsgId) || "Search";
         let inputKey = 'header-filter-' + this.props.column.key;
         let isValueExist = this.state?.value ?? this.props.value;
-        if (['date', 'time', 'date-time'].includes(this.props.type) && this.props.isWithinAttrTbl) isValueExist = this.state?.value ?? this.props.value?.startDate ?? this.props.value;
+        if (this.isDateTimeField() && this.props.isWithinAttrTbl) isValueExist = this.state?.value ?? this.props.value?.startDate ?? this.props.value;
         let isNullOperator = this.state.operator === 'isNull';
         return (<div className={`rw-widget ${this.state.isInputValid ? "" : "show-error"}`}>
             <input
@@ -109,15 +109,16 @@ class AttributeFilter extends React.PureComponent {
     renderOperatorField = () => {
         return (
             <ComboField
-                style={{ width: '90px'}}
+                style={{ width: 90 }}
                 fieldOptions= {this.getOperator(this.props.type)}
                 fieldName="operator"
                 fieldRowId={1}
+                disabled={this.props.disabled}
                 onSelect={(selectedOperator)=>{
                     // if select the same operator -> don't do anything
                     if (selectedOperator === this.state.operator) return;
                     let isValueExist;           // entered value
-                    if (['date', 'time', 'date-time'].includes(this.props.type)) {
+                    if (this.isDateTimeField()) {
                         isValueExist = this.state?.value ?? this.props.value?.startDate ?? this.props.value;
                     } else {
                         isValueExist = this.state?.value ?? this.props.value;
@@ -147,11 +148,14 @@ class AttributeFilter extends React.PureComponent {
             <div key={inputKey} className={`form-group${((this.state.isInputValid && this.props.valid) ? "" : " has-error")}`}>
                 {this.props.isWithinAttrTbl ? <>
                     {this.renderOperatorField()}
-                    {['time', 'date', 'date-time'].includes(this.props.type) ? this.renderInput() : this.renderTooltip(this.renderInput())}
+                    {this.isDateTimeField() ? this.renderInput() : this.renderTooltip(this.renderInput())}
                 </> : this.renderTooltip(this.renderInput())}
             </div>
         );
     }
+    isDateTimeField = () => {
+        return ['date', 'time', 'date-time'].includes(this.props.type);
+    }
     handleChange = (e) => {
         const value = e.target.value;
         // todo: validate input based on type

diff --git a/web/client/components/data/featuregrid/filterRenderers/__tests__/AttributeFilter-test.jsx b/web/client/components/data/featuregrid/filterRenderers/__tests__/AttributeFilter-test.jsx
@@ -77,6 +77,14 @@ describe('Test for AttributeFilter component', () => {
         const operatorDropdownListEl = ReactTestUtils.findRenderedDOMComponentWithClass(cmp, 'rw-dropdownlist');
         expect(operatorDropdownListEl).toExist();
     });
+    it('test disable operator dropdown', () => {
+        const cmp = ReactDOM.render(<AttributeFilter disabled isWithinAttrTbl={"true"} value={"TEST"}/>, document.getElementById("container"));
+        const el = document.getElementsByClassName("form-control input-sm")[0];
+        expect(el).toExist();
+        const input = ReactTestUtils.findRenderedDOMComponentWithTag(cmp, "input");
+        expect(input.value).toBe("TEST");
+        expect(input.disabled).toBe(true);
+    });
     it('test rendering without operator DD', () => {
         const cmp = ReactDOM.render(<AttributeFilter isWithinAttrTbl={false} value={"TEST"}/>, document.getElementById("container"));
         const el = document.getElementsByClassName("form-control input-sm")[0];

diff --git a/web/client/components/data/featuregrid/filterRenderers/index.js b/web/client/components/data/featuregrid/filterRenderers/index.js
@@ -15,39 +15,39 @@ import NumberFilter from './NumberFilter';
 import StringFilter from './StringFilter';
 
 const types = {
-    "defaultFilter": (props) => withProps(() =>{
+    "defaultFilter": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.default" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.default" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.default" : "";
         return { type: props.type, isWithinAttrTbl: props.isWithinAttrTbl || false, placeholderMsgId, tooltipMsgId };
     })(DefaultFilter),
-    "string": (props) => withProps(() =>{
+    "string": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.string" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.string" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.string" : "";
         return { type: 'string', isWithinAttrTbl: props.isWithinAttrTbl || false, placeholderMsgId, tooltipMsgId };
     })(StringFilter),
-    "number": (props) => withProps(() =>{
+    "number": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.number" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.number" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.number" : "";
         return { type: 'number', isWithinAttrTbl: props.isWithinAttrTbl || false,  placeholderMsgId, tooltipMsgId };
     })(NumberFilter),
-    "int": (props) => withProps(() =>{
+    "int": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.number" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.number" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.number" : "";
         return { type: 'integer', isWithinAttrTbl: props.isWithinAttrTbl || false,  placeholderMsgId, tooltipMsgId };
     })(NumberFilter),
-    "date": (props) => withProps(() =>{
+    "date": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.date" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.date" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.date" : "";
         return { type: "date", isWithinAttrTbl: props.isWithinAttrTbl || false,  placeholderMsgId, tooltipMsgId };
     })(DateTimeFilter),
-    "time": (props) => withProps(() =>{
+    "time": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.date" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.date" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.date" : "";
         return { type: "time", isWithinAttrTbl: props.isWithinAttrTbl || false,  placeholderMsgId, tooltipMsgId };
     })(DateTimeFilter),
-    "date-time": (props) => withProps(() =>{
+    "date-time": (props) => withProps(({disabled, tooltipMsgId: editTooltipMsgId}) =>{
         let placeholderMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.placeholders.date" : '';
-        let tooltipMsgId = props.isWithinAttrTbl ? "featuregrid.attributeFilter.tooltips.date" : "";
+        let tooltipMsgId = props.isWithinAttrTbl ? disabled ? editTooltipMsgId : "featuregrid.attributeFilter.tooltips.date" : "";
         return { type: "date-time", isWithinAttrTbl: props.isWithinAttrTbl || false,  placeholderMsgId, tooltipMsgId };
     })(DateTimeFilter),
     "geometry": () => GeometryFilter

diff --git a/web/client/components/misc/datetimepicker/DateTimePicker.js b/web/client/components/misc/datetimepicker/DateTimePicker.js
@@ -69,7 +69,8 @@ class DateTimePicker extends Component {
         toolTip: PropTypes.string,
         tabIndex: PropTypes.string,
         options: PropTypes.object,
-        isWithinAttrTbl: PropTypes.bool
+        isWithinAttrTbl: PropTypes.bool,
+        disabled: PropTypes.bool
     }
     static contextTypes = {
         messages: PropTypes.object,
@@ -154,7 +155,7 @@ class DateTimePicker extends Component {
         let inputV = this.props.isWithinAttrTbl ? `${inputValue}` : `${operator}${inputValue}`;
         let isNullOperator = this.props.operator === 'isNull';
         if (isNullOperator) inputV = '';
-        const inputEl = <input type="text" id="rw_1_input" role="combobox" onBlur={this.handleInputBlur} placeholder={placeholder} aria-expanded={calendarVisible || timeVisible} aria-haspopup="true" aria-busy="false" aria-owns="rw_1_cal rw_1_time_listbox" tabIndex={tabIndex} autoComplete="off" value={inputV} className={`rw-input ${className ? className : ''}`} onChange={this.handleValueChange} disabled={isNullOperator} />;
+        const inputEl = <input type="text" disabled={this.props.disabled || isNullOperator} id="rw_1_input" role="combobox" onBlur={this.handleInputBlur} placeholder={placeholder} aria-expanded={calendarVisible || timeVisible} aria-haspopup="true" aria-busy="false" aria-owns="rw_1_cal rw_1_time_listbox" tabIndex={tabIndex} autoComplete="off" value={inputV} className={`rw-input ${className ? className : ''}`} onChange={this.handleValueChange} />;
         if (toolTip) {
             return (<OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">{toolTip}</Tooltip>}>
                 {inputEl}
@@ -196,15 +197,15 @@ class DateTimePicker extends Component {
                             </div>
                         }
                     >
-                        <button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn">
+                        <button disabled={this.props.disabled} tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn">
                             <Glyphicon glyph={'date-time'} />
                         </button>
                     </Popover>
                 </span>
             </div>);
         } else if (type === 'time') {
             return (
-                <div tabIndex="-1" onBlur={this.handleWidgetBlur} onKeyDown={this.handleKeyDown} className={`rw-datetimepicker rw-widget ${calendar && time ? 'rw-has-both' : ''} ${!calendar && !time ? 'rw-has-neither' : ''} ${type === 'time' ? 'time-type' : ''} ${focused ? 'rw-state-focus' : ''}`}>
+                <div tabIndex="-1" onBlur={this.handleWidgetBlur} onKeyDown={this.handleKeyDown} onFocus={this.handleWidgetFocus} className={`rw-datetimepicker rw-widget ${calendar && time ? 'rw-has-both' : ''} ${!calendar && !time ? 'rw-has-neither' : ''} ${type === 'time' ? 'time-type' : ''} ${focused ? 'rw-state-focus' : ''}`}>
                     {this.renderInput(inputValue, operator, timeVisible ? '' : toolTip, timePlaceholderMsgId, tabIndex, calendarVisible, timeVisible)}
                     <span className="rw-select">
                         <Popover
@@ -222,7 +223,7 @@ class DateTimePicker extends Component {
                                 </div>
                             }
                         >
-                            <button tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" >
+                            <button disabled={this.props.disabled} tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" >
                                 <span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
                             </button>
                         </Popover>
@@ -253,7 +254,7 @@ class DateTimePicker extends Component {
                                 </div>
                             }
                         >
-                            <button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" >
+                            <button disabled={this.props.disabled} tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" >
                                 <span aria-hidden="true" className="rw-i rw-i-calendar"></span>
                             </button>
                         </Popover>
@@ -269,8 +270,10 @@ class DateTimePicker extends Component {
     ignoreBlur = false;
 
     handleWidgetFocus = () => {
-        this.setState({ focused: true });
-        this.ignoreBlur = false;
+        if (!this.props.disabled) {
+            this.setState({ focused: true });
+            this.ignoreBlur = false;
+        }
     }
 
     handleWidgetBlur = (type) => {

diff --git a/web/client/components/misc/datetimepicker/RangedDateTimePicker.js b/web/client/components/misc/datetimepicker/RangedDateTimePicker.js
@@ -69,7 +69,8 @@ class DateTimePickerWithRange extends Component {
         culture: PropTypes.string,
         toolTip: PropTypes.string,
         tabIndex: PropTypes.string,
-        options: PropTypes.object
+        options: PropTypes.object,
+        disabled: PropTypes.disabled
     }
 
     static defaultProps = {
@@ -123,7 +124,7 @@ class DateTimePickerWithRange extends Component {
 
     renderInput = (inputValue, operator, toolTip, placeholder, tabIndex, calendarVisible, timeVisible, style = {}, className) => {
         let inputV = this.props.isWithinAttrTbl ? `${inputValue}` : `${operator}${inputValue}`;
-        const inputEl = <input style={style} type="text" id="rw_1_input" disabled={'true'} role="combobox" placeholder={placeholder} aria-expanded={calendarVisible || timeVisible} aria-haspopup="true" aria-busy="false" aria-owns="rw_1_cal rw_1_time_listbox" tabIndex={tabIndex} autoComplete="off" value={inputV} className={`rw-input ${this.state.isInputNotValid ? 'has-error' : ''} ${className ? className : ''}`} onChange={this.handleValueChange} />;
+        const inputEl = <input style={style} disabled={this.props.disabled || true} type="text" id="rw_1_input" role="combobox" placeholder={placeholder} aria-expanded={calendarVisible || timeVisible} aria-haspopup="true" aria-busy="false" aria-owns="rw_1_cal rw_1_time_listbox" tabIndex={tabIndex} autoComplete="off" value={inputV} className={`rw-input ${this.state.isInputNotValid ? 'has-error' : ''} ${className ? className : ''}`} onChange={this.handleValueChange} />;
         if (toolTip) {
             return (<OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">{toolTip}</Tooltip>}>
                 {inputEl}
@@ -196,7 +197,7 @@ class DateTimePickerWithRange extends Component {
 	                        </div>
 	                    }
 	                >
-	                    <button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
+	                    <button disabled={this.props.disabled} tabIndex="-1" title="Select Date" type="button" aria-disabled={this.props.disabled} aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
 	                        <span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
 	                    </button>
 	                </Popover>
@@ -271,7 +272,7 @@ class DateTimePickerWithRange extends Component {
 	                        </div>
 	                    }
 	                >
-	                    <button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
+	                    <button disabled={this.props.disabled} tabIndex="-1" title="Select Date" type="button" aria-disabled={this.props.disabled} aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
 	                        <span aria-hidden="true" className="rw-i rw-i-calendar"></span>
 	                    </button>
 	                </Popover>
@@ -371,7 +372,7 @@ class DateTimePickerWithRange extends Component {
 	                        </div>
 	                    }
 	                >
-	                    <button tabIndex="-1" title="Select Date" type="button" aria-disabled="false" aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
+	                    <button disabled={this.props.disabled} tabIndex="-1" title="Select Date" type="button" aria-disabled={this.props.disabled} aria-label="Select Date" className="rw-btn-calendar rw-btn" onClick={this.toggleHandler}>
 	                        <Glyphicon glyph={'date-time'} />
 	                    </button>
 	                </Popover>
@@ -392,8 +393,10 @@ class DateTimePickerWithRange extends Component {
     ignoreBlur = false;
 
     handleWidgetFocus = () => {
-        this.setState({ focused: true });
-        this.ignoreBlur = false;
+        if (!this.props.disabled) {
+            this.setState({ focused: true });
+            this.ignoreBlur = false;
+        }
     }
 
     handleWidgetBlur = (type) => {
@@ -402,7 +405,7 @@ class DateTimePickerWithRange extends Component {
         }
         if (type === 'date') {
             this.calendarRef.click();
-        } else if (type === 'dat-time') {
+        } else if (type === 'date-time') {
             this.dateTimeRef.click();
         }
         this.setState({ openRangeContainer: '', focused: false });

diff --git a/web/client/themes/default/less/featuregrid.less b/web/client/themes/default/less/featuregrid.less
@@ -87,6 +87,7 @@
 .feature-grid-drag-handle-show{
     div.form-group{
         display:flex;
+        margin-top: -4px;
         div.rw-dropdownlist.rw-widget{
             min-width:fit-content;
         }
@@ -105,6 +106,9 @@
         div.rw-widget div.rw-input{
             padding-right: 0.5rem;
         }
+        div.rw-widget .form-control{
+            border: none;
+        }
         .range-time-input div.rw-calendar-popup.rw-popup-container{
             left: -2.5rem;
             overflow-x:hidden;

diff --git a/web/client/themes/default/less/react-data-grid.less b/web/client/themes/default/less/react-data-grid.less
@@ -132,6 +132,18 @@
         .color-var(@theme-vars[main-color]);
         .background-color-var(@theme-vars[main-bg]);
     }
+    .feature-grid-container {
+        .ms2-border-layout-body {
+            .react-grid-HeaderRow {
+                .react-grid-HeaderCell {
+                    .rw-datetimepicker.rw-widget input:disabled, 
+                    .rw-datetimepicker.rw-widget .rw-select button:disabled {
+                        .background-color-var(@theme-vars[disabled-bg], true);
+                    }
+                }
+            }
+        }
+   }
 }
 
 // **************