Make new overlay version of memberGroupPicker + use in memberGroupPicker property editor. Add support for "standard" overlays in overlay directive

2015-09-15 14:31:14 +02:00
parent 8710c0e1ca
commit 8ac435f6ee
5 changed files with 125 additions and 39 deletions
@@ -0,0 +1,60 @@
+//used for the member picker dialog
+angular.module("umbraco").controller("Umbraco.Overlays.MemberGroupPickerController",
+    function($scope, eventsService, entityResource, searchService, $log) {
+
+        $scope.dialogTreeEventHandler = $({});
+        $scope.multiPicker = $scope.model.multiPicker;
+
+        function activate() {
+
+          if($scope.multiPicker) {
+             $scope.model.selectedMemberGroups = [];
+          } else {
+             $scope.model.selectedMemberGroup = "";
+          }
+
+        }
+
+        function selectMemberGroup(id) {
+           $scope.model.selectedMemberGroup = id;
+        }
+
+        function selectMemberGroups(id) {
+           $scope.model.selectedMemberGroups.push(id);
+        }
+
+        /** Method used for selecting a node */
+        function select(text, id) {
+
+            if ($scope.model.multiPicker) {
+               selectMemberGroups(id);
+            }
+            else {
+               selectMemberGroup(id);
+               $scope.model.submit($scope.model);
+            }
+        }
+
+        function nodeSelectHandler(ev, args) {
+            args.event.preventDefault();
+            args.event.stopPropagation();
+
+            eventsService.emit("dialogs.memberGroupPicker.select", args);
+
+            //This is a tree node, so we don't have an entity to pass in, it will need to be looked up
+            //from the server in this method.
+            select(args.node.name, args.node.id);
+
+            //toggle checked state
+            args.node.selected = args.node.selected === true ? false : true;
+        }
+
+        $scope.dialogTreeEventHandler.bind("treeNodeSelect", nodeSelectHandler);
+
+        $scope.$on('$destroy', function () {
+            $scope.dialogTreeEventHandler.unbind("treeNodeSelect", nodeSelectHandler);
+        });
+
+        activate();
+
+    });
@@ -0,0 +1,12 @@
+<div ng-controller="Umbraco.Overlays.MemberGroupPickerController">
+
+	<umb-tree section="member"
+				 treealias="memberGroup"
+				 hideheader="true"
+				 hideoptions="true"
+				 isdialog="true"
+				 eventhandler="dialogTreeEventHandler"
+				 enablecheckboxes="{{model.multiPicker}}">
+	</umb-tree>
+
+</div>
@@ -1,7 +1,7 @@
 <div class="umb-overlay umb-overlay-{{position}}" on-outside-click="closeOverLay()">
  <form name="overlayForm" ng-submit="submitForm(model)" novalidate val-form-manager>

-    <div class="umb-overlay-header" ng-if="model.title">
+    <div class="umb-overlay-header">
      <h4>{{model.title}}
        <a class="pull-right" href ng-click="closeOverLay()">
          <i class="icon-delete"></i>
@@ -10,8 +10,14 @@
    </div>

    <div class="umb-overlay-container">
-      <div ng-if="view" ng-include="view"></div>
+
+      <div ng-if="view" ng-switch="view">
+         <div ng-switch-when="memberGroupPicker"><ng-include src="'views/common/overlays/membergrouppicker/membergrouppicker.html'"></ng-include></div>
+         <div ng-switch-default ng-include="view"></div>
+      </div>
+
      <div ng-if="!view" ng-transclude></div>
+
    </div>

    <div class="umb-overlay__item-details" ng-if="model.itemDetails">
@@ -15,38 +15,38 @@ function memberGroupPicker($scope, dialogService){
            $scope.renderModel.push({ name: item, id: item, icon: 'icon-users' });
        });
    }
-	    
-    var dialogOptions = {
-        multiPicker: true,
-        entityType: "MemberGroup",
-        section: "membergroup",
-        treeAlias: "memberGroup",
-        filter: "",
-        filterCssClass: "not-allowed",
-        callback: function (data) {
-            if (angular.isArray(data)) {
-                _.each(data, function (item, i) {
-                    $scope.add(item);
-                });
-            } else {
-                $scope.clear();
-                $scope.add(data);

-            }
-        }
+    $scope.openMemberGroupPicker = function() {
+
+      $scope.memberGroupPicker = {};
+      $scope.memberGroupPicker.multiPicker = true;
+      $scope.memberGroupPicker.view = "memberGroupPicker";
+      $scope.memberGroupPicker.show = true;
+
+      $scope.memberGroupPicker.submit = function(model) {
+
+         if(model.selectedMemberGroups) {
+            _.each(model.selectedMemberGroups, function (item, i) {
+                $scope.add(item);
+            });
+         }
+
+         if(model.selectedMemberGroup) {
+            $scope.clear();
+            $scope.add(model.selectedMemberGroup);
+         }
+
+         $scope.memberGroupPicker.show = false;
+         $scope.memberGroupPicker = null;
+      };
+
+      $scope.memberGroupPicker.close = function(oldModel) {
+         $scope.memberGroupPicker.show = false;
+         $scope.memberGroupPicker = null;
+      };
+
    };

-    //since most of the pre-value config's are used in the dialog options (i.e. maxNumber, minNumber, etc...) we'll merge the 
-    // pre-value config on to the dialog options
-    if($scope.model.config){
-        angular.extend(dialogOptions, $scope.model.config);
-    }
-
-    $scope.openMemberGroupPicker =function() {
-        var d = dialogService.memberGroupPicker(dialogOptions);
-    };
-
-
    $scope.remove =function(index){
        $scope.renderModel.splice(index, 1);
    };
@@ -79,4 +79,4 @@ function memberGroupPicker($scope, dialogService){

 }

-angular.module('umbraco').controller("Umbraco.PropertyEditors.MemberGroupPickerController", memberGroupPicker);
+angular.module('umbraco').controller("Umbraco.PropertyEditors.MemberGroupPickerController", memberGroupPicker);
@@ -1,25 +1,33 @@
 <div ng-controller="Umbraco.PropertyEditors.MemberGroupPickerController" class="umb-editor umb-membergrouppicker">
-    

-    <ul class="unstyled" 
-    		ng-model="renderModel">	
+
+    <ul class="unstyled"
+    		ng-model="renderModel">
    		<li ng-repeat="node in renderModel">

-    			
+

    			<a href="#" prevent-default ng-click="remove($index)">
    				<i class="icon icon-delete red hover-show"></i>
-    				<i class="{{node.icon}} hover-hide"></i> 
+    				<i class="{{node.icon}} hover-hide"></i>
    					{{node.name}}
    			</a>
    		</li>
    	</ul>

-	<ul class="unstyled">	
+	<ul class="unstyled">
 		<li>
 			<a href="#" ng-click="openMemberGroupPicker()" prevent-default>
 				<i class="icon icon-add blue"></i> <localize key="general_add">Add</localize>
 			</a>
 		</li>
 	</ul>
-</div>
+
+   <umb-overlay
+      ng-if="memberGroupPicker.show"
+      model="memberGroupPicker"
+      position="right"
+      view="memberGroupPicker.view">
+   </umb-overlay>
+
+</div>