Create RoomUsersList component

src/angularjs/abstract/abstract-users-list.ts

@@ -8,13 +8,13 @@ import { IUserStore } from '../persistence/user-store';
 import { IRoomStore } from '../persistence/room-store';
 import { IRoomCreator } from '../services/room-creator';
 import { IRoomOpenQueue } from '../services/room-open-queue';
+import { IProfileBox } from '../services/profile-box.service';
 
 export class AbstractUsersListController {
 
-  static $inject = ['$scope', 'Cache', 'UserStore', 'RoomStore', 'RoomCreator', 'RoomOpenQueue'];
+  static $inject = ['$scope', 'Cache', 'UserStore', 'RoomStore', 'RoomCreator', 'RoomOpenQueue', 'ProfileBox'];
 
   room: IRoom;
-  allUsers = Array<IUser>();
   users = Array<IUser>();
 
   constructor(
@@ -24,7 +24,7 @@ export class AbstractUsersListController {
     protected RoomStore: IRoomStore,
     protected RoomCreator: IRoomCreator,
     protected RoomOpenQueue: IRoomOpenQueue,
-
+    protected ProfileBox: IProfileBox,
   ) {
     if (this.constructor === AbstractUsersListController) {
       throw new Error('AbstractUsersListController can\'t be instantiated.');
@@ -56,7 +56,7 @@ export class AbstractUsersListController {
   }
 
   showProfileBox(uid: string) {
-    throw new Error('Method \'showProfileBox(uid: string)\' must be implemented.');
+    this.ProfileBox.show(uid);
   }
 
   userClicked(user: IUser) {

src/angularjs/components/friends-list.component.ts

@@ -6,7 +6,6 @@ import { ArrayUtils } from '../services/array-utils';
 import { Log } from '../services/log';
 import { IUser } from '../entities/user';
 import { IOnlineConnector } from '../connectors/online-connector';
-import { IRoom } from '../entities/room';
 import { ISearch } from '../services/search.service';
 import { FriendsTab } from '../keys/tab-keys';
 import { IFriendsConnector } from '../connectors/friend-connector';
@@ -21,9 +20,7 @@ export class FriendsListController extends AbstractUsersListController {
 
   static $inject = ['$scope', '$timeout', 'Cache', 'UserStore', 'RoomStore', 'RoomCreator', 'RoomOpenQueue', 'OnlineConnector', 'FriendsConnector', 'Search', 'ProfileBox'];
 
-  room: IRoom;
   allUsers = Array<IUser>();
-  users = Array<IUser>();
 
   constructor(
     protected $scope: ng.IScope,
@@ -36,9 +33,9 @@ export class FriendsListController extends AbstractUsersListController {
     protected OnlineConnector: IOnlineConnector,
     protected FriendsConnector: IFriendsConnector,
     protected Search: ISearch,
-    private ProfileBox: IProfileBox,
+    protected ProfileBox: IProfileBox,
   ) {
-    super($scope, Cache, UserStore, RoomStore, RoomCreator, RoomOpenQueue);
+    super($scope, Cache, UserStore, RoomStore, RoomCreator, RoomOpenQueue, ProfileBox);
 
     $scope.$on(N.FriendAdded, () => {
       Log.notification(N.FriendAdded, 'FriendsListController');
@@ -89,10 +86,6 @@ export class FriendsListController extends AbstractUsersListController {
     });
   }
 
-  showProfileBox(uid: string) {
-    this.ProfileBox.show(uid);
-  }
-
 }
 
 angular.module('myApp.components').component('friendsList', {

src/angularjs/components/index.ts

@@ -6,3 +6,4 @@ import './online-users-list.component';
 import './profile-box.component';
 import './public-rooms-list.component';
 import './room-list-box.component';
+import './room-users-list.component';

src/angularjs/components/online-users-list.component.ts

@@ -20,7 +20,6 @@ class OnlineUsersListController extends AbstractUsersListController {
   static $inject = ['$scope', '$timeout', 'OnlineConnector', 'Search', 'Cache', 'UserStore', 'RoomStore', 'RoomCreator', 'RoomOpenQueue', 'ProfileBox'];
 
   allUsers = Array<IUser>();
-  users = Array<IUser>();
 
   constructor(
     protected $scope: ng.IScope,
@@ -32,9 +31,9 @@ class OnlineUsersListController extends AbstractUsersListController {
     protected RoomStore: IRoomStore,
     protected RoomCreator: IRoomCreator,
     protected RoomOpenQueue: IRoomOpenQueue,
-    private ProfileBox: IProfileBox,
+    protected ProfileBox: IProfileBox,
   ) {
-    super($scope, Cache, UserStore, RoomStore, RoomCreator, RoomOpenQueue);
+    super($scope, Cache, UserStore, RoomStore, RoomCreator, RoomOpenQueue, ProfileBox);
 
     $scope.$on(N.OnlineUserAdded, () => {
       Log.notification(N.OnlineUserAdded, 'OnlineUsersListController');
@@ -61,10 +60,6 @@ class OnlineUsersListController extends AbstractUsersListController {
     });
   }
 
-  showProfileBox(uid: string) {
-    this.ProfileBox.show(uid);
-  }
-
 }
 
 angular.module('myApp.components').component('onlineUsersList', {

src/angularjs/components/room-users-list.component.ts

@@ -0,0 +1,35 @@
+import * as angular from 'angular';
+
+import { AbstractUsersListController } from '../abstract/abstract-users-list';
+import { ArrayUtils } from '../services/array-utils';
+
+export class RoomUsersListController extends AbstractUsersListController {
+
+  $onChanges({ room }: ng.IOnChangesObject) {
+    if (angular.isDefined(room)) {
+      this.updateList();
+    }
+  }
+
+  updateList() {
+    this.users = ArrayUtils.objectToArray(this.room.getUsers());
+
+    // Sort the array alphabetically
+    this.users.sort((user1, user2) => {
+      if (user1.getName() !== user2.getName()) {
+        return user1.getName() > user2.getName() ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+
+}
+
+angular.module('myApp.components').component('roomUsersList', {
+  templateUrl: '/assets/partials/user-list.html',
+  controller: RoomUsersListController,
+  controllerAs: 'ctrl',
+  bindings: {
+    room: '<'
+  },
+});

src/assets/partials/chat-room.html

@@ -34,8 +34,8 @@
         </div>
 
         <div data-ng-show="activeTab == 'users' || activeTab == 'settings'" class="uk-overflow-container" data-ng-style="{'height': (room.height - 30 - 30) + 'px'}" data-stop-shake>
-            <friends-list rooms="rooms" data-ng-show="activeTab == 'users'"></friends-list>
-            <chat-settings ng-show="activeTab == 'settings'" room="room"></chat-settings>
+            <room-users-list data-ng-show="activeTab == 'users'" room="room"></room-users-list>
+            <chat-settings data-ng-show="activeTab == 'settings'" room="room"></chat-settings>
         </div>
 
         <!--Take account of the top and bottom bars as well as the tab bar - the tab bar is height 18 + 4 border + 5 bottom margin-->

src/assets/partials/user-list.html

@@ -4,7 +4,7 @@
     data-ng-mouseleave="ctrl.showProfileBox(null)">
     <td style="position: relative" class="cc-row"
       data-ng-class="aUser.blocked ? 'cc-blocked' : aUser.online ? 'cc-online' : 'cc-offline'"
-      data-draggable-user="user" data-ng-click="ctrl.userClicked(aUser)">
+      data-draggable-user="aUser" data-ng-click="ctrl.userClicked(aUser)">
 
       <img class="cc-thumbnail-30 cc-user-image uk-float-left" data-ng-src="{{ aUser.getThumbnail() }}"
         title="{{ aUser.uid() }}" />