Skip to content

Commit 0648b60

Browse files
spamhurtsspamhurts
authored
1. added dirty state detection to New Animal Wizard (#257)
2. added warning for navigating away from page with unsaved changes 3. added default values for ownerInstitution and responsibleInstitution 4. updated snapshots
1 parent b22a6f6 commit 0648b60

8 files changed

Lines changed: 502 additions & 350 deletions

File tree

‎snprc_ehr/src/client/NewAnimalPage/NewAnimalPage.jsx‎

Lines changed: 166 additions & 164 deletions
Large diffs are not rendered by default.

‎snprc_ehr/src/client/NewAnimalPage/components/AccountPanel.jsx‎

Lines changed: 138 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -3,161 +3,161 @@ import Select from 'react-select'
33
import InfoPanel from './InfoPanel'
44

55
export default class AccountPanel extends React.Component {
6-
componentDidMount = () => {
7-
this.props.preventNext()
8-
}
6+
componentDidMount = () => {
7+
this.props.preventNext()
8+
}
99

10-
handleAccountChange = option => {
11-
this.props.handleDataChange('animalAccount', option)
12-
}
10+
handleAccountChange = option => {
11+
this.props.handleDataChange('animalAccount', option)
12+
}
1313

14-
handleColonyChange = option => {
15-
this.props.handleDataChange('colony', option)
16-
}
14+
handleColonyChange = option => {
15+
this.props.handleDataChange('colony', option)
16+
}
1717

18-
handleOwnerInstitutionChange = option => {
19-
this.props.handleDataChange('ownerInstitution', option)
20-
}
18+
handleOwnerInstitutionChange = option => {
19+
this.props.handleDataChange('ownerInstitution', option)
20+
}
2121

22-
handleIacucChange = option => {
23-
this.props.handleDataChange('iacuc', option)
24-
}
22+
handleIacucChange = option => {
23+
this.props.handleDataChange('iacuc', option)
24+
}
2525

26-
handlePedigreeChange = option => {
27-
this.props.handleDataChange('pedigree', option)
28-
}
26+
handlePedigreeChange = option => {
27+
this.props.handleDataChange('pedigree', option)
28+
}
2929

30-
handleResponsibleInstitutionChange = option => {
31-
this.props.handleDataChange('responsibleInstitution', option)
32-
}
30+
handleResponsibleInstitutionChange = option => {
31+
this.props.handleDataChange('responsibleInstitution', option)
32+
}
3333

34-
render() {
35-
const { animalAccount, colony, pedigree, iacuc, responsibleInstitution, ownerInstitution } = this.props.newAnimalData
34+
render() {
35+
const { animalAccount, colony, pedigree, iacuc, responsibleInstitution, ownerInstitution } = this.props.newAnimalData
3636

37-
return (
38-
<>
39-
<div className="wizard-panel__rows" id="account-panel">
40-
<div className="wizard-panel__row" id="account-row">
41-
<div className="wizard-panel__col">
42-
<label className="field-label">Account</label>
43-
<Select
44-
autoFocus
45-
className="shared-dropdown"
46-
classNamePrefix="shared-select"
47-
defaultValue={ animalAccount }
48-
id="account-select"
49-
isClearable
50-
isDisabled={ this.props.disabled }
51-
isLoading={ this.props.accountList.length === 0 }
52-
onChange={ this.handleAccountChange }
53-
options={ this.props.accountList }
54-
placeholder="Select Account"
55-
/>
56-
</div>
57-
</div>
58-
{this.props.colonyList.length > 0
59-
&& (
60-
<div className="wizard-panel__row" id="colony-row">
61-
<div className="wizard-panel__col">
62-
<label className="field-label">Colony</label>
63-
<Select
64-
className="shared-dropdown"
65-
classNamePrefix="shared-select"
66-
defaultValue={ colony }
67-
id="colony-select"
68-
isClearable
69-
isDisabled={ this.props.disabled }
70-
isLoading={ this.props.colonyList.length === 0 }
71-
onChange={ this.handleColonyChange }
72-
options={ this.props.colonyList }
73-
placeholder="Select Colony"
74-
/>
75-
</div>
76-
</div>
77-
)}
78-
<div className="wizard-panel__row" id="iacuc-row">
79-
<div className="wizard-panel__col">
80-
<label className="field-label">IACUC</label>
81-
<Select
82-
className="shared-dropdown"
83-
classNamePrefix="shared-select"
84-
defaultValue={ iacuc }
85-
id="iacuc-select"
86-
isClearable
87-
isDisabled={ this.props.disabled }
88-
isLoading={ this.props.iacucList.length === 0 }
89-
onChange={ this.handleIacucChange }
90-
options={ this.props.iacucList }
91-
placeholder="Select IACUC"
92-
/>
93-
</div>
94-
</div>
95-
{this.props.pedigreeList.length > 0 && (
96-
<div className="wizard-panel__row" id="pedigree-row">
97-
<div className="wizard-panel__col">
98-
<label className="field-label">Pedigree</label>
99-
<Select
100-
className="shared-dropdown"
101-
classNamePrefix="shared-select"
102-
defaultValue={ pedigree }
103-
id="pedigree-select"
104-
isClearable
105-
isDisabled={ this.props.disabled }
106-
isLoading={ this.props.pedigreeList.length === 0 }
107-
onChange={ this.handlePedigreeChange }
108-
options={ this.props.pedigreeList }
109-
placeholder="Select Pedigree"
110-
/>
111-
</div>
112-
</div>
113-
)}
114-
<div className="wizard-panel__row" id="owner-institution-row">
37+
return (
38+
<>
39+
<div className="wizard-panel__rows" id="account-panel">
40+
<div className="wizard-panel__row" id="account-row">
41+
<div className="wizard-panel__col">
42+
<label className="field-label">Account</label>
43+
<Select
44+
autoFocus
45+
className="shared-dropdown"
46+
classNamePrefix="shared-select"
47+
defaultValue={ animalAccount }
48+
id="account-select"
49+
isClearable
50+
isDisabled={ this.props.disabled }
51+
isLoading={ this.props.accountList.length === 0 }
52+
onChange={ this.handleAccountChange }
53+
options={ this.props.accountList }
54+
placeholder="Select Account"
55+
/>
56+
</div>
57+
</div>
58+
{this.props.colonyList.length > 0
59+
&& (
60+
<div className="wizard-panel__row" id="colony-row">
11561
<div className="wizard-panel__col">
116-
<label className="field-label">Owner</label>
62+
<label className="field-label">Colony</label>
11763
<Select
11864
className="shared-dropdown"
11965
classNamePrefix="shared-select"
120-
defaultValue={ ownerInstitution }
121-
id="owner-select"
66+
defaultValue={ colony }
67+
id="colony-select"
12268
isClearable
12369
isDisabled={ this.props.disabled }
124-
isLoading={ this.props.institutionList.length === 0 }
125-
onChange={ this.handleOwnerInstitutionChange }
126-
options={ this.props.institutionList }
127-
placeholder="Select Owner"
70+
isLoading={ this.props.colonyList.length === 0 }
71+
onChange={ this.handleColonyChange }
72+
options={ this.props.colonyList }
73+
placeholder="Select Colony"
12874
/>
12975
</div>
13076
</div>
131-
<div className="wizard-panel__row" id="responsible-institution-row">
132-
<div className="wizard-panel__col">
133-
<label className="field-label">Responsible Institution</label>
134-
<Select
135-
className="shared-dropdown"
136-
classNamePrefix="shared-select"
137-
defaultValue={ responsibleInstitution }
138-
id="responsible-institution-select"
139-
isClearable
140-
isDisabled={ this.props.disabled }
141-
isLoading={ this.props.institutionList.length === 0 }
142-
onChange={ this.handleResponsibleInstitutionChange }
143-
options={ this.props.institutionList }
144-
placeholder="Select Responsible Institution"
145-
/>
146-
</div>
77+
)}
78+
<div className="wizard-panel__row" id="iacuc-row">
79+
<div className="wizard-panel__col">
80+
<label className="field-label">IACUC</label>
81+
<Select
82+
className="shared-dropdown"
83+
classNamePrefix="shared-select"
84+
defaultValue={ iacuc }
85+
id="iacuc-select"
86+
isClearable
87+
isDisabled={ this.props.disabled }
88+
isLoading={ this.props.iacucList.length === 0 }
89+
onChange={ this.handleIacucChange }
90+
options={ this.props.iacucList }
91+
placeholder="Select IACUC"
92+
/>
93+
</div>
94+
</div>
95+
{this.props.pedigreeList.length > 0 && (
96+
<div className="wizard-panel__row" id="pedigree-row">
97+
<div className="wizard-panel__col">
98+
<label className="field-label">Pedigree</label>
99+
<Select
100+
className="shared-dropdown"
101+
classNamePrefix="shared-select"
102+
defaultValue={ pedigree }
103+
id="pedigree-select"
104+
isClearable
105+
isDisabled={ this.props.disabled }
106+
isLoading={ this.props.pedigreeList.length === 0 }
107+
onChange={ this.handlePedigreeChange }
108+
options={ this.props.pedigreeList }
109+
placeholder="Select Pedigree"
110+
/>
147111
</div>
148112
</div>
149-
<InfoPanel
150-
messages={
151-
[{ propTest: !animalAccount, colName: 'Account' },
152-
{ propTest: (!colony && this.props.colonyList.length > 0), colName: 'Colony' },
153-
{ propTest: !iacuc, colName: 'IACUC' },
154-
{ propTest: (!pedigree && this.props.pedigreeList.length > 0), colName: 'Pedigree' },
155-
{ propTest: !ownerInstitution, colName: 'Owner' },
156-
{ propTest: !responsibleInstitution, colName: 'Responsible Institution' }
157-
]
158-
}
159-
/>
160-
</>
161-
)
162-
}
113+
)}
114+
<div className="wizard-panel__row" id="owner-institution-row">
115+
<div className="wizard-panel__col">
116+
<label className="field-label">Owner</label>
117+
<Select
118+
className="shared-dropdown"
119+
classNamePrefix="shared-select"
120+
id="owner-select"
121+
isClearable
122+
isDisabled={ this.props.disabled }
123+
isLoading={ this.props.institutionList.length === 0 }
124+
onChange={ this.handleOwnerInstitutionChange }
125+
options={ this.props.institutionList }
126+
placeholder="Select Owner"
127+
value={ ownerInstitution }
128+
/>
129+
</div>
130+
</div>
131+
<div className="wizard-panel__row" id="responsible-institution-row">
132+
<div className="wizard-panel__col">
133+
<label className="field-label">Responsible Institution</label>
134+
<Select
135+
className="shared-dropdown"
136+
classNamePrefix="shared-select"
137+
id="responsible-institution-select"
138+
isClearable
139+
isDisabled={ this.props.disabled }
140+
isLoading={ this.props.institutionList.length === 0 }
141+
onChange={ this.handleResponsibleInstitutionChange }
142+
options={ this.props.institutionList }
143+
placeholder="Select Responsible Institution"
144+
value={ responsibleInstitution }
145+
/>
146+
</div>
147+
</div>
148+
</div>
149+
<InfoPanel
150+
messages={
151+
[{ propTest: !animalAccount, colName: 'Account' },
152+
{ propTest: (!colony && this.props.colonyList.length > 0), colName: 'Colony' },
153+
{ propTest: !iacuc, colName: 'IACUC' },
154+
{ propTest: (!pedigree && this.props.pedigreeList.length > 0), colName: 'Pedigree' },
155+
{ propTest: !ownerInstitution, colName: 'Owner' },
156+
{ propTest: !responsibleInstitution, colName: 'Responsible Institution' }
157+
]
158+
}
159+
/>
160+
</>
161+
)
162+
}
163163
}

‎snprc_ehr/src/client/NewAnimalPage/constants/NewAnimalState.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import moment from 'moment'
2+
import defaults from './index'
23

34
const NewAnimalState = () => {
5+
const { defaultInstitution } = defaults
6+
47
return ({
58
currentPanel: 1,
69
selectedOption: undefined,
10+
isDirty: false,
711
newAnimalData: {
812
selectedOption: undefined,
913
id: undefined,
@@ -17,8 +21,8 @@ const NewAnimalState = () => {
1721
species: undefined,
1822
colony: undefined,
1923
animalAccount: undefined,
20-
ownerInstitution: undefined,
21-
responsibleInstitution: undefined,
24+
ownerInstitution: defaultInstitution,
25+
responsibleInstitution: defaultInstitution,
2226
room: undefined,
2327
cage: { value: undefined },
2428
diet: undefined,
@@ -41,7 +45,6 @@ const NewAnimalState = () => {
4145
isLoading: true,
4246
hasError: false,
4347
preventNext: true,
44-
saveOk: false,
4548
showSaveModal: false,
4649
showCancelModal: false,
4750
showSpeciesChangeModal: false,

‎snprc_ehr/src/client/NewAnimalPage/constants/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
22
debug: false,
3-
numPanels: 5
3+
numPanels: 5,
4+
defaultInstitution: { id: 0, value: 1, label: 'TxBiomed - Texas Biomedical Research Institute' }
45
}

0 commit comments

Comments
 (0)