Fixed chat room list to show properly

ffa0c90b · Kim Peace · 6e009873 · ffa0c90b · ffa0c90b · ffa0c90b
Commit ffa0c90b authored Jul 13, 2021 by Kim Peace
Hide whitespace changes
Inline Side-by-side

Showing with 107 additions and 75 deletions

public_new/chat.html
+1 -1

public_new/js/common/common.js
+20 -22

public_new/js/views/chats/chat-list.js
+86 -52

No files found.
--- a/public_new/chat.html
+++ b/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"));
      }

--- a/public_new/js/common/common.js
+++ b/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,21 +120,19 @@ Common.refreshForOffline = function () {
 Common.getProfileImgUrl = function (path) {
  if (path == undefined || path == "") {
    return "./img/noImage.png";
+  } else if (path.includes("/mnt")) {
+    const userInfo = path.split("/").reverse();
+    return (
+      serverInfo.cmsURL +
+      "/chatapi/user?profileFileName=" +
+      userInfo[0] +
+      "&profileGetLoginId=" +
+      userInfo[1] +
+      "&sid=" +
+      currentUserInfo.sid +
+      "&cmd=12"
+    );
  } else {
-    if (path.includes("/mnt")) {
+    return path;
-      const userInfo = path.split("/").reverse();
-      return (
-        serverInfo.cmsURL +
-        "/chatapi/user?profileFileName=" +
-        userInfo[0] +
-        "&profileGetLoginId=" +
-        userInfo[1] +
-        "&sid=" +
-        currentUserInfo.sid +
-        "&cmd=12"
-      );
-    } else {
-      return path;
-    }
  }
 };
--- a/public_new/js/views/chats/chat-list.js
+++ b/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に対応
+  // get room list from native db
-  $("#groupChatList").empty();
+  const rooms = NativeBridgeDataSource.getRoomList(roomType, null);
-  $("#dmChatList").empty();
-  let roomListTitle = getLocalizedString("roomListTitle");
+  // Room list 初期化
-  $("#chatTitle").text(roomListTitle);
+  ChatList.initializeRoomList();
+  // set room title
+  ChatList.setRoomTitle();
+  // メッセージがない時、最新メッセージにempty messageを追加
  if (rooms.length === 0) {
-    addEmptyRoomListLabel(roomType);
+    ChatList.addEmptyRoomListLabel(roomType);
  }
-  const template = getTemplate(TemplateURL.ROOM_LIST);
+  // リストにルームを追加
+  ChatList.appendRoomList(rooms);
-  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;
-    }
-  });
  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);
+  room.attendUsers.forEach(function (user) {
-  const displayMessage = getDisplayMessage(room.messageType, roomMessage);
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+  });
+  // set room messages
+  const roomMessage = ChatList.getRoomMessage(room.message);
+  const displayMessage = ChatList.getDisplayMessage(
+    room.messageType,
+    roomMessage
+  );
-  const thumbnailCount =
+  // set date string
-    room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
  const time = room.insertDate
    ? CHAT_UTIL.formatDate(room.insertDate).createdAt
    : "";
-  if (room.chatRoomName == "") {
-    room.chatRoomName = getDefaultChatRoomName(room.attendUsers);
+  const messageUnreadCount = ChatList.getUnreadCount(room.unreadCount);
-  }
-  const messageUnreadCount = 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),
  });
 };