problems with conditions in javascript

Question

can anyone help? I created a tab step component and I'm having problems as it progresses to the next step, I've created a method for clicking the next button for the next step, but it ignores the conditions and advances to the last step. My code:

Hello, can anyone help? I created a tab step component and I'm having problems as it progresses to the next step, I've created a method for clicking the next button for the next step, but it ignores the conditions and advances to the last step. My code:

verifyTabsCoherency(){
        this.enabledTabs = [];
 

        this.enabledTabs.push( 
            { title:  this.tabstepItem[0].title , icon: this.tabstepItem[0].icon, content: this.tabstepItem[0].icon, enable: this.tabstepItem[1].enable = true, selected: this.tabstepItem[1].enable = true }
        );
        
        this.enabledTabs.push(
            { title:  this.tabstepItem[1].title, icon: this.tabstepItem[1].icon, content: this.tabstepItem[1].content, enable: this.tabstepItem[1].enable, selected: this.tabstepItem[1].selected  }
        );

        if(this.customFilter.enableStation){
            this.enabledTabs.push(
                { title:  this.tabstepItem[2].title, icon: this.tabstepItem[2].icon, content: this.tabstepItem[2].content, enable: this.tabstepItem[2].enable, selected: this.tabstepItem[2].selected  }
            );
        }

        if(this.customFilter.enableUser) {
            this.enabledTabs.push(
                { title:  this.tabstepItem[3].title, icon: this.tabstepItem[3].icon, content: this.tabstepItem[3].content, enable: this.tabstepItem[3].enable, selected: this.tabstepItem[3].selected  }
            );
        }

        if(this.customFilter.enableAccess){
            this.enabledTabs.push(
                { title:  this.tabstepItem[3].title, icon: this.tabstepItem[4].icon, content: this.tabstepItem[4].content, enable: this.tabstepItem[4].enable, selected: this.tabstepItem[4].selected  }
            );
        }

        if(this.customFilter.Companys){
            this.enabledTabs.push(
                { title:  this.tabstepItem[3].title, icon: this.tabstepItem[5].icon, content: this.tabstepItem[5].content, enable: this.tabstepItem[5].enable, selected: this.tabstepItem[5].selected  }
            );
        }

        if(this.customFilter.Customers){
            this.enabledTabs.push(
                { title:  this.tabstepItem[3].title, icon: this.tabstepItem[6].icon, content: this.tabstepItem[6].content, enable: this.tabstepItem[6].enable, selected: this.tabstepItem[6].selected  }
            )
        }

        if(this.customFilter.Sections){
            this.enabledTabs.push(
                { title:  this.tabstepItem[7].title, icon: this.tabstepItem[7].icon, content: this.tabstepItem[7].content, enable: this.tabstepItem[7].enable, selected: this.tabstepItem[7].selected  }
            )
        }
        
       resolveDate() {
        const myDateStart = new Date(this.dateStart);
        const myDateEnd = new Date(this.dateEnd);
        const myDateStartCompare = new Date(this.dateStartCompare);
        const myDateEndCompare = new Date(this.dateEndCompare);

        if ( this.dateStart && this.dateEnd ) {
                return true;
            } else { return false;}
    }   
    
    resolveCarpark(){
        const mycar = this.car.filter(car => car.checked === true);
        
        if( mycar.length > 0 || this.selectedGroupsTree.length > 0){
            return true;
        }
        else{ return false; }
    }

    resolveStations(){
        const myStation = this.stations.filter(stations => stations.checked === true);

        if( myStation.length > 0 ){
            return true;
        }
        else{ return false; }
    }
    
      resolveTabItem ( indexTo: number, validateTo: boolean ) {
        this.enabledTabs[indexTo].enable = validateTo;
        this.enabledTabs[indexTo].selected = validateTo;
    }
    
     nextTab(){
      
        if ( this.resolveDate() ) {
            this.resolveTabItem(1, true);
        } else if  ( this.resolveCarpark() ) {
            this.resolveTabItem(2, true);
        }
        }
        
    
        

Answer 1

You would need to implement some kind of index based system to tell your logic at which tab it should stop at.

You would then pass in the index for navigating to the next tab as such.. nextTab(0) to enable 1st tab, nextTab(1) to enable 2nd tab...

nextTab(index){

        if ( this.resolveDate() && index==0) {
            this.resolveTabItem(1, true);

        } else if  ( this.resolveCarpark() && index==1) {
            this.resolveTabItem(2, true);

        }
}