Skip to content

Commit

Permalink
Removed React Datepicker and added old datepicker for start and end d…
Browse files Browse the repository at this point in the history 
…ates. Fixed outcome themes hover text.
  • Loading branch information
Andre Thomas committed Oct 20, 2022
1 parent 517d205 commit 92ea593
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 92ea593

Please sign in to comment.