Skip to content

Commit

Permalink
Merge pull request #717 from mercycorps/2820-editable-program-admin-l…
Browse files Browse the repository at this point in the history 
…ight

Removed React Datepicker and added old datepicker for start and end d…
  • Loading branch information
@andrethomas6
andrethomas6 authored Oct 21, 2022
2 parents ad37cf0 + 92ea593 commit 6b1f9dc
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 193 deletions.
111 changes: 0 additions & 111 deletions js/components/ReactDatepicker.js
View file

This file was deleted.

77 changes: 50 additions & 27 deletions js/pages/tola_management_pages/program/components/edit_program_profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { observer } from "mobx-react";
import CheckboxedMultiSelect from 'components/checkboxed-multi-select';
import classNames from 'classnames';
import HelpPopover from '../../../../components/helpPopover.js';
import 'react-datepicker/dist/react-datepicker.css';
import ReactDatepicker from "../../../../components/ReactDatepicker.js";


const ErrorFeedback = observer(({errorMessages}) => {
Expand Down Expand Up @@ -45,7 +43,46 @@ export default class EditProgramProfile extends React.Component {
this.setState({
formEditable: editableEnv
})
this.state.managed_data.gaitid.length === 0 && this.appendGaitRow(); // If there are no GAIT IDs on mount, add a empty Gait Row

// If there are no GAIT IDs on mount, add a empty Gait Row
this.state.managed_data.gaitid.length === 0 && this.appendGaitRow();

$(document).ready(() => {
let startDate = this.state.managed_data.start_date;
let endDate = this.state.managed_data.end_date;
let today = new Date();
let latest = new Date();
latest.setHours(0,0,0,0);
latest.setFullYear(today.getFullYear() + 1);
let earliest = new Date();
earliest.setHours(0,0,0,0);
earliest.setFullYear(today.getFullYear() - 1);

// Program Start Date setup
$("#program-start-date").datepicker({
dateFormat: "yy-mm-dd",
minDate: earliest,
});
if (this.state.managed_data) {
$('#program-start-date').datepicker("setDate", startDate);
};
$('#program-start-date').on('change', () => {
let updatedDate = $('#program-start-date').datepicker('getDate');
this.updateFormField('start_date', window.formatDate(updatedDate));
});
// Program End Date setup
$("#program-end-date").datepicker({
dateFormat: "yy-mm-dd",
maxDate: latest,
});
if (this.state.managed_data) {
$('#program-end-date').datepicker("setDate", endDate);
};
$('#program-end-date').on('change', () => {
let updatedDate = $('#program-end-date').datepicker('getDate');
this.updateFormField('end_date', window.formatDate(updatedDate));
});
});
}


Expand Down Expand Up @@ -188,7 +225,7 @@ export default class EditProgramProfile extends React.Component {
}
if (formdata.end_date.length > 0 && startDate > endDate) {
isValid = false;
addErrorMessage("normal", "end_date", gettext("The program start date may not be after the program end date."));
addErrorMessage("normal", "start_date", gettext("The program start date may not be after the program end date."));
}
}
if (formdata.end_date.length > 0) {
Expand Down Expand Up @@ -320,39 +357,25 @@ export default class EditProgramProfile extends React.Component {
<div className="form-group">
<label htmlFor="program-start-date" className="label--required">{gettext("Program start date")}</label>
<div className={ classNames( {'is-invalid': this.state.formErrors['start_date']} )}>
<ReactDatepicker
<input
id="program-start-date"
className={classNames('form-control', { 'is-invalid': this.state.formErrors['start_date'] })}
customDatesSelector={false}
className={classNames('datepicker form-control', { 'is-invalid': this.state.formErrors['start_date'] })}
type="text"
autoComplete="off"
disabled={!this.state.formEditable}
maxDate={formdata.end_date}
date={formdata.start_date}
onChange={(date) => {
let validDate;
try { validDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; }
catch { validDate = ""; }
this.updateFormField('start_date', validDate);
}}
/>
</div>
<ErrorFeedback errorMessages={this.state.formErrors['start_date']} />
</div>
<div className="form-group">
<label htmlFor="program-end-date" className="label--required">{gettext("Program end date")}</label>
<div className={ classNames( {'is-invalid': this.state.formErrors['end_date']} )}>
<ReactDatepicker
<input
id="program-end-date"
className={classNames('form-control', { 'is-invalid': this.state.formErrors['end_date'] })}
customDatesSelector={false}
className={classNames('datepicker form-control', { 'is-invalid': this.state.formErrors['end_date'] })}
type="text"
autoComplete="off"
disabled={!this.state.formEditable}
minDate={formdata.start_date}
date={formdata.end_date}
onChange={(date) => {
let validDate;
try { validDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; }
catch { validDate = ""; }
this.updateFormField('end_date', validDate);
}}
/>
</div>
<ErrorFeedback errorMessages={this.state.formErrors['end_date']} />
Expand Down Expand Up @@ -413,7 +436,7 @@ export default class EditProgramProfile extends React.Component {
/>
}
</div>
<div className="form-group react-multiselect-checkbox" data-toggle="tooltip" title={this.createDisplayList(formdata.idaa_outcome_theme)}>
<div className="form-group react-multiselect-checkbox" data-toggle="tooltip" title={this.createDisplayList(selectedOutcomeThemes)}>
<label htmlFor="program-outcome_themes-input">{gettext("Outcome themes")}</label>
{!this.state.formEditable ?
<input
Expand Down
55 changes: 1 addition & 54 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"qs": "^6.11.0",
"react": "^16.14.0",
"react-autosize-textarea": "^7.1.0",
"react-datepicker": "^4.8.0",
"react-beautiful-dnd": "^12.2.0",
"react-bootstrap-table-next": "^2.2.0",
"react-bootstrap-table2-paginator": "^2.1.2",
Expand Down

0 comments on commit 6b1f9dc

Please sign in to comment.