add regimen in-use indicators
parent
69edbb20ce
commit
9f03c6b402
|
@ -83,8 +83,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sequence-list-items {
|
.sequence-list-items,
|
||||||
margin-right: 15px;
|
.regimen-list {
|
||||||
button {
|
button {
|
||||||
label {
|
label {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
@ -101,6 +101,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sequence-list-items {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.sequence-list-panel,
|
.sequence-list-panel,
|
||||||
.regimen-list-panel {
|
.regimen-list-panel {
|
||||||
padding-top: 0.4rem;
|
padding-top: 0.4rem;
|
||||||
|
|
|
@ -6,22 +6,24 @@ import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
|
||||||
|
|
||||||
describe("<RegimensList />", () => {
|
describe("<RegimensList />", () => {
|
||||||
function fakeProps(): RegimensListProps {
|
function fakeProps(): RegimensListProps {
|
||||||
const regimen = fakeRegimen();
|
const regimen1 = fakeRegimen();
|
||||||
regimen.body.name = "Fake Regimen";
|
regimen1.body.name = "Fake Regimen 1";
|
||||||
|
const regimen2 = fakeRegimen();
|
||||||
|
regimen2.body.name = "Fake Regimen 2";
|
||||||
return {
|
return {
|
||||||
dispatch: jest.fn(),
|
dispatch: jest.fn(),
|
||||||
regimens: [regimen, regimen],
|
regimens: [regimen1, regimen2],
|
||||||
regimen: undefined
|
regimen: undefined
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
it("renders", () => {
|
it("renders", () => {
|
||||||
const wrapper = mount(<RegimensList {...fakeProps() } />);
|
const wrapper = mount(<RegimensList {...fakeProps()} />);
|
||||||
expect(wrapper.text()).toContain("Regimen");
|
["Regimens", "Fake Regimen 1", "Fake Regimen 2"]
|
||||||
expect(wrapper.text()).toContain("Fake Regimen Fake Regimen");
|
.map(string => expect(wrapper.text()).toContain(string));
|
||||||
});
|
});
|
||||||
|
|
||||||
it("sets search term", () => {
|
it("sets search term", () => {
|
||||||
const wrapper = shallow(<RegimensList {...fakeProps() } />);
|
const wrapper = shallow(<RegimensList {...fakeProps()} />);
|
||||||
wrapper.find("input").simulate("change",
|
wrapper.find("input").simulate("change",
|
||||||
{ currentTarget: { value: "term" } });
|
{ currentTarget: { value: "term" } });
|
||||||
expect(wrapper.state().searchTerm).toEqual("term");
|
expect(wrapper.state().searchTerm).toEqual("term");
|
||||||
|
|
|
@ -5,16 +5,32 @@ import { render } from "enzyme";
|
||||||
import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
|
import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
|
||||||
|
|
||||||
describe("<RegimenListItem/>", () => {
|
describe("<RegimenListItem/>", () => {
|
||||||
it("renders the base case", () => {
|
const fakeProps = (): RegimenListItemProps => {
|
||||||
const props: RegimenListItemProps = {
|
return {
|
||||||
length: 1,
|
length: 1,
|
||||||
regimen: fakeRegimen(),
|
regimen: fakeRegimen(),
|
||||||
dispatch: jest.fn(),
|
dispatch: jest.fn(),
|
||||||
index: 0
|
index: 0
|
||||||
};
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
it("renders the base case", () => {
|
||||||
|
const props = fakeProps();
|
||||||
const el = render(<RegimenListItem {...props} />);
|
const el = render(<RegimenListItem {...props} />);
|
||||||
const html = el.html();
|
const html = el.html();
|
||||||
expect(html).toContain(props.regimen.body.name);
|
expect(html).toContain(props.regimen.body.name);
|
||||||
expect(html).toContain(props.regimen.body.color);
|
expect(html).toContain(props.regimen.body.color);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("shows in-use indicator", () => {
|
||||||
|
const props = fakeProps();
|
||||||
|
props.regimen.body.in_use = true;
|
||||||
|
const wrapper = render(<RegimenListItem {...props} />);
|
||||||
|
expect(wrapper.find(".in-use").length).toEqual(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("doesn't show in-use indicator", () => {
|
||||||
|
const wrapper = render(<RegimenListItem {...fakeProps()} />);
|
||||||
|
expect(wrapper.find(".in-use").length).toEqual(0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,9 +7,11 @@ import {
|
||||||
TaggedRegimen,
|
TaggedRegimen,
|
||||||
isTaggedRegimen
|
isTaggedRegimen
|
||||||
} from "../../resources/tagged_resources";
|
} from "../../resources/tagged_resources";
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { Content } from "../../constants";
|
||||||
|
|
||||||
export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
|
export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
|
||||||
const name = regimen.body.name || "";
|
const name = (regimen.body.name || "") + (regimen.specialStatus ? " *" : "");
|
||||||
const color = (regimen.body.color) || "gray";
|
const color = (regimen.body.color) || "gray";
|
||||||
const style = [`block`, `full-width`, `fb-button`, `${color}`];
|
const style = [`block`, `full-width`, `fb-button`, `${color}`];
|
||||||
lastUrlChunk() === urlFriendly(name) && style.push("active");
|
lastUrlChunk() === urlFriendly(name) && style.push("active");
|
||||||
|
@ -20,7 +22,9 @@ export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
|
||||||
<button
|
<button
|
||||||
className={style.join(" ")}
|
className={style.join(" ")}
|
||||||
onClick={select(dispatch, regimen)}>
|
onClick={select(dispatch, regimen)}>
|
||||||
{name} {regimen.specialStatus && ("*")}
|
<label>{name}</label>
|
||||||
|
{regimen.body.in_use &&
|
||||||
|
<i className="in-use fa fa-hdd-o" title={t(Content.IN_USE)} />}
|
||||||
</button>
|
</button>
|
||||||
</Link>;
|
</Link>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue