Develop Reference

Angular-How can I disable options from one dropdown based on option selected on another dropdown?

I was working on a project with two drop-downs having grouped options and multiple selection this is the stackblitz represntation. There I was trying to disable the entire group of options selected in one dropdown, when it is selected in another dropdown.But I was facing a problem here.
Here is the JSON:
items = [
{
type: 'all',
name: ['All Pokemon'],
},
{
type: 'water',
name: [
'Squirtle',
'Wartortle',
'Blastoise',
'Psyduck',
'Golduck',
'Tentacool',
'Seel',
],
},
{
type: 'fire',
name: [
'Charmander',
'Charizard',
'Vulpix',
'Arcanine',
'Ponyta',
'Magmar',
'Cyndaquil',
],
},
{
type: 'earth',
name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
},
];
When I select Wartortle from type:water in the 1st dropdown, the whole group of type:water should get disabled in the 2nd dropdown and in the 1st dropdown only the group of type:water should remain enabled..
This is what I was able to do so far:
I made two arrays(for 2 dropdowns):
this.items.forEach((data) => {
data['disable'] = false;
});
this.arr1 = this.items;
this.arr2 = this.items.filter((x) => x.type !== 'all');
This is the logic I am using to disbale it:
if (includeTest.length) {
includeTest.map((x1) => {
this.arr1.forEach((y1) => {
if (y1.name.includes(x1)) {
y1.disable = true;
} else {
y1.disable = false;
}
});
this.arr2.forEach((y2) => {
if (y2.name.includes(x1)) {
y2.disable = true;
} else {
y2.disable = false;
}
});
});
} else {
this.arr1.forEach((x) => {
x.disable = false;
});
this.arr1.forEach((x) => {
x.disable = false;
});
}
Here, includeTest contains array of string based on which,I have to filter out/disable the option groups.

Try to read about Angular Pipes, especially about "filter". There is lot's of resource in here and also in documentation of Angular.
Shortly described, all your 'ngFor' or 'ng-repeat' must be filtered through your filter pipe. When you select something from dropdown 1, the filter on dropdown 2, fill show data filtered based on dropdown 1 value or vice-versa.
if (dropdown1.type == 'water') {dropdown2.items = ...}
or
if (dropdown1.type == 'water' && dropdown1.name == 'Vulpix') {dropdown2.items = ...}
or
<li *ngFor="let item of dropdown2 | callback: filterData">...</li>
filterData(item: Item) {
if (dropdown1.type == 'water' && item == 'your rules') {return item}
}
so the data of dropdown 2 always will be based on dropdown 1

Angular: Select checkbox on another checkbox selection ( dynamic form control )

I'm new to angular.
I have this UI. I wanted to make Bill To checkbox checked if any one (Address, Email or Phone) of the checkbox is checked. I'm using dynamic form control for checkbox.
code snippet: This solution didnt work , as combineLatest is emitting only when all the three checkboxes get selected
combineLatest([this.form.customerInfo.address.valueChanges(),
this.form.customerInfo.email.valueChanges(),
this.form.customerInfo.phone.valueChanges()])
.subscribe((formValues)=>{
if (formValues.every((value) => value === false || value === undefined)) {
this.form.customerInfo.billTo.setValue(false)
}
else {
this.form.customerInfo.billTo.setValue(true)
}
});
this.form.customerInfo.billTo.valueChanges().pipe(distinctUntilChanged()).subscribe(value =>{
// if billTo is false or unchecked- unchecked all
if(!value){
this.form.customerInfo.address.setValue(value);
this.form.customerInfo.phone.setValue(value);
this.form.customerInfo.email.setValue(value);
}
})
another solution: it's a bit complicated
combineLatest([
this.form.customer.address.valueChanges().pipe(startWith(false)),
this.form.customer.phone.valueChanges().pipe(startWith(false)),
this.form.customer.email.valueChanges().pipe(startWith(false)),
])
// adding debounce until we can listen for form changes and patch multiple form values simultaneously
.pipe(debounceTime(100))
.subscribe(([address, phone, email]) => {
if ((address || phone || email) && !this.form.customerInfo.billTo.value) {
// one of the nested values is true, and billTo is false, make billTo true
this.form.customer.billTo.setValue(true);
}
});
// when customer toggle billTo to false, we set all children to false
this.form.customer.billTo
.valueChanges()
.pipe(filter((value) => value !== true))
.subscribe(() => {
const address = this.form.customer.address.value;
const phone = this.form.customer.phone.value;
const email = this.form.customer.email.value;
// if any of the nested values are true, set them to false
if (address) {
this.form.customer.address.setValue(false);
}
if (phone) {
this.form.customer.phone.setValue(false);
}
if (email) {
this.form.customer.email.setValue(false);
}
});
Can anyone tell how to improve this? Thanks in advance.

Not able to perform 2 actions on the same component when hardware back button is pressed in react-native,below are the code regarding the backhandler

backAction = () => {
if (this.props.navigation.isFocused() && !this.state.otpScreen) {
this.setState({ showLoginScreen: true });
return true;
} else if(this.state.showLoginScreen) {
this.props.navigation.dispatch(CommonActions.reset({
index: 0,
routes: [
{ name: 'Login' },
],
}))
return false;
}
};
the code above is for action that should be done by the hardware back press, at first it should show the one screen and on the second press it should exit the app, both otp screen and login screen are on the same component, I'm just hiding based on the condition ...
at the first time it is working as per the condition but for the second time it's not.
componentDidMount() {
this.focusListener = this.props.navigation.addListener('focus', () => {
this.setState({
mobile: '',
showLoginScreen: true,
});
});
this.getDataFromStorage();
AsyncStorage.setItem('countryCode', '+91');
BackHandler.addEventListener(
"hardwareBackPress",
this.backAction
);
}
componentWillUnmount() {
clearInterval(this.interval)
BackHandler.addEventListener('hardwareBackPress', () => { return false })
}
can anyone pls help me how to do this,thanks in Advance

