Produced by Araxis Merge on 3/12/2019 4:22:12 PM Central Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
# | Location | File | Last Modified |
---|---|---|---|
1 | C:\AraxisMergeCompare\Pri_un\CC CC SEOC 1.7\seocui-release1.7@bb33f84589b\cc_seoc_ui\src\components\user-management | UserManagement.js | Tue Jan 29 13:55:38 2019 UTC |
2 | C:\AraxisMergeCompare\Pri_re\Community Care Care Coordination SEOC 1.7-redacted\CC CC SEOC 1.7\seocui-release1.7@bb33f84589b\cc_seoc_ui\src\components\user-management | UserManagement.js | Tue Mar 12 20:42:12 2019 UTC |
Description | Between Files 1 and 2 |
|
---|---|---|
Text Blocks | Lines | |
Unchanged | 1 | 680 |
Changed | 0 | 0 |
Inserted | 0 | 0 |
Removed | 0 | 0 |
Whitespace | |
---|---|
Character case | Differences in character case are significant |
Line endings | Differences in line endings (CR and LF characters) are ignored |
CR/LF characters | Not shown in the comparison detail |
No regular expressions were active.
1 | import Rea ct from 'r eact'; | |
2 | import Pro pTypes fro m 'prop-ty pes'; | |
3 | import { c onnect } f rom 'react -redux'; | |
4 | import { R edirect } from 'reac t-router-d om'; | |
5 | ||
6 | import { s howModal, closeModal , fetchUse rs } from '../../act ions'; | |
7 | import { r oleFilterT ypes } fro m '../../c onstants/f ilterTypes '; | |
8 | import { A DMINISTRAT OR } from '../../con stants/use rRoles'; | |
9 | import { g enerateAle rtData, ge nerateAler tFromRespo nse } from '../../ut ils/messag eUtils'; | |
10 | import req uest from '../../uti ls/request '; | |
11 | import { s tringEqual s, stringC ontains } from '../. ./utils/te xtUtils'; | |
12 | import { e xtend, ext endClone } from '../ ../utils/o bjectUtils '; | |
13 | import { u pdatePageT itle } fro m '../../u tils/pageU tils'; | |
14 | ||
15 | import Lay out from ' ../layout/ Layout'; | |
16 | import Use rScrollTab le from '. /UserScrol lTable'; | |
17 | import Tab leSearch f rom '../ta ble-search /TableSear ch'; | |
18 | import Use rTableFoot er from '. /UserTable Footer'; | |
19 | import Ale rt from '. ./alert/Al ert'; | |
20 | import Del eteUserMod al from '. ./modal/De leteUserMo dal'; | |
21 | ||
22 | class User Management extends R eact.Compo nent { | |
23 | construc tor (props ) { | |
24 | super( props); | |
25 | ||
26 | this.s tate = { | |
27 | cont ent: '', | |
28 | user : this.get EmptyUser( ), | |
29 | sele cted: null , | |
30 | filt erBy: 'ALL ', | |
31 | sear chBy: '', | |
32 | show Edit: fals e | |
33 | }; | |
34 | ||
35 | this.u pdateFilte rBy = this .updateFil terBy.bind (this); | |
36 | this.u pdateSearc hBy = this .updateSea rchBy.bind (this); | |
37 | this.g etUsersLis t = this.g etUsersLis t.bind(thi s); | |
38 | this.u pdateSelec ted = this .updateSel ected.bind (this); | |
39 | this.s howHideEdi tForm = th is.showHid eEditForm. bind(this) ; | |
40 | this.s howEditFor m = this.s howEditFor m.bind(thi s); | |
41 | this.e ditUser = this.editU ser.bind(t his); | |
42 | this.c loseEditFo rm = this. closeEditF orm.bind(t his); | |
43 | this.u pdateUser = this.upd ateUser.bi nd(this); | |
44 | this.i sDuplicate User = thi s.isDuplic ateUser.bi nd(this); | |
45 | this.v alidateUse r = this.v alidateUse r.bind(thi s); | |
46 | this.s aveUser = this.saveU ser.bind(t his); | |
47 | this.i sUserSelec ted = this .isUserSel ected.bind (this); | |
48 | this.d eleteUser = this.del eteUser.bi nd(this); | |
49 | this.r enderDelet eUserModal = this.re nderDelete UserModal. bind(this) ; | |
50 | this.r enderRequi redTag = t his.render RequiredTa g.bind(thi s); | |
51 | } | |
52 | ||
53 | getEmpty User () { | |
54 | return { | |
55 | user Name: '', | |
56 | role : 'VIEWER' , | |
57 | vaNe tworkId: ' ', | |
58 | prev NetworkId: '', | |
59 | doma in: '' | |
60 | }; | |
61 | } | |
62 | ||
63 | componen tDidMount () { | |
64 | if (th is.props.r ole < ADMI NISTRATOR) { | |
65 | this .setState( { content: <Redirect to="/" /> }); | |
66 | } else { | |
67 | this .props.fet chUsers(); | |
68 | this .focusHead ing(); | |
69 | } | |
70 | ||
71 | update PageTitle( 'User Mana gement'); | |
72 | } | |
73 | ||
74 | focusHea ding () { | |
75 | docume nt.querySe lector('.s ubheading- title').fo cus(); | |
76 | } | |
77 | ||
78 | updateFi lterBy (fi lterBy) { | |
79 | this.s etState({ filterBy } ); | |
80 | } | |
81 | ||
82 | updateSe archBy (se archBy) { | |
83 | this.s etState({ searchBy } ); | |
84 | } | |
85 | ||
86 | getUsers List () { | |
87 | return this.prop s.users.fi lter((user ) => { | |
88 | let showUser = true; | |
89 | ||
90 | if ( this.state .filterBy !== 'ALL' && this.st ate.filter By !== use r.role) { | |
91 | sh owUser = f alse; | |
92 | } | |
93 | ||
94 | if ( this.state .searchBy && !string Contains(u ser.userNa me, this.s tate.searc hBy) && !s tringConta ins(user.v aNetworkId , this.sta te.searchB y)) { | |
95 | sh owUser = f alse; | |
96 | } | |
97 | ||
98 | retu rn showUse r; | |
99 | }); | |
100 | } | |
101 | ||
102 | updateSe lected (id ) { | |
103 | this.s etState({ selected: id }); | |
104 | } | |
105 | ||
106 | showHide EditForm ( showEdit = false, ca llback = ( ) => {}) { | |
107 | this.s etState({ | |
108 | cont ent: '', | |
109 | show Edit | |
110 | }, () => { | |
111 | wind ow.onresiz e(); | |
112 | call back(); | |
113 | }); | |
114 | } | |
115 | ||
116 | showEdit Form () { | |
117 | this.s howHideEdi tForm(true , () => { | |
118 | docu ment.query Selector(' .required- tag').focu s(); | |
119 | docu ment.query Selector(' .add-edit- user-row') .scrollInt oView(); | |
120 | }); | |
121 | } | |
122 | ||
123 | editUser () { | |
124 | const user = thi s.props.us ers.filter ((user) => user.id = == this.st ate.select ed)[0]; | |
125 | ||
126 | this.s etState({ user: exte nd({ prevN etworkId: user.vaNet workId }, user) }, t his.showEd itForm); | |
127 | } | |
128 | ||
129 | closeEdi tForm () { | |
130 | this.s etState({ user: this .getEmptyU ser() }, ( ) => { | |
131 | this .showHideE ditForm(fa lse, () => { | |
132 | th is.focusHe ading(); | |
133 | }); | |
134 | }); | |
135 | } | |
136 | ||
137 | updateUs er (newUse r) { | |
138 | this.s etState({ | |
139 | cont ent: '', | |
140 | user : newUser | |
141 | }, win dow.onresi ze); | |
142 | } | |
143 | ||
144 | isDuplic ateUser (c urrentUser = {}) { | |
145 | const duplicates = this.pr ops.users. filter((us er) => { | |
146 | cons t sameName = stringE quals(user .userName, currentUs er.userNam e); | |
147 | cons t sameNetw orkId = st ringEquals (user.vaNe tworkId, c urrentUser .vaNetwork Id); | |
148 | ||
149 | retu rn user.id !== curre ntUser.id && (sameNa me || same NetworkId) ; | |
150 | }); | |
151 | ||
152 | return !!duplica tes.length ; | |
153 | } | |
154 | ||
155 | validate User () { | |
156 | let er rors = []; | |
157 | const alphanumer icRegex = /[^A-Za-z0 -9]/; | |
158 | const userName = this.stat e.user.use rName ? th is.state.u ser.userNa me.trim() : ''; | |
159 | const vaNetworkI d = this.s tate.user. vaNetworkI d ? this.s tate.user. vaNetworkI d.trim() : ''; | |
160 | const domain = t his.state. user.domai n ? this.s tate.user. domain.tri m() : ''; | |
161 | ||
162 | if (th is.isDupli cateUser(t his.state. user)) { | |
163 | erro rs.push('A User alre ady exists with that User Name or VA Net work ID'); | |
164 | } | |
165 | ||
166 | if (!u serName) { | |
167 | erro rs.push('U ser Name i s required '); | |
168 | } else if (userN ame.length > 50) { | |
169 | erro rs.push('U ser Name m ust be les s than or equal to 5 0 characte rs'); | |
170 | } | |
171 | ||
172 | if (!v aNetworkId ) { | |
173 | erro rs.push('V A Network ID is requ ired'); | |
174 | } else if (vaNet workId.mat ch(alphanu mericRegex )) { | |
175 | erro rs.push('V A Network ID must co ntain only letters o r numbers' ); | |
176 | } else if (vaNet workId.len gth > 25) { | |
177 | erro rs.push('V A Network ID must be less than or equal to 25 char acters'); | |
178 | } | |
179 | ||
180 | if (!d omain) { | |
181 | erro rs.push('D omain is r equired'); | |
182 | } else if (domai n.match(al phanumeric Regex)) { | |
183 | erro rs.push('D omain must contain o nly letter s or numbe rs'); | |
184 | } else if (domai n.length > 25) { | |
185 | erro rs.push('D omain must be less t han or equ al to 25 c haracters' ); | |
186 | } | |
187 | ||
188 | return errors.le ngth ? err ors : null ; | |
189 | } | |
190 | ||
191 | saveUser () { | |
192 | let er rors = thi s.validate User(); | |
193 | ||
194 | this.s howHideEdi tForm(true , () => { | |
195 | if ( errors) { | |
196 | th is.setStat e({ conten t: <Alert alert={ ge nerateAler tData(unde fined, err ors, 'erro r') } /> } , () => { | |
197 | window.onr esize(); | |
198 | }) ; | |
199 | } el se { | |
200 | co nst user = extendClo ne(this.st ate.user, { | |
201 | userName: this.state .user.user Name.trim( ), | |
202 | vaNetworkI d: this.st ate.user.v aNetworkId .trim(), | |
203 | domain: th is.state.u ser.domain .trim() | |
204 | }) ; | |
205 | ||
206 | re quest({ | |
207 | type: 'PUT ', | |
208 | endpoint: 'saveUser' , | |
209 | data: user , | |
210 | success: ( ) => { | |
211 | this.pro ps.fetchUs ers(); | |
212 | this.clo seEditForm (); | |
213 | }, | |
214 | error: (re sponse) => { | |
215 | this.set State({ co ntent: gen erateAlert FromRespon se(respons e, 'user') }); | |
216 | } | |
217 | }) ; | |
218 | } | |
219 | }); | |
220 | } | |
221 | ||
222 | isUserSe lected () { | |
223 | const selectedUs er = this. state.sele cted ? thi s.props.us ers.filter ((user) => user.id = == this.st ate.select ed)[0] : n ull; | |
224 | ||
225 | return !!selecte dUser && ! stringEqua ls(selecte dUser.vaNe tworkId, t his.props. currentUse r); | |
226 | } | |
227 | ||
228 | deleteUs er () { | |
229 | const selectedUs er = this. state.sele cted ? thi s.props.us ers.filter ((user) => user.id = == this.st ate.select ed)[0] : n ull; | |
230 | ||
231 | reques t({ | |
232 | type : 'DELETE' , | |
233 | endp oint: 'del eteUser', | |
234 | suff ix: select edUser.vaN etworkId, | |
235 | succ ess: () => { | |
236 | th is.props.f etchUsers( ); | |
237 | th is.props.c loseModal( ); | |
238 | th is.focusHe ading(); | |
239 | th is.updateS elected(nu ll); | |
240 | }, | |
241 | erro r: (respon se) => { | |
242 | th is.props.c loseModal( ); | |
243 | ||
244 | co nst json = response ? JSON.par se(respons e) : {}; | |
245 | co nst apierr or = json. apierror | | { subErr ors: [] }; | |
246 | co nst subErr ors = apie rror.subEr rors || [] ; | |
247 | co nst errors = subErro rs.map((su bError) => subError. field ? `$ {subError. field}: ${ subError.m essage}` : subError. message); | |
248 | le t alertTit le; | |
249 | le t errorDat a = errors ; | |
250 | ||
251 | if (!errorDa ta.length) { | |
252 | if (apierr or.message ) { | |
253 | errorDat a.push(api error.mess age); | |
254 | } else { | |
255 | alertTit le = 'Unab le to dele te the use r'; | |
256 | errorDat a = 'Pleas e try agai n later'; | |
257 | } | |
258 | } | |
259 | ||
260 | th is.setStat e({ conten t: <Alert alert={ ge nerateAler tData(aler tTitle, er rorData, ' error') } /> }); | |
261 | } | |
262 | }); | |
263 | } | |
264 | ||
265 | renderDe leteUserMo dal () { | |
266 | let mo dal = <Del eteUserMod al deleteU ser={this. deleteUser }/>; | |
267 | ||
268 | this.p rops.showM odal({ com ponent: mo dal }); | |
269 | } | |
270 | ||
271 | renderRe quiredTag () { | |
272 | return this.stat e.showEdit ? <p clas sName="req uired-tag" tabIndex= "0">*All f ields are required</ p> : ''; | |
273 | } | |
274 | ||
275 | render ( ) { | |
276 | return ( | |
277 | <Lay out | |
278 | cl assName="u ser-manage ment" | |
279 | he ader={ | |
280 | <TableSear ch | |
281 | title={ 'User Mana gement' } | |
282 | filterOp tions={{ | |
283 | filter s: ['ALL'] .concat(ro leFilterTy pes), | |
284 | filter Label: 'Fi lter by Ro le', | |
285 | filter By: this.s tate.filte rBy, | |
286 | update FilterBy: this.updat eFilterBy | |
287 | }} | |
288 | searchOp tions={{ | |
289 | search Placeholde r: 'Filter by Name', | |
290 | search Label: 'Fi lter by Na me (contai ns)', | |
291 | search By: this.s tate.searc hBy, | |
292 | update SearchBy: this.updat eSearchBy | |
293 | }} | |
294 | disabled ={ this.st ate.showEd it } />} | |
295 | fo oter={ | |
296 | <UserTable Footer | |
297 | isSelect ed={ this. isUserSele cted() } | |
298 | showEdit ={ this.st ate.showEd it } | |
299 | showEdit Form={ thi s.showEdit Form } | |
300 | closeEdi tForm={ th is.closeEd itForm } | |
301 | saveUser ={ this.sa veUser } | |
302 | editUser ={ this.ed itUser } | |
303 | renderDe leteUserMo dal={this. renderDele teUserModa l} | |
304 | />}> | |
305 | { this.state .content } | |
306 | { this.rende rRequiredT ag() } | |
307 | <U serScrollT able | |
308 | showEdit={ this.stat e.showEdit } | |
309 | users={ th is.getUser sList() } | |
310 | user={ thi s.state.us er } | |
311 | updateUser ={ this.up dateUser } | |
312 | selected={ this.stat e.selected } | |
313 | updateSele cted={ thi s.updateSe lected } / > | |
314 | </La yout> | |
315 | ); | |
316 | } | |
317 | } | |
318 | ||
319 | UserManage ment.propT ypes = { | |
320 | role: Pr opTypes.nu mber.isReq uired, | |
321 | users: P ropTypes.a rray.isReq uired, | |
322 | currentU ser: PropT ypes.strin g.isRequir ed, | |
323 | fetchUse rs: PropTy pes.func.i sRequired, | |
324 | closeMod al: PropTy pes.func.i sRequired, | |
325 | showModa l: PropTyp es.func.is Required | |
326 | }; | |
327 | ||
328 | const mapS tateToProp s = (state ) => ({ | |
329 | role: st ate.sessio n.role, | |
330 | users: s tate.users , | |
331 | currentU ser: state .session.u ser | |
332 | }); | |
333 | ||
334 | const mapD ispatchToP rops = (di spatch) => ({ | |
335 | fetchUse rs: () => dispatch(f etchUsers( )), | |
336 | showModa l: (modal) => dispat ch(showMod al(modal)) , | |
337 | closeMod al: (modal ) => dispa tch(closeM odal(modal )) | |
338 | }); | |
339 | ||
340 | export def ault conne ct(mapStat eToProps, mapDispatc hToProps)( UserManage ment); |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.