Display most recent transactions in member info

This commit is contained in:
Tanner Collin 2020-01-09 05:40:54 +00:00
parent e1ad30e481
commit aa6c81c48c
2 changed files with 57 additions and 40 deletions

View File

@ -25,7 +25,7 @@ class Transaction(models.Model):
recorder = models.ForeignKey(User, related_name='+', blank=True, null=True, on_delete=models.PROTECT) recorder = models.ForeignKey(User, related_name='+', blank=True, null=True, on_delete=models.PROTECT)
member_id = models.IntegerField(blank=True, null=True) member_id = models.IntegerField(blank=True, null=True)
date = models.DateTimeField(default=now) date = models.DateField(default=date.today)
amount = models.DecimalField(max_digits=7, decimal_places=2) amount = models.DecimalField(max_digits=7, decimal_places=2)
reference_number = models.CharField(max_length=32, blank=True, null=True) reference_number = models.CharField(max_length=32, blank=True, null=True)
memo = models.TextField(blank=True, null=True) memo = models.TextField(blank=True, null=True)

View File

@ -239,54 +239,71 @@ function MemberInfo(props) {
const user = props.user; const user = props.user;
const member = user.member; const member = user.member;
const lastTrans = user.transactions.slice(-3);
return ( return (
<div> <div>
<Header size='large'>
<Icon.Group size='small'>
<Icon name='circle' color='green' />
</Icon.Group>
<Header.Content>{member.first_name} {member.last_name}</Header.Content>
</Header>
<p>Preferred Name: {member.preferred_name || '???'}</p>
<p>Email: {user.email}</p>
<Grid stackable> <Grid stackable>
<Grid.Column width={6}> <Grid.Column width={6}>
<Image src='https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' size='small' /> <Image src='https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' size='small' />
</Grid.Column> </Grid.Column>
<Grid.Column width={10}> <Grid.Column width={10}>
<Table unstackable basic='very'> <Header size='large'>
<Table.Body> <Icon.Group size='small'>
<Table.Row> <Icon name='circle' color='green' />
<Table.Cell>Expiry:</Table.Cell> </Icon.Group>
<Table.Cell>2099-01-01</Table.Cell> <Header.Content>{member.first_name} {member.last_name}</Header.Content>
</Table.Row> </Header>
<Table.Row>
<Table.Cell>Status:</Table.Cell> <p>Preferred Name: {member.preferred_name || '???'}</p>
<Table.Cell>Current</Table.Cell> <p>Email: {user.email}</p>
</Table.Row> <p>Status: Current</p>
<Table.Row>
<Table.Cell>Application:</Table.Cell>
<Table.Cell>{member.application_date || '???'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Start:</Table.Cell>
<Table.Cell>{member.current_start_date || '???'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Vetted:</Table.Cell>
<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Monthly</Table.Cell>
<Table.Cell>${member.monthly_fees || '???'}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Grid.Column> </Grid.Column>
</Grid> </Grid>
<Header size='medium'>Details</Header>
<Table unstackable basic='very'>
<Table.Body>
<Table.Row>
<Table.Cell>Expiry:</Table.Cell>
<Table.Cell>2099-01-01</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Application:</Table.Cell>
<Table.Cell>{member.application_date || '???'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Start:</Table.Cell>
<Table.Cell>{member.current_start_date || '???'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Vetted:</Table.Cell>
<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Monthly</Table.Cell>
<Table.Cell>${member.monthly_fees || '???'}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Header size='medium'>Latest Transactions</Header>
<Table unstackable basic='very'>
<Table.Body>
{lastTrans.length ?
lastTrans.map((x, i) =>
<Table.Row key={i}>
<Table.Cell>{x.date}</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
</Table.Row>
)
:
<p>None</p>
}
</Table.Body>
</Table>
</div> </div>
); );
} }
@ -322,7 +339,7 @@ function App() {
setUserCache(false); setUserCache(false);
} }
const menuName = user.member && user.member.preferred_name || 'Me'; const menuName = user && user.member && user.member.preferred_name || 'Me';
return ( return (
<div> <div>