Convert <group-list> to a component

src/sidebar/app.js

@@ -140,6 +140,7 @@ module.exports = angular.module('h', [
   .component('annotationShareDialog', require('./components/annotation-share-dialog'))
   .component('annotationThread', require('./components/annotation-thread'))
   .component('dropdownMenuBtn', require('./components/dropdown-menu-btn'))
+  .component('groupList', require('./directive/group-list').component)
   .component('helpLink', require('./components/help-link'))
   .component('helpPanel', require('./components/help-panel'))
   .component('loggedoutMessage', require('./components/loggedout-message'))
@@ -158,7 +159,6 @@ module.exports = angular.module('h', [
   .component('timestamp', require('./components/timestamp'))
 
   // These should use `component()` but will require some changes.
-  .directive('groupList', require('./directive/group-list').directive)
   .directive('markdown', require('./directive/markdown'))
   .directive('topBar', require('./directive/top-bar'))
 

src/sidebar/directive/group-list.js

@@ -4,12 +4,18 @@ var persona = require('../filter/persona');
 var serviceConfig = require('../service-config');
 
 // @ngInject
-function GroupListController($scope, $window, groups, settings) {
-  $scope.isThirdPartyUser = function () {
-    return persona.isThirdPartyUser($scope.auth.userid, settings.authDomain);
+function GroupListController($window, groups, settings, serviceUrl) {
+  this.groups = groups;
+
+  this.createNewGroup = function() {
+    $window.open(serviceUrl('groups.new'), '_blank');
+  };
+
+  this.isThirdPartyUser = function () {
+    return persona.isThirdPartyUser(this.auth.userid, settings.authDomain);
   };
 
-  $scope.leaveGroup = function (groupId) {
+  this.leaveGroup = function (groupId) {
     var groupName = groups.get(groupId).name;
     var message = 'Are you sure you want to leave the group "' +
       groupName + '"?';
@@ -18,42 +24,26 @@ function GroupListController($scope, $window, groups, settings) {
     }
   };
 
-  $scope.focusGroup = function (groupId) {
+  this.focusGroup = function (groupId) {
     groups.focus(groupId);
   };
 
   var svc = serviceConfig(settings);
   if (svc && svc.icon) {
-    $scope.thirdPartyGroupIcon = svc.icon;
+    this.thirdPartyGroupIcon = svc.icon;
   }
 }
 
-/**
- * @ngdoc directive
- * @name groupList
- * @restrict E
- * @description Displays a list of groups of which the user is a member.
- */
-// @ngInject
-function groupList($window, groups, serviceUrl) {
-  return {
+var component = {
   controller: GroupListController,
-    link: function ($scope) {
-      $scope.groups = groups;
-
-      $scope.createNewGroup = function() {
-        $window.open(serviceUrl('groups.new'), '_blank');
-      };
-    },
-    restrict: 'E',
-    scope: {
+  controllerAs: 'vm',
+  bindings: {
     auth: '<',
   },
   template: require('../templates/group_list.html'),
-  };
-}
+};
 
 module.exports = {
-  directive: groupList,
+  component: component,
   Controller: GroupListController,
 };

src/sidebar/templates/group_list.html

-<span ng-if="auth.status === 'logged-out'"
-      ng-switch on="groups.focused().public">
+<span ng-if="vm.auth.status === 'logged-out'"
+      ng-switch on="vm.groups.focused().public">
   <img class="group-list-label__icon group-list-label__icon--third-party"
-    ng-src="{{ thirdPartyGroupIcon }}"
-    ng-if="thirdPartyGroupIcon"
+    ng-src="{{ vm.thirdPartyGroupIcon }}"
+    ng-if="vm.thirdPartyGroupIcon"
     ng-switch-when="true"><!-- nospace
   !--><i class="group-list-label__icon h-icon-public"
-    ng-if="!thirdPartyGroupIcon"
+    ng-if="!vm.thirdPartyGroupIcon"
     ng-switch-when="true"></i><!-- nospace
   !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
-  <span class="group-list-label__label">{{groups.focused().name}}</span>
+  <span class="group-list-label__label">{{vm.groups.focused().name}}</span>
 </span>
 
 <div class="pull-right"
-     ng-if="auth.status === 'logged-in'"
+     ng-if="vm.auth.status === 'logged-in'"
      dropdown
      keyboard-nav>
   <div class="dropdown-toggle"
         dropdown-toggle
         data-toggle="dropdown"
         role="button"
-        ng-switch on="groups.focused().public"
+        ng-switch on="vm.groups.focused().public"
         title="Change the selected group">
     <img class="group-list-label__icon group-list-label__icon--third-party"
-         ng-src="{{ thirdPartyGroupIcon }}"
-         ng-if="thirdPartyGroupIcon"
+         ng-src="{{ vm.thirdPartyGroupIcon }}"
+         ng-if="vm.thirdPartyGroupIcon"
          ng-switch-when="true"><!-- nospace
     !--><i class="group-list-label__icon h-icon-public"
            ng-switch-when="true"
-           ng-if="!thirdPartyGroupIcon"></i><!-- nospace
+           ng-if="!vm.thirdPartyGroupIcon"></i><!-- nospace
     !--><i class="group-list-label__icon h-icon-group"
            ng-switch-default></i>
-    <span class="group-list-label__label">{{groups.focused().name}}</span><!-- nospace
+    <span class="group-list-label__label">{{vm.groups.focused().name}}</span><!-- nospace
     !--><i class="h-icon-arrow-drop-down"></i>
   </div>
   <div class="dropdown-menu__top-arrow"></div>
   <ul class="dropdown-menu pull-none" role="menu">
     <li class="dropdown-menu__row dropdown-menu__row--unpadded "
-        ng-repeat="group in groups.all()">
-      <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
-           ng-click="focusGroup(group.id)">
+        ng-repeat="group in vm.groups.all()">
+      <div ng-class="{'group-item': true, selected: group.id == vm.groups.focused().id}"
+           ng-click="vm.focusGroup(group.id)">
         <!-- the group icon !-->
         <div class="group-icon-container" ng-switch on="group.public">
           <img class="group-list-label__icon group-list-label__icon--third-party"
-               ng-src="{{ thirdPartyGroupIcon }}"
-               ng-if="thirdPartyGroupIcon"
+               ng-src="{{ vm.thirdPartyGroupIcon }}"
+               ng-if="vm.thirdPartyGroupIcon"
                ng-switch-when="true">
-          <i class="h-icon-public" ng-if="!thirdPartyGroupIcon" ng-switch-when="true"></i>
+          <i class="h-icon-public" ng-if="!vm.thirdPartyGroupIcon" ng-switch-when="true"></i>
           <i class="h-icon-group" ng-switch-default></i>
         </div>
         <!-- the group name and share link !-->
@@ -67,13 +67,13 @@
         <div class="group-cancel-icon-container" ng-click="$event.stopPropagation()">
           <i class="h-icon-cancel-outline btn--cancel"
              ng-if="!group.public"
-             ng-click="leaveGroup(group.id)"
+             ng-click="vm.leaveGroup(group.id)"
              title="Leave '{{group.name}}'"></i>
         </div>
       </div>
     </li>
-    <li ng-if="!isThirdPartyUser()" class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn">
-      <div class="group-item" ng-click="createNewGroup()">
+    <li ng-if="!vm.isThirdPartyUser()" class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn">
+      <div class="group-item" ng-click="vm.createNewGroup()">
         <div class="group-icon-container"><i class="h-icon-add"></i></div>
         <div class="group-details">
           <a href="" class="group-name-link" title="Create a new group to share annotations">