feat(peoplePicker): single mode to allow only one person to be selected

Closes ngOfficeUIFabric#473
Rus7am · Sep 19, 2017 · 85ccc91 · 85ccc91
1 parent c92a584
commit 85ccc91
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 2 deletions.
diff --git a/src/components/peoplepicker/demo/index.html b/src/components/peoplepicker/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -72,6 +72,21 @@ <h4><i>Code:</i></h4>
         </uif-people-picker>
       </script>
 
+      <h2>People Picker - Single mode</h2>
+      <div class="usage">Allow selecting only one person with <b><i>uif-single</i></b> attribute.</div>
+      <br>
+      <ng-include src="'single.html'"></ng-include>
+      <h4><i>Code:</i></h4>
+      <raw src="'single.html'"></raw>
+      <br>
+      <script type="text/ng-template" id="single.html">
+        <uif-people-picker uif-people="getPeopleForCompactDemo" ng-model="selectedPeopleCompact" uif-single uif-type="compact" placeholder="Search for people">
+          <uif-people-search-more>
+            <uif-primary-text uif-search-for-text="You are searching for: ">Search organization people</uif-primary-text>
+          </uif-people-search-more>
+        </uif-people-picker>
+      </script>
+
       <h2>People Picker - searching as you type</h2>
       <div class="usage">It's possible to run search automatically when you are typing.</div>
       <div class="usage">By providing <b><i>uif-search-delay="500"</i></b> people picker will run search automatically after specified delay.</div>
@@ -184,4 +199,4 @@ <h4><i>Code:</i></h4>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/src/components/peoplepicker/peoplePickerDirective.spec.ts b/src/components/peoplepicker/peoplePickerDirective.spec.ts
@@ -360,6 +360,90 @@ describe('peoplepicker: <uif-people-picker />', () => {
     }));
   });
 
+  describe('People picker - single mode', () => {
+    let $element: JQuery;
+    let $scope: any;
+
+    beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function, $q: angular.IQService) => {
+      $element = angular.element(`
+       <uif-people-picker uif-single uif-type="compact"
+         uif-people="onSearch"
+         ng-model="selectedPeople"
+         placeholder="Search for people"
+         uif-selected-person-click="personClicked">
+          <uif-people-search-more>
+            <uif-secondary-text>Showing {{sourcePeople.length}} results</uif-secondary-text>
+            <uif-primary-text uif-search-for-text="You are searching for: ">Search organization people</uif-primary-text>
+          </uif-people-search-more>
+        </uif-people-picker>`);
+
+      $scope = $rootScope;
+
+      let defaultGroup: any = {
+        name: 'default', order: 1
+      };
+
+      $scope.people = [{
+        additionalData: [
+          {
+            color: 'magenta',
+            group: defaultGroup,
+            icon: 'Persona.Person2.png',
+            presence: 'available',
+            primaryText: 'Joseph Pena',
+            secondaryText: 'Contoso Inc.'
+          }
+        ],
+        color: 'magenta',
+        group: defaultGroup,
+        icon: 'Persona.Person2.png',
+        presence: 'available',
+        primaryText: 'Russel Miller',
+        secondaryText: 'Sales'
+      },
+      {
+        color: 'magenta',
+        group: defaultGroup,
+        icon: 'Persona.Person2.png',
+        presence: 'available',
+        primaryText: 'Russel Miller',
+        secondaryText: 'Sales'
+      }];
+
+      $scope.onSearch = (query) => {
+        if (!query) {
+          return $scope.people;
+        }
+        let deferred: angular.IDeferred<any> = $q.defer();
+
+        deferred.resolve([$scope.people[1]]);
+
+        return deferred.promise;
+      };
+      $compile($element)($scope);
+      $element = jQuery($element[0]);
+      $scope.$apply();
+    }));
+
+    it('should replace selected person', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+      // add initial selected person
+      $scope.selectedPeople = [$scope.people[1]];
+      $scope.$apply();
+      // check that initial person selected
+      expect($element.find('.ms-PeoplePicker-searchBox .ms-PeoplePicker-persona').length).toBe(1);
+
+      // select another person
+      let $searchInput: JQuery = $element.find('input.ms-PeoplePicker-searchField').first();
+      $searchInput.click();
+      $scope.$apply();
+      let $btn: JQuery = $element.find('.ms-PeoplePicker-resultBtn').first();
+      $btn.click();
+      $scope.$apply();
+      // sheck that initial person replaced with selected one
+      expect($scope.selectedPeople.length).toBe(1);
+    }));
+  });
+
   describe('People picker - disconnected', () => {
     let $element: JQuery;
     let $scope: any;

diff --git a/src/components/peoplepicker/peoplePickerDirective.ts b/src/components/peoplepicker/peoplePickerDirective.ts
@@ -171,10 +171,12 @@ enum PeoplePickerTypes {
  *
  * @property {string} uifType     - People picker type
  * @property {string} ngDisabled  - Disabled state varible name
+ * @property {string} uifSingle   - Allow only one person to be selected
  */
 interface IPeoplePickerAttributes extends angular.IAttributes {
   uifType: string;
   ngDisabled: string;
+  uifSingle: string;
 }
 
 /**
@@ -522,6 +524,9 @@ export class PeoplePickerDirective implements angular.IDirective {
         return;
       }
 
+      if (angular.isDefined($attrs.uifSingle) && $scope.selectedPersons.length > 0) {
+        $scope.selectedPersons.length = 0;
+      }
       $scope.selectedPersons.push(person);
       ngModelCtrl.$setViewValue($scope.selectedPersons);
     };