Develop Reference

Integer/decimal user input: how to serialize/store the value

Our stack is currently: React SPA/Apollo/GraphQL/Rails/PostgreSQL.
We have a web form with a number input that maybe (or not) be used to entry decimal values (dynamic/user-created form).
We want the form to be lenient (it has an autosave feature). If user types ,3 or 17,, that is considered a valid number value. But not too lenient, the number should by parseable as a float and be able to display in graphs...
Also, when the user visit the form again, we want to make sure to init the number input with the exact same value he typed initially (I mean, ,3 does not become magically 0,3)
I'd like to know, for our stack, how to serialize (sending as GraphQL payload) and store (in PostgreSQL) and manipulate (in JS/Ruby) such number without loosing the initial user input value.
I'm thinking it would be simpler to send/store a string, as long as it's validated that it can be parsed.
Just wondering if there is a "proper" solution, for example using number libs, custom GraphQL scalar type, decimal SQL type... that seems complicated to me, anyone did something similar before?

Create two fields. One for user input and other with parsed value. I do not think this will be different for any stack.
The challenge is how to show to a user how you understood entered value. This could be solved with a hint with a parsed value under the text field.

you should choose type of the input as "text" instead of number, so you can create a specific format for your input. first, add a property to your state
state={amount:""}
input section for amount in your form should be like this:
<input
type="text"
placeholder="Amount"
value={this.state.amount}
onChange={this.onAmountChange}
/>
onAmountChange = e => {
const amount = e.target.value;
if (!amount || amount.match(/^-?[0-9]\d*(\.\d{0,2})?$/)) {
this.setState(() => ({ amount }));
}
};
regexp in above function means start with any number with optional -, and optionally u can end with 2 decimal number. you can change it for your form.
if you want to add only positive numbers if your form is for price you can use this regexp:
amount.match(/^\d{1,}(\.\d{0,2})?$/)

If statement returning NaN

Am totaling several form fields where users put in hours of the day. However, some users would like to put an "X" if they were not present that day. So I tried several different if statements to try to get the calculation to recognize "X" as a zero when running the calculation but still show an X in the form field. I went as far as creating a hidden form field and default its value to zero and that is the last thing I tried.
Here is my formula (please keep in mind, I will have to use this for each day of the week but I just was playing around with the first one)
var v1 += getField("mon1_str."+row).value;
if(v1 == "X") event.value = "defaultvalue";
else event.value = "";
The first line of script gets my value no problem. Its the second line and third line where i am not having any luck. It should be noted that no errors are coming up in the console window. "defaultvalue" is the name of my hidden form field to grab a value from.

The + tries to convert the string to a number. But 'x' can't be converted to a number, so it results in NaN.
console.log(+'X');
Try saving the plain value, checking if it's 'X', and then converting it to a number later.

JavaScript - Keep date value in non-complete field

I've looked everywhere with no result.
I'm working on a little form that allows users to subscribe themselves on a site.
There is a table with some cells and textnodes including also a 'date' field.
With 'onfocus' event cells are colored in blue during editing.
With 'onblur' event cells recover previous color, except if they include wrong value (e.g. numbers in 'name' field): in this case cells become red.
I've some problem with 'date' field.
I give example: user start to write birthday date and for some reason doesn't complete the field before change cell....or user after complete date field press ESC.
I both cases, if I try to read field value using getelementbyId().value, it returns '' (empty).
Is there any way to read value in these cases?
Thanks a lot.

According to the specification(WHATWG) you cann't access this value.
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
Same for W3
User agents must not allow the user to set the value to a non-empty string that is not a valid date string.

Search with multiple range values on same item

I'm implementing a search filter via instantsearch.js with a range slider.
The slider filters a range of years based on the year data column of each item. In this DB tho there are some items with no precise year, but a "supposed" period, like "circa XVIII sec" or "End of 1910s". This means that for these items there is not a single year to filter but rather multiple years.
Let's say for ex. that I wish to filter results in a range of years from 1874 to 1930 and I have an item with "Second half 19th century" in the year field. As you can tell it should result in the match, since any year from 1851 to 1900 is correct for this item.
How should I treat this type of data to be part of this filter range?
How should I structure the data in the year column of this DB?
Should I use some script logic in the algolia javascript search rather than use a special way of structuring the data or indexing?
I was thinking of a logic like:
"If value of item is not just digits, convert it to a range of years.
Then check if the range of these years can match with the filter required in
the slider"
I can't really tell how to do this, and it looks a bit cumbersome and silly to me. I'm pretty sure this is no new issue to face in DB data design, so there has to be a proper way to address it.
I tried searching around but I don't even know how to proper word this thing I'm asking.. if you have suggestions to edit the title please do tell me!
I'm using a MySQL database along with PHP.

With Algolia, you'll need to convert this values to timestamp then you would be able to use numericFilter and add a range slider or numeric refinement list component to your UI.
Also the attribute must be defined as an attributesForFaceting in your index configuration.
https://community.algolia.com/instantsearch.js/documentation/#rangeslider
https://community.algolia.com/instantsearch.js/documentation/#numericrefinementlist

Considering your year as a range, you can either add a beggining and an end attribute to those fields. Example:
EventTimes
id SMALLINT NOT NULL PRIMARY,
yearEnd DATETIME,
yearStart DATETIME
In this case, the end and the start will be equal (I use null ends), when the event is an specific time, and becomes a range when the two fields are filled.
When SELECTing, you can always check for both fields, without a significant loss of speed or accuracy. Then check either for specific time, range of times, or if an event begins, ends, re-begins, re-ends and so on, you can check for different fields within the same table.

Script to return null on string values in Mule Datamapper

I have an element of type double in my data mapper called capital. the values come from excel spreadsheet. but when there is no capital the values is "N/A" in excel. then i get the following error in the mapper:
Caused by: com.opensys.cloveretl.component.spreadsheet.exception.SpreadsheetException: Cannot get number value from cell of type String in M3 in record 1, field 13 ("Capital"), metadata
How can i script the mapper to return null or 0 whenever a value of type string comes through?

You can use any Java methods available on the data types when you are working with the script. It looks like the problem here is that you don't know if the input value is going to be a String ("N/A") or a decimal value. To solve that, you can take the approach of converting it to a string to test it and then take the appropriate action. I don't have an excel data mapper set up at the moment so I didn't try this out, but I think something like this should work.
output.Captial = ((""+input.Capital).equals("N/A") ? 0 : input.cellValue);
By adding the ("" + input.Capital), you are casting it to a String, just like it would in Java.