seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added DateRangePicker to AdvancedReporting

pull/129/head
Caozhenhui 2022-03-01 14:42:06 +08:00
parent d0f34a3487
commit 3b93db726b
1 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
web/src/components/MyEMS/AdvancedReporting/AdvancedReporting.js
View File

@ -11,6 +11,8 @@ import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => { const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
@ -35,8 +37,24 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
// State // State
// Query Parameters // Query Parameters
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const dateRangePickerLocale = {
sunday: t('sunday'),
monday: t('monday'),
tuesday: t('tuesday'),
wednesday: t('wednesday'),
thursday: t('thursday'),
friday: t('friday'),
saturday: t('saturday'),
ok: t('ok'),
today: t('today'),
yesterday: t('yesterday'),
hours: t('hours'),
minutes: t('minutes'),
seconds: t('seconds'),
last7Days: t('last7Days')
};
const dateRangePickerStyle = { display: 'block', zIndex: 10};
// button // button
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
@ -47,28 +65,32 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onReportingPeriodBeginsDatetimeChange = newDateTime => { // Callback fired when value changed
setReportingPeriodBeginsDatetime(newDateTime); let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
setSubmitButtonDisabled(true);
} else {
if (moment(DateRange[1]).format('HH:mm:ss') == '00:00:00') {
// if the user did not change time value, set the default time to the end of day
DateRange[1] = endOfDay(DateRange[1]);
}
setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
setSubmitButtonDisabled(false);
}
}; };
let onReportingPeriodEndsDatetimeChange = newDateTime => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onReportingPeriodClean = event => {
}; setReportingPeriodDateRange([null, null]);
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
};
var getValidReportingPeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}; };
// Handler // Handler
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
console.log('handleSubmit'); console.log('handleSubmit');
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -77,8 +99,8 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/advancedreports?' + fetch(APIBaseURL + '/reports/advancedreports?' +
'reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + 'reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -137,26 +159,19 @@ const AdvacnedReporting = ({ setRedirect, setRedirectUrl, t }) => {
<Row form> <Row form>
<Col xs="auto"> <Col xs="auto">
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodBeginsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Reporting Period Begins')} <br/>
</Label> <DateRangePicker
<Datetime id='reportingPeriodBeginsDatetime' id='reportingPeriodDateRangePicker'
value={reportingPeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
onChange={onReportingPeriodBeginsDatetimeChange} value={reportingPeriodDateRange}
isValidDate={getValidReportingPeriodBeginsDatetimes} onChange={onReportingPeriodChange}
closeOnSelect={true} /> size="md"
</FormGroup> style={dateRangePickerStyle}
</Col> onClean={onReportingPeriodClean}
<Col xs="auto"> locale={dateRangePickerLocale}
<FormGroup className="form-group"> placeholder={t("Select Date Range")}
<Label className={labelClasses} for="reportingPeriodEndsDatetime"> />
{t('Reporting Period Ends')}
</Label>
<Datetime id='reportingPeriodEndsDatetime'
value={reportingPeriodEndsDatetime}
onChange={onReportingPeriodEndsDatetimeChange}
isValidDate={getValidReportingPeriodEndsDatetimes}
closeOnSelect={true} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">