lundi 15 juillet 2019

adding checked objects into an array using redux -react

I have a location list with many items. With each item there is a checkbox. If i checked multiple item and clicked one Button'Checked items 'that will add all the checked itmes to the another list. I am not able to understand how will i write action and reducer function for this?

I have successfully written the add button function in reducer and it is working fine. How to do that for checkbox?

action code for add item (button function single item)

export const addLocation = mruCode =>({
  type: ADD_LOCATION,
  payload:mruCode
});

reducer code for add item (button function single item)

case 'ADD_LOCATION':
         let addedLoc = state.location.find(obj=>(obj.mruCode === action.payload))
               return{
                   ...state,
                   conLocations: [...state.conLocations,addedLoc]
               };

component code:

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[]
        };
       this.configLocation = this.configLocation.bind(this);
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
        this.clearall = this.clearall.bind(this);
        this.getLocationData = this.getLocationData.bind(this);
        this.handleRemove = this.handleRemove.bind(this);
        this.removeConfigLocation = this.removeConfigLocation.bind(this);
        this.removeLocationAll = this.removeLocationAll.bind(this);
    }

    togglePanel (e){
        this.setState({open : !this.state.open});
    }
    handleRemove(mruCode){
        this.props.removeLocation(mruCode)
     }
    handleClick (mruCode){
      this.props.addLocation(mruCode)
     }
     allLocations (){
       this.props.addAllLocation()
    }
    clearall (){
        this.props.removeAllLocation()
    }

    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null && this.props.locationData!= undefined){
            this.configLocation(this.props.locationData);
        }
      }

    componentDidUpdate(prevProps,prevState){
        if (prevProps.locationData != this.props.locationData){ 
            this.configLocation(this.props.locationData);
        }
    }

    configLocation(locationData){
        let configuredList =[];
        if(locationData.locations.locationDetails != null && locationData.locations.locationDetails !=undefined ){
            locationData.locations.locationDetails.map(item=>{
                 let listitem ={...item};
                 configuredList.push(listitem);
            });
        }
        this.setState({configuredList},()=>{
            console.log(this.state.configuredList);
        }); 
    }

    removeLocationAll(){
        this.props.locationData.locations.locationDetails.length = 0;
    }

    removeConfigLocation(index){
        this.setState({
            configuredList:this.props.locationData.locations.locationDetails.filter((_,i)=>i!==index)
        },()=>{
            console.log(this.state.configuredList);
        });

    }


    getLocationData(){
         let saveableLocationlist = [];
         if(this.props.conLocations != null && this.state.configuredList !=null){
             const{configuredList} = this.state;
             const{conLocations} = this.props;
                 let totalList = configuredList.push(conLocations);
             saveableLocationlist = totalList;
         }
        const locationData = {
            locationDetails : saveableLocationlist
        }
      return locationData;
    }

    render(){
        //const{configuredList} = this.state;
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return(
            <div className="panel panel-default">
            <div className="panel-heading" onClick={(e)=>this.togglePanel(e)}>
              <div className="row">
              <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                     <span>{this.props.title}</span>
                     </div>
                        <div className="pull-right">
                        <span className="defaultHeaderTextColor">{this.state.configuredList.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.state.configuredList.length-1 ?',\u00A0' : ''}</span>)}
                           <span onClick={(e)=>this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                   </span>
                    </div>
                </div>
           </div>
              {this.state.open?(
                        <div className="panel-body">
                             <div className="row grid-divider">
                             <div className="col-sm-6">
                             <div className="col-padding"><div className="pos-div"><h3>Locations List</h3><button className="allLargeBtn">Checked items</button><button style= className="allLargeBtn" onClick={()=>{this.allLocations()}}>Add all locations</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><input type="checkbox1"/><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode)&&(<div className="pull-right jd"><button style= className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  <div className="col-sm-6">
                                  <div className="col-padding">
                                  <div className="pos-div"><h3>Configured Location</h3><button className="allLargeBtn" onClick={()=>this.removeLocationAll()}>Remove all location</button></div><hr/>
              <div><table className="table"><thead>{this.state.configuredList.map((locc,index)=><tr key={index}><th><input type="checkbox1"/></th><th className="text-left"><b>{locc.mruCode} - {_labels[locc.division]} - {locc.country}</b></th><th className="text-right"><img alt="DeleteIcon" onClick={()=>{this.removeConfigLocation(index)}} className="deleteIconStyle" src="img/delete_large_active.png" /></th></tr>)}</thead><tbody>
                        {this.props.conLocations.map((loct,index)=><tr key={index}>
                           <td><input type="checkbox1"/></td>
                           <td><b>{loct.mruCode} - {_labels[loct.division]} - {loct.country}</b></td>
                           <td className="text-right"><img alt="DeleteIcon" onClick={()=>this.handleRemove(loct.mruCode)}className="deleteIconStyle" src="img/delete_large_active.png" /></td>
                        </tr>
                        )}
                    </tbody></table></div>

                                   </div>
                                  </div>
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
        removeAllLocation: () =>{dispatch(removeAllLocation())}
    }
}


export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);

If we click 'Checked items' button it will invoke all checked items to another list. How to do that? Please help me on reducer and action for mutiple checked items. flow will be likeinitial list(location) -> Checked(mutiple item) -> Checked itmes button(onClick)-> added result(conLocation) list




Aucun commentaire:

Enregistrer un commentaire