geosolutions-it#9706: resolve reviewer comments

Description: - Add placeholder for time picker - Add translations for the added time placeholder - Fix crash app bug due to entering invalid date in input texts of date/time Pickers
mahmoudadel54 · Jan 18, 2024 · ad2ff6f · ad2ff6f
1 parent ad64e56
commit ad2ff6f
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 17 deletions.
diff --git a/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx b/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx
@@ -33,14 +33,22 @@ export default compose(
                     type: props.type,
                     attribute
                 });
-            } else {
+            } else if (value && typeof value === 'object') {
                 props.onValueChange(value);
                 props.onChange({
                     value: { startDate: value?.startDate, endDate: value?.endDate, operator: inputOperator },
                     operator: inputOperator,
                     type: props.type,
                     attribute
                 });
+            } else if (!value) {
+                props.onValueChange(value);
+                props.onChange({
+                    value: { startDate: value, operator: inputOperator },
+                    operator: inputOperator,
+                    type: props.type,
+                    attribute
+                });
             }
         }
     }),

diff --git a/web/client/components/misc/datetimepicker/DateTimePicker.js b/web/client/components/misc/datetimepicker/DateTimePicker.js
@@ -17,6 +17,7 @@ import { isDate, isNil, omit } from 'lodash';
 import OverlayTrigger from '../OverlayTrigger';
 import Hours from './Hours';
 import Popover from '../../styleeditor/Popover';
+import {getMessageById} from '../../../utils/LocaleUtils';
 
 localizer(moment);
 
@@ -70,7 +71,10 @@ class DateTimePicker extends Component {
         options: PropTypes.object,
         isWithinAttrTbl: PropTypes.bool
     }
