Skip to content

Commit 6795425

Browse files
wridgeuwridgeu
committed
Added everything for Step 11: Assign Multiple Targets
1 parent 7b53705 commit 6795425

10 files changed

+257
-3
lines changed

‎webapp/controller/Home.controller.js

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ sap.ui.define([
1717
},
1818
onNavToEmployees: function () {
1919
this.getRouter().navTo("employeeList");
20+
},
21+
onNavToEmployeeOverview : function () {
22+
this.getRouter().navTo("employeeOverview");
2023
}
2124
});
2225
});

‎webapp/controller/employee/overview/EmployeeOverview.controller.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
sap.ui.define([
2+
"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
3+
], function (BaseController) {
4+
"use strict";
5+
return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.overview.EmployeeOverview", {
6+
});
7+
});

‎webapp/controller/employee/overview/EmployeeOverviewContent.controller.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
sap.ui.define([
2+
"com/mrb/UI5-Navigation-and-Routing/controller/BaseController",
3+
"sap/ui/model/Filter",
4+
"sap/ui/model/FilterOperator",
5+
"sap/ui/model/Sorter",
6+
"sap/m/ViewSettingsDialog",
7+
"sap/m/ViewSettingsItem"
8+
], function(
9+
BaseController,
10+
Filter,
11+
FilterOperator,
12+
Sorter,
13+
ViewSettingsDialog,
14+
ViewSettingsItem
15+
) {
16+
"use strict";
17+
18+
return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.overview.EmployeeOverviewContent", {
19+
20+
onInit: function () {
21+
this._oTable = this.byId("employeesTable");
22+
this._oVSD = null;
23+
this._sSortField = null;
24+
this._bSortDescending = false;
25+
this._aValidSortFields = ["EmployeeID", "FirstName", "LastName"];
26+
this._sSearchQuery = null;
27+
28+
this._initViewSettingsDialog();
29+
},
30+
31+
onSortButtonPressed : function () {
32+
this._oVSD.open();
33+
},
34+
35+
onSearchEmployeesTable : function (oEvent) {
36+
this._applySearchFilter( oEvent.getSource().getValue() );
37+
},
38+
39+
_initViewSettingsDialog : function () {
40+
this._oVSD = new ViewSettingsDialog("vsd", {
41+
confirm: function (oEvent) {
42+
var oSortItem = oEvent.getParameter("sortItem");
43+
this._applySorter(oSortItem.getKey(), oEvent.getParameter("sortDescending"));
44+
}.bind(this)
45+
});
46+
47+
// init sorting (with simple sorters as custom data for all fields)
48+
this._oVSD.addSortItem(new ViewSettingsItem({
49+
key: "EmployeeID",
50+
text: "Employee ID",
51+
selected: true // by default the MockData is sorted by EmployeeID
52+
}));
53+
54+
this._oVSD.addSortItem(new ViewSettingsItem({
55+
key: "FirstName",
56+
text: "First Name",
57+
selected: false
58+
}));
59+
60+
this._oVSD.addSortItem(new ViewSettingsItem({
61+
key: "LastName",
62+
text: "Last Name",
63+
selected: false
64+
}));
65+
},
66+
67+
_applySearchFilter : function (sSearchQuery) {
68+
var aFilters, oFilter, oBinding;
69+
70+
// first check if we already have this search value
71+
if (this._sSearchQuery === sSearchQuery) {
72+
return;
73+
}
74+
this._sSearchQuery = sSearchQuery;
75+
this.byId("searchField").setValue(sSearchQuery);
76+
77+
// add filters for search
78+
aFilters = [];
79+
if (sSearchQuery && sSearchQuery.length > 0) {
80+
aFilters.push(new Filter("FirstName", FilterOperator.Contains, sSearchQuery));
81+
aFilters.push(new Filter("LastName", FilterOperator.Contains, sSearchQuery));
82+
oFilter = new Filter({ filters: aFilters, and: false }); // OR filter
83+
} else {
84+
oFilter = null;
85+
}
86+
87+
// update list binding
88+
oBinding = this._oTable.getBinding("items");
89+
oBinding.filter(oFilter, "Application");
90+
},
91+
92+
/**
93+
* Applies sorting on our table control.
94+
* @param {string} sSortField the name of the field used for sorting
95+
* @param {string} sortDescending true or false as a string or boolean value to specify a descending sorting
96+
* @private
97+
*/
98+
_applySorter : function (sSortField, sortDescending){
99+
var bSortDescending, oBinding, oSorter;
100+
101+
// only continue if we have a valid sort field
102+
if (sSortField && this._aValidSortFields.indexOf(sSortField) > -1) {
103+
104+
// convert the sort order to a boolean value
105+
if (typeof sortDescending === "string") {
106+
bSortDescending = sortDescending === "true";
107+
} else if (typeof sortDescending === "boolean") {
108+
bSortDescending = sortDescending;
109+
} else {
110+
bSortDescending = false;
111+
}
112+
113+
// sort only if the sorter has changed
114+
if (this._sSortField && this._sSortField === sSortField && this._bSortDescending === bSortDescending) {
115+
return;
116+
}
117+
118+
this._sSortField = sSortField;
119+
this._bSortDescending = bSortDescending;
120+
oSorter = new Sorter(sSortField, bSortDescending);
121+
122+
// sync with View Settings Dialog
123+
this._syncViewSettingsDialogSorter(sSortField, bSortDescending);
124+
125+
oBinding = this._oTable.getBinding("items");
126+
oBinding.sort(oSorter);
127+
}
128+
},
129+
130+
_syncViewSettingsDialogSorter : function (sSortField, bSortDescending) {
131+
// the possible keys are: "EmployeeID" | "FirstName" | "LastName"
132+
// Note: no input validation is implemented here
133+
this._oVSD.setSelectedSortItem(sSortField);
134+
this._oVSD.setSortDescending(bSortDescending);
135+
}
136+
137+
});
138+
139+
});

