I am looking to get some tasks divided between 2 users depending on a few different conditions. The image below is where I have gotten to so far which has the proper number showing they should get but the map I am using is giving both users both leases to work where I need each to get one lease.
The area with the collector name, number of leases, and dollar amount are within one map while the tables are another map within the original further down. each condition has a comment for it labeling which is which and within each has the conditions for the collector to pull them and the leases to pull what ones they can work.
The two collectors below can work 1-30 days past due, program buckets that are B,C, SU and finance company ABC Plumbing Inc.
So in the below each should have only one lease number and the lease number can't be the same but if there is only 1 collector and 2 leases then both will go to the one collector.
I have tried filtering by LeaseID, CollectorID, LeaseNumber and index but they always remain showing both. I have tested out using slice to only show one of the index but then I end up with them both just showing one of the same rather than one getting one and the other gets the other.
Again the main goal for the image below is to have only 1 of each of the leases under each person instead of 2. If there was just one collector then that collector would get both.
{data.filter(leases => leases.condition === 1).length}
data.forEach((lease) => {
if (
lease.DaysPastDue <= 30 &&
lease.ProgramBucket !== 'A' &&
lease.FinanceCompany === 'Tandem Finance Inc') {
lease.condition = 1
} else if (
lease.DaysPastDue <= 45 &&
lease.ProgramBucket === 'A' &&
lease.FinanceCompany === 'Tandem Finance Inc') {
lease.condition = 2
} else if (
lease.DaysPastDue <= 30 &&
lease.ProgramBucket !== 'A' &&
lease.FinanceCompany === 'Pawnee Leasing Corporation') {
lease.condition = 3
} else if(
lease.DaysPastDue <= 45 &&
lease.ProgramBucket === 'A' &&
lease.FinanceCompany === 'Pawnee Leasing Corporation') {
lease.condition = 4
} else if (
lease.DaysPastDue >= 31 &&
lease.ProgramBucket !== 'A') {
lease.condition =5
} else if (
lease.DaysPastDue >= 46 &&
lease.ProgramBucket === 'A') {
lease.condition = 6
} else {
lease.condition = 7
}
})
I did test out a large forEach which helped me get the numbers under the column # of days but not to display different leases in each collector.
the closest I may have gotten is the below function that checks for a lease number but even with this it checks the lease and just adds it if it is not already there and then does it for the next leaving me with each getting 2 which is not what I am needing.
function userExists(LeaseNumber) {
return data.some(function(lease) {
return lease.LeaseNumber === LeaseNumber;
});
}
function addUser(LeaseNumber) {
if (userExists(LeaseNumber)) {
return false;
}
data.push({ LeaseID: data.length + 1, LeaseNumber: LeaseNumber });
return true;
}
console.log(addUser('391225'), 'exists'); // false
console.log(addUser('311111'), 'added'); // true, user `bred` added
console.log(data)
import React, { Component } from 'react'
import axios from 'axios';
import { Blocks } from 'react-loader-spinner';
import '../../index.css'
export default class LeaseList extends Component {
constructor(props) {
super(props);
this.state = {
Collectors: '',
collectorList: [],
Leases: '',
leaseList: [],
loading: true
}
}
componentDidMount() {
this.CollectorGet()
this.LeaseGet()
}
CollectorGet = () => {
axios.get(process.env.NODE_ENV === 'development' ? process.env.REACT_APP_DEV_GET : process.env.REACT_APP_PRO_GET)
.then((result) => result.data)
.then((result) => {
this.setState({collectorList: result});
});
}
LeaseGet = () => {
axios.get(`http://localhost:5000/getAspireLeases`)
.then((result) => result.data)
.then((result) => {
this.setState({leaseList: result});
this.setState({loading: false})
});
}
render() {
const fullArray = [...this.state.collectorList, ...this.state.leaseList]
// Condition 1
const colcon1 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue <= 30 && lease.ProgramBucket !== 'A' && lease.FinanceCompany === 'Tandem Finance Inc').length / this.state.collectorList.filter(collector => collector.Aging1to15 === true && collector.ProgramBucketA !== true && collector.FinanceCompany === 'Tandem Finance Inc').length}</>
// Condition 2
const colcon2 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue <= 45 && lease.ProgramBucket === 'A' && lease.FinanceCompany === 'Tandem Finance Inc').length / this.state.collectorList.filter(collector => collector.Aging31to45 === true && collector.ProgramBucketA === true && collector.FinanceCompany === 'Tandem Finance Inc').length}</>
// Condition 3
const colcon3 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue <= 30 && lease.ProgramBucket !== 'A' && lease.FinanceCompany !== 'Tandem Finance Inc').length / this.state.collectorList.filter(collector => collector.Aging1to15 === true && collector.ProgramBucketA !== true && collector.FinanceCompany !== 'Tandem Finance Inc').length}</>
// Condition 4
const colcon4 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue <= 45 && lease.ProgramBucket === 'A' && lease.FinanceCompany !== 'Tandem Finance Inc').length / this.state.collectorList.filter(collector => collector.Aging31to45 === true && collector.ProgramBucketA === true && collector.FinanceCompany !== 'Tandem Finance Inc').length}</>
// Condition 5
const colcon5 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue >= 30 && lease.ProgramBucket !== 'A').length / this.state.collectorList.filter(collector => collector.Aging31to60 === true && collector.ProgramBucketA !== true && collector.FinanceCompany === 'Both').length}</>
// Condition 6
const colcon6 = <>{this.state.leaseList.filter(lease => lease.DaysPastDue >= 46 && lease.ProgramBucket === 'A').length / this.state.collectorList.filter(collector => collector.AgingOver60 === true && collector.ProgramBucketA === true && collector.FinanceCompany === 'Both').length}</>
return (
<div>
{fullArray.map((Collectors, i) => (
<div>
{Collectors.Active === true && Collectors.Available === true &&
<div className='item'>
<span className='carrot'>{this.state.selected === i ? '-' : '+'}</span>
<div className="title" onClick={() => this.setState({ selected: i })}>
<h2>{Collectors.FirstName} Index:{i}</h2>
<h2>
{Collectors.Aging1to15 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Tandem Finance Inc' && <>{colcon1}</>}
{Collectors.Aging31to45 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Tandem Finance Inc' && <>{colcon2}</>}
{Collectors.Aging1to15 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Pawnee Leasing Corporation' && <>{colcon3}</>}
{Collectors.Aging31to45 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Pawnee Leasing Corporation' && <>{colcon4}</>}
{Collectors.Aging31to60 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Both' && <>{colcon5}</>}
{Collectors.AgingOver60 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Both' && <>{colcon6}</>}
</h2>
<h2>
$0
</h2>
</div>
<div className={this.state.selected === i ? 'content show' : 'content show'}>
<div className='leaseheader'>
{this.state.loading ? (
<>
<Blocks
visible={true}
height="80"
width="80"
ariaLabel="blocks-loading"
wrapperStyle={{margin: 'auto'}}
wrapperClass="blocks-wrapper"
/>
</>
) : (
<div>
<table className='blueTableHeaders' style={{width:'125%'}}>
<thead>
<tr>
<td>Collector Code</td>
<td>Lease Number</td>
<td>Lease Name</td>
<td>Program Bucket</td>
<td>Days Past Due</td>
<td>Amount Past Due</td>
<td>Finance Company</td>
</tr>
</thead>
</table>
{/* Condition 1 */}
{Collectors.Aging1to15 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Tandem Finance Inc' &&
<div>
{this.state.leaseList.map((Leases, a) => (
<div>
{Leases.DaysPastDue <= 30 && Leases.ProgramBucket !== 'A' && Leases.FinanceCompany === 'Tandem Finance Inc' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>ColCode:{Collectors.CollectorCode}<br/> index:{a}<br/> ColID:{Collectors.CollectorID}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
{/* Condition 2 */}
{Collectors.Aging31to45 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Tandem Finance Inc' &&
<div>
{fullArray.map((Leases, b) => (
<div>
{Leases.DaysPastDue <= 45 && Leases.ProgramBucket === 'A' && Leases.FinanceCompany === 'Tandem Finance Inc' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>{Collectors.CollectorCode} -- {b}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
{/* Condition 3 */}
{Collectors.Aging1to15 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Pawnee Leasing Corporation' &&
<div>
{fullArray.map((Leases, c) => (
<div>
{Leases.DaysPastDue <= 30 && Leases.ProgramBucket !== 'A' && Leases.FinanceCompany === 'Pawnee Leasing Corporation' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>{Collectors.CollectorCode}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
{/* Condition 4 */}
{Collectors.Aging31to45 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Pawnee Leasing Corporation' &&
<div>
{fullArray.map((Leases, d) => (
<div>
{Leases.DaysPastDue <= 45 && Leases.ProgramBucket === 'A' && Leases.FinanceCompany === 'Pawnee Leasing Corporation' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>{Collectors.CollectorCode}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
{/* Condition 5 */}
{Collectors.Aging31to60 === true && Collectors.ProgramBucketA !== true && Collectors.FinanceCompany === 'Both' &&
<div>
{fullArray.map((Leases, e) => (
<div>
{Leases.DaysPastDue >= 30 && Leases.ProgramBucket !== 'A' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>{Collectors.CollectorCode} -- {e}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
{/* Condition 6 */}
{Collectors.AgingOver60 === true && Collectors.ProgramBucketA === true && Collectors.FinanceCompany === 'Both' &&
<div>
{fullArray.map((Leases, f) => (
<div>
{Leases.DaysPastDue >= 46 && Leases.ProgramBucket === 'A' && <>
<table className='blueTableData' style={{width:'125%'}}>
<tbody>
<tr>
<td>{Collectors.CollectorCode}</td>
<td>{Leases.LeaseNumber}</td>
<td>{Leases.LeaseName}</td>
<td>{Leases.ProgramBucket}</td>
<td>{Leases.DaysPastDue}</td>
<td>{Leases.AmountPastDue}</td>
<td style={{width:200}}>{Leases.FinanceCompany.substring(0,19)}</td>
</tr>
</tbody>
</table>
</>
}
</div>
))}
</div>
}
</div>
)}
</div>
</div>
</div>
}
</div>
))}
</div>
)
}
}