Skip to content

Commit fd9645b

Browse files
kamransaleemkamransaleem
committed
nav bar profile and recently viewed
#331
1 parent 9942ee4 commit fd9645b

7 files changed

Lines changed: 322 additions & 282 deletions

File tree

‎waltz-ng/client/navbar/directives/navbar-profile.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<ul class="nav navbar-nav navbar-right"
2+
style="padding-right: 60px">
3+
4+
<li class="dropdown" uib-dropdown>
5+
<a class="clickable"
6+
uib-dropdown-toggle>
7+
<span waltz-if-anonymous="true">
8+
<waltz-icon name="user"></waltz-icon>
9+
Anonymous
10+
<b class="caret"></b>
11+
</span>
12+
<span waltz-if-anonymous="false">
13+
<waltz-icon name="user"></waltz-icon>
14+
Profile
15+
<b class="caret"></b>
16+
</span>
17+
</a>
18+
<ul class="dropdown-menu"
19+
uib-dropdown-menu
20+
style="width: 250px; margin-right:8px"
21+
role="menu"
22+
class="no-overflow">
23+
24+
<li style="margin: 4px"
25+
class="no-overflow">
26+
<span waltz-if-anonymous="false">
27+
<a ui-sref="main.profile.view ({userId: ctrl.user.userName})"
28+
ng-bind="ctrl.user.userName"></a>
29+
</span>
30+
<span waltz-if-anonymous="true">Anonymous</span>
31+
</li>
32+
<li style="margin: 4px"
33+
ng-if="ctrl.allowDirectLogin"
34+
class="no-overflow">
35+
<span waltz-if-anonymous="true">
36+
<a class="clickable"
37+
ng-click="ctrl.login()">
38+
<waltz-icon name="sign-in"></waltz-icon>
39+
<span>Login</span>
40+
</a>
41+
</span>
42+
<span waltz-if-anonymous="false">
43+
<a class="clickable"
44+
ng-click="ctrl.logout()">
45+
<waltz-icon name="sign-out"></waltz-icon>
46+
Logout
47+
</a>
48+
</span>
49+
50+
</li>
51+
52+
<li class="divider" waltz-has-role="ADMIN"></li>
53+
54+
<li style="margin: 4px"
55+
ui-sref-active="side-active"
56+
class="no-overflow">
57+
<span waltz-has-role="ADMIN">
58+
<a ui-sref="main.traits">
59+
<waltz-icon class='text-muted small'
60+
fixed-width="true"
61+
name="cubes"></waltz-icon>
62+
Manage Traits
63+
</a>
64+
</span>
65+
</li>
66+
<li style="margin: 4px"
67+
ui-sref-active="side-active"
68+
class="no-overflow">
69+
<span waltz-has-role="ADMIN">
70+
<a ui-sref="main.user.management">
71+
<waltz-icon class='text-muted small'
72+
fixed-width="true"
73+
name="users"></waltz-icon>
74+
Manage Users
75+
</a>
76+
</span>
77+
</li>
78+
<li style="margin: 4px"
79+
ui-sref-active="side-active"
80+
class="no-overflow">
81+
<span waltz-has-role="APP_EDITOR">
82+
<a ui-sref="main.app.registration">
83+
<waltz-icon class='text-muted small'
84+
fixed-width="true"
85+
name="gift"></waltz-icon>
86+
Register App
87+
</a>
88+
</span>
89+
</li>
90+
<li style="margin: 4px"
91+
ui-sref-active="side-active"
92+
class="no-overflow">
93+
<span waltz-has-role="ADMIN">
94+
<a ui-sref="main.settings">
95+
<waltz-icon class='text-muted small'
96+
fixed-width="true"
97+
name="cog"></waltz-icon>
98+
Settings
99+
</a>
100+
</span>
101+
</li>
102+
<li style="margin: 4px"
103+
ui-sref-active="side-active"
104+
class="no-overflow">
105+
<span waltz-has-role="ADMIN">
106+
<a ui-sref="main.source-data-ratings">
107+
<waltz-icon class='text-muted small'
108+
fixed-width="true"
109+
name="map-signs"></waltz-icon>
110+
Source Data Ratings
111+
</a>
112+
</span>
113+
</li>
114+
<li style="margin: 4px"
115+
ui-sref-active="side-active"
116+
class="no-overflow">
117+
<span waltz-has-role="ADMIN">
118+
<a ui-sref="main.user.log">
119+
<waltz-icon class='text-muted small'
120+
fixed-width="true"
121+
name="list-ul"></waltz-icon>
122+
User Logs
123+
</a>
124+
</span>
125+
</li>
126+
127+
</ul>
128+
129+
<script type="text/ng-template" id="navbar/modal-login.html">
130+
<div class="modal-header">
131+
<h3 class="modal-title">
132+
Login to Waltz
133+
<small ng-bind="logoOverlayText"></small>
134+
</h3>
135+
</div>
136+
137+
<div class="modal-body">
138+
<form>
139+
<label>Username</label>
140+
<input class='form-control input-sm'
141+
ng-model="username"
142+
autofocus
143+
placeholder="username">
144+
145+
<label>Password</label>
146+
<input class='form-control input-sm'
147+
type="password"
148+
ng-model="password"
149+
placeholder="password">
150+
</form>
151+
</div>
152+
153+
<div class="modal-footer">
154+
<button class="btn btn-primary"
155+
type="button"
156+
ng-click="ok()">
157+
OK
158+
</button>
159+
<button class="btn btn-warning"
160+
type="button"
161+
ng-click="cancel()">
162+
Cancel
163+
</button>
164+
</div>
165+
</script>
166+
</li>
167+
168+
</ul>

