Skip to content
This repository was archived by the owner on Mar 16, 2021. It is now read-only.

Commit accea9e

Browse files
author
Stefan Cullmann
committed
Lift state up II + localization
1 parent b20fb80 commit accea9e

File tree

8 files changed

+83
-80
lines changed

8 files changed

+83
-80
lines changed

‎SiteGroups.Web/src/components/App.jsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ export default class SiteGroupApp extends React.Component {
2222
}
2323

2424
loadState() {
25+
const self = this;
2526
service
2627
.getSiteGroups()
27-
.then(groups => this.setState({ groups: groups }));
28+
.then(groups => self.setState({ groups: groups }));
2829
service
2930
.getUnassignedSites()
30-
.then(sites => this.setState({ unassignedSites: sites }));
31+
.then(sites => self.setState({ unassignedSites: sites }));
3132
}
3233

3334
editNewGroup(id) {
@@ -44,41 +45,42 @@ export default class SiteGroupApp extends React.Component {
4445
}
4546

4647
save(r) {
48+
const self = this;
4749
const group = r.PortalGroup;
4850
const unassignedSites = r.UnassignedSites;
4951
const isNewGroup = group.PortalGroupId === -1;
50-
5152
service
5253
.save(group)
5354
.then(id => {
5455
if (isNewGroup) group.PortalGroupId = id;
5556
const groups = (isNewGroup
56-
? this.state.groups
57-
: this.state.groups.filter((g) => g.PortalGroupId !== group.PortalGroupId))
57+
? self.state.groups
58+
: self.state.groups.filter((g) => g.PortalGroupId !== group.PortalGroupId))
5859
.concat([group])
5960
.sort((a, b) => a.PortalGroupName < b.PortalGroupName ? -1 : 1);
60-
61-
this.setState({
62-
unassignedSites:unassignedSites,
61+
self.setState({
62+
unassignedSites: unassignedSites,
6363
currentGroup: null,
64-
groups
64+
groups: groups,
6565
});
6666
});
6767
}
6868

6969
deleteGroup(group) {
70+
const self = this;
7071
utils.confirm(
7172
Resx.get("DeleteGroup.Confirm"), Resx.get("Delete"), Resx.get("Cancel"),
7273
() => {
7374
service
7475
.delete(group.PortalGroupId)
7576
.then(() => {
76-
this.setState({
77-
unassignedSites: this.state.unassignedSites
77+
self.setState({
78+
unassignedSites: self.state.unassignedSites
7879
.concat(group.Portals)
7980
.concat([group.MasterPortal])
8081
.sort((a, b) => a.PortalName < b.PortalName ? -1 : 1),
81-
groups: this.state.groups.filter((g) => g.PortalGroupId !== group.PortalGroupId),
82+
groups: self.state.groups.filter((g) => g.PortalGroupId !== group.PortalGroupId),
83+
currentGroup: null,
8284
});
8385
});
8486
});
@@ -89,18 +91,19 @@ export default class SiteGroupApp extends React.Component {
8991
<GridCell>
9092
<PersonaBarPageHeader title={Resx.get("nav_SiteGroups")}>
9193
<NewSiteGroup
92-
unassignedSites={this.state.unassignedSites}
94+
unassignedSites={this.state.currentGroup ? [] : this.state.unassignedSites}
95+
disabled={this.state.currentGroup}
9396
onNewGroup={(siteId) => this.editNewGroup(Number(siteId))}
9497
/>
9598
</PersonaBarPageHeader>
9699
<SiteGroupsTable
97100
groups={this.state.groups}
98101
unassignedSites={this.state.unassignedSites}
99102
currentGroup={this.state.currentGroup}
100-
onEditGroup={(group) => this.setState({currentGroup:group})}
101-
onCancelEditing={()=>this.setState({currentGroup:null})}
102-
onDeleteGroup={(group) => this.deleteGroup(group)}
103-
onSave={(result) => this.save(result)}/>
103+
onEditGroup={(group) => this.setState({ currentGroup: group })}
104+
onCancelEditing={() => this.setState({ currentGroup: null })}
105+
onDeleteGroup={(group) => this.deleteGroup(group)}
106+
onSave={(result) => this.save(result)} />
104107
</GridCell>
105108
);
106109
}

‎SiteGroups.Web/src/components/AssignedSelector.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class AssignedSelector extends React.Component {
88
constructor(props) {
99
super(props);
1010
}
11+
1112
getPortalList(list, type) {
1213
return list.map((portal, index) => {
1314
return <li className={portal.selected ? "selected" : ""}
@@ -16,6 +17,7 @@ class AssignedSelector extends React.Component {
1617
</li>;
1718
});
1819
}
20+
1921
/* eslint-disable react/no-danger */
2022
render() {
2123
const assignedPortals = this.getPortalList(this.props.assignedPortals, "assignedPortals");

‎SiteGroups.Web/src/components/Editor.jsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import "./Editor.less";
1111
export default class SiteGroupEditor extends React.Component {
1212
constructor(props) {
1313
super(props);
14-
}
15-
14+
}
15+
1616
render() {
1717
return <div className="sitegroup-details-editor">
1818
<GridCell>
@@ -47,7 +47,7 @@ export default class SiteGroupEditor extends React.Component {
4747
<SingleLineInputWithError
4848
value={this.props.authenticationDomain}
4949
enabled={true}
50-
onChange={(e) => this.props.onAuthenticationDomainChanged( e.target.value) }
50+
onChange={(e) => this.props.onAuthenticationDomainChanged(e.target.value)}
5151
maxLength={50}
5252
error={this.props.errors.authenticationDomain}
5353
label={Resx.get("AuthenticationDomain.Label")}
@@ -61,17 +61,15 @@ export default class SiteGroupEditor extends React.Component {
6161
</Grid>
6262
<div className="selector-container">
6363
<AssignedSelector
64-
assignedPortals={this.props.portals||[]}
65-
unassignedPortals={this.props.unassignedSites||[]}
64+
assignedPortals={this.props.portals}
65+
unassignedPortals={this.props.unassignedSites}
6666
onClickOnPortal={(i, t) => this.props.onClickOnPortal(i, t)}
6767
moveItemsLeft={() => this.props.onMoveItemsLeft()}
6868
moveItemsRight={() => this.props.onMoveItemsRight()}
6969
moveAll={(direction) => this.props.onMoveAll(direction)}
7070
/>
7171
</div>
7272
</GridCell>
73-
74-
7573
<div className="buttons-box">
7674
{!this.props.isNew && <Button type="secondary" onClick={() => this.props.onDeleteGroup(this.props.group)}>{Resx.get("Delete.Button")}</Button>}
7775
<Button type="secondary" onClick={() => this.props.onCancel()}>{Resx.get("Cancel.Button")}</Button>

‎SiteGroups.Web/src/components/NewGroup.jsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,19 @@ export default class NewSiteGroup extends React.Component {
99
siteId: null
1010
};
1111
}
12+
13+
onNew() {
14+
this.props.onNewGroup(this.state.siteId);
15+
this.setState({
16+
siteId: null
17+
});
18+
}
19+
1220
render() {
21+
if (this.props.disabled && this.state.sitedId) this.setState({ siteId: null });
1322
return (
1423
<div style={{ float: "right" }}>
15-
<select
24+
<select
1625
name="sites"
1726
style={{
1827
padding: "12px",
@@ -29,7 +38,7 @@ export default class NewSiteGroup extends React.Component {
2938
type="primary"
3039
size="large"
3140
disabled={!this.state.siteId}
32-
onClick={() => this.props.onNewGroup(this.state.siteId)}>{Resx.get("NewSiteGroup.Button")}</Button>
41+
onClick={() => this.onNew()}>{Resx.get("NewSiteGroup.Button")}</Button>
3342
</div>
3443
);
3544
}
@@ -38,4 +47,5 @@ export default class NewSiteGroup extends React.Component {
3847
NewSiteGroup.propTypes = {
3948
unassignedSites: React.PropTypes.array,
4049
onNewGroup: React.PropTypes.func,
50+
disabled: React.PropTypes.bool,
4151
};

‎SiteGroups.Web/src/components/Row.jsx

+27-22
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export default class SiteGroupRow extends React.Component {
1212
this.state = {
1313
PortalGroupName: props.group.PortalGroupName || "",
1414
AuthenticationDomain: props.group.AuthenticationDomain,
15-
Portals: JSON.parse(JSON.stringify(props.group.Portals))||[],
16-
UnassignedSites: JSON.parse(JSON.stringify(props.unassignedSites||[]))
15+
Portals: JSON.parse(JSON.stringify(props.group.Portals)) || [],
16+
UnassignedSites: JSON.parse(JSON.stringify(props.unassignedSites || []))
1717
.filter((site) => site.PortalId !== this.props.group.MasterPortal.PortalId),
1818
errors: {
1919
groupName: false,
@@ -23,6 +23,10 @@ export default class SiteGroupRow extends React.Component {
2323
this.submitted = false;
2424
}
2525

26+
componentWillReceiveProps(newProps) {
27+
this.resetState(newProps);
28+
}
29+
2630
clickOnPortal(index, type) {
2731
if (type === "assignedPortals") {
2832
let p = JSON.parse(JSON.stringify(this.state.Portals));
@@ -116,24 +120,24 @@ export default class SiteGroupRow extends React.Component {
116120
this.props.onSave(this.result());
117121
}
118122

119-
resetState() {
123+
cancel() {
124+
this.resetState(this.props);
125+
this.props.onCancelEditing();
126+
}
127+
128+
resetState(props) {
120129
this.setState({
121-
PortalGroupName: this.props.group.PortalGroupName || "",
122-
AuthenticationDomain: this.props.group.AuthenticationDomain,
123-
Portals: JSON.parse(JSON.stringify(this.props.group.Portals)),
124-
UnassignedSites: JSON.parse(JSON.stringify(this.props.unassignedSites)),
130+
PortalGroupName: props.group.PortalGroupName || "",
131+
AuthenticationDomain: props.group.AuthenticationDomain,
132+
Portals: JSON.parse(JSON.stringify(props.group.Portals)),
133+
UnassignedSites: JSON.parse(JSON.stringify(props.unassignedSites)),
125134
errors: {
126135
groupName: false,
127136
authenticationDomain: false,
128137
},
129138
});
130139
}
131140

132-
cancel() {
133-
this.resetState();
134-
this.props.onCancelEditing();
135-
}
136-
137141
isValid() {
138142
let valid = true;
139143
if (this.submitted) {
@@ -169,7 +173,6 @@ export default class SiteGroupRow extends React.Component {
169173
}
170174

171175
render() {
172-
173176
return <div className={"row " + this.props.isOpened} >
174177
<div className="rowHeader">
175178
<GridCell columnSize={45} >
@@ -188,26 +191,28 @@ export default class SiteGroupRow extends React.Component {
188191
<Collapse isOpened={this.props.isOpened}>
189192
<SiteGroupEditor
190193
group={this.props.group}
194+
portalGroupName={this.state.PortalGroupName}
195+
authenticationDomain={this.state.AuthenticationDomain}
196+
errors={this.state.errors}
197+
unassignedSites={this.state.UnassignedSites}
198+
portals={this.state.Portals}
199+
isNew={this.isNew()}
191200
onCancel={() => this.cancel()}
192201
onDeleteGroup={(group) => this.props.onDeleteGroup((group))}
193202
onSave={() => this.save()}
194203
onAuthenticationDomainChanged={(value) => {
195204
this.setState({ AuthenticationDomain: value });
196205
this.isValid();
197206
}}
198-
portalGroupName={this.state.PortalGroupName}
199-
authenticationDomain={this.state.AuthenticationDomain}
200-
errors={this.state.errors}
201-
unassignedSites={this.state.UnassignedSites}
202207
onGroupNameChanged={(value) => {
203208
this.setState({ PortalGroupName: value });
204209
this.isValid();
205210
}}
206-
onClickOnPortal={this.clickOnPortal}
207-
onMoveItemsLeft={this.moveItemsLeft}
208-
onMoveItemsRight={this.moveItemsRight}
209-
onMoveAll={this.moveAll}
210-
isNew={this.isNew()}
211+
onClickOnPortal={(i, t) => this.clickOnPortal(i, t)}
212+
onMoveItemsLeft={() => this.moveItemsLeft()}
213+
onMoveItemsRight={() => this.moveItemsRight()}
214+
onMoveAll={(d) => this.moveAll(d)}
215+
211216
/>
212217
</Collapse>
213218
</div>;

‎SiteGroups.Web/src/components/Table.jsx

+3-16
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ const tableFields = [
1616
width: 10
1717
}
1818
];
19-
2019
export default class SiteGroupsTable extends React.Component {
2120
constructor(props) {
2221
super(props);
2322
this.state = {
2423
renderIndex: -1,
2524
};
2625
}
27-
2826
renderHeader() {
2927
let tableHeaders = tableFields.map((field) => {
3028
return <GridCell
@@ -38,7 +36,6 @@ export default class SiteGroupsTable extends React.Component {
3836
});
3937
return <div id="sitegroups-header-row" className="sitegroups-header-row">{tableHeaders}</div>;
4038
}
41-
4239
renderList() {
4340
const existingGroupRows = (this.props.groups || []).map((group) => {
4441
return <SiteGroupRow
@@ -51,7 +48,7 @@ export default class SiteGroupsTable extends React.Component {
5148
onDeleteGroup={(g) => this.props.onDeleteGroup(g)}>
5249
</SiteGroupRow>;
5350
});
54-
const rows = [this.props.currentGroup && this.props.currentGroup.PortalGroupId === -1 &&
51+
const newRow = this.props.currentGroup && this.props.currentGroup.PortalGroupId === -1 &&
5552
<SiteGroupRow
5653
isOpened={true}
5754
group={this.props.currentGroup}
@@ -60,15 +57,14 @@ export default class SiteGroupsTable extends React.Component {
6057
onSave={(g) => this.props.onSave(g)}
6158
onCancelEditing={() => this.props.onCancelEditing()}
6259
onDeleteGroup={(g) => this.props.onDeleteGroup(g)}>
63-
</SiteGroupRow>].concat(existingGroupRows);
60+
</SiteGroupRow>;
61+
const rows = newRow ? [newRow].concat(existingGroupRows) : existingGroupRows;
6462
if (rows.length > 0) {
6563
return rows;
6664
} else {
6765
return <div className="no-sitegroups-row">{Resx.get("NoData")}</div>;
6866
}
69-
7067
}
71-
7268
render() {
7369
return (
7470
<div className="sitegroups-list-container">
@@ -80,7 +76,6 @@ export default class SiteGroupsTable extends React.Component {
8076
);
8177
}
8278
}
83-
8479
SiteGroupsTable.propTypes = {
8580
groups: React.PropTypes.array,
8681
unassignedSites: React.PropTypes.array,
@@ -90,11 +85,3 @@ SiteGroupsTable.propTypes = {
9085
onCancelEditing: React.PropTypes.func,
9186
onSave: React.PropTypes.func,
9287
};
93-
94-
/*
95-
<SiteGroupEditor
96-
group={this.group}
97-
sites={this.state.unassignedSites.filter((site) => site.PortalId !== this.props.currentGroup.MasterPortal.PortalId)}
98-
onCancelEdit={() => this.setState({ currentGroup: null })}
99-
onSave={(r) => this.saveGroup(r)} />
100-
*/

0 commit comments

Comments
 (0)