diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js index 65f119fe9f..7a3bc8fc92 100644 --- a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js @@ -1,230 +1,30 @@ (function () { "use strict"; - function UsersOverviewController($scope, $timeout, $location, usersResource) { + function UsersOverviewController($scope) { var vm = this; vm.page = {}; vm.page.name = "Users"; - vm.users = []; - vm.userGroups = []; - vm.userStates = []; - vm.selection = []; - vm.newUser = {}; - vm.newUser.userGroups = []; - vm.usersViewState = 'overview'; - - vm.usersPagination = { - "pageNumber": 1, - "totalPages": 5 - } - - vm.layouts = [ + vm.page.navigation = [ { - "icon": "icon-thumbnails-small", - "path": "1", - "selected": true + "name": "Users", + "icon": "icon-user", + "view": "views/usersV2/views/users/users.html", + "active": true }, { - "icon": "icon-list", - "path": "2", - "selected": true + "name": "Roles", + "icon": "icon-users", + "view": "views/usersV2/views/roles/roles.html" } ]; - vm.activeLayout = { - "icon": "icon-thumbnails-small", - "path": "1", - "selected": true - }; - - vm.defaultButton = { - labelKey:"users_inviteUser", - handler: function() { - vm.setUsersViewState('inviteUser'); - } - }; - - vm.subButtons = [ - { - labelKey: "users_createUser", - handler: function () { - vm.setUsersViewState('createUser'); - } - } - ]; - - vm.setUsersViewState = setUsersViewState; - vm.getUserStateType = getUserStateType; - vm.selectLayout = selectLayout; - vm.selectUser = selectUser; - vm.clearSelection = clearSelection; - vm.goToUser = goToUser; - vm.disableUser = disableUser; - vm.openUserGroupPicker = openUserGroupPicker; - vm.removeSelectedUserGroup = removeSelectedUserGroup; - vm.selectAll = selectAll; - vm.areAllSelected = areAllSelected; - function init() { - - vm.loading = true; - - // Get users - usersResource.getUsers().then(function (users) { - vm.users = users; - vm.userStates = getUserStates(vm.users); - formatDates(vm.users); - }); - - // Get user groups - usersResource.getUserGroups().then(function (userGroups) { - vm.userGroups = userGroups; - }); - - // fake loading - $timeout(function () { - vm.loading = false; - }, 500); - - } - - function setUsersViewState(state) { - vm.usersViewState = state; - } - - function getUserStateType(state) { - switch (state) { - case "disabled" || "umbracoDisabled": - return "danger"; - case "pending": - return "warning"; - default: - return "success"; - } - } - - function selectLayout(selectedLayout) { - - angular.forEach(vm.layouts, function(layout){ - layout.active = false; - }); - - selectedLayout.active = true; - vm.activeLayout = selectedLayout; - } - - function selectUser(user, selection) { - if(user.selected) { - var index = selection.indexOf(user.id); - selection.splice(index, 1); - user.selected = false; - } else { - user.selected = true; - vm.selection.push(user.id); - } - } - - function clearSelection() { - angular.forEach(vm.users, function(user){ - user.selected = false; - }); - vm.selection = []; - } - - function goToUser(user, event) { - $location.path('users/usersV2/edit/' + user.id); - } - - function disableUser() { - alert("disable users"); - } - - function openUserGroupPicker(event) { - vm.userGroupPicker = { - title: "Select user groups", - view: "itempicker", - event: event, - availableItems: vm.userGroups, - selectedItems: vm.newUser.userGroups, - show: true, - submit: function(model) { - - if(model.selectedItem) { - vm.newUser.userGroups.push(model.selectedItem); - } - - vm.userGroupPicker.show = false; - vm.userGroupPicker = null; - }, - close: function(oldModel) { - vm.userGroupPicker.show = false; - vm.userGroupPicker = null; - } - }; - } - - function removeSelectedUserGroup(index, selection) { - selection.splice(index, 1); - } - - function selectAll() { - if(areAllSelected()) { - vm.selection = []; - angular.forEach(vm.users, function(user){ - user.selected = false; - }); - } else { - // clear selection so we don't add the same user twice - vm.selection = []; - // select all users - angular.forEach(vm.users, function(user){ - user.selected = true; - vm.selection.push(user.id); - }); - } - } - - function areAllSelected() { - if(vm.selection.length === vm.users.length) { - return true; - } - } - - // helpers - function getUserStates(users) { - var userStates = []; - angular.forEach(users, function(user) { - - var newUserState = {"name": user.state, "count": 1}; - var userStateExists = false; - - angular.forEach(userStates, function(userState){ - if(newUserState.name === userState.name) { - userState.count = userState.count + 1; - userStateExists = true; - } - }); - - if(userStateExists === false) { - userStates.push(newUserState); - } - - }); - - return userStates; } - - function formatDates(users) { - angular.forEach(users, function(user){ - if(user.lastLogin) { - user.formattedLastLogin = moment(user.lastLogin).format("MMMM Do YYYY, HH:mm"); - } - }); - } - + init(); } diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html index c7f29c4919..73b858db7a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html +++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html @@ -11,320 +11,15 @@ name-locked="true" hide-icon="true" hide-description="true" + navigation="vm.page.navigation" hide-alias="true"> - -
- - - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - {{ vm.selection.length }} of {{ vm.users.length }} selected - - - - - - - - - - - - - - - -
-
-
- - - - {{ user.state }} - -
-
- {{user.name}} -
- {{ group.name }}, -
-
- -
-
- - -
- - - - - - - - - - - - - - - - - - - - - - -
- - NameUser groupLast LoginStatus
- - - - - - {{user.name}}{{group.name}}, {{ user.formattedLastLogin }} - - {{ user.state }} - -
- -
- - -
- - -
- -
- - -
- - - - ← Take me back - - - -
- -
-
-

Invite user

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.

-
-
-

Create user

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.

-
-
- - - - - - - - - - - - - - - - Add - - - - - - - - - - - - - - - -
- -
+ + @@ -332,11 +27,4 @@ - - - diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html new file mode 100644 index 0000000000..be73bace60 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html @@ -0,0 +1 @@ +
This is my roles overview
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.controller.js new file mode 100644 index 0000000000..39e488ca63 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.controller.js @@ -0,0 +1,232 @@ +(function () { + "use strict"; + + function UsersController($scope, $timeout, $location, usersResource) { + + var vm = this; + + vm.users = []; + vm.userGroups = []; + vm.userStates = []; + vm.selection = []; + vm.newUser = {}; + vm.newUser.userGroups = []; + vm.usersViewState = 'overview'; + + vm.usersPagination = { + "pageNumber": 1, + "totalPages": 5 + } + + vm.layouts = [ + { + "icon": "icon-thumbnails-small", + "path": "1", + "selected": true + }, + { + "icon": "icon-list", + "path": "2", + "selected": true + } + ]; + + vm.activeLayout = { + "icon": "icon-thumbnails-small", + "path": "1", + "selected": true + }; + + vm.defaultButton = { + labelKey:"users_inviteUser", + handler: function() { + vm.setUsersViewState('inviteUser'); + } + }; + + vm.subButtons = [ + { + labelKey: "users_createUser", + handler: function () { + vm.setUsersViewState('createUser'); + } + } + ]; + + vm.setUsersViewState = setUsersViewState; + vm.getUserStateType = getUserStateType; + vm.selectLayout = selectLayout; + vm.selectUser = selectUser; + vm.clearSelection = clearSelection; + vm.goToUser = goToUser; + vm.disableUser = disableUser; + vm.openUserGroupPicker = openUserGroupPicker; + vm.removeSelectedUserGroup = removeSelectedUserGroup; + vm.selectAll = selectAll; + vm.areAllSelected = areAllSelected; + + function init() { + + vm.loading = true; + + // Get users + usersResource.getUsers().then(function (users) { + vm.users = users; + vm.userStates = getUserStates(vm.users); + formatDates(vm.users); + }); + + // Get user groups + usersResource.getUserGroups().then(function (userGroups) { + vm.userGroups = userGroups; + }); + + // fake loading + $timeout(function () { + vm.loading = false; + }, 500); + + } + + function setUsersViewState(state) { + vm.usersViewState = state; + } + + function getUserStateType(state) { + switch (state) { + case "disabled" || "umbracoDisabled": + return "danger"; + case "pending": + return "warning"; + default: + return "success"; + } + } + + function selectLayout(selectedLayout) { + + angular.forEach(vm.layouts, function(layout){ + layout.active = false; + }); + + selectedLayout.active = true; + vm.activeLayout = selectedLayout; + } + + function selectUser(user, selection) { + if(user.selected) { + var index = selection.indexOf(user.id); + selection.splice(index, 1); + user.selected = false; + } else { + user.selected = true; + vm.selection.push(user.id); + } + } + + function clearSelection() { + angular.forEach(vm.users, function(user){ + user.selected = false; + }); + vm.selection = []; + } + + function goToUser(user, event) { + $location.path('users/usersV2/edit/' + user.id); + } + + function disableUser() { + alert("disable users"); + } + + function openUserGroupPicker(event) { + vm.userGroupPicker = { + title: "Select user groups", + view: "itempicker", + event: event, + availableItems: vm.userGroups, + selectedItems: vm.newUser.userGroups, + show: true, + submit: function(model) { + + if(model.selectedItem) { + vm.newUser.userGroups.push(model.selectedItem); + } + + vm.userGroupPicker.show = false; + vm.userGroupPicker = null; + }, + close: function(oldModel) { + vm.userGroupPicker.show = false; + vm.userGroupPicker = null; + } + }; + } + + function removeSelectedUserGroup(index, selection) { + selection.splice(index, 1); + } + + function selectAll() { + if(areAllSelected()) { + vm.selection = []; + angular.forEach(vm.users, function(user){ + user.selected = false; + }); + } else { + // clear selection so we don't add the same user twice + vm.selection = []; + // select all users + angular.forEach(vm.users, function(user){ + user.selected = true; + vm.selection.push(user.id); + }); + } + } + + function areAllSelected() { + if(vm.selection.length === vm.users.length) { + return true; + } + } + + // helpers + function getUserStates(users) { + var userStates = []; + + angular.forEach(users, function(user) { + + var newUserState = {"name": user.state, "count": 1}; + var userStateExists = false; + + angular.forEach(userStates, function(userState){ + if(newUserState.name === userState.name) { + userState.count = userState.count + 1; + userStateExists = true; + } + }); + + if(userStateExists === false) { + userStates.push(newUserState); + } + + }); + + return userStates; + } + + function formatDates(users) { + angular.forEach(users, function(user){ + if(user.lastLogin) { + user.formattedLastLogin = moment(user.lastLogin).format("MMMM Do YYYY, HH:mm"); + } + }); + } + + init(); + + } + + angular.module("umbraco").controller("Umbraco.Editors.Users.UsersController", UsersController); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.html new file mode 100644 index 0000000000..fa34248c61 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/users/users.html @@ -0,0 +1,322 @@ +
+ + + + +
+ + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + {{ vm.selection.length }} of {{ vm.users.length }} selected + + + + + + + + + + + + + + + +
+
+
+ + + + {{ user.state }} + +
+
+ {{user.name}} +
+ {{ group.name }}, +
+
+ +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + NameUser groupLast LoginStatus
+ + + + + + {{user.name}}{{group.name}}, {{ user.formattedLastLogin }} + + {{ user.state }} + +
+ +
+ + +
+ + +
+ +
+ + +
+ + + + ← Take me back + + + +
+ +
+
+

Invite user

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.

+
+
+

Create user

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.

+
+
+ + + + + + + + + + + + + + + + Add + + + + + + + + + + + + + + + +
+ +
+ + + + +