‎waltz-ng/client/navbar/directives/navbar-profile.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
const bindings = {
2+
3+
};
4+
5+
6+
const template = require('./navbar-profile.html');
7+
8+
9+
const initialState = {
10+
logoOverlayText: '',
11+
logoOverlayColor: '#444',
12+
user: null
13+
};
14+
15+
16+
function loginController($scope, $uibModalInstance, logoOverlayText) {
17+
$scope.ok = () => {
18+
const credentials = {
19+
userName: $scope.username,
20+
password: $scope.password
21+
};
22+
$uibModalInstance.close(credentials);
23+
};
24+
25+
$scope.username = '';
26+
$scope.password = '';
27+
$scope.logoOverlayText = logoOverlayText || '';
28+
29+
$scope.cancel = () => $uibModalInstance.dismiss('cancel');
30+
}
31+
32+
33+
loginController.$inject = [
34+
'$scope',
35+
'$uibModalInstance',
36+
'logoOverlayText'
37+
];
38+
39+
40+
function controller($state,
41+
$uibModal,
42+
settingsStore,
43+
userService) {
44+
const vm = _.defaultsDeep(this, initialState);
45+
46+
settingsStore
47+
.findAll()
48+
.then(settings => {
49+
vm.logoOverlayText = settingsStore.findOrDefault(settings, "ui.logo.overlay.text", "");
50+
vm.logoOverlayColor = settingsStore.findOrDefault(settings, "ui.logo.overlay.color", "");
51+
vm.allowDirectLogin = settingsStore.findOrDefault(settings, 'web.authentication', "") === 'waltz';
52+
});
53+
54+
userService
55+
.whoami(true) // force
56+
.then(user => vm.user = user);
57+
58+
59+
60+
const reloadPage = () => $state.reload();
61+
62+
const rejected = () => alert('Invalid username/password');
63+
64+
const logout = () => userService
65+
.logout()
66+
.then(reloadPage);
67+
68+
69+
vm.logout = logout;
70+
vm.login = () => {
71+
72+
var loginModalInstance = $uibModal.open({
73+
animation: true,
74+
templateUrl: 'navbar/modal-login.html',
75+
controller: loginController,
76+
resolve: {
77+
logoOverlayText: () => vm.logoOverlayText
78+
},
79+
size: 'sm'
80+
});
81+
82+
loginModalInstance.result
83+
.then(
84+
(credentials) => userService
85+
.login(credentials)
86+
.then(reloadPage, rejected),
87+
() => console.log('Login dismissed at: ' + new Date()));
88+
89+
};
90+
91+
}
92+
93+
94+
controller.$inject = [
95+
'$state',
96+
'$uibModal',
97+
'SettingsStore',
98+
'UserService'];
99+
100+
101+
const directive = {
102+
restrict: 'E',
103+
replace: true,
104+
scope: {},
105+
bindToController: bindings,
106+
controllerAs: 'ctrl',
107+
controller,
108+
template
109+
};
110+
111+
112+
export default () => directive;

‎waltz-ng/client/navbar/directives/navbar-recently-viewed.html‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
1-
<li class="dropdown" uib-dropdown>
2-
<a class="clickable"
3-
ng-click="ctrl.refreshHistory()"
4-
uib-dropdown-toggle>
5-
<waltz-icon name="history"></waltz-icon>
6-
Recently Viewed
7-
<b class="caret"></b>
8-
</a>
9-
<ul class="dropdown-menu"
10-
uib-dropdown-menu
11-
style="width: 250px; margin-right:8px"
12-
role="menu"
13-
class="no-overflow">
14-
<li style="margin: 4px"
15-
class="no-overflow"
16-
ng-repeat="item in ctrl.history">
17-
<a ui-sref="{{ ::item.state }} ({{ ::item.stateParams }})">
18-
<waltz-icon class='text-muted small'
19-
fixed-width="true"
20-
name="{{ item.kind | toIconName:'entity' }}"></waltz-icon>
21-
<span ng-bind="::item.name"></span>
22-
</a>
23-
</li>
1+
<ul class="nav navbar-nav navbar-right">
2+
<li class="dropdown" uib-dropdown>
3+
<a class="clickable"
4+
ng-click="ctrl.refreshHistory()"
5+
uib-dropdown-toggle>
6+
<waltz-icon name="history"></waltz-icon>
7+
Recently Viewed
8+
<b class="caret"></b>
9+
</a>
10+
<ul class="dropdown-menu"
11+
uib-dropdown-menu
12+
style="width: 250px; margin-right:8px"
13+
role="menu"
14+
class="no-overflow">
15+
<li style="margin: 4px"
16+
class="no-overflow"
17+
ng-repeat="item in ctrl.history">
18+
<a ui-sref="{{ ::item.state }} ({{ ::item.stateParams }})">
19+
<waltz-icon class='text-muted small'
20+
fixed-width="true"
21+
name="{{ item.kind | toIconName:'entity' }}"></waltz-icon>
22+
<span ng-bind="::item.name"></span>
23+
</a>
24+
</li>
2425

25-
<li class="text-muted"
26-
ng-if="ctrl.history.length == 0">
27-
<span style="margin: 4px">
28-
Recently viewed items will be added as you navigate through Waltz
29-
</span>
30-
</li>
31-
</ul>
32-
</li>
26+
<li class="text-muted"
27+
ng-if="ctrl.history.length == 0">
28+
<span style="margin: 4px">
29+
Recently viewed items will be added as you navigate through Waltz
30+
</span>
31+
</li>
32+
</ul>
33+
</li>
34+
</ul>

‎waltz-ng/client/navbar/directives/navbar-recently-viewed.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const template = require('./navbar-recently-viewed.html');
77

88

99
const initialState = {
10-
history: [],
10+
history: []
1111
};
1212

1313

0 commit comments

Comments
 (0)