Bolero datetime bind - f#

The docs say that you can bind many different data types...
My html template:
<div class="field">
<label class="label">Dob</label>
<div class="control">
<input class="input" type="date" placeholder="Date of Birth..." bind="${Dob}">
</div>
</div>
And my code is:
.Dob(model.client.dob, fun n -> dispatch (SetDob n))
But I get a red underline on model.client.dob because it's expecting a string.... what is the correct way of doing this?

Assuming it's probably something like this?
.Dob(
model.client.dob.ToString("yyyy-MM-dd"),
fun n ->
let dt = DateTimeOffset.Parse(n)
dispatch (SetDob dt)
)
I would have thought that was built in... from how the docs talk about

Related

How to escape right parenthesis in variable?

How can I escape a round bracket (right parenthesis) without closing it in a fragment?
"fragments/questionaire :: questionaire('00001_c-1',
${
{
'...',
'...',
'First 1) ...'
}
},
${
{
'...',
'...',
'...'
}
},'[0,2]')"
Kind of same effect is if keyword new is somewhere in the string.
already tried: 'First 1\) ...' &rpar; ) inside utext
I use it to iterate over an object with questions and hints like:
th:fragment="questionaire(key, questions, hints, rightIndex)"
It's inside a form
<div th:each="aquestion, iterStat : ${questions}" th:with="qid=${key}+'_q-'+${iterStat.index},name='rb-'+${key}">
<div>
<input type="checkbox" th:name="${name}+${'_q-'+iterStat.index}" th:value="0" th:data-s="${iterStat.index}" th:id="${qid}" autocomplete="off" th:checked="${bucket.read('questionaire.'+name+'_q-'+iterStat.index)}==('' + 1)"/>
<label th:for="${qid}" th:text="${aquestion}"></label>
<input type="hidden" th:name="${name}+${'_q-'+iterStat.index}" value="0">
</div>
<div class="hint" th:id="${qid+'--hint'}" th:text="${hints[iterStat.index]}"></div>
</div>
<p class="submitContainer">
<button th:data-qvalidate="|quest${key}|" th:text="#{q.check}">Check</button>
</p>
Following on from my most recent comment in the question...
The least-worst solution I have is to create a Java string variable and add that to your model:
model.put("cp", ")");
where cp means "close parenthesis".
Then you can create a fragment parameter like this:
|foo 1${cp} bar|
And that passes the string foo 1) bar to the fragment without that "selector syntax" error you are currently getting.
<div th:replace="fragments/frag.html :: frag(|foo 1${cp} bar|)"></div>
And my fragment is just this:
<div th:fragment="frag(key)">
<div th:text="${key}"></div>
</div>
I would be happy to learn of a better solution.

Using react-hook-form, how to programmatically modify values of inputs , depending on a selection?

Sounds simple, but I couldn't find a hello-world example of this, despite the richness of the doc. The closest I could find was in https://react-hook-form.com/advanced-usage, in the Working with virtualized lists section, but that relies on another module react-window, which introduces further complexity.
I want to allow the admin user to create-update-delete a list of products, with various properties.
My current code in JSX looks like this, I'd like to take advantage of error handling etc from react-hook-form:
<ol >
{products.map((row, index) => (
<li
className={index === selectedProductIndex ? "selected" : ""}
key={index}
id={index} onClick={handleSelectProduct}>
{row.name}
</li>
))}
</ol>
<form onSubmit={handleSaveProduct}>
<p>Product name: </p>
<input name="productName" type="text" value={selectedProductName}
onChange={handleEdit_name} />
(... more properties to edit here)
</form>
The handlers save the values of selectedProductName, selectedProductIndex, etc in useState, in a database via axios, etc.
I'm handling the values of each field individually in the useState, which I'm aware is laborious and heavy-handed.
Well the answer was quite simple, although it took me a while to figure it out.
In most of the examples, the onChange or onClick handlers don't use the event object, but nothing prevents you from adding it in. Then there's the setValue function to set the other control's value. Here's the code of a hello-world example. It offers one dropdown and one input field, the input field updates to match the selected value of the dropdown.
import React from "react";
import {useForm} from "react-hook-form";
function Test() {
const {register, handleSubmit, errors, setValue} = useForm();
const mySubmit = data => {
console.log(data);
}
return (
<div>
<form onSubmit={handleSubmit(mySubmit)} className="reacthookform">
<select name="dropdown" ref={register}
onChange={(ev) => setValue("productName", ev.target.value)}>
{["AAA", "BBB", "CCC"].map(value => (
<option key={value} value={value}>
{value}
</option>
))}
</select>
<input name="productName" defaultValue="AAA" ref={register({required: true})} className="big"/>
{errors.productName && <p className="errorMessage">This field is required</p>}
<input type="submit" value="Save product"/>
</form>
</div>
);
}
export default Test;

Thymeleaf - How to write Html string literals?

How can we write HTML and string literals at a same time in Thymeleaf ?
<div class="details"><span class="Section" th:utext="'Sec' <br> ${wind.sec}"></span><span class="Axiom" th:utext="'Axiom' <br> ${wind.axiom}"></span></div>
This throws error
Cannot execute GREATER THAN from Expression "('Sec' < br) > ${wind.sec}". Left is "true", right is "Great"
You can use the following = which uses + for string concatenation:
<div class="details">
<span class="Section" th:utext="'Sec<br>' + ${wind.sec}"></span>
<span class="Axiom" th:utext="'Axiom<br>' + ${wind.axiom}"></span>
</div>
The <br> is just part of the text literal in this case - because you are using th:utext.
However, using unescaped values such as ${wind.sec} is unsafe and is not recommended. There could be harmful values in that variable - especially if the variable holds data provided by end users.
So, unless the following structure change poses a problem, I would recommend something like this:
<div class="details">
<span class="Section" th:utext="'Sec<br>'"></span>
<span class="Section" th:text="${wind.sec}"></span>
<span class="Axiom" th:utext="'Axiom<br>'"></span>
<span class="Axiom" th:text="${wind.axiom}"></span>
</div>
Here we have separated the true text literals (which can use th:utext) from the variables (which should use th:text). Now, any HTML which may have found its way into your ${...} variables will be escaped, rendering it harmless.

How to format currency input in RoR + AngularJS app

Sorry for my English.
I need to change input value format, for example: from "1000000" to "1 000 000 $".
In my views of rails app, I have this line of code:
<%= ng_text_field('total_price', 'selected.data.total_price', 'Full price', ng_readonly: '!selected.permissions.update') %>
In helper:
def ng_text_field(name, ng_model, placeholder, options = {})
result = <<-HTML
<div class="form-group" ng-class='{"has-error":errors.#{name}}' #{options[:ng_if] && "ng-if=\"#{options[:ng_if]}\""}>
<label for="#{name}" class="col-sm-3 control-label">#{placeholder}</label>
<div class="col-sm-9">
<input id="#{name}"
type="text"
class="form-control"
name="#{name}"
placeholder="#{placeholder}"
ng-model="#{ng_model}"
#{options[:ng_readonly] && "ng-readonly=\"#{options[:ng_readonly]}\""}>
<p class="help-block small" ng-if="errors.#{name}">{{errors.#{name} | join:',' }}</p>
</div>
</div>
HTML
result.html_safe
end
I am know Angular very little, I have tried some ways and all this ways was incorrect. :(
Could anyone give advice of some help?
Thank you in advance
You're going to need to create a new directive that requires ngModel and applies the appropriate $parser/$formatter to it.
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$parsers
A good example of how to do this is (displaying as uppercase but always storing data as lowercase):
ngModel Formatters and Parsers
You should be able to then add the ability to include other directives in your 'options' argument so that they get added correctly to the output.

AngularJS how to bind maps

Here is my HTML:
<div ng-app="angularApp">
<div ng-controller="testCtrl">
testKey = {{testKey}}<br />
Test 1: <input type="text" ng-model="test.myKey" />{{test[testKey]}}<br />
Test 2: <input type="text" ng-model="test[testKey]" />{{test[testKey]}}
</div>
</div>
Here is the js:
angular.module('angularApp', []);
function testCtrl($scope)
{
$scope.testKey = "myKey";
}​
I setup and example here
Why does Test 1 work but Test 2 not work? Are "[" not allowed in the ng-model directive?
Here a working example. The problem is very simple, test.[testKey] isn't valid, you want test[testKey]. And you need to define test as an object on the controller because you cannot set a property of an undefined variable.

Resources