‎webapp/i18n/i18n.properties

+9-1
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,12 @@ tabProjects=Projects
2525
tabHobbies=Hobbies
2626
tabNotes=Notes
2727
FlipToResume=Flip to Resume
28-
FlipToResume.tooltip=See the resume of this employee
28+
FlipToResume.tooltip=See the resume of this employee
29+
#Step 11
30+
EmployeeOverview=Employee Overview
31+
ShowEmployeeOverview=Show Employee Overview
32+
EmployeeOverviewTop=Employee Overview Top
33+
Region=Region
34+
EmployeeID=Employee ID
35+
Phone=Phone
36+
Employees=Employees

‎webapp/i18n/i18n_en.properties

+9-1
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,12 @@ tabProjects=Projects
2525
tabHobbies=Hobbies
2626
tabNotes=Notes
2727
FlipToResume=Flip to Resume
28-
FlipToResume.tooltip=See the resume of this employee
28+
FlipToResume.tooltip=See the resume of this employee
29+
#Step 11
30+
EmployeeOverview=Employee Overview
31+
ShowEmployeeOverview=Show Employee Overview
32+
EmployeeOverviewTop=Employee Overview Top
33+
Region=Region
34+
EmployeeID=Employee ID
35+
Phone=Phone
36+
Employees=Employees

‎webapp/manifest.json

+30
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,14 @@
102102
"pattern": "employees",
103103
"target": "employees"
104104
},
105+
{
106+
"pattern": "employees/overview",
107+
"name": "employeeOverview",
108+
"target": [
109+
"employeeOverviewTop",
110+
"employeeOverviewContent"
111+
]
112+
},
105113
{
106114
"pattern": "employees/{employeeId}",
107115
"name": "employee",
@@ -158,6 +166,28 @@
158166
"viewName": "ResumeNotes",
159167
"controlId": "notesTab",
160168
"controlAggregation": "content"
169+
},
170+
"employeeOverview": {
171+
"viewId": "employeeOverview",
172+
"viewPath": "com.mrb.UI5-Navigation-and-Routing.view.employee.overview",
173+
"viewName": "EmployeeOverview",
174+
"viewLevel": 2
175+
},
176+
"employeeOverviewTop": {
177+
"viewId": "employeeOverviewTop",
178+
"parent": "employeeOverview",
179+
"viewPath": "com.mrb.UI5-Navigation-and-Routing.view.employee.overview",
180+
"viewName": "EmployeeOverviewTop",
181+
"controlId": "EmployeeOverviewParent",
182+
"controlAggregation": "content"
183+
},
184+
"employeeOverviewContent": {
185+
"viewId": "employeeOverviewContent",
186+
"parent": "employeeOverview",
187+
"viewPath": "com.mrb.UI5-Navigation-and-Routing.view.employee.overview",
188+
"viewName": "EmployeeOverviewContent",
189+
"controlId": "EmployeeOverviewParent",
190+
"controlAggregation": "content"
161191
}
162192
}
163193
}