-
+    static contextTypes = {
+        messages: PropTypes.object,
+        locale: PropTypes.string
+    };
     static defaultProps = {
         placeholder: 'Type date...',
         calendar: true,
@@ -98,7 +102,7 @@ class DateTimePicker extends Component {
         if (prevProps.value !== this.props.value || prevProps.operator !== this.props.operator) {
             const { value, operator } = this.props;
             this.setDateFromValueProp(value, operator);
-            if (this.props.operator === 'isNull') this.setState({ inputValue: '' });
+            if (this.props.operator === 'isNull') this.setState({ inputValue: '', date: null });
         }
     }
 
@@ -109,14 +113,15 @@ class DateTimePicker extends Component {
     }
     renderCustomDateTimePopup = () => {
         const { inputValue, operator, open } = this.state;
-        const { placeholder, tabIndex, type } = this.props;
+        const { tabIndex, type } = this.props;
 
         const timeVisible = open === 'time';
         const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value']);
-        let calendarVal;
+        let calendarVal = null;
         if ( this.props.value && typeof this.props.value === 'object')  {
-            calendarVal = this.props.value?.startDate || this.props.value;
+            calendarVal = this.props.value?.startDate;
         } else if (this.props.value && typeof this.props.value === 'string') calendarVal = this.props.value;
+        let timePlaceholderMsgId = getMessageById(this.context.messages, "featuregrid.attributeFilter.placeholders.time");
 
         return (
             <div style={{display: 'flex', flexDirection: 'column'}}>
@@ -132,7 +137,7 @@ class DateTimePicker extends Component {
                         />
                         <div>
                             <div style={{display: 'flex', background: 'white'}}>
-                                {this.renderInput(inputValue, operator, '', placeholder, tabIndex, false, true, {width: '90%'})}
+                                {this.renderInput(inputValue, operator, '', timePlaceholderMsgId, tabIndex, false, true, {width: '90%'})}
                                 <span style={{width: '10%'}}>
                                     <button style={{width: '100%'}} tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" onClick={this.toggleTime}>
                                         <span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
@@ -174,12 +179,14 @@ class DateTimePicker extends Component {
         }, {});
         const calendarVisible = open === 'date';
         const timeVisible = open === 'time';
-        let calendarVal;
+        let calendarVal = null;
         if ( this.props.value && typeof this.props.value === 'object')  {
-            calendarVal = this.props.value?.startDate || this.props.value;
+            calendarVal = this.props.value?.startDate;
         } else if (this.props.value && typeof this.props.value === 'string') {
             calendarVal = this.props.value;
         }
+        let timePlaceholderMsgId = getMessageById(this.context.messages, "featuregrid.attributeFilter.placeholders.time");
+
         if (type === 'date-time') {
             return (<div tabIndex="-1" ref={elem => {this.dateTimeRef = elem;}} onBlur={() => this.handleWidgetBlur(type)} onKeyDown={this.handleKeyDown} onFocus={this.handleWidgetFocus} className={`rw-datetimepicker range-time-input rw-widget ${focused ? 'rw-state-focus' : ''}`}>
                 {this.renderInput(inputValue, operator, toolTip, placeholder, tabIndex, true, true)}
@@ -203,7 +210,7 @@ class DateTimePicker extends Component {
         } 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' : ''}`}>
-                    {this.renderInput(inputValue, operator, toolTip, placeholder, tabIndex, calendarVisible, timeVisible)}
+                    {this.renderInput(inputValue, operator, toolTip, timePlaceholderMsgId, tabIndex, calendarVisible, timeVisible)}
                     <span className="rw-select">
                         <Popover
                             disabled={false}
@@ -240,7 +247,7 @@ class DateTimePicker extends Component {
                                 <div className="shadow-soft picker-container" style={{position: "relative", width: 300, height: 'fit-content', overflow: "auto" }}>
                                     <Calendar
                                         tabIndex="-1"
-                                        ref={elem => {this.attachCalRef = elem;}}
+                                        ref={(elem) => {this.attachCalRef = elem;}}
                                         onMouseDown={this.handleMouseDown}
                                         onChange={this.handleCalendarChange}
                                         {...props}
@@ -373,11 +380,11 @@ class DateTimePicker extends Component {
         }
 
         if (timeVisible) {
-            this.timeRef.handleKeyDown(e);
+            this.timeRef?.handleKeyDown(e);
         }
 
         if (calVisible) {
-            this.calRef.refs.inner.handleKeyDown(e);
+            this.calRef?.refs?.inner?.handleKeyDown(e);
         }
 
         if (!timeVisible && !calVisible && e.key === 'Enter') {

diff --git a/web/client/components/misc/datetimepicker/RangedDateTimePicker.js b/web/client/components/misc/datetimepicker/RangedDateTimePicker.js
@@ -17,6 +17,7 @@ import { isDate, isNil, omit } from 'lodash';
 import OverlayTrigger from '../OverlayTrigger';
 import Hours from './Hours';
 import Popover from '../../styleeditor/Popover';
+import { getMessageById } from '../../../utils/LocaleUtils';
 
 localizer(moment);
 
@@ -78,7 +79,10 @@ class DateTimePickerWithRange extends Component {
         value: null,
         popupPosition: 'bottom'
     }
-
+	static contextTypes = {
+	    messages: PropTypes.object,
+	    locale: PropTypes.string
+	};
     state = {
         openRangeContainer: false,
         openRangeInputs: 'start',			// start, end
@@ -271,8 +275,10 @@ class DateTimePickerWithRange extends Component {
 	}
 	renderDateTimeRange = () =>{
 	    const { inputValue, operator, openRangeInputs, openTime } = this.state;
-	    const { placeholder, tabIndex } = this.props;
+	    const { tabIndex } = this.props;
 	    const props = omit(this.props, ['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver']);
+	    let timePlaceholderMsgId = getMessageById(this.context.messages, "featuregrid.attributeFilter.placeholders.time");
+
 	    return (
 	        <div onMouseDown={this.handleMouseDown} style={{display: 'flex', flexDirection: 'column'}}>
 	            <div style={{display: 'flex', flexDirection: 'row'}}>
@@ -301,7 +307,7 @@ class DateTimePickerWithRange extends Component {
 	                        />
 	                	<div style={{ display: openRangeInputs === 'start' ? 'block' : 'none'}}>
 	                        <div style={{display: 'flex'}}>
-	                    {this.renderInput(inputValue.startDate, operator, '', placeholder, tabIndex, false, true, {width: '90%'})}
+	                    {this.renderInput(inputValue.startDate, operator, '', timePlaceholderMsgId, tabIndex, false, true, {width: '90%'})}
 	                            <span style={{width: '10%'}}>
 	                                <button style={{width: '100%'}} tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" onClick={this.toggleTime}>
 	                                    <span aria-hidden="true" className="rw-i rw-i-clock-o"></span>
@@ -324,7 +330,7 @@ class DateTimePickerWithRange extends Component {
 	                    />
 	                	<div style={{ display: openRangeInputs === 'end' ? 'block' : 'none'}}>
 	                        <div style={{display: 'flex'}}>
-	                            {this.renderInput(inputValue.endDate, operator, '', placeholder, tabIndex, false, true, {width: '90%'})}
+	                            {this.renderInput(inputValue.endDate, operator, '', timePlaceholderMsgId, tabIndex, false, true, {width: '90%'})}
 	                            <span style={{width: '10%'}}>
 	                                <button style={{width: '100%'}} tabIndex="-1" title="Select Time" type="button" aria-disabled="false" aria-label="Select Time" className="rw-btn-time rw-btn" onClick={this.toggleTime}>
 	                                    <span aria-hidden="true" className="rw-i rw-i-clock-o"></span>

diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
@@ -1832,13 +1832,15 @@
                 "placeholders": {
                     "default": "Beispiele...",
                     "string": "Geben Sie Text ein, um Ergebnisse zu filtern ...",
+                    "time": "Geben Sie Zeit ein, um die Ergebnisse zu filtern ...",
                     "date": "Geben Sie das zu filternde Datum ein...",
                     "number": "Geben Sie eine Zahl oder einen Ausdruck ein..."
                 },
                 "tooltips": {
                     "editMode": "Die Schnellsuche ist im Bearbeitungsmodus nicht verfügbar",
                     "default": "Beispiele...",
                     "string": "Geben Sie Text ein, um Ergebnisse zu filtern ...",
+                    "time": "Geben Sie Zeit ein, um die Ergebnisse zu filtern ...",
                     "number": "Geben Sie eine Zahl oder einen Ausdruck ein. Examples: 10, > 2, < 10",
                     "date": "Geben Sie ein Datum oder einen Ausdruck ein. Verwenden Sie {format} für das Datum.",
                     "geometry": {
@@ -1852,13 +1854,15 @@
                 "placeholders": {
                     "default": "Beispiele...",
                     "string": "Geben Sie Text ein, um Ergebnisse zu filtern ...",
+                    "time": "Geben Sie Zeit ein, um die Ergebnisse zu filtern ...",
                     "date": "Geben Sie das zu filternde Datum ein...",
                     "number": "Geben Sie eine Zahl ..."
                 },
                 "tooltips": {
                     "editMode": "Die Schnellsuche ist im Bearbeitungsmodus nicht verfügbar",
                     "default": "Beispiele...",
                     "string": "Geben Sie Text ein, um Ergebnisse zu filtern ...",
+                    "time": "Geben Sie Zeit ein, um die Ergebnisse zu filtern ...",
                     "number": "Geben Sie eine Zahl ...",
                     "date": "Geben Sie ein Datum. Verwenden Sie {format} für das Datum.",
                     "geometry": {

diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
@@ -1794,12 +1794,14 @@
                     "default": "Search...",
                     "string": "Type text to filter...",
                     "date": "Type date to filter...",
+                    "time": "Type time to filter...",
                     "number": "Type number or expression..."
                 },
                 "tooltips": {
                     "editMode": "Quick search is not available in edit mode",
                     "default": "Search...",
                     "string": "Type text to filter...",
+                    "time": "Type time to filter...",
                     "number": "Type a number or an expression. Examples: 10, > 2, < 10",
                     "date": "Type a date or an expression. Use {format} for the date.",
                     "geometry": {
@@ -1813,13 +1815,15 @@
                 "placeholders": {
                     "default": "Search...",
                     "string": "Type text to filter...",
+                    "time": "Type time to filter...",
                     "date": "Type date to filter...",
                     "number": "Type number to filter..."
                 },
                 "tooltips": {
                     "editMode": "Quick search is not available in edit mode",
                     "default": "Search...",
                     "string": "Type text to filter...",
+                    "time": "Type time to filter...",
                     "number": "Type a number ...",
                     "date": "Type a date. Use {format} for the date.",
                     "geometry": {

diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
@@ -1794,13 +1794,15 @@
                 "placeholders": {
                     "default": "Buscar...",
                     "string": "Escribe texto para filtrar...",
+                    "time": "Escriba el tiempo para filtrar ...",
                     "date": "Escriba la fecha para filtrar...",
                     "number": "Escriba el número o la expresión..."
                 },
                 "tooltips": {
                     "editMode": "La búsqueda rápida no está disponible en modo de edición",
                     "default": "Buscar...",
                     "string": "Escribe texto para filtrar...",
+                    "time": "Escriba el tiempo para filtrar ...",
                     "number": "Escriba el número o la expresión. Ejemplos: 10, > 2, < 10",
                     "date": "Escriba una fecha o una expresión. Usa {format} para la fecha.",
                     "geometry": {
@@ -1814,13 +1816,15 @@
                 "placeholders": {
                     "default": "Buscar...",
                     "string": "Escribe texto para filtrar...",
+                    "time": "Escriba el tiempo para filtrar ...",
                     "date": "Escriba la fecha para filtrar...",
                     "number": "Escriba el número..."
                 },
                 "tooltips": {
                     "editMode": "La búsqueda rápida no está disponible en modo de edición",
                     "default": "Buscar...",
                     "string": "Escribe texto para filtrar...",
+                    "time": "Escriba el tiempo para filtrar ...",
                     "number": "Escriba el número",
                     "date": "Escriba una fecha. Usa {format} para la fecha.",
                     "geometry": {

diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
@@ -1794,13 +1794,15 @@
                 "placeholders": {
                     "default": "Recherche...",
                     "string": "Tapez le texte à filtrer...",
+                    "time": "Tapez le temps à filtrer...",
                     "date": "Tapez la date à filtrer...",
                     "number": "Tapez un nombre ou une expression..."
                 },
                 "tooltips": {
                     "editMode": "La recherche rapide n'est pas disponible en mode édition",
                     "default": "Recherche...",
                     "string": "Tapez le texte à filtrer...",
+                    "time": "Tapez le temps à filtrer...",
                     "number": "Tapez un nombre ou une expression... Exemples : 10, > 2, < 10",
                     "date": "Tapez une date ou une expression. Utilisez {format} pour la date.",
                     "geometry": {
@@ -1814,13 +1816,15 @@
                 "placeholders": {
                     "default": "Recherche...",
                     "string": "Tapez le texte à filtrer...",
+                    "time": "Tapez le temps à filtrer...",
                     "date": "Tapez la date à filtrer...",
                     "number": "Tapez un nombre..."
                 },
                 "tooltips": {
                     "editMode": "La recherche rapide n'est pas disponible en mode édition",
                     "default": "Recherche...",
                     "string": "Tapez le texte à filtrer...",
+                    "time": "Tapez le temps à filtrer...",
                     "number": "Tapez un nombre...",
                     "date": "Tapez une date. Utilisez {format} pour la date.",
                     "geometry": {

diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
@@ -1793,13 +1793,15 @@
                 "placeholders": {
                     "default": "Cerca...",
                     "string": "Digita testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "date": "Digita data da cercare...",
                     "number": "Digita numero o espressione..."
                 },
                 "tooltips": {
                     "editMode": "La ricerca veloce non è disponibile in modalità editing",
                     "default": "Cerca...",
                     "string": "Digita il testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "number": "Digita un numero o una espressione. Esempi: 10, > 2, < 10",
                     "date":"Digita una data o un'espressione. Utilizza {format} per la data",
                     "geometry": {
@@ -1813,13 +1815,15 @@
                 "placeholders": {
                     "default": "Cerca...",
                     "string": "Digita testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "date": "Digita data da cercare...",
                     "number": "Digita numero..."
                 },
                 "tooltips": {
                     "editMode": "La ricerca veloce non è disponibile in modalità editing",
                     "default": "Cerca...",
                     "string": "Digita il testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "number": "Digita un numero...",
                     "date":"Digita una data. Utilizza {format} per la data",
                     "geometry": {