From ad2ff6f122f24f552f298e98c78f084dc809fb68 Mon Sep 17 00:00:00 2001
From: mahmoudadel54 <mahmoodmadel@gmail.com>
Date: Thu, 18 Jan 2024 18:29:18 +0200
Subject: [PATCH] #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

---
 .../filterRenderers/DateTimeFilter.jsx        | 10 +++++-
 .../misc/datetimepicker/DateTimePicker.js     | 31 ++++++++++++-------
 .../datetimepicker/RangedDateTimePicker.js    | 14 ++++++---
 web/client/translations/data.de-DE.json       |  4 +++
 web/client/translations/data.en-US.json       |  4 +++
 web/client/translations/data.es-ES.json       |  4 +++
 web/client/translations/data.fr-FR.json       |  4 +++
 web/client/translations/data.it-IT.json       |  4 +++
 8 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx b/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx
index 1da95d6a54..591245f0f7 100644
--- a/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx
+++ b/web/client/components/data/featuregrid/filterRenderers/DateTimeFilter.jsx
@@ -33,7 +33,7 @@ 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 },
@@ -41,6 +41,14 @@ export default compose(
                     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
index 301b0c2add..d3db4eae61 100644
--- 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
index 5ed8e9498e..8e02dc4d13 100644
--- 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
index f5370eb35c..79683174fc 100644
--- a/web/client/translations/data.de-DE.json
+++ b/web/client/translations/data.de-DE.json
@@ -1832,6 +1832,7 @@
                 "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..."
                 },
@@ -1839,6 +1840,7 @@
                     "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,6 +1854,7 @@
                 "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 ..."
                 },
@@ -1859,6 +1862,7 @@
                     "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
index 3bfdfac0d7..2930686f8d 100644
--- 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,6 +1815,7 @@
                 "placeholders": {
                     "default": "Search...",
                     "string": "Type text to filter...",
+                    "time": "Type time to filter...",
                     "date": "Type date to filter...",
                     "number": "Type number to filter..."
                 },
@@ -1820,6 +1823,7 @@
                     "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
index 54fe17c38b..563e1658b7 100644
--- a/web/client/translations/data.es-ES.json
+++ b/web/client/translations/data.es-ES.json
@@ -1794,6 +1794,7 @@
                 "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..."
                 },
@@ -1801,6 +1802,7 @@
                     "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,6 +1816,7 @@
                 "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..."
                 },
@@ -1821,6 +1824,7 @@
                     "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
index 694955aef1..3a76e92b8c 100644
--- a/web/client/translations/data.fr-FR.json
+++ b/web/client/translations/data.fr-FR.json
@@ -1794,6 +1794,7 @@
                 "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..."
                 },
@@ -1801,6 +1802,7 @@
                     "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,6 +1816,7 @@
                 "placeholders": {
                     "default": "Recherche...",
                     "string": "Tapez le texte à filtrer...",
+                    "time": "Tapez le temps à filtrer...",
                     "date": "Tapez la date à filtrer...",
                     "number": "Tapez un nombre..."
                 },
@@ -1821,6 +1824,7 @@
                     "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
index 9f0762c4e2..0c7dcc8be7 100644
--- a/web/client/translations/data.it-IT.json
+++ b/web/client/translations/data.it-IT.json
@@ -1793,6 +1793,7 @@
                 "placeholders": {
                     "default": "Cerca...",
                     "string": "Digita testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "date": "Digita data da cercare...",
                     "number": "Digita numero o espressione..."
                 },
@@ -1800,6 +1801,7 @@
                     "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,6 +1815,7 @@
                 "placeholders": {
                     "default": "Cerca...",
                     "string": "Digita testo da cercare...",
+                    "time": "Digita il tempo da cercare...",
                     "date": "Digita data da cercare...",
                     "number": "Digita numero..."
                 },
@@ -1820,6 +1823,7 @@
                     "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": {