We Keep Coding

Pop up message not await for user response and moving on on onclick function

I have this logic on changing radio-button selection, if the user made some changing I am showing a message. if he confirm it will enter Onconfirm, else - Onreject.
1 issue -> the change of the radio button happens before the message show.
2 issue -> one reject I want to cancel the choice he made and to undo to his last choise - whice not happenning.
please help me with this!!
radio button
<div class="right" *ngFor="let type of types">
<p-radioButton name="treesDetailsType" [(ngModel)]="oneselectedType" formControlName="selectedType" (onClick)="onChangeType(type,$event)" class="treeDetails" value="{{type.id}}" label="{{type.desc}}" [disabled]="isReadOnly && type.id != data.selectedType"></p-radioButton>
</div>
the function of onclick
onChangeType(type, $event) {
let isFormTouched = this.isFormTouched(type);
if (isFormTouched) {
this.messagingService.showConfirmById(44, () => {
this.onConfirm()
}, () => {
this.onReject($event);
});
}
else
this.onchangedTrue(type); //this set some validators for the choice
}
on reject
#HostListener('click', ['$event']) onReject($event) {
event.stopImmediatePropagation();
//whatever written here its not happens before the change !!!!!
console.log(event);
}
----edited after the perfect suggestion from #Eliseo
askConfirm(value: any) {
let isFormTouched = this.isFormTouched(value);
if (isFormTouched) {
this.messagingService.showConfirmById(44, () => {
this.oneselectedType = value;
this.fg.controls.selectedType.setValue(value);
}, () => {
this.radios.forEach(x => {
x.writeValue(this.oneselectedType);
})
},
);
}
else {
this.oneselectedType = value;
this.onchangedTrue(value);
}
}`
the code work perfectly without the condition
--edited - on get the value from the server and patch it - the radio button lost

There a problem in my code (the another answer). Really I'm not pretty sure the reason, so I create a function like
redraw()
{
const value = this.form.value.type;
this.radios.forEach((x) => {
x.writeValue(value)
});
}
So, my function "ask" becomes like
ask(value: any) {
this.confirmationService.confirm({
message: 'Do you want to choose ' + value + '?',
header: 'Choose Confirmation',
icon: 'pi pi-info-circle',
key: 'positionDialog',
accept: () => {
this.form.get('type').setValue(value);
},
reject: () => {
this.redraw()
},
});
}
This allow me, when change the form, call to the function redraw. If I has a function
getForm(data: any = null) {
data = data || { type: 1, prop: '' };
return new FormGroup({
type: new FormControl(data.type),
prop: new FormControl(data.prop),
});
}
I can do some like
loadData(id: number) {
this.dataService.getData(id).subscribe((res: any) => {
this.form = this.getForm(res);
//it's necesary call to the function this.redraw
this.redraw()
});
}
newData() {
this.form = this.getForm();
//it's necesary call to the function this.redraw
this.redraw()
}
See in the this stackblitz what happens if we don't call to this.redraw() (just comment the lines)
1.-Select "new York" and say that you don't want it
2.-Click the button to load user
As "user" has the type 3 -"new York", the radio buttons looks like that it's not selected.
Yes is an ugly work-around, but for now I can not imagine another solution
Well there're another approach, that is change the value as usually and if we say that we want not the value, return the old value
askAfterChange(value:any)
{
const oldValue=this.form2.value.type;
this.form2.get('type').setValue(value)
this.confirmationService.confirm({
message: 'Do you want to choose ' + value + '?',
header: 'Choose Confirmation',
icon: 'pi pi-info-circle',
key: 'positionDialog',
accept: () => {
},
reject: () => {
this.form2.get('type').setValue(oldValue);
},
});
}

The "key" is split the [(ngModel)] in [ngModel] and (ngModelChanged)
//NOT WORK yet
<p-radioButton ... [ngModel]="selectedType"
(ngModelChange)="askConfirm($event)">
askConfirm(value: any) {
this.confirmationService.confirm({
message: 'Are you sure do you want '+value+'?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
accept: () => {
this.selectedType=value
},
reject: () => {
},
key: "positionDialog"
});
}
Well the problem is that the element still show the value selected How resolved? The first is get our p-radio buttons using ViewChildren, so we are give a template reference variable (the same to all the buttons) see the #radio
<div *ngFor="let type of types" class="p-field-radiobutton">
<p-radioButton #radio ...
(ngModelChange)="ask($event)"
[ngModel]="oneselectedType" ></p-radioButton>
</div>
//get the "radio buttons"
#ViewChildren('radio', { read: RadioButton }) radios!: QueryList<RadioButton>
constructor(private confirmationService: ConfirmationService) { }
ask(value: any) {
this.confirmationService.confirm({
message: 'Do you want to choose this?',
header: 'Choose Confirmation',
icon: 'pi pi-info-circle',
key: 'positionDialog',
accept: () => {
//if accept
this.oneselectedType = value
},
reject: () => {
//else, we loop over all the "radios"
this.radios.forEach(x => {
//and force is checked
x.writeValue(this.oneselectedType);
})
}
});
}
If you're using reactive Forms, you can also use a [ngModel] (ngModelChange) in the way, see that the model is myForm.get('selectedType').value
<p-radioButton ... [ngModel]="myForm.get('selectedType').value"
(ngModelChanged)="askConfirm($event)"
[ngModelOptions]="{standalone:true}"
>
And change in askConfirm
askConfirm(value: any) {
this.confirmationService.confirm({
...
accept: () => {
this.form.get('oneselectedType').setValue(value)
},
reject: () => {
this.radios.forEach(x => {
//and force is checked
x.writeValue(this.form.value.oneselectedType);
})
},
key: "positionDialog"
});
}
a simple stackblitz
Well, In the stackblitz I hard-code the value of the formGroup. Generally we has a service so we can
1.-Define our Form
form=new FormGroup({
selectedCity:new FormControl(),
selectedColor:new FormControl(),
prop:new FormControl()
})
//And in ngOnInit
this.dataService.getData().subscribe(res=>{
this.form.patchValue(res)
})
Or 2.-simple declare our form
form:FormGroup
//and in ngOnInit
use in ngOnInit
this.dataService.getData().subscribe(res=>{
this.form=new FormGroup({
selectedCity:new FormControl(res.selectedCity),
selectedColor:new FormControl(res.selectedColor),
prop:new FormControl(res.prop)
})
})
If we need a default value, we can give the value at first
(the stackblitz has in code this options)

Stripe js: don't let empty form be sent

I'm trying to avoid letting users submit stripe form when inputs are empty, I`m using stripe.js elements integration to render my form and handle form submition inside my vue component.
this.cardNumberElement.on('change', this.enableForm);
this.cardExpiryElement.on('change', this.enableForm);
this.cardCvcElement.on('change', this.enableForm);
After checking the docs I tried to use the change event on inputs but this is not working sice the user can just not type anything and click submit button.
This is my component:
mounted()
{
console.log(this.$options.name + ' component succesfully mounted');
this.stripe = Stripe(this.stripePK);
this.elements = this.stripe.elements();
this.cardNumberElement = this.elements.create('cardNumber', {style: this.stripeStyles});
this.cardNumberElement.mount('#card-number-element');
this.cardExpiryElement = this.elements.create('cardExpiry', {style: this.stripeStyles});
this.cardExpiryElement.mount('#card-expiry-element');
this.cardCvcElement = this.elements.create('cardCvc', {style: this.stripeStyles});
this.cardCvcElement.mount('#card-cvc-element');
let stripeElements = document.querySelectorAll("#card-number-element, #card-expiry-element, #card-cvc-element");
stripeElements.forEach(el => el.addEventListener('change', this.printStripeFormErrors));
this.cardNumberElement.on('change', this.enableForm);
this.cardExpiryElement.on('change', this.enableForm);
this.cardCvcElement.on('change', this.enableForm);
},
methods:
{
...mapActions('Stripe', ['addSource', 'createSourceAndCustomer']),
...mapMutations('Stripe', ['TOGGLE_PAYMENT_FORM']),
...mapMutations('Loader', ['SET_LOADER', 'SET_LOADER_ID']),
enableForm:function(event){
if(event.complete){
this.disabled = false;
}
else if(event.empty){
this.disabled = true;
}
},
submitStripeForm: function()
{
this.SET_LOADER({ status:1, message: 'Procesando...' });
var self = this;
this.stripe.createSource(this.cardNumberElement).then(function(result) {
if (result.error) {
self.cardErrors = result.error.message;
}
else {
self.stripeSourceHandler(result.source.id);
}
});
},
stripeSourceHandler: function(sourceId)
{
console.log('stripeSourceHandler');
this.cardNumberElement.clear();
this.cardExpiryElement.clear();
this.cardCvcElement.clear();
if(this.customerSources.length == 0)
{
console.log('createSourceAndCustomer');
this.createSourceAndCustomer({ id: sourceId });
}
else
{
console.log('addSource');
this.addSource({ id: sourceId });
}
},
printStripeFormErrors: function(event)
{
if(event.error)
{
self.cardErrors = event.error.message
}
else
{
self.cardErrors = '';
}
}
}

