Make Practice Summary Report stub
This commit is contained in:
Senad Uka
128
client/src/components/DateRangePicker/index.js
Normal file
128
client/src/components/DateRangePicker/index.js
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { Component } from 'react';
|
||||
import moment from 'moment';
|
||||
|
||||
import { Form, Message, Grid } from 'semantic-ui-react';
|
||||
|
||||
import { defaultDateFormat } from '../../constants/constants';
|
||||
|
||||
class DateRangePicker extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
|
||||
let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();
|
||||
|
||||
if (initialStartDate > initialEndDate){
|
||||
initialEndDate = initialStartDate.add(1, 'day');
|
||||
}
|
||||
|
||||
this.state = {
|
||||
startDate: initialStartDate,
|
||||
endDate: initialEndDate,
|
||||
error: null,
|
||||
startDateLabel: props.startDateLabel || 'Start date',
|
||||
endDateLabel: props.endDateLabel || 'End date',
|
||||
};
|
||||
}
|
||||
|
||||
onStartDateChange(event) {
|
||||
const { endDate, startDateLabel, endDateLabel } = this.state;
|
||||
|
||||
const newStartDate = moment(event.target.value, defaultDateFormat);
|
||||
if (newStartDate > endDate){
|
||||
this.setState({
|
||||
error: `${startDateLabel} cannot be after ${endDateLabel}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({startDate: newStartDate, error: null});
|
||||
}
|
||||
|
||||
onEndDateChange(event) {
|
||||
const { startDate, startDateLabel, endDateLabel } = this.state;
|
||||
|
||||
const newEndDate = moment(event.target.value, defaultDateFormat);
|
||||
if (newEndDate < startDate){
|
||||
this.setState({
|
||||
error: `${startDateLabel} cannot be after ${endDateLabel}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({endDate: newEndDate, error: null});
|
||||
}
|
||||
|
||||
onDismiss() {
|
||||
this.setState({error: null});
|
||||
}
|
||||
|
||||
onButtonClick() {
|
||||
const { onDatesUpdate } = this.props;
|
||||
const { startDate, endDate } = this.state;
|
||||
|
||||
if (onDatesUpdate){
|
||||
onDatesUpdate({
|
||||
startDate: startDate.format(defaultDateFormat),
|
||||
endDate: endDate.format(defaultDateFormat),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.onButtonClick();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
|
||||
|
||||
const buttonLabel = this.props.buttonLabel || 'Save';
|
||||
|
||||
const startDateValue = startDate.format(defaultDateFormat);
|
||||
const endDateValue = endDate.format(defaultDateFormat);
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<Grid columns="equal">
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<label>{startDateLabel}</label>
|
||||
<Form.Input
|
||||
fluid
|
||||
required
|
||||
type="date"
|
||||
value={startDateValue}
|
||||
onChange={this.onStartDateChange.bind(this)}
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<label>{endDateLabel}</label>
|
||||
<Form.Input
|
||||
fluid
|
||||
required
|
||||
type="date"
|
||||
value={endDateValue}
|
||||
onChange={this.onEndDateChange.bind(this)}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
{ error &&
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Message color="orange" onDismiss={this.onDismiss.bind(this)}>
|
||||
<Message.Header>Wrong date</Message.Header>
|
||||
<p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
|
||||
</Message>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
}
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DateRangePicker;
|
||||
94
client/src/components/MemberIncidentsTable/index.js
Normal file
94
client/src/components/MemberIncidentsTable/index.js
Normal file
@@ -0,0 +1,94 @@
|
||||
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, title } = props;
|
||||
const incidents = props.incidents ? props.incidents : [];
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user