Skip to content

Commit 6ef5bb4

Browse files
davidwatkins73davidwatkins73
authored
Merge pull request #334 from kamransaleem/waltz-331-edit-button-outline
Edit button outline bug and refactor of nav bar
2 parents 93e5df8 + 388a8b5 commit 6ef5bb4

19 files changed

Lines changed: 582 additions & 437 deletions

‎waltz-ng/client/navbar/components/nav-search-results.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div class="wns-results">
2+
<div class="row">
3+
<div class="col-md-12">
4+
<h3 style="border-bottom: 1px solid #ccc">
5+
Search Results: <span ng-bind="$ctrl.query"></span>
6+
<small class="pull-right">
7+
<a class="clickable" ng-click="$ctrl.dismiss()">
8+
<waltz-icon name="close"></waltz-icon>
9+
</a>
10+
</small>
11+
</h3>
12+
</div>
13+
</div>
14+
15+
<div class="row">
16+
17+
<div class="col-md-6">
18+
<h4><waltz-icon name="desktop"></waltz-icon> Applications</h4>
19+
<ul class="list-unstyled">
20+
<li ng-repeat="app in $ctrl.results.apps">
21+
<a ui-sref="main.app.view ({id: app.id})">
22+
<span ng-bind="app.name"></span>
23+
<small>
24+
( <span ng-bind="app.assetCode"></span> )
25+
</small>
26+
</a>
27+
</li>
28+
<li ng-show="$ctrl.results.apps.length == 0"
29+
class="text-muted">
30+
No results...
31+
</li>
32+
</ul>
33+
</div>
34+
35+
<div class="col-md-6">
36+
<h4><waltz-icon name="users"></waltz-icon> People</h4>
37+
<ul class="list-unstyled">
38+
<li ng-repeat="person in $ctrl.results.people">
39+
<a ui-sref="main.person.view ({empId: person.employeeId})">
40+
<span ng-bind="person.displayName"></span>
41+
</a>
42+
<small><span ng-bind="person.title"></span></small>
43+
</li>
44+
<li ng-show="$ctrl.results.people.length == 0" class="text-muted">No results...</li>
45+
</ul>
46+
</div>
47+
</div>
48+
49+
<hr/>
50+
51+
<div class="row">
52+
<div class="col-md-6">
53+
<h4><waltz-icon name="puzzle-piece"></waltz-icon> Capabilities</h4>
54+
<ul class="list-unstyled">
55+
<li ng-repeat="capability in $ctrl.results.capabilities">
56+
<a ui-sref="main.capability.view ({id: capability.id})">
57+
<span ng-bind="capability.name"></span>
58+
</a>
59+
<small>
60+
<span ng-bind="capability.description | limitTo:60"></span>
61+
<span ng-if="capability.description.length > 60">...</span>
62+
</small>
63+
</li>
64+
<li ng-show="$ctrl.results.capabilities.length == 0"
65+
class="text-muted">
66+
No results...
67+
</li>
68+
</ul>
69+
</div>
70+
<div class="col-md-6">
71+
<h4><waltz-icon name="sitemap"></waltz-icon> Organisational Units</h4>
72+
<ul class="list-unstyled">
73+
<li ng-repeat="orgUnit in $ctrl.results.orgUnits">
74+
<a ui-sref="main.org-unit.view ({id: orgUnit.id})">
75+
<span ng-bind="orgUnit.name"></span>
76+
</a>
77+
<small>
78+
<span ng-bind="orgUnit.description | limitTo:60"></span>
79+
<span ng-if="orgUnit.description.length > 60">...</span>
80+
</small>
81+
</li>
82+
<li ng-show="$ctrl.results.orgUnits.length == 0"
83+
class="text-muted">
84+
No results...
85+
</li>
86+
</ul>
87+
</div>
88+
89+
</div>
90+
</div>

waltz-ng/client/widgets/nav-search-results.js renamed to waltz-ng/client/navbar/components/nav-search-results.js

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,33 @@
1010
*
1111
*/
1212

