yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prototype user picker

Browse Source
This commit is contained in:
Mads Rasmussen
2017-05-30 17:04:41 +02:00
parent be939b48f9
commit f3763dffe5
7 changed files with 240 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
View File

@@ -170,25 +170,25 @@
"icon": "icon-medal",
"users": [
{
"id": "1",
"id": 1,
"name": "Angela Stone",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
"state": "active"
},
{
"id": "1",
"id": 2,
"name": "Beverly Silva",
"avatar": "",
"state": "disabled"
},
{
"id": "1",
"id": 3,
"name": "Ruth Turner",
"avatar": "",
"state": "pending"
},
{
"id": "1",
"id": 4,
"name": "Arthur Welch",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
"state": "active"

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -136,6 +136,7 @@
@import "components/users/umb-user-group-picker-list.less";
@import "components/users/umb-user-group-preview.less";
@import "components/users/umb-user-preview.less";
@import "components/users/umb-user-picker-list.less";
@import "components/users/umb-user.less";
// Utilities

42
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less Normal file
View File

@@ -0,0 +1,42 @@
.umb-user-picker-list {
display: flex;
flex-direction: column;
}
.umb-user-picker-list-item {
display: flex;
margin-bottom: 5px;
padding: 10px;
align-items: center;
}
.umb-user-picker-list-item:active,
.umb-user-picker-list-item:focus {
text-decoration: none;
}
.umb-user-picker-list-item:hover {
background-color: @gray-10;
text-decoration: none;
}
.umb-user-picker-list-item__avatar {
margin-right: 15px;
position: relative;
}
.umb-user-picker-list-item__checkmark {
position: absolute;
bottom: -3px;
right: -3px;
}
.umb-user-picker-list-item__group {
font-size: 14px;
color: @gray-5;
}
.umb-user-picker-list-item__name {
font-size: 15px;
font-weight: bold;
}

104
src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.controller.js Normal file
View File

@@ -0,0 +1,104 @@
(function () {
"use strict";
function UserPickerController($scope, usersResource) {
var vm = this;
vm.users = [];
vm.loading = false;
vm.usersOptions = {};
vm.selectUser = selectUser;
vm.searchUsers = searchUsers;
vm.changePageNumber = changePageNumber;
//////////
function onInit() {
vm.loading = true;
// make sure we can push to something
if(!$scope.model.selection) {
$scope.model.selection = [];
}
// get users
getUsers();
}
function preSelect(selection, users) {
angular.forEach(selection, function(selected){
angular.forEach(users, function(user){
if(selected.id === user.id) {
user.selected = true;
}
});
});
}
function selectUser(user) {
if(!user.selected) {
user.selected = true;
$scope.model.selection.push(user);
} else {
angular.forEach($scope.model.selection, function(selectedUser, index){
if(selectedUser.id === user.id) {
user.selected = false;
$scope.model.selection.splice(index, 1);
}
});
}
}
var search = _.debounce(function () {
$scope.$apply(function () {
getUsers();
});
}, 500);
function searchUsers() {
search();
}
function getUsers() {
vm.loading = true;
// Get users
usersResource.getPagedResults(vm.usersOptions).then(function (users) {
vm.users = users.items;
vm.usersOptions.pageNumber = users.pageNumber;
vm.usersOptions.pageSize = users.pageSize;
vm.usersOptions.totalItems = users.totalItems;
vm.usersOptions.totalPages = users.totalPages;
preSelect($scope.model.selection, vm.users);
vm.loading = false;
});
}
function changePageNumber(pageNumber) {
vm.usersOptions.pageNumber = pageNumber;
getUsers();
}
onInit();
}
angular.module("umbraco").controller("Umbraco.Overlays.UserPickerController", UserPickerController);
})();

58
src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.html Normal file
View File

@@ -0,0 +1,58 @@
<div ng-controller="Umbraco.Overlays.UserPickerController as vm">
<umb-load-indicator
ng-if="vm.loading">
</umb-load-indicator>
<div class="form-search" style="margin-bottom: 15px;">
<i class="icon-search"></i>
<input type="text"
ng-model="vm.usersOptions.filter"
ng-change="vm.searchUsers()"
class="umb-search-field search-query input-block-level -full-width-input"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
revent-enter-submit
no-dirty-check />
</div>
<div ng-if="!vm.loading">
<div class="umb-user-picker-item-list">
<a href="" class="umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
<div class="umb-user-picker-list-item__avatar">
<umb-checkmark
class="umb-user-picker-list-item__checkmark"
ng-if="user.selected"
checked="user.selected">
</umb-checkmark>
<umb-avatar
size="s"
color="secondary"
name="{{user.name}}"
img-src="{{user.avatars[0]}}"
img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
</umb-avatar>
</div>
<div class="umb-user-picker-list-item__content">
<div class="umb-user-picker-list-item__name">{{ user.name }}</div>
<div class="umb-user-picker-list-item__group">
<span ng-repeat="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span>
</div>
</div>
</a>
</div>
<div class="flex justify-center">
<umb-pagination
ng-if="vm.usersOptions.totalPages"
page-number="vm.usersOptions.pageNumber"
total-pages="vm.usersOptions.totalPages"
on-change="vm.changePageNumber(pageNumber)">
</umb-pagination>
<div>
</div>
</div>

23
src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
View File

@@ -13,6 +13,7 @@
vm.openSectionPicker = openSectionPicker;
vm.openContentPicker = openContentPicker;
vm.openMediaPicker = openMediaPicker;
vm.openUserPicker = openUserPicker;
vm.removeSelectedItem = removeSelectedItem;
vm.getUserStateType = getUserStateType;
@@ -84,6 +85,28 @@
};
}
function openUserPicker() {
vm.userPicker = {
title: "Select users",
view: "userpicker",
selection: vm.userGroup.users,
show: true,
submit: function(model) {
/*
if(model.selection) {
vm.userGroup.startNodesMedia = model.selection;
}
*/
vm.userPicker.show = false;
vm.userPicker = null;
},
close: function(oldModel) {
vm.userPicker.show = false;
vm.userPicker = null;
}
};
}
function removeSelectedItem(index, selection) {
selection.splice(index, 1);
}

9
src/Umbraco.Web.UI.Client/src/views/users/group.html
View File

@@ -114,7 +114,7 @@
<a href=""
style="max-width: 100%;"
class="umb-node-preview-add"
ng-click="vm.openMediaPicker()"
ng-click="vm.openUserPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
@@ -190,4 +190,11 @@
position="right">
</umb-overlay>
<umb-overlay
ng-if="vm.userPicker.show"
model="vm.userPicker"
view="vm.userPicker.view"
position="right">
</umb-overlay>
</div>