I have two interdependent multiselect checkboxes dropdowns where 1st checkbox have api call on change event and 2nd gets populated. So whenever i check items from 2nd dropdown and I decide to check another item from 1st dropdown my checked items from 2nd dropdown gets re populated with fresh data. I need to remember checked items from 2nd dropdown doesn't matter how many times I recheck items of 1st dropdown.
HTML
<label class="form-label">Clients<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="clientError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showClient = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Clients</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showClient" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedClient" name="list_name_tech" value="m1"
(change)="checkUncheckAllClient()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
)</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchClient"
name="searchClient" placeholder="Search"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let client of clientCollection| searchdata: searchClient">
<label class="custom-control material-checkbox d-flex">
<input name="" type="checkbox"
(change)="onChangeSelectClient($event,client)" class="material-control-input"
[checked]="client.clientCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;"></span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && clientError">
<small class="text-danger" *ngIf="clientError">Client is required</small>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" (clickOutside)="showtech = false" style="margin-bottom: 20px;">
<label class="form-label">Project<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="techError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showtech = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Project</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showtech" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedTech " name="list_name_tech" value="m1"
(change)="checkUncheckAllTech()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
)</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchTech"
name="searchTech" placeholder="Search"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let tech of adminTechCollection| searchdata: searchTech">
<label class="custom-control material-checkbox d-flex">
<input name="" type="checkbox"
(change)="onChangeSelectTech($event,tech)" class="material-control-input"
[checked]="tech.technologyCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;"></span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && techError">
<small class="text-danger" *ngIf="techError">Project is required</small>
</div>
</div>
TS `
/*----------------------------Function to get Checkbox ID's(Project)-------------------------*/
onChangeSelectTech(event, tech: any, masterSelectedTech: any) {
this.techError = false;
if (masterSelectedTech !== undefined) {
if (!masterSelectedTech) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
this.tempArr1.tech.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.adminTechCollection[tech.indexCount - 1].technologyCode = true;
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
// console.log( );
this.adminTechCollection[tech.indexCount - 1].technologyCode = false;
this.tempArr1.tech.splice(removeIndex, 1);
}
}
}
if (masterSelectedTech === undefined) {
if (this.adminTechCollection.length == this.tempArr1.tech.length) {
this.masterSelectedTech = true;
} else {
this.masterSelectedTech = false;
}
}
if (this.tempArr1.tech.length == 0) {
this.techAddError = false;
}
console.log(this.tempArr1.tech);
}
/*----------------------------Function to get Checkbox ID's(Client)-------------------------*/
onChangeSelectClient(event, client: any, masterSelectedClient: any) {
this.clientError = false;
if (masterSelectedClient !== undefined) {
if (!masterSelectedClient) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
this.tempArr2.client.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = true;
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = false;
this.tempArr2.client.splice(removeIndex, 1);
}
}
}
if (masterSelectedClient === undefined) {
if (this.clientCollection.length == this.tempArr2.client.length) {
this.masterSelectedClient = true;
} else {
this.masterSelectedClient = false;
}
}
console.log(this.tempArr2);
this.passedArray = this.tempArr2.client.map(function(element){
return `${element.clientId}`;
})
console.log(this.passedArray)
this.selectChangeHandler(event);
}
//Api call change function
selectChangeHandler(event:any){
console.log("weee");
// this.tempArr1.tech=[]
this.clientId = event.target.value;
this.api.GetProjectList(this.passedArray).subscribe({
next:(data:any)=>{
if (data.success) {
console.log(data);
this.adminTechCollection = [];
for (let i = 0; i < data.data.length; i++) {
this.adminTechCollection.push(data.data[i]);
}
console.log(this.adminTechCollection);
}
}
})
}
`
Aucun commentaire:
Enregistrer un commentaire