13-
export default () => ({
14-
restrict: 'E',
15-
replace: true,
16-
template: require('./nav-search-results.html'),
17-
scope: {
18-
query: '@',
19-
results: '=',
20-
onDismiss: '='
21-
},
22-
link: function(scope, elem) {
23-
scope.dismiss = () => {
24-
if (scope.onDismiss) {
25-
scope.onDismiss();
26-
} else {
27-
console.log('No dismiss handler registered');
28-
}
29-
};
13+
const bindings = {
14+
query: '@',
15+
results: '<',
16+
onDismiss: '<'
17+
};
18+
19+
const template = require('./nav-search-results.html');
20+
21+
22+
function controller() {
23+
const vm = this;
24+
25+
vm.dismiss = () => {
26+
if (vm.onDismiss) {
27+
vm.onDismiss();
28+
} else {
29+
console.log('No dismiss handler registered');
30+
}
3031
}
3132

33+
}
34+
35+
36+
const component = {
37+
template,
38+
bindings,
39+
controller,
40+
};
3241

33-
});
42+
export default component;

‎waltz-ng/client/navbar/components/nav-search-results.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.waltz-nav-search-panel {
2+
top: 42px;
3+
right: 100px;
4+
position: absolute;
5+
background-color: white;
6+
width:75%;
7+
border: 1px solid #ccc;
8+
box-shadow: 0px 4px 5px gray, -5px 4px 7px gray, 5px 4px 7px gray;
9+
10+
.wns-results {
11+
margin: 10px;
12+
padding-right: 10px;
13+
overflow-y: auto;
14+
overflow-x: hidden;
15+
height: 70vh
16+
}
17+
}
18+

‎waltz-ng/client/navbar/components/navbar-search-form.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<ul class="nav navbar-nav navbar-form navbar-right">
2+
<li>
3+
<form role="search">
4+
<div class="form-group">
5+
<div class="input-group"
6+
style="display: table;">
7+
<input type="text"
8+
class="form-control"
9+
ng-model="$ctrl.query"
10+
ng-model-options="{ debounce: 250 }"
11+
ng-change="$ctrl.doSearch()"
12+
ng-blur="$ctrl.dismissResults()"
13+
autocomplete="off"
14+
autofocus="autofocus"
15+
placeholder="Search">
16+
</div>
17+
</div>
18+
</form>
19+
</li>
20+
<waltz-nav-search-results results="$ctrl.searchResults"
21+
query="{{ $ctrl.query }}"
22+
on-dismiss="$ctrl.dismissResults"
23+
ng-if="$ctrl.showSearch()"
24+
class="waltz-nav-search-panel">
25+
</waltz-nav-search-results>
26+
</ul>

‎waltz-ng/client/navbar/components/navbar-search-form.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const bindings = {
2+
};
3+
4+
5+
const initialState = {
6+
query: '',
7+
searchResults: {
8+
show: false,
9+
apps: [],
10+
people: [],
11+
capabilities: [],
12+
orgUnits: []
13+
}
14+
};
15+
16+
17+
const template = require('./navbar-search-form.html');
18+
19+
20+
function controller($timeout,
21+
applicationStore,
22+
capabilityStore,
23+
personStore,
24+
orgUnitStore) {
25+
const searchResults = {
26+
show: false
27+
};
28+
29+
const vm = _.defaultsDeep(this, initialState);
30+
31+
const doSearch = (query) => {
32+
if (_.isEmpty(query)) {
33+
searchResults.show = false;
34+
} else {
35+
searchResults.show = true;
36+
applicationStore
37+
.search(query)
38+
.then(r => searchResults.apps = r);
39+
personStore
40+
.search(query)
41+
.then(r => searchResults.people = r);
42+
capabilityStore
43+
.search(query)
44+
.then(r => searchResults.capabilities = r);
45+
orgUnitStore
46+
.search(query)
47+
.then(r => searchResults.orgUnits = r);
48+
}
49+
};
50+
51+
const dismissResults = () => $timeout(() => { searchResults.show = false; }, 400);
52+
53+
vm.searchResults = searchResults;
54+
vm.doSearch = () => doSearch(vm.query);
55+
vm.showSearch = () => searchResults.show;
56+
vm.dismissResults = dismissResults;
57+
}
58+
59+
controller.$inject = [
60+
'$timeout',
61+
'ApplicationStore',
62+
'CapabilityStore',
63+
'PersonStore',
64+
'OrgUnitStore'
65+
];
66+
67+
68+
const component = {
69+
bindings,
70+
controller,
71+
template
72+
};
73+
74+
75+
export default component;

0 commit comments

Comments
 (0)