280 lines
12 KiB
TypeScript
280 lines
12 KiB
TypeScript
import moment from "moment";
|
|
import React from "react";
|
|
import FormInput, { FormInputType } from "../../../../components/form-input/FormInput";
|
|
import { IRepoCompany } from "../../../../reducers/RepoCompanyReducer";
|
|
import "./AdminRepoCompanyRow.css";
|
|
|
|
interface IRepoCompanyRowProps {
|
|
repoCompany: IRepoCompany;
|
|
putRepoCompany: (repoCompany: IRepoCompany) => any;
|
|
}
|
|
|
|
interface IRepoCompanyRowState {
|
|
editedRepoCompany?: IRepoCompany;
|
|
}
|
|
|
|
class AdminRepoCompanyRow extends React.Component<IRepoCompanyRowProps, IRepoCompanyRowState> {
|
|
|
|
constructor(props: IRepoCompanyRowProps) {
|
|
super(props);
|
|
this.state = {};
|
|
|
|
this.applyIsActiveChange = this.applyIsActiveChange.bind(this);
|
|
}
|
|
|
|
componentDidUpdate(prevProps: IRepoCompanyRowProps, prevState: IRepoCompanyRowState) {
|
|
if (prevState !== this.state) {
|
|
return;
|
|
}
|
|
|
|
if (prevProps.repoCompany !== this.props.repoCompany) {
|
|
this.setState({
|
|
editedRepoCompany: undefined
|
|
});
|
|
}
|
|
}
|
|
|
|
applyChange(updater: (repoCompany: IRepoCompany) => any) {
|
|
if (!this.state.editedRepoCompany) {
|
|
return;
|
|
}
|
|
|
|
const copiedRepoCompany = {...this.state.editedRepoCompany};
|
|
updater(copiedRepoCompany);
|
|
this.setState({
|
|
editedRepoCompany: copiedRepoCompany
|
|
});
|
|
}
|
|
|
|
applyIsActiveChange(value: string) {
|
|
const isActive = !!parseInt(value);
|
|
const disabledDate = isActive ? undefined : moment();
|
|
this.applyChange(repoCompany => repoCompany.disabledDate = disabledDate);
|
|
}
|
|
|
|
beginEditingRow() {
|
|
this.setState({
|
|
editedRepoCompany: {
|
|
...this.props.repoCompany
|
|
}
|
|
});
|
|
}
|
|
|
|
cancelEditingRow() {
|
|
this.setState({
|
|
editedRepoCompany: undefined
|
|
});
|
|
}
|
|
|
|
hasStringFieldChanged(fieldExtraction: (repoCompany: IRepoCompany) => string | null | undefined) {
|
|
const orig = fieldExtraction(this.props.repoCompany);
|
|
const edited = this.state.editedRepoCompany ? fieldExtraction(this.state.editedRepoCompany) : undefined;
|
|
return (orig || "") !== (edited || "");
|
|
}
|
|
|
|
isRepoCompanyAltered() {
|
|
if (!this.state.editedRepoCompany) {
|
|
return false;
|
|
}
|
|
|
|
return (
|
|
this.props.repoCompany.name !== this.state.editedRepoCompany.name ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.email) ||
|
|
this.props.repoCompany.referenceId !== this.state.editedRepoCompany.referenceId ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.address_Line_1) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.address_Line_2) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.city) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.state) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.zip) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.country) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.phone) ||
|
|
this.hasStringFieldChanged(repoCompany => repoCompany.fax) ||
|
|
!!this.props.repoCompany.disabledDate !== !!this.state.editedRepoCompany.disabledDate
|
|
);
|
|
}
|
|
|
|
isRowDisabled(): boolean {
|
|
return !!this.props.repoCompany.disabledDate;
|
|
}
|
|
|
|
render() {
|
|
if (this.state.editedRepoCompany) {
|
|
const areStringInputsDisabled = !!this.state.editedRepoCompany.disabledDate;
|
|
return (
|
|
<tr className="admin-repo-company-row-form" data-test="input-version">
|
|
<td>
|
|
<FormInput
|
|
placeholder="Name"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.name}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.name = value)}
|
|
data-test="name-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="ReferenceId"
|
|
type={FormInputType.Number}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.referenceId}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.referenceId = value)}
|
|
data-test="referenceid-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Email"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.email}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.email = value)}
|
|
data-test="email-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Address #1"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.address_Line_1}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.address_Line_1 = value)}
|
|
data-test="addr-1-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Address #2"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.address_Line_2}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.address_Line_2 = value)}
|
|
data-test="addr-2-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="City"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.city}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.city = value)}
|
|
data-test="city-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="State"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.state}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.state = value)}
|
|
data-test="state-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="ZIP"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.zip}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.zip = value)}
|
|
data-test="zip-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Country"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.country}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.country = value)}
|
|
data-test="country-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Phone"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.phone}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.phone = value)}
|
|
data-test="phone-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
placeholder="Fax"
|
|
type={FormInputType.Text}
|
|
disabled={areStringInputsDisabled}
|
|
value={this.state.editedRepoCompany.fax}
|
|
onChange={(value) => this.applyChange(repoCompany => repoCompany.fax = value)}
|
|
data-test="fax-field"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<FormInput
|
|
type={FormInputType.Selection}
|
|
value={!this.state.editedRepoCompany.disabledDate ? 1 : 0}
|
|
onChange={this.applyIsActiveChange}
|
|
data-test="is-active-field"
|
|
options={[
|
|
{ value: 1, display: "Yes" },
|
|
{ value: 0, display: "No" }
|
|
]}
|
|
/>
|
|
</td>
|
|
<td className="button-actions-column">
|
|
<button
|
|
type="button"
|
|
className="btn btn-success"
|
|
disabled={!this.isRepoCompanyAltered()}
|
|
onClick={() => this.props.putRepoCompany(this.state.editedRepoCompany!)}
|
|
data-test="save-row-btn"
|
|
>
|
|
<i className="fa fa-floppy-o" aria-hidden="true"/>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-warning"
|
|
onClick={() => this.cancelEditingRow()}
|
|
data-test="cancel-row-btn"
|
|
>
|
|
<i className="fa fa-ban" aria-hidden="true"/>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
} else {
|
|
return (
|
|
<tr className={this.isRowDisabled() ? "disabled-repo-company-row" : ""} data-test="label-version">
|
|
<td><p>{this.props.repoCompany.name}</p></td>
|
|
<td>{this.props.repoCompany.referenceId || "-"}</td>
|
|
<td><p>{this.props.repoCompany.email}</p></td>
|
|
<td><p>{this.props.repoCompany.address_Line_1 || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.address_Line_2 || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.city || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.state || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.zip || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.country || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.phone || "-"}</p></td>
|
|
<td><p>{this.props.repoCompany.fax || "-"}</p></td>
|
|
<td><p>{!this.props.repoCompany.disabledDate ? "Yes" : "No"}</p></td>
|
|
<td className="button-actions-column">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => this.beginEditingRow()}
|
|
data-test="edit-row-btn"
|
|
>
|
|
<i className="fa fa-pencil" aria-hidden="true"/>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
export default AdminRepoCompanyRow; |