Given the stripe docs, the use of the event seems correct (though it can be improved a bit with using this.disabled = !event.complete to cover error case and not only empty case).
You may try to console.log in the event callback enableForm to check if event is well fired.
Anyway, it's more likely coming from the disabling logic of the submit button and it misses in your post. I've created below a fake secure-component that triggers a change event when value change.
The interesting part in on the container component :
Submit is disabled by default through data disabled,
Submit is enabled if event received has a property complete set to true. If false, it is disabled.
Hope it will help you to focus your trouble.
/**
Mock component to emulate stripes card element behavior with change event
*/
const SecureInput = {
template: '<input type="text" v-model="cardnumber"/>',
data: () => ({
cardnumber: null
}),
watch: {
cardnumber: function(val) {
if(!val) {
this.$emit('change', {empty: true, error: false, complete: false});
return;
}
if(val.length < 5) {
this.$emit('change', {empty: false, error: true, complete: false});
return;
}
this.$emit('change', {empty: false, error: false, complete: true});
}
}
}
/* Logic is here */
const app = new Vue({
el: '#app',
components: {
SecureInput
},
data: {
disabled: true
},
methods: {
updateDisable: function(event) {
this.disabled = !event.complete;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form #submit.prevent="$emit('submitted')">
<p><secure-input #change="updateDisable"/></p>
<p><input type="submit" :disabled="disabled"/></p>
</form>
</div>

angular4 material table

#Component({
selector: "app-dynamic-table",
template: `
`
})
export class DynamicTableComponent {
private _columns = [
{
name: "date",
show: true
}, {
name: "selected",
show: true
}, {
name: "id",
show: true
}, {
name: "location3",
show: false
}, {
name: "location4",
show: false
}, {
name: "location5",
show: false
}
];
get columns() { return this._columns; }
get displayedColumns(): string[] { return this._columns.map(c => c.name); }
}
the above code successfully able to hide and show the material table column,But I need to restrict the user to select less than 3 column of table and should show the alert message.Could you anyone look inti that?

You can keep click event on your checkbox, and check the limit of checkbox selection on that event and decide whether to proceed with the event or not. If you prevent that event to happen, then eventually it will not fire change event of checkbox
Code
checkLimit(event) {
// To make this SSR proof code, you could consider using Renderer to query DOM
let dom = event.currentTarget.querySelector('.mat-checkbox-input');
console.dir('Dom', dom, event.currentTarget)
if (!dom.checked && this.columns.filter(col => col.show).length >= 3) {
event.stopPropagation()
event.preventDefault()
alert('Cant select more than three column')
return
}
}
Html
<mat-checkbox *ngFor="let column of columns"
(click)="checkLimit($event)"
[(ngModel)]="column.show">
{{column.name | titlecase}}
</mat-checkbox>

Really appreciate Pankaj Answer. But it's not an angular way. Accessing DOM in component and checking without renderer2. Here is the angular way of achieving the same solution.
Component:
validate(index, column, event){
column.show = !column.show;
const matches = this.columns.filter(item=> item.show);
if(matches.length >= 3){
alert('not allowed');
event.stopPropagation();
event.preventDefault();
column.show = false;
}
}
Template :
<div *ngFor="let column of columns; let i=index;">
<input type="checkbox" id="{{i}}" name="feature{{i}}"
value="{{column.name}}" [checked]="column.show" ([ngModel])="column.show" (click)="validate(i, column, $event)">
<label for="feature{{i}}">{{column.name}}</label></div>
https://stackblitz.com/edit/angular-q2wrc4

Ember.js: controller actions not triggered by 'sendAction' from a component

I'm facing some issues in an Ember.js application and some sendAction that do not work.
Basically, I have:
- an Input component (the one triggering the action)
- one controller/template (that contains the rendering of the component)
- one other controller / template, in which we render the previous controller.
Here's the code.
First, the text field component:
Tm.JiraCloudInputComponent = Ember.TextField.extend({
keyDown: function (event) {
if (event.keyCode === 27) {
this.sendAction('cancelJiraCloudUrl');
}
if (event.keyCode === 13) {
event.preventDefault();
this.sendAction('saveJiraCloudUrl');
}
},
blur: function () {
this.sendAction('saveJiraCloudUrl');
}
})
The controller that has the actions:
Tm.JiraCloudController = Ember.Controller.extend({
jiraCloudEnabled: Ember.computed.oneWay('content.jiraCloudEnabled'),
jiraCloudUrl: Ember.computed.oneWay('content.jiraCloudUrl'),
successMessage: '',
errorMessage: '',
actions: {
saveJiraCloudUrl: function () {
if (Tm.isEmpty(this.get('jiraCloudUrl'))) {
this.unlinkJiraCloud();
} else {
this.linkJiraCloud();
}
},
cancelJiraCloudUrl: function () {
this.set('jiraCloudUrl', this.get('model.jiraCloudUrl'));
this.set('jiraCloudEnabled', this.get('model.jiraCloudEnabled'));
this.clearMessages();
}
}
});
and its associated template:
{{#default-box id="jira-cloud-settings" class="box-full-width"}}
{{box-header title="settings.jira_cloud"}}
{{#box-content}}
{{jira-cloud-input class="form-control" value=jiraCloudUrl placeholder="Jira cloud url"}}
<button type="button" class="btn btn-default" title="Link Jira cloud" {{action "saveJiraCloudUrl"}}>Link Jira cloud</button>
{{/box-content}}
{{/default-box}}
Note: the boxes (default-box, box-content) are also components.
And last, the template in which we render the previous controller:
{{render "jiraCloud" content}}
I can't find anything obvious why it does not work. No error is raised by the 'sendAction' calls.
Note that the action on the button works like a charm.
Thanks for your help,
Vincent

Well, I've just been stupid in fact. I was too used to the old "send" so I forgot to do the mapping when rendering the component:
{{jira-cloud-input save="saveJiraCloudUrl" esc="cancelJiraCloudUrl" class="form-control" value=jiraCloudUrl placeholder="Jira cloud url"}}
And in the code:
Tm.JiraCloudInputComponent = Ember.TextField.extend({
keyDown: function (event) {
if (event.keyCode === 27) {
this.sendAction('esc');
}
if (event.keyCode === 13) {
this.sendAction('save');
event.preventDefault();
}
},
blur: function () {
this.sendAction('save');
}
})

In extjs, How don't expand in tree on double click

I want my treepanel to do something when double clicked.
But when I double click a treenode, the node always expends or collapses.
How can I disable this expanding or collapsing from happening when I double click.
my english isn't very good
sorry!

You can add toggleOnDblClick: false in the viewConfig when declaring the treepanel, just add viewConfig as any other propriety:
{
xtype: 'treepanel',
id: 'tree_id',
name: 'tree_name',
viewConfig: {
toggleOnDblClick: false
},
width:....
}

yourTree.on('beforeitemdblclick', function() { return false; });

Actually, overriding (Ext.tree.TreeNodeUI.override) is not a good practice (because it changes behavior for all TreeNodeUI's of application), so I propose to override createNode method in TreeLoader of the current tree:
new Ext.tree.TreePanel({
...
loader:new Ext.tree.TreeLoader({
...
// override the CreateNode function
createNode:function (attr) {
attr.uiProvider = Ext.extend(Ext.tree.TreeNodeUI, {
// private
onDblClick:function (e) {
e.preventDefault();
if (this.disabled) {
return;
}
if (this.fireEvent("beforedblclick", this.node, e) !== false) {
// if (this.checkbox) {
// this.toggleCheck();
// }
// if (!this.animating && this.node.isExpandable()) {
// this.node.toggle();
// }
// DO YOUR STAFF HERE
this.fireEvent("dblclick", this.node, e);
}
}
});
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}});