senaduka/old-psihologija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create and use component for member incidents

Browse Source
This commit is contained in:
Bilal Catic
2019-06-18 15:27:18 +02:00
parent e5e86163ea
commit 82aad70912
2 changed files with 96 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
client/src/components/MemberIncidentsTable/index.js Normal file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import { Loader } from 'semantic-ui-react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import {incidentsReportHeaderTitles} from '../../constants/menuItems';
import {
incidentDescriptions,
incidentLevelDescriptions,
UNLOCKED_INCIDENT,
UNSCHEDULED_INCIDENT
} from '../../constants/enums';
const MemberIncidentsTable = props => {
const { loading, incidents, title } = props;
const columns = [];
if (incidents && incidents.length > 0){
const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
incidentHeaders.forEach((header) => {
const columnTitle = incidentsReportHeaderTitles[header];
if (columnTitle){
const columnAlignments = {
left: 'left',
right: 'right',
};
let columnContentsAlignment = columnAlignments.left;
columns.push({
Header: incidentsReportHeaderTitles[header],
accessor: header,
Cell: props => {
let cellValue;
switch (props.column.id) {
case 'incidentType':
cellValue = incidentDescriptions[props.value];
break;
case 'incidentLevel':
cellValue = incidentLevelDescriptions[props.value];
break;
case 'feeDescription':
const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
switch (incidentType) {
case UNLOCKED_INCIDENT:
cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
break;
case UNSCHEDULED_INCIDENT:
cellValue = `${timeIntervalsToCharge} x 5 min`;
break;
default:
cellValue = '';
break;
}
break;
case 'totalChargeFee':
const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
cellValue = `$ ${totalFeeFormatted}`;
columnContentsAlignment = columnAlignments.right;
break;
default:
cellValue = props.value;
}
return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
}
});
}
});
}
return (
<div>
<h4>{title}</h4>
<Loader active={loading} />
{
!loading && incidents &&
<ReactTable
data={incidents}
multiSort={false}
columns={columns}
/>
}
</div>
);
};
export default MemberIncidentsTable;

78
client/src/scenes/IncidentsReport/index.js
View File

@@ -1,15 +1,12 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import {Container, Loader} from 'semantic-ui-react'; import { Container } from 'semantic-ui-react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import MainMenu from '../../components/MainMenu'; import MainMenu from '../../components/MainMenu';
import DateRangePicker from '../../components/DateRangePicker'; import DateRangePicker from '../../components/DateRangePicker';
import MemberIncidentsTable from '../../components/MemberIncidentsTable';
import { fetchIncidents } from '../../store/actions'; import { fetchIncidents } from '../../store/actions';
import { incidentsReportHeaderTitles } from '../../constants/menuItems';
import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';
class IncidentsReport extends Component { class IncidentsReport extends Component {
onDatesUpdate(dateRange) { onDatesUpdate(dateRange) {
@@ -20,67 +17,6 @@ class IncidentsReport extends Component {
render () { render () {
const { pendingIncidents, incidents } = this.props; const { pendingIncidents, incidents } = this.props;
const columns = [];
if (incidents && incidents.length > 0){
const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
incidentHeaders.forEach((header) => {
const columnTitle = incidentsReportHeaderTitles[header];
if (columnTitle){
const columnAlignments = {
left: 'left',
right: 'right',
};
let columnContentsAlignment = columnAlignments.left;
columns.push({
Header: incidentsReportHeaderTitles[header],
accessor: header,
Cell: props => {
let cellValue;
switch (props.column.id) {
case 'incidentType':
cellValue = incidentDescriptions[props.value];
break;
case 'incidentLevel':
cellValue = incidentLevelDescriptions[props.value];
break;
case 'feeDescription':
const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
switch (incidentType) {
case UNLOCKED_INCIDENT:
cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
break;
case UNSCHEDULED_INCIDENT:
cellValue = `${timeIntervalsToCharge} x 5 min`;
break;
default:
cellValue = '';
break;
}
break;
case 'totalChargeFee':
const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
cellValue = `$ ${totalFeeFormatted}`;
columnContentsAlignment = columnAlignments.right;
break;
default:
cellValue = props.value;
}
return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
}
});
}
});
}
return ( return (
<Container> <Container>
<MainMenu/> <MainMenu/>
@@ -88,15 +24,7 @@ class IncidentsReport extends Component {
<hr/> <hr/>
<DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} /> <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
<br/> <br/>
<Loader active={pendingIncidents} /> <MemberIncidentsTable loading={pendingIncidents} incidents={incidents} />
{
!pendingIncidents && incidents &&
<ReactTable
data={incidents}
multiSort={false}
columns={columns}
/>
}
</Container> </Container>
); );
} }