I guess your problem is that you can't access the 'current' value of a state inside a listener.
More Details here
Try to use a Reference instead of a state

Is it possible to create a search function with a v-select alongside user input with vuejs

What I am trying to achieve is that,when the user types in the search bar what they are looking for( for example if they want an account that starts with SAE), when the user clicks on the dropdown and selects one of the items(for example, Account), it should bring back a result with all the records that have the account of SAE.I have tried to implement an #change event from the v-select and it does recognize that I am selecting one of the items in the dropdown. I am not sure if it is possible because I have translated the items in the dropdown using Vuei18n.
The code below is for the search bar and dropdown list
<v-text-field
v-model="searchField"
:label="$t('searchPage.search')"
placeholder="..."
clearable
clear-icon="mdi-close-circle-outline"
class="mr-4"
#keyup.enter="loader = 'loading'"
/>
<v-select
v-show="standardSearch"
:label="$t('searchPage.searchBy')"
:items="selection"
chips
small-chips
deletable-chips
#change="searchByDropdown"
/>
//The code that is in the js file
data(){
const t = this.$t.bind(this);
return {
searchField:""
searchSelection:[
t("searchPage.meterNumber"),
t("searchPage.account"),
t("searchPage.billingArea")
]
}
}
And the below code is for the searchByDropdown event
searchByDropdown(e) {
const t = this.$t.bind(this);
var searchInput = `${this.searchField}`;
var searchSelection = `${this.selection}`;
debugger;
// t("searchPage.meterNumber"),
// t("searchPage.account"),
// t("searchPage.billingArea")
switch (e) {
case searchInput && e == t("searchPage.meterNumber"):
//After this I want to start searching
debugger;
break;
case searchInput && e == t("searchPage.account"):
break;
case searchInput && e == t("searchPage.billingArea"):
break;
default:
searchSelection == null;
}
console.log(e + searchInput);
}
The search results will be displayed in a treeview, but I would want to know if this achievable

vuetify has its own built-in component named "v-autocomplete". its exactly like v-select and a searchbar at the top enabling user to search through Items to find the most closest item to the searched text.

I have figured out how to solve this. All i needed was a variable that stores the value of the dropdown and if that value matches the dropdowns value then I can use it to search for the data
//This is the dropdown search function
//The search key is a variable that will store the value of the dropdown hence 'e'
selection: [
{
name: t("searchPage.meterNumber"),
value: "meterNumber"
},
{
name: t("searchPage.account"),
value: "account"
},
{
name: t("searchPage.billingArea"),
value: "billingArea"
}
],
searchByDropdown(e) {
debugger;
this.searchKey = e;
console.log(e);
},
if (searchInput != "" && this.searchKey == "meterNumber") {
this.$services.accountService
.accountSearchMultiple({
organisationID: 0,
meterNumber: searchInput,
n: 100
})
.then(response => {
this.treeData = response.data.treeItems;
this.itemData = response.data.dataItems;
this.revealTree = false;
this.snackbar = {
message: "Your search is successful",
color: "success",
show: true
};
})
.catch(() => {
this.revealTree = true;
this.snackbar = {
message: "Invalid Search",
color: "error",
show: true
};
});
}

Enabling custom button (disabled by default) when row is selected

I have a DataTable displaying data for Branches with two custom buttons defined: Add and Update. They are initialized at the top of the Javascript section
var buttons;
var tblBranch;
$.fn.dataTable.ext.buttons.add = {
className: 'button-add',
text: "Add Branch",
action: function (dt) {
onBtnAddClicked()
}
};
$.fn.dataTable.ext.buttons.update = {
className: 'button-update',
text: "Update",
action: function (dt) {
onBtnUpdateClicked()
}
};
I'd like to disable the Edit button on page load and only enable it to be clickable when a row has been selected. Problem is, I'm using custom buttons and I can't find anything on datatables.net about how to enable/disable them depending on conditions. So far what I've tried is this:
tblBranch = $("#tblBranches").DataTable({
dom: 'Blfrtip',
buttons: {
buttons :[
'add', 'update'
]
}
select: true;
})
$("#tblBranches tbody").on('click', 'tr', function () {
if (tblBranch.row(this).hasClass('selected')) {
$('button-update').removeClass("DTTT_disabled");
}
else {
table.$('tr.selected').removeClass('selected');
$('button-update').addClass("DTTT_disabled");
}
});
But I don't know what the code to disable the Edit button when the page loads should be like, and I've looked here, here, here and here.
Thanks for any guidance.

The last link you are referring to hold the solution you are looking for. But the documentation is a little bit vague, guess it need a solid example. It is not clear how you create the buttons (you show both methods) but below is an inline example, it would work with constructor as well. Simply give the button a class, like .edit and set it to disabled from start :
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Edit',
className: 'edit',
enabled: false,
action: function (e, dt, node, config) {
//do something
}
},
{
text: 'Add',
action: function (e, dt, node, config) {
//do something
}
}
]
})
Then use the Select plugins select and deselect events to update the enabled status of the .edit button :
$('#example').on('select.dt deselect.dt', function() {
table.buttons( ['.edit'] ).enable(
table.rows( { selected: true } ).indexes().length === 0 ? false : true
)
})
demo -> https://jsfiddle.net/pmee6w2L/