Fixed chat room list to show properly

public_new/chat.html

@@ -133,7 +133,7 @@
     $("#loadingArea").load("./loading.html");
 
     if (deviceInfo.isAndroid()) {
-      var needHostAlert = android.getExitHostAlert();
+      const needHostAlert = android.getExitHostAlert();
       if (needHostAlert) {
         alert(getLocalizedString("inform_exit_host_collaboration"));
       }

public_new/js/common/common.js

@@ -87,13 +87,13 @@ Common.dismissLoadingIndicator = function () {
 Common.refreshForOnline = function () {
   serverInfo.isOnline = "true";
   $(".footer_item a").removeClass("ui-state-disabled");
-  if (ChatList != "undefined") {
+  if (typeof ChatList != "undefined") {
     ChatList.refreshForOnline();
   }
-  if (ChatRoom != "undefined") {
+  if (typeof ChatRoom != "undefined") {
     ChatRoom.refreshForOnline();
   }
-  if (Namecard != "undefined") {
+  if (typeof Namecard != "undefined") {
     Namecard.refreshForOnline();
   }
 };
@@ -101,16 +101,16 @@ Common.refreshForOnline = function () {
 Common.refreshForOffline = function () {
   serverInfo.isOnline = "false";
   $(".footer_item a").addClass("ui-state-disabled");
-  if (ChatList != "undefined") {
+  if (typeof ChatList != "undefined") {
     ChatList.refreshForOffline();
   }
-  if (ChatRoom != "undefined") {
+  if (typeof ChatRoom != "undefined") {
     ChatRoom.refreshForOffline();
   }
-  if (CollaborationUI != "undefined") {
+  if (typeof CollaborationUI != "undefined") {
     CollaborationUI.refreshForOffline();
   }
-  if (Namecard != "undefined") {
+  if (typeof Namecard != "undefined") {
     Namecard.refreshForOffline();
   }
 };
@@ -120,8 +120,7 @@ Common.refreshForOffline = function () {
 Common.getProfileImgUrl = function (path) {
   if (path == undefined || path == "") {
     return "./img/noImage.png";
-  } else {
-    if (path.includes("/mnt")) {
+  } else if (path.includes("/mnt")) {
     const userInfo = path.split("/").reverse();
     return (
       serverInfo.cmsURL +
@@ -136,5 +135,4 @@ Common.getProfileImgUrl = function (path) {
   } else {
     return path;
   }
-  }
 };

public_new/js/views/chats/chat-list.js

@@ -9,10 +9,11 @@ $("#tabGroup").on("click", function (e) {
 });
 
 document.addEventListener("DOMContentLoaded", function () {
-  bindChatSearch();
+  ChatList.bindChatSearch();
+  Common.dismissLoadingIndicator();
 });
 
-var bindChatSearch = function () {
+ChatList.bindChatSearch = function () {
   const chatSearchInput = $('#chat .search_form input[type="search"]');
   const chatSearchCancel = $("#chat .search_form .cancel");
   chatSearchInput.click(function () {
@@ -62,6 +63,7 @@ ChatList.refreshRoomList = function (roomType) {
   } else {
     Common.refreshForOffline();
   }
+
   const beforeRoomType = NativeBridgeDataSource.getBeforeRoomType();
 
   if (beforeRoomType != null) {
@@ -69,51 +71,36 @@ ChatList.refreshRoomList = function (roomType) {
     NativeBridgeDelegate.clearBeforeRoomType();
   }
   Common.showLoadingIndicator();
-  if (roomType == ChatRoomType.DM) {
-    $("#tabDM").prop("checked", true);
-  } else {
-    $("#tabGroup").prop("checked", true);
-  }
 
+  // select tab as room type
+  ChatList.selectTab(roomType);
+
+  // update room info in native db
   if (serverInfo.isOnline == "true") {
     NativeBridgeDelegate.updateRoomList();
   }
-  var rooms = NativeBridgeDataSource.getRoomList(roomType, null);
-  // #36146に対応
-  $("#groupChatList").empty();
-  $("#dmChatList").empty();
-  let roomListTitle = getLocalizedString("roomListTitle");
-  $("#chatTitle").text(roomListTitle);
 
-  if (rooms.length === 0) {
-    addEmptyRoomListLabel(roomType);
-  }
+  // get room list from native db
+  const rooms = NativeBridgeDataSource.getRoomList(roomType, null);
 
-  const template = getTemplate(TemplateURL.ROOM_LIST);
+  // Room list 初期化
+  ChatList.initializeRoomList();
 
-  rooms.forEach(function (room) {
-    let html = renderRoom(template, room);
-    // Click event
-    let obj = $(jQuery.parseHTML(html)).on("click", function () {
-      //TODO ルームに入る処理追加必要
-    });
-    // ルームグループごとに追加。
-    switch (roomType) {
-      case ChatRoomType.GROUP:
-        $("#groupChatList").append(obj);
-        break;
-      case ChatRoomType.DM:
-        $("#dmChatList").append(obj);
-        break;
-      default:
-        break;
+  // set room title
+  ChatList.setRoomTitle();
+
+  // メッセージがない時、最新メッセージにempty messageを追加
+  if (rooms.length === 0) {
+    ChatList.addEmptyRoomListLabel(roomType);
   }
-  });
+
+  // リストにルームを追加
+  ChatList.appendRoomList(rooms);
 
   Common.dismissLoadingIndicator();
 };
 
-var addEmptyRoomListLabel = function (roomType) {
+ChatList.addEmptyRoomListLabel = function (roomType) {
   // 検索結果がない場合のメッセージを追加
   const emptyListString = getLocalizedString("roomListEmptyString");
   switch (roomType) {
@@ -131,7 +118,40 @@ var addEmptyRoomListLabel = function (roomType) {
   }
 };
 
-var getDefaultChatRoomName = function (roomAttendUsers) {
+ChatList.selectTab = function (roomType) {
+  if (roomType == ChatRoomType.DM) {
+    $("#tabDM").prop("checked", true);
+  } else {
+    $("#tabGroup").prop("checked", true);
+  }
+};
+
+ChatList.initializeRoomList = function () {
+  // #36146に対応
+  $("#groupChatList").empty();
+  $("#dmChatList").empty();
+};
+
+ChatList.setRoomTitle = function () {
+  let roomListTitle = getLocalizedString("roomListTitle");
+  $("#chatTitle").text(roomListTitle);
+};
+
+ChatList.appendRoomList = function (rooms) {
+  const template = getTemplate(TemplateURL.ROOM_LIST);
+
+  rooms.forEach(function (room) {
+    let html = ChatList.renderRoom(template, room);
+    let obj = jQuery.parseHTML(html);
+    if (room.type.toString() == ChatRoomType.GROUP) {
+      $("#groupChatList").append(obj);
+    } else if (room.type.toString() == ChatRoomType.DM) {
+      $("#dmChatList").append(obj);
+    }
+  });
+};
+
+ChatList.getDefaultChatRoomName = function (roomAttendUsers) {
   let attendUserName = [];
   roomAttendUsers.forEach(function (user) {
     user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
@@ -141,7 +161,7 @@ var getDefaultChatRoomName = function (roomAttendUsers) {
   return attendUserName.join(", ");
 };
 
-var getUnreadCount = function (roomUnreadCount) {
+ChatList.getUnreadCount = function (roomUnreadCount) {
   if (roomUnreadCount == 0) {
     return "";
   } else if (roomUnreadCount > 999) {
@@ -158,9 +178,9 @@ ChatList.searchRoom = function (keyword, rooms) {
   let roomListTitle = getLocalizedString("room_search_placeholder");
   $("#chatTitle").text(roomListTitle);
 
-  var template = getTemplate(TemplateURL.ROOM_LIST);
+  const template = getTemplate(TemplateURL.ROOM_LIST);
   rooms.forEach(function (room) {
-    let html = renderRoom(template, room);
+    let html = ChatList.renderRoom(template, room);
 
     // Click event
     let obj = jQuery.parseHTML(html);
@@ -173,7 +193,7 @@ ChatList.searchRoom = function (keyword, rooms) {
   }
 };
 
-var getRoomMessage = function (message) {
+ChatList.getRoomMessage = function (message) {
   if (message) {
     return message.toString();
   } else {
@@ -181,7 +201,7 @@ var getRoomMessage = function (message) {
   }
 };
 
-var getDisplayMessage = function (messageType, roomMessage) {
+ChatList.getDisplayMessage = function (messageType, roomMessage) {
   switch (messageType) {
     case MessageType.TEXT:
       return roomMessage;
@@ -200,20 +220,34 @@ var getDisplayMessage = function (messageType, roomMessage) {
   }
 };
 
-var renderRoom = function (template, room) {
+ChatList.renderRoom = function (template, room) {
+  // thumbnail counts
+  const thumbnailCount = Math.min(room.attendUsers.length, 4);
+
+  // set room name
+  if (room.chatRoomName == "") {
+    room.chatRoomName = ChatList.getDefaultChatRoomName(room.attendUsers);
+  }
+
+  // set profile images
   room.profileImagePath = "./images/user-profile.png";
-  const roomMessage = getRoomMessage(room.message);
-  const displayMessage = getDisplayMessage(room.messageType, roomMessage);
+  room.attendUsers.forEach(function (user) {
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+  });
+
+  // set room messages
+  const roomMessage = ChatList.getRoomMessage(room.message);
+  const displayMessage = ChatList.getDisplayMessage(
+    room.messageType,
+    roomMessage
+  );
 
-  const thumbnailCount =
-    room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
+  // set date string
   const time = room.insertDate
     ? CHAT_UTIL.formatDate(room.insertDate).createdAt
     : "";
-  if (room.chatRoomName == "") {
-    room.chatRoomName = getDefaultChatRoomName(room.attendUsers);
-  }
-  const messageUnreadCount = getUnreadCount(room.unreadCount);
+
+  const messageUnreadCount = ChatList.getUnreadCount(room.unreadCount);
 
   return Mustache.render(template, {
     thumbnailCount: thumbnailCount,
@@ -224,7 +258,7 @@ var renderRoom = function (template, room) {
     time: time,
     unreadMsgCnt: messageUnreadCount,
     userCnt: room.attendUsers.length + 1,
-    attendUsers: room.attendUsers,
+    attendUsers: room.attendUsers.splice(0, thumbnailCount),
   });
 };