Entangle nested property value with livewire's alpine js until first property is not defined - laravel-livewire

I am trying to get and set datepicker date via livewire and alpine js entangle solution. So when one is updated the other one has been set automatically but I am facing some issues when entangled property is nested one.
The main goal here is to update the bootstrap datepicker component when b2c.birth_date is updated and vice versa, however when page is first loaded and when b2c is not defined yet and it throws this error until b2c itself is not defined.
Alpine js Expression error: Can't get birth_date of null
In below code I have added js condition but this is not proper solution I believe as currentDate in this case is not updated after b2c is defined.
<div id="birthdatepicker-container" class="input-group"
x-data="{currentDate: $wire.get('b2c') ? #entangle('b2c.birth_date') : ''}" x-init="$($refs.input).bootstrapDP('setDate',currentDate)"
>
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
<input wire:ignore id="b2c_birth_date" x-ref="input" class="form-control" type="text"
x-data="{
init() {
$($el).bootstrapDP({
}).on('changeDate',function(e){
$wire.set('b2c.birth_date',e.format());
});
},
}" />
</div>
Please suggest some kind of promise like async thing to update currentDate when b2c.birth_date is defined entirely (anytime via network request. sooner or earlier). Same like how it works nicely when we write wire:model="b2c.birth_date"

Related

How to preselect an option in an embedded HTML form?

I try to preselect an option of a select in an embedded HTML form in Camunda Tasklist, but always the first option is preselected.
I followed Binding to a Process Variable:
Binding to a Process Variable
A select box can be bound to a process variable using the cam-variable-name directive:
<select cam-variable-name="foo" cam-variable-type="String">
<option>bar</option>
<option>zar</option>
</select>
Research
I read also CAM-3173:
select box doesn't show the correct option
If I set the value of variable by a select box on the start form, the next task form didn't show the option that has been choosen in the start form. It uses the same select box.
but I use Camunda 7.9 and the problem is fixed since version 7.2.3.
HTML
<form>
<select cam-variable-name="variable" cam-variable-type="String">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
Result
option1 is preselected. I checked the process variable before entering the user task and it contains option2.
What did I wrong? If the bug still exists, is there any work-around?
I found a work-around, see Camunda Reference:
Implementing Custom Fields
The following is a small usage example which combines some of the features explained so far. It uses custom JavaScript to implement a custom interaction with a form field which does not use any cam-variable-* directives.
It shows how custom scripting can be used for
declaring a variable to be fetched from the backend,
writing the variable’s value to a form field,
reading the value upon submit.
[...]
The above example uses jQuery for interacting with the HTML controls. If you use AngularJS, you can also populate the $scope in the variables-fetched callback and read the values from the $scope in the submit callback:
My changed HTML:
<form>
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('variable');
});
camForm.on('variables-fetched', function() {
$scope.variable = camForm.variableManager.variable('variable');
});
camForm.on('submit', function() {
camForm.variableManager.variableValue('variable', $scope.variable);
});
</script>
<select data-ng-model="variable">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>

Camunda Form failure: Value 'on' is not of type boolean

I am about to learn how to automate processes with Camunda and the Camunda Modeler.
Therefore, I set up a small test process with two user tasks, a decision table and a service task. Everything works fine, except one of the user tasks.
In the mentioned user task, I want to embed a little HTML-Form which looks like this:
<form role="form" name="form">
<div class="form-group">
<label for="download">Travel request to review</label>
<a id="download" cam-variable-name="downloadRequest" cam-file-download="travelRequestDocument"></a>
</div>
<div class="form-group">
<label for="checkboxApproved">I approve this travel request.</label>
<input
id="checkboxApproved"
type="checkbox"
cam-variable-name="approved"
cam-variable-type="boolean"
class="form-control" />
</div>
</form>
I embedded it through the form key property in the Camunda Modeler:
embedded:deployment:forms/approval.html
When I go to Camunda tasklist (Camunda engine runs on local tomcat server) and open the task, it says: Form failure: Value 'on' is not of type boolean.
I searched the internet back and forth for reasons which could cause this error, but I couldn't find anything useful.
Maybe someone here has experience with this kind of problem?
I would be very thankful :)
The solution is quite simple: I just have to replace the "boolean" with "Boolean" (uppercase 'b').
I hope this answer will save others from hours of research... (like me)

Ember's input helper need double click to edit in ie11

<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.

Unit test collapse behaviour of a div element in Angular-JS

I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.

twitter bootstrap date picker not working

I have been extensively searching for the answer but i cant seem to find one that works. I am using Django 1.4, with twitter boostrap 2.0.4 and i am trying to use date picker (eyecon) with no success. When i click on the input box no date box shows up.
<div id="due_date">
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
</div>
At the end of my base.html i have (right before closing the body):
<script src="/site_media/js/jquery.script.js"></script>
<script src="/site_media/js/bootstrap-datepicker.js"></script>
Finally on me jquery.script.js i have:
$(document).ready(function(){ $('.datepicker').datepicker()});
You have selected all elements who have the class "datepicker", while your input element definition does not have such a class but rather has datepicker as id attribute set.
Either select the id field $("#datepicker") or add a class ".datepicker" to your input field.
Do this: $(document).ready(function(){ $('#datepicker').datepicker()});
As you have set id="datepicker"
'.' is used for class and '#' is used for id