add section picker

src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.controller.js

@@ -0,0 +1,82 @@
+(function () {
+    "use strict";
+
+    function SectionPickerController($scope, sectionResource) {
+        
+        var vm = this;
+
+        vm.sections = [];
+        vm.loading = false;
+
+        vm.selectSection = selectSection;
+
+        //////////
+
+        function onInit() {
+
+            vm.loading = true;
+
+            // make sure we can push to something
+            if(!$scope.model.selection) {
+                $scope.model.selection = [];
+            }
+
+            // get sections
+            sectionResource.getSections().then(function(sections){
+                vm.sections = sections;
+
+                setSectionIcon(vm.sections);
+                
+                if($scope.model.selection && $scope.model.selection.length > 0) {
+                    preSelect($scope.model.selection);
+                }
+                
+                vm.loading = false;
+
+            });
+            
+        }
+
+        function preSelect(selection) {
+            angular.forEach(selection, function(selected){
+                angular.forEach(vm.sections, function(section){
+                    if(selected.alias === section.alias) {
+                        section.selected = true;
+                    }
+                });
+            });
+        }
+
+        function selectSection(section) {
+
+            if(!section.selected) {
+                
+                section.selected = true;
+                $scope.model.selection.push(section);
+
+            } else {
+
+                angular.forEach($scope.model.selection, function(selectedSection, index){
+                    if(selectedSection.alias === section.alias) {
+                        section.selected = false;
+                        $scope.model.selection.splice(index, 1);
+                    }
+                });
+
+            }
+
+        }
+
+        function setSectionIcon(sections) {
+            angular.forEach(sections, function(section) {
+                section.icon = "icon-section " + section.cssclass;
+            });
+        }
+
+        onInit();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlays.SectionPickerController", SectionPickerController);
+
+})();

src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.html

@@ -0,0 +1,24 @@
+<div ng-controller="Umbraco.Overlays.SectionPickerController as vm">
+
+    <umb-load-indicator
+        ng-if="vm.loading">
+    </umb-load-indicator>
+
+    <div ng-if="!vm.loading">
+
+        <ul class="umb-tree">
+            <li ng-repeat="section in vm.sections">
+                <div style="padding: 5px 10px;" ng-class="{'umb-tree-node-checked': section.selected }">
+                    <a href="" ng-click="vm.selectSection(section)">
+                        <div style="position: relative; overflow: initial;">
+                            <i class="icon umb-tree-icon {{section.icon}}"></i>
+                        </div>
+                        <span>{{ section.name }}</span>
+                    </a>
+                </div>
+            </li>
+        </ul>
+
+    </div>
+
+</div>

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

@@ -1,13 +1,14 @@
 (function () {
     "use strict";
 
-    function UserGroupEditController($scope, $timeout, $location, usersResource, $routeParams) {
+    function UserGroupEditController($scope, $timeout, $location, $routeParams, usersResource, localizationService) {
 
         var vm = this;
 
         vm.loading = false;
         vm.page = {};
         vm.userGroup = {};
+        vm.labels = {};
 
         vm.goToPage = goToPage;
         vm.openSectionPicker = openSectionPicker;
@@ -21,9 +22,14 @@
 
             vm.loading = true;
 
+            localizationService.localize("general_cancel").then(function(name){
+    	        vm.labels.cancel = name;
+            });
+
             // get user
             usersResource.getUserGroup($routeParams.id).then(function (userGroup) {
                 vm.userGroup = userGroup;
+                setSectionIcon(vm.userGroup.sections);
                 makeBreadcrumbs();
             });
 
@@ -39,7 +45,24 @@
         }
 
         function openSectionPicker() {
-            alert("open section picker");
+            vm.sectionPicker = {
+                title: "Select sections",
+                view: "sectionpicker",
+                selection: vm.userGroup.sections,
+                closeButtonLabel: vm.labels.cancel,
+                show: true,
+                submit: function(model) {
+                    vm.sectionPicker.show = false;
+                    vm.sectionPicker = null;
+                },
+                close: function(oldModel) {
+                    if(oldModel.selection) {
+                        vm.userGroup.sections = oldModel.selection;
+                    }
+                    vm.sectionPicker.show = false;
+                    vm.sectionPicker = null;
+                }
+            };
         }
 
         function openContentPicker() {
@@ -134,6 +157,12 @@
                 }
             ];
         }
+
+        function setSectionIcon(sections) {
+            angular.forEach(sections, function(section) {
+                section.icon = "icon-section " + section.cssclass;
+            });
+        }
  
         init();
 

src/Umbraco.Web.UI.Client/src/views/users/group.html

@@ -38,7 +38,7 @@
                                         <a href=""
                                             style="max-width: 100%;"
                                             class="umb-node-preview-add"
-                                            ng-click="vm.openUserGroupPicker()"
+                                            ng-click="vm.openSectionPicker()"
                                             prevent-default>
                                             <localize key="general_add">Add</localize>
                                         </a>