Skip to content

Commit

Permalink
#238 add pagination for users and expense sheets
Browse files Browse the repository at this point in the history
  • Loading branch information
@ildacheu
ildacheu committed Mar 18, 2021
1 parent 50836ee commit e529b0a
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 80 deletions.
1 change: 0 additions & 1 deletion frontend/src/layout/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default class Overview<ListingType extends Listing> extends React.Compone
if (this.props.filter) {
this.props.store!.filter();
}
;
}

handleClick = (e: ListingType) => {
Expand Down
31 changes: 16 additions & 15 deletions frontend/src/stores/expenseSheetStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class ExpenseSheetStore extends DomainStore<ExpenseSheet, ExpenseSheetLis
expenseSheet?: ExpenseSheet;

@observable
button_deactive: boolean;
buttonDeactive: boolean;

@observable
totalSum: string;
Expand All @@ -60,8 +60,8 @@ export class ExpenseSheetStore extends DomainStore<ExpenseSheet, ExpenseSheetLis

constructor(mainStore: MainStore) {
super(mainStore);
this.button_deactive = false
this.totalSum = ''
this.buttonDeactive = false;
this.totalSum = '';
}

@action
Expand Down Expand Up @@ -158,15 +158,16 @@ export class ExpenseSheetStore extends DomainStore<ExpenseSheet, ExpenseSheetLis
async doFetchPage(params: object = {}): Promise<void> {
try {
const res = await this.mainStore.api.get<ExpenseSheetListing[]>('/expense_sheets', { params: { ...params } });
if (res.data.length === parseInt(params['items'])){
this.button_deactive = true
let items = 'items' // to shut up tslint (object access via string literals is disallowed)
if (res.data.length === parseInt(params[items], 10)) {
this.buttonDeactive = true;
}
else if (res.data.length === (parseInt(params['items']) + 1)) {
this.button_deactive = false
res.data.splice(-1, 1)
if (res.data.length === (parseInt(params[items], 10) + 1)) {
this.buttonDeactive = false;
res.data.splice(-1, 1);
}
else if (res.data.length < parseInt(params['items'])){
this.button_deactive = true
if (res.data.length < parseInt(params[items], 10)) {
this.buttonDeactive = true;
}
this.expenseSheets = res.data;
} catch (e) {
Expand All @@ -189,13 +190,13 @@ export class ExpenseSheetStore extends DomainStore<ExpenseSheet, ExpenseSheetLis

async doFetchTotal(params: object = {}) {
try {
var list_total: Array<number> = []
const res = await this.mainStore.api.get(`/expenses_sheet_sum`, { params: { ...params } });
let listTotal = [];
const res = await this.mainStore.api.get('/expenses_sheet_sum', { params: { ...params } });

for(var i=0; i < res.data.length; i++){
list_total[i] = res.data[i].total
for (let i = 0; i < res.data.length; i++) {
listTotal[i] = res.data[i].total;
}
this.totalSum = this.calcsum(list_total).toFixed(2)
this.totalSum = this.calcsum(listTotal).toFixed(2);
} catch (e) {
this.mainStore.displayError(
this.mainStore.intl.formatMessage(
Expand Down
30 changes: 15 additions & 15 deletions frontend/src/stores/userStore.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// tslint:disable:no-console
import debounce from 'lodash.debounce';
import { action, computed, observable, reaction } from 'mobx';
import moment from 'moment';
Expand Down Expand Up @@ -47,8 +48,8 @@ export class UserStore extends DomainStore<User, UserOverview> {
userFilters: UserFilter;

filter = debounce(() => {
const max_items = this.userFilters.no_keywords? this.userFilters.items : '1000000'
this.fetchUsers(max_items, this.userFilters.site).then(() => {
const maxItems = this.userFilters.no_keywords ? this.userFilters.items : '1000000';
this.fetchUsers(maxItems, this.userFilters.site).then(() => {
this.filteredEntities = this.users.filter((user: UserOverview) => {
const { zdp, name, beginning, ending, active, role } = this.userFilters;
switch (true) {
Expand All @@ -73,7 +74,7 @@ export class UserStore extends DomainStore<User, UserOverview> {
}
return moment(leftUser.beginning).isBefore(rightUser.beginning) ? 1 : -1;
});
})}, 100);
});}, 100);

protected entityURL = '/users/';
protected entitiesURL = '/users/';
Expand Down Expand Up @@ -121,21 +122,21 @@ export class UserStore extends DomainStore<User, UserOverview> {
this.userFilters = { ...this.userFilters, ...updates };
}
@action
async fetchUsers(nr_items: string, site: string) {
async fetchUsers(nrItems: string, currentSite: string) {
try {
const res = await this.mainStore.api.get<UserOverview[]>('/users', { params: { items: nr_items, site: site } });
if (res.data.length === parseInt(nr_items)){
this.userFilters.button_deactive = true
const res = await this.mainStore.api.get<UserOverview[]>('/users', { params: { items: nrItems, site: currentSite } });
if (res.data.length === parseInt(nrItems, 10)) {
this.userFilters.button_deactive = true;
}
else if (res.data.length === (parseInt(nr_items) + 1)) {
this.userFilters.button_deactive = false
res.data.splice(-1, 1)
if (res.data.length === (parseInt(nrItems, 10) + 1)) {
this.userFilters.button_deactive = false;
res.data.splice(-1, 1);
}
else if (res.data.length < parseInt(nr_items)){
this.userFilters.button_deactive = true
if (res.data.length < parseInt(nrItems, 10)) {
this.userFilters.button_deactive = true;
}
this.users = res.data
} catch(e) {
this.users = res.data;
} catch (e) {
this.mainStore.displayError(
this.mainStore.intl.formatMessage(
{
Expand All @@ -149,4 +150,3 @@ export class UserStore extends DomainStore<User, UserOverview> {
}
}
}

47 changes: 26 additions & 21 deletions frontend/src/views/expense_sheets/ExpenseSheetOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,17 +73,20 @@ export class ExpenseSheetOverview extends React.Component<Props, State> {
modalOpen: false,
expenseSheetStateFilter: 'current',
users_per_page: '200',
current_site: 1
current_site: 1,
};
this.props.expenseSheetStore!.doFetchTotal({ filter: this.state.expenseSheetStateFilter })
this.props.expenseSheetStore!.doFetchTotal({ filter: this.state.expenseSheetStateFilter });
}

componentDidMount(): void {
this.loadContent();
}

loadContent = () => {
this.props.expenseSheetStore!.doFetchPage({ filter: this.state.expenseSheetStateFilter, items: this.state.users_per_page, site: this.state.current_site }).then(() => this.setState({ loading: false }));
this.props.expenseSheetStore!.doFetchPage({ filter: this.state.expenseSheetStateFilter,
items: this.state.users_per_page,
site: this.state.current_site })
.then(() => this.setState({ loading: false }));
}

updateSheetFilter = (state: string | null) => {
Expand Down Expand Up @@ -150,14 +153,15 @@ export class ExpenseSheetOverview extends React.Component<Props, State> {
<td>
<Button
color={'danger'}
disabled={(this.state.current_site === 1)? true : false}
disabled={(this.state.current_site === 1) ? true : false}
onClick={() => {
var site = this.state.current_site - 1
const site = this.state.current_site - 1;
this.setState(prevState => ({
...prevState,
current_site: site,
}), () => this.loadContent())}}
>
}), () => this.loadContent());
}}
>
{
this.intl.formatMessage({
id: 'views.users.userOverview.previous_page',
Expand All @@ -176,16 +180,17 @@ export class ExpenseSheetOverview extends React.Component<Props, State> {
{this.state.current_site}
</td>
<td>
<Button
color={'danger'}
onClick={() => {
var site = this.state.current_site + 1
this.setState(prevState => ({
...prevState,
current_site: site,
}), () => this.loadContent())}}
disabled={this.props.expenseSheetStore!.button_deactive}
>
<Button
color={'danger'}
onClick={() => {
const site = this.state.current_site + 1;
this.setState(prevState => ({
...prevState,
current_site: site,
}), () => this.loadContent());
}}
disabled={this.props.expenseSheetStore!.buttonDeactive}
>
{
this.intl.formatMessage({
id: 'views.users.userOverview.next_page',
Expand All @@ -212,7 +217,7 @@ export class ExpenseSheetOverview extends React.Component<Props, State> {
...prevState,
users_per_page: value,
current_site: 1,
}), () => this.loadContent())
}), () => this.loadContent());
}
}
value={this.state.users_per_page}
Expand All @@ -221,15 +226,15 @@ export class ExpenseSheetOverview extends React.Component<Props, State> {
{[
{
id: '200',
name: '200'
name: '200',
},
{
id: '100',
name: '100'
name: '100',
},
{
id: '50',
name: '50'
name: '50',
},
].map((option) => (
<option value={option.id} key={option.id}>
Expand Down
57 changes: 29 additions & 28 deletions frontend/src/views/users/UserOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import Button from 'reactstrap/lib/Button';
import FormGroup from 'reactstrap/lib/FormGroup';
import Input from 'reactstrap/lib/Input';
import { DatePickerInput } from '../../form/DatePickerField';
import IziviContent from '../../layout/IziviContent';
import Overview from '../../layout/Overview';
import { MainStore } from '../../stores/mainStore';
import { UserStore } from '../../stores/userStore';
import { Column, UserOverview as UserOverviewType } from '../../types';
import { translateUserRole } from '../../utilities/helpers';
import IziviContent from '../../layout/IziviContent';

interface Props {
mainStore?: MainStore;
Expand All @@ -34,8 +34,8 @@ export class UserOverview extends React.Component<Props, State> {
this.intl = this.props.mainStore!.intl;
this.state = {
users_per_page: '200',
current_site: 1
}
current_site: 1,
};
this.columns = [
{
id: 'zdp',
Expand Down Expand Up @@ -120,22 +120,23 @@ export class UserOverview extends React.Component<Props, State> {
<td>
<Button
color={'danger'}
disabled={(this.state.current_site === 1)? true : false}
disabled={(this.state.current_site === 1) ? true : false}
onClick={() => {
var site = this.state.current_site - 1
const site = this.state.current_site - 1;
this.setState(prevState => ({
...prevState,
current_site: site,
}))
this.props.userStore!.updateFilters({ site: String(site), no_keywords: true });}}
>
{
this.intl.formatMessage({
id: 'views.users.userOverview.previous_page',
defaultMessage: 'Vorherige Seite',
})
}
</Button>
}));
this.props.userStore!.updateFilters({ site: String(site), no_keywords: true });
}}
>
{
this.intl.formatMessage({
id: 'views.users.userOverview.previous_page',
defaultMessage: 'Vorherige Seite',
})
}
</Button>
</td>
<td>
{
Expand All @@ -151,13 +152,14 @@ export class UserOverview extends React.Component<Props, State> {
color={'danger'}
disabled={this.props.userStore!.userFilters.button_deactive}
onClick={() => {
var site = this.state.current_site + 1
const site = this.state.current_site + 1;
this.setState(prevState => ({
...prevState,
current_site: site,
}))
this.props.userStore!.updateFilters({ site: String(site), no_keywords: true });}}
>
}));
this.props.userStore!.updateFilters({ site: String(site), no_keywords: true });
}}
>
{
this.intl.formatMessage({
id: 'views.users.userOverview.next_page',
Expand All @@ -180,29 +182,28 @@ export class UserOverview extends React.Component<Props, State> {
onChange={({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
this.props.userStore!.users.length
this.props.userStore!.updateFilters({ items: value, no_keywords: true, site: '1' })
this.props.userStore!.updateFilters({ items: value, no_keywords: true, site: '1' });
this.setState(prevState => ({
...prevState,
current_site: 1,
}))
}));
}
}
value={this.props.userStore!.userFilters.no_keywords? this.props.userStore!.userFilters.items : 1}
value={this.props.userStore!.userFilters.items}
>

{[
{
id: '200',
name: '200'
name: '200',
},
{
id: '100',
name: '100'
name: '100',
},
{
id: '50',
name: '50'
name: '50',
},
].map((option) => (
<option value={option.id} key={option.id}>
Expand Down Expand Up @@ -244,7 +245,7 @@ export class UserOverview extends React.Component<Props, State> {
onChange={(date: Date) => {
this.props.userStore!.updateFilters({
beginning: date.toISOString(),
no_keywords: false
no_keywords: false,
});
}}
/>
Expand All @@ -255,7 +256,7 @@ export class UserOverview extends React.Component<Props, State> {
onChange={(date: Date) => {
this.props.userStore!.updateFilters({
ending: date.toISOString(),
no_keywords: false
no_keywords: false,
});
}}
/>
Expand Down

0 comments on commit e529b0a

Please sign in to comment.