‎webapp/view/Home.view.xml

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<content>
77
<Button id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press=".onDisplayNotFound" class="sapUiTinyMarginEnd"/>
88
<Button id="employeeListBtn" text="{i18n>ShowEmployeeList}" press=".onNavToEmployees" class="sapUiTinyMarginEnd"/>
9-
</content>
9+
<Button id="employeeOverviewBtn" text="{i18n>ShowEmployeeOverview}" press=".onNavToEmployeeOverview" class="sapUiTinyMarginEnd"/>
10+
</content>
1011
</Page>
1112
</mvc:View>

‎webapp/view/employee/overview/EmployeeOverview.view.xml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<mvc:View
2+
controllerName="com.mrb.UI5-Navigation-and-Routing.controller.employee.overview.EmployeeOverview"
3+
xmlns="sap.m"
4+
xmlns:mvc="sap.ui.core.mvc">
5+
<Page id="EmployeeOverviewParent" title="{i18n>EmployeeOverview}"
6+
showNavButton="true"
7+
navButtonPress=".onNavBack"
8+
class="sapUiResponsiveContentPadding">
9+
<content>
10+
<!-- inserted by routing -->
11+
</content>
12+
</Page>
13+
</mvc:View>

‎webapp/view/employee/overview/EmployeeOverviewContent.view.xml

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<mvc:View
2+
controllerName="com.mrb.UI5-Navigation-and-Routing.controller.employee.overview.EmployeeOverviewContent"
3+
xmlns="sap.m"
4+
xmlns:mvc="sap.ui.core.mvc">
5+
<Table id="employeesTable"
6+
items="{/Employees}">
7+
<headerToolbar>
8+
<Toolbar>
9+
<Title text="{i18n>Employees}" level="H2"/>
10+
<ToolbarSpacer />
11+
<SearchField id="searchField" search=".onSearchEmployeesTable" width="50%"/>
12+
<Button icon="sap-icon://sort" press=".onSortButtonPressed"/>
13+
</Toolbar>
14+
</headerToolbar>
15+
<columns>
16+
<Column id="employeeIDCol"><Text text="{i18n>EmployeeID}"/></Column>
17+
<Column id="firstNameCol" demandPopin="true"><Text text="{i18n>FirstName}"/></Column>
18+
<Column id="lastNameCol" demandPopin="true"><Text text="{i18n>LastName}"/></Column>
19+
<Column id="addressCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Address}"/></Column>
20+
<Column id="cityCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>City}"/></Column>
21+
<Column id="regionCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Region}"/></Column>
22+
<Column id="postalCodeCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>PostalCode}"/></Column>
23+
<Column id="countryCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Country}"/></Column>
24+
<Column id="homePhoneCol" minScreenWidth="Tablet" demandPopin="true" hAlign="Right"><Text text="{i18n>Phone}"/></Column>
25+
</columns>
26+
<items>
27+
<ColumnListItem>
28+
<cells>
29+
<Text text="{EmployeeID}"/>
30+
<Text text="{FirstName}"/>
31+
<Text text="{LastName}"/>
32+
<Text text="{Address}"/>
33+
<Text text="{City}"/>
34+
<Text text="{Region}"/>
35+
<Text text="{PostalCode}"/>
36+
<Text text="{Country}"/>
37+
<Text text="{HomePhone}"/>
38+
</cells>
39+
</ColumnListItem>
40+
</items>
41+
</Table>
42+
</mvc:View>

‎webapp/view/employee/overview/EmployeeOverviewTop.view.xml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" class="sapUiMediumMarginBottom">
2+
<Title text="{i18n>EmployeeOverviewTop}"/>
3+
</mvc:View>

0 commit comments

Comments
 (0)