From fbed82219d7788c102252458e617c3aad61eacc9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 18 May 2017 15:23:38 +0200
Subject: [PATCH] init edit user editor

---
 .../src/common/resources/users.resource.js    |   5 +-
 src/Umbraco.Web.UI.Client/src/less/belle.less |   1 +
 .../src/less/components/umb-avatar.less       |   8 +-
 .../users/umb-user-role-preview.less          |   2 +-
 .../src/less/components/users/umb-user.less   |  20 ++
 .../src/views/users/user.controller.js        | 104 +++++++++
 .../src/views/users/user.html                 | 214 ++++++++++++++++++
 7 files changed, 351 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less

diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index dd307553e7..b69098a9ae 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -21,7 +21,10 @@
                 "lastLogin": "2014-04-25T01:32:21.196Z",
                 "invitedBy": "Edward Flores",
                 "createdBy": "",
-                "state": "active"
+                "state": "active",
+                "userRoles": [],
+                "startNodesContent": [],
+                "startNodesMedia": []
             };
             deferred.resolve(user);
             return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 887b9e7816..637b13b965 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,6 +135,7 @@
 @import "components/users/umb-users.less";
 @import "components/users/umb-user-role-picker-list.less";
 @import "components/users/umb-user-role-preview.less";
+@import "components/users/umb-user.less";
 
 // Utilities
 @import "utilities/_flexbox.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
index 61441f16b0..85b597ab91 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
@@ -50,6 +50,12 @@
     font-size: 20px;
 }
 
+.umb-avatar--xxl {
+    width: 150px;
+    height: 150px;
+    font-size: 20px;
+}
+
 /* Colors */
 
 .umb-avatar--white {
@@ -68,7 +74,7 @@
 }
 
 .umb-avatar--secondary {
-    background-color: @purple-l1;
+    background-color: @purple-l3;
     color: @white;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
index a772a8ff28..a5c9d6ace1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
@@ -3,7 +3,7 @@
     padding-bottom: 10px;
     display: flex;
     box-sizing: border-box;
-    border-bottom: 1px solid @gray-9;
+    border-bottom: 1px solid @gray-8;
 }
 
 .umb-user-role-preview:last-of-type {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less
new file mode 100644
index 0000000000..c4d696c6f8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less
@@ -0,0 +1,20 @@
+.test-group {
+    border: 1px solid @gray-8;
+    border-radius: 3px;
+    margin-bottom: 30px;
+}
+
+.test-group-title {
+    padding: 10px 20px;
+    margin-bottom: 0;
+    background-color: @gray-10;
+    color: @black;
+    border-bottom: none;
+    font-size: 16px;
+    font-weight: bold;
+    color: @black;
+}
+
+.test-group-content {
+    padding: 20px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
index fd3950bde6..1d8ba3ff84 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
@@ -10,6 +10,14 @@
         vm.user = {};
 
         vm.goBack = goBack;
+        vm.openUserRolePicker = openUserRolePicker;
+        vm.openContentPicker = openContentPicker;
+        vm.openMediaPicker = openMediaPicker;
+        vm.removeSelectedItem = removeSelectedItem;
+        vm.disableUser = disableUser;
+        vm.resetPassword = resetPassword;
+        vm.getUserStateType = getUserStateType;
+        vm.changeAvatar = changeAvatar;
 
         function init() {
 
@@ -30,6 +38,102 @@
         function goBack() {
             $location.path("/users/users/overview").search("subview", "users");
         }
+
+        function openUserRolePicker() {
+            vm.userRolePicker = {
+                title: "Select user roles",
+                view: "userrolepicker",
+                selection: vm.user.userRoles,
+                closeButtonLabel: "Cancel",
+                show: true,
+                submit: function(model) {
+                    // apply changes
+                    if(model.selection) {
+                        vm.user.userRoles = model.selection;
+                    }
+                    vm.userRolePicker.show = false;
+                    vm.userRolePicker = null;
+                },
+                close: function(oldModel) {
+                    // rollback on close
+                    if(oldModel.selection) {
+                        vm.user.userRoles = oldModel.selection;
+                    }
+                    vm.userRolePicker.show = false;
+                    vm.userRolePicker = null;
+                }
+            };
+        }
+
+        function openContentPicker() {
+            vm.contentPicker = {
+                title: "Select content start node",
+                view: "contentpicker",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.user.startNodesContent = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function openMediaPicker() {
+            vm.contentPicker = {
+                title: "Select media start node",
+                view: "treepicker",
+                section: "media",
+                treeAlias: "media",
+                entityType: "media",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.user.startNodesMedia = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function removeSelectedItem(index, selection) {
+            selection.splice(index, 1);
+        }
+
+        function disableUser() {
+            alert("disable user");
+        }
+
+        function resetPassword() {
+            alert("reset password");
+        }
+
+        function getUserStateType(state) {
+            switch (state) {
+                case "disabled" || "umbracoDisabled":
+                    return "danger";
+                case "pending":
+                    return "warning";
+                default:
+                    return "success";
+            }
+        }
+
+        function changeAvatar() {
+            alert("change avatar");
+        }
  
         init();
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 208a941200..22d9788148 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -21,6 +21,199 @@
                     </umb-editor-sub-header-content-left>
                 </umb-editor-sub-header>
 
+                <div class="umb-packages-view-wrapper" style="padding: 0;">
+
+                    <div class="umb-package-details">
+
+                        <div class="umb-package-details__main-content">
+                            
+                            <div class="test-group">
+                                <div class="test-group-title">Meta</div>
+                                <div class="test-group-content block-form">
+                                    <umb-control-group label="Email" description="Orci varius natoque penatibus et magnis dis parturient montes">
+                                        <input type="text"
+                                            localize="placeholder" 
+                                            placeholder="@placeholders_entername" 
+                                            class="input-block-level" 
+                                            ng-model="vm.user.email"
+                                            umb-auto-focus />
+                                    </umb-control-group>
+
+                                    <umb-control-group label="Language" description="Orci varius natoque penatibus et magnis dis parturient montes">
+                                        <select class="input-block-level">
+                                            <option value="">Select language</option>
+                                        </select>
+                                    </umb-control-group>
+                                </div>
+                            </div>
+
+                            <div class="test-group">
+                                <div class="test-group-title">Permissions</div>
+                                <div class="test-group-content block-form">
+                                    
+                                    <umb-control-group style="margin-bottom: 25px;" label="Roles" description="Aliquam laoreet metus porta nisi pellentesque">
+
+                                        <umb-user-role-preview
+                                            ng-repeat="userRole in vm.user.userRoles"
+                                            icon="userRole.icon"
+                                            name="userRole.name"
+                                            sections="userRole.sections"
+                                            content-start-nodes="userRole.startNodesContent"
+                                            media-start-nodes="userRole.startNodesMedia"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.userRoles)">
+                                        </umb-user-role-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openUserRolePicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                        
+                                    </umb-control-group>
+
+                                    <umb-control-group style="margin-bottom: 25px;" label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+                                        
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="node in vm.user.startNodesContent"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.startNodesContent)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openContentPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+
+                                    </umb-control-group>
+
+                                    <umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
+
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="node in vm.user.startNodesMedia"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.startNodesMedia)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openMediaPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+
+                                    </umb-control-group>
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="umb-package-details__sidebar">
+
+                            <div class="umb-package-details__section">
+
+                                <div class="flex flex-column justify-center items-center" style="margin-bottom: 20px;">
+                                    <umb-avatar
+                                        color="secondary"
+                                        size="xxl"
+                                        name="{{vm.user.name}}"
+                                        img-src="{{vm.user.avatar}}">
+                                    </umb-avatar>
+                                    <umb-button
+                                        type="button"
+                                        button-style="link"
+                                        action="vm.changeAvatar()"
+                                        label="Change avatar">
+                                    </umb-button>
+                                </div>
+
+                                <!--
+                                <div class="umb-package-details__information-item">
+                                    <div class="umb-package-details__information-item-label">Status</div>
+                                    <div class="umb-package-details__information-item-content">
+                                        <umb-badge
+                                            style="margin-top: 4px;"
+                                            size="s"
+                                            ng-if="user.state !== 'active'"
+                                            color="{{vm.getUserStateType(vm.user.state)}}">
+                                            {{ vm.user.state }}
+                                        </umb-badge>
+                                    </div>
+                                </div>
+                                -->
+
+                                <div class="umb-package-details__information-item">
+                                    <div class="umb-package-details__information-item-label">Last login:</div>
+                                    <div class="umb-package-details__information-item-content">
+                                        <span ng-if="vm.user.lastLogin">{{ vm.user.lastLogin }}</span>
+                                        <span ng-if="!vm.user.lastLogin">The user has not logged in yet</span>
+                                    </div>
+                                </div>
+
+                                <div class="umb-package-details__information-item" ng-if="vm.user.invitedBy">
+                                    <div class="umb-package-details__information-item-label">Invited by:</div>
+                                    <div class="umb-package-details__information-item-content">{{ vm.user.invitedBy }}</div>
+                                </div>
+
+                                 <div class="umb-package-details__information-item" ng-if="vm.user.createdBy">
+                                    <div class="umb-package-details__information-item-label">Created by:</div>
+                                    <div class="umb-package-details__information-item-content">{{ vm.user.createdBy }}</div>
+                                </div>
+
+                            </div>
+
+                            <div class="umb-package-details__section">
+
+                                <div style="margin-bottom: 10px;">
+                                    <umb-button
+                                        ng-if="vm.user.state === 'active'"
+                                        type="button"
+                                        button-style="[danger,block]"
+                                        action="vm.disableUser()"
+                                        label="Disable user"
+                                        size="m">
+                                    </umb-button>
+                                </div>
+
+                                <div style="margin-bottom: 10px;">
+                                    <umb-button
+                                        ng-if="vm.user.state === 'disabled'"
+                                        type="button"
+                                        button-style="[success,block]"
+                                        action="vm.enableUser()"
+                                        label="Enable user"
+                                        size="m">
+                                    </umb-button>
+                                </div>
+
+                                <umb-button
+                                    type="button"
+                                    button-style="[info,block]"
+                                    action="vm.resetPassword()"
+                                    label="Reset password"
+                                    size="m">
+                                </umb-button>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
             </umb-editor-container>
 
             <umb-editor-footer>
@@ -45,4 +238,25 @@
 
     </form>
 
+    <umb-overlay
+        ng-if="vm.userRolePicker.show"
+        model="vm.userRolePicker"
+        view="vm.userRolePicker.view"
+        position="right">
+    </umb-overlay>
+
+    <umb-overlay
+        ng-if="vm.contentPicker.show"
+        model="vm.contentPicker"
+        view="vm.contentPicker.view"
+        position="right">
+    </umb-overlay>
+    
+    <umb-overlay
+        ng-if="vm.mediaPicker.show"
+        model="vm.mediaPicker"
+        view="vm.mediaPicker.view"
+        position="right">
+    </umb-overlay>
+
 </div>