121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
import React from "react";
|
|
import { ICollateral, IRepoAccount } from "../../../services/service-types/RepoAccountTypes";
|
|
import RepoAccountService from "../../../services/RepoAccountService";
|
|
import { Moment } from "moment";
|
|
import DateFormatting from "../../../shared/formatting/DateFormatting";
|
|
import DatePicker from 'react-datepicker';
|
|
import DateConversions from "../../../shared/conversions/DateConversions";
|
|
import "./NotableDates.css";
|
|
|
|
const cloneDeep = require('lodash.clonedeep');
|
|
|
|
interface INotableDatesProps {
|
|
selectedAccount: IRepoAccount;
|
|
saveRepoAccount: (repo: IRepoAccount) => any;
|
|
}
|
|
|
|
interface INotableDatesState {
|
|
repoAccount: IRepoAccount;
|
|
isOpen: boolean;
|
|
}
|
|
|
|
type IRepoAccountUpdater<T> = (repoAccount: IRepoAccount, value: T) => void;
|
|
|
|
class NotableDates extends React.Component<INotableDatesProps, INotableDatesState> {
|
|
constructor(props: INotableDatesProps) {
|
|
super(props);
|
|
this.state = {
|
|
repoAccount: cloneDeep(props.selectedAccount),
|
|
isOpen: false
|
|
}
|
|
}
|
|
|
|
private applyChange<T>(value: T, updater: IRepoAccountUpdater<T>) {
|
|
const copiedAccount = cloneDeep(this.state.repoAccount);
|
|
updater(copiedAccount, value);
|
|
this.setState({
|
|
repoAccount: copiedAccount,
|
|
});
|
|
}
|
|
|
|
private handleDateChange(date: Date | null, updater: IRepoAccountUpdater<Moment | undefined>) {
|
|
const momentDate = DateConversions.dateToMoment(date);
|
|
this.applyChange(momentDate, updater);
|
|
}
|
|
|
|
toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
|
|
|
|
private formatDate = (date: Moment | undefined = undefined): string => {
|
|
return date ? DateFormatting.FormatMMDDYYYY(date) : "N/A";
|
|
};
|
|
|
|
private getRetitledDateString = (collaterals: ICollateral[]): string => {
|
|
for (const collateral of collaterals) {
|
|
if (collateral.retitledInLandmarkName) {
|
|
return this.formatDate(collateral.retitledInLandmarkName);
|
|
}
|
|
}
|
|
return this.formatDate();
|
|
};
|
|
|
|
private getRepoDate = (repoAccount: IRepoAccount): string => {
|
|
return this.formatDate(RepoAccountService.GetLatestStatusChangeDate("REPO", repoAccount));
|
|
};
|
|
|
|
private editButton = () => {
|
|
return (
|
|
<button
|
|
className="notable-dates-edit btn btn-info"
|
|
onClick={this.toggleOpen}
|
|
data-test="notable-dates-edit-retitled-date-btn"
|
|
>
|
|
Edit
|
|
</button>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div className="col-sm-4 card notable-dates ml">
|
|
<h5>Notable Dates:</h5>
|
|
<hr />
|
|
<p><b>O4R:</b>
|
|
<span data-test="notable-dates-o4r-date"> {this.formatDate(this.props.selectedAccount.o4RDate)}</span>
|
|
</p>
|
|
<p><b>Repo:</b>
|
|
<span data-test="notable-dates-repo-date"> {this.getRepoDate(this.props.selectedAccount)}</span>
|
|
</p>
|
|
<p><b>Redemption Expired:</b>
|
|
<span data-test="notable-dates-redem-exp-date"> {this.formatDate(this.props.selectedAccount.redemptionExpiredDate)}
|
|
</span>
|
|
{this.state.isOpen ?
|
|
<div>
|
|
<div className="form-group">
|
|
<DatePicker
|
|
className="form-control date-picker"
|
|
placeholderText="mm/dd/yyyy"
|
|
selected={DateConversions.momentToDate(this.state.repoAccount.redemptionExpiredDate)}
|
|
onChange={(date) => this.handleDateChange(date, (a, v) => a.redemptionExpiredDate = v)}
|
|
data-test={"notable-dates-redem-exp-date-picker"}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<button
|
|
className="form-control btn btn-info auction-panel-btn"
|
|
onClick={() => { this.props.saveRepoAccount(this.state.repoAccount) }}
|
|
data-test="notable-dates-redem-exp-submit-btn">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
: null}
|
|
</p>
|
|
<p><b>Retitled:</b>
|
|
<span data-test="notable-dates-retitled-date"> {this.getRetitledDateString(this.props.selectedAccount.collaterals)}</span>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default NotableDates; |