Fixed for chat room

public_new/chat_change_room_name.html

@@ -81,6 +81,8 @@
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
   <script src="./js/views/chats/chat-room.js"></script>
   <script src="./js/views/chats/chat-room.js"></script>
+  <script src="./js/views/chats/chat-room-search.js"></script>
+  <script src="./js/views/chats/chat-room-message.js"></script>
   <script src="./js/views/chats/management/chat-room-change.js"></script>
   <script src="./js/views/chats/management/chat-room-change.js"></script>
 
 
   <script>
   <script>

public_new/chat_room.html

@@ -170,6 +170,9 @@
   <!-- View -->
   <!-- View -->
   <script src="./js/utils/chat-media-handler.js"></script>
   <script src="./js/utils/chat-media-handler.js"></script>
   <script src="./js/views/chats/chat-room.js"></script>
   <script src="./js/views/chats/chat-room.js"></script>
+  <script src="./js/views/chats/chat-room-search.js"></script>
+  <script src="./js/views/chats/chat-room-message.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>

public_new/js/Models/roominfo.js

@@ -15,4 +15,4 @@ var RoomInfo = class {
   }
   }
 };
 };
 
 
-var roomInfo = new RoomInfo(NativeBridgeDataSource.getRoomInfo());
+var roomInfo = new RoomInfo(NativeBridgeDataSource.getRoomInfo());
\ No newline at end of file

public_new/js/common/native-bridge-datasource.js

@@ -262,14 +262,14 @@ NativeBridgeDataSource.getGroupByName = function (groupName) {
   }
   }
 };
 };
 
 
-NativeBridgeDataSource.getUsersInRoom = function (roomId) {
+NativeBridgeDataSource.getUsersInRoom = function (roomID) {
   if (deviceInfo.isiOS()) {
   if (deviceInfo.isiOS()) {
     return JSON.parse(
     return JSON.parse(
-      callNativeApp(NATIVE_KEY_IOS.getUsersInRoom, { roomId: roomId })
+      callNativeApp(NATIVE_KEY_IOS.getUsersInRoom, { roomId: roomID })
     );
     );
   } else if (deviceInfo.isAndroid()) {
   } else if (deviceInfo.isAndroid()) {
     //String形式をJsonに変更してReturn
     //String形式をJsonに変更してReturn
-    return JSON.parse(android.getUsersInRoom(roomId));
+    return JSON.parse(android.getUsersInRoom(roomID));
   }
   }
 };
 };
 
 

public_new/js/views/chats/chat-room-message.js

+const userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
+const myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
+const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
+const collaborationMessageTemplate = getTemplate(
+  TemplateURL.OPEN_COLLABORATION_MESSAGE
+);
+/***********************
+ *  Search Messages
+ ***********************/
+ChatRoom.appendSearchMessages = function (messages, unwrappedWorkVal = "") {
+  let workVal = unwrappedWorkVal;
+  messages.forEach(function (message) {
+    let html = ChatRoom.renderMessageForSearchMessage(message);
+    workVal = html + workVal;
+  });
+  $(".overlay_src_msg").prepend(workVal);
+};
+
+ChatRoom.renderMessageForSearchMessage = function (message) {
+  let template = ChatRoom.getChatMessageTemplate(
+    message.messageType,
+    message.shopMemberId
+  );
+
+  let messageTime = CHAT_UTIL.formatDate(message.insertDate);
+
+  message.profileUrl = ChatRoom.parseUserProfileURL(message.profileUrl);
+
+  message.message = message.message
+    .toString()
+    .replaceAll("?fileName=", "?sid=" + currentUserInfo.sid + "&fileName=");
+
+  let html = Mustache.render(template, {
+    text: message.message,
+    from: message.loginId,
+    shopMemberId: message.shopMemberId,
+    profileImage: message.profileUrl,
+    createdAtDay: messageTime.createdAtDay,
+    createdAtTime: messageTime.createdAtTime,
+  });
+
+  return message.message.includes("attachedImages") ||
+    message.message.includes("attachedVideos")
+    ? CHAT_UTIL.htmlDecode(html)
+    : html;
+};
+
+/***********************
+ *  Send Messages
+ ***********************/
+ChatRoom.sendMessage = function (e) {
+  const messageTextBox = $("#messageInput");
+  const message =
+    messageTextBox.val().length > 0
+      ? encodeURIComponent(messageTextBox.val())
+      : "";
+  messageTextBox.val("");
+
+  if (message.length > 0) {
+    const sendData = message + messageSeperator + MessageType.TEXT;
+    CHAT_SOCKET.emitCreateMessage(sendData, 0);
+  }
+  $(".message_input_form").focus();
+};
+
+/***********************
+ *  Load Messages
+ ***********************/
+ChatRoom.loadMessages = function (joinRoomID, joinRoomName) {
+  let roomID = joinRoomID.replace(/['"]+/g, "");
+  roomName = joinRoomName;
+  // 画面更新
+  if (serverInfo.isOnline == "true") {
+    Common.refreshForOnline();
+    NativeBridgeDelegate.updateMessages(roomID);
+  } else {
+    Common.refreshForOffline();
+  }
+
+  // setup ルームタイトル
+  $("#roomTitle").text(roomName).data("roomName", roomName);
+
+  // ルームメニュー表示設定
+  ChatRoom.configureRoomMenu();
+
+  // ユーザー表示
+  ChatRoom.appendAttendedUsers(roomID);
+
+  // メッセージ表示
+  ChatRoom.prependMessage(roomID);
+
+  // スクロール調整
+  let jQueryMessages = $("#messages");
+  ChatRoom.waitForLoadingImage(jQueryMessages, ChatRoom.scrollToBottom);
+  ChatRoom.waitForLoadingVideo(jQueryMessages, ChatRoom.scrollToBottom);
+
+  // iOS用スクロールoffset調整
+  if (deviceInfo.isiOS()) {
+    $(window).on("load", function () {
+      ChatRoom.scrollToBottom();
+    });
+  }
+};
+
+ChatRoom.configureRoomMenu = function () {
+  const roomType = NativeBridgeDataSource.getRoomType();
+  if (roomType == ChatRoomType.DM) {
+    $("#roomMenu").removeClass("none");
+  } else {
+    $("#roomMenu").addClass("none");
+  }
+};
+
+ChatRoom.appendAttendedUsers = function (roomID) {
+  console.log(
+    "peacekim:: ChatRoom.appendAttendedUsers start with RoomID: " + roomID
+  );
+  const topUserListTemplate = getTemplate(TemplateURL.CHATROOM_USER_LIST);
+  const filterUserListTemplate = getTemplate(
+    TemplateURL.CHATROOM_USER_FILTER_LIST
+  );
+
+  const users = NativeBridgeDataSource.getUsersInRoom(roomID);
+
+  // ユーザーリスト表示
+  users.forEach(function (user) {
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+  });
+  let html = Mustache.render(topUserListTemplate, {
+    userList: users,
+  });
+  let obj = jQuery.parseHTML(html);
+  $("#user_list").append(obj);
+
+  // フィルタリングユーザーリスト表示
+  let filterHtml = Mustache.render(filterUserListTemplate, {
+    userList: users,
+  });
+  let filterObj = jQuery.parseHTML(filterHtml);
+  $("#filter").append(filterObj);
+};
+
+ChatRoom.prependMessage = function (roomID) {
+  const messages = NativeBridgeDataSource.getMessages(roomID);
+  const now = new Date();
+  // メッセージ文字列の生成
+  let workVal = "";
+
+  var checkBeforeDate = "";
+  var beforeDate = "";
+  messages.forEach(function (message) {
+    // プロフィールURL設定
+    message.profileUrl = ChatRoom.parseUserProfileURL(message.profileUrl);
+
+    const messageCreatedTime = CHAT_UTIL.formatDate(
+      message.insertDate
+    ).createdAt;
+
+    // #36147
+    message.message = message.message
+      .toString()
+      .replaceAll("?fileName=", "?sid=" + currentUserInfo.sid + "&fileName=");
+
+    // 日付表示のため、今年なのか、本日なのかを判定
+    const isOtherYear = now.getFullYear() != message.insertDate.substring(0, 4);
+    const isToday = messageCreatedTime.includes(":") ? true : false;
+
+    // 日付ラーベル表示
+    if (messageCreatedTime != checkBeforeDate && checkBeforeDate != "") {
+      const html = ChatRoom.renderDateLabelMessage(
+        systemMessageTemplate,
+        beforeDate
+      );
+      workVal = html + workVal;
+    }
+
+    checkBeforeDate = messageCreatedTime;
+    beforeDate = message.insertDate;
+
+    const html = ChatRoom.renderMessage(message, isToday, isOtherYear);
+    workVal = html + workVal;
+  });
+
+  // メッセージの画面描画
+  $("#messages").prepend(workVal);
+};
+
+ChatRoom.renderDateLabelMessage = function (template, beforeDate) {
+  let messageDay = CHAT_UTIL.systemDay(beforeDate);
+  return Mustache.render(template, {
+    year: messageDay.year + getLocalizedString("year"),
+    month: messageDay.month + getLocalizedString("month"),
+    day: messageDay.day + getLocalizedString("day"),
+    dow: CHAT_UTIL.findDow(messageDay.dow),
+  });
+};
+
+ChatRoom.getChatMessageTemplate = function (messageType, senderID) {
+  if (senderID == currentUserInfo.shopMemberId) {
+    return myMessageTemplate;
+  } else if (messageType == MessageType.SYSTEM) {
+    return systemMessageTemplate;
+  } else {
+    return userMessageTemplate;
+  }
+};
+
+ChatRoom.parseUserProfileURL = function (profileURL) {
+  if (profileURL) {
+    return Common.getProfileImgUrl(profileURL);
+  } else {
+    return Common.getProfileImgUrl("");
+  }
+};
+
+ChatRoom.renderMessage = function (message, isToday, isOtherYear) {
+  if (
+    message.messageType == MessageType.COMMUNICATIONSTART ||
+    message.messageType == MessageType.COMMUNICATIONEND
+  ) {
+    return ChatRoom.renderCollaborationMessage(message, isToday, isOtherYear);
+  } else {
+    return ChatRoom.renderChatMessage(message, isToday, isOtherYear);
+  }
+};
+
+ChatRoom.renderCollaborationMessage = function (message, isToday, isOtherYear) {
+  const collaborationInfo = JSON.parse(message.message);
+  const userInCollaboration = JSON.parse(
+    NativeBridgeDataSource.getUserInfoList(collaborationInfo.userList)
+  );
+  const displayUserList = ChatRoom.getDisplayUserList(userInCollaboration);
+  const meetingID = ChatRoom.getMeetingID(collaborationInfo);
+  const messageTime = CHAT_UTIL.formatDate(message.insertDate);
+  const createdAtYear =
+    message.insertDate.substring(0, 4) + getLocalizedString("year") + " ";
+
+  const html = Mustache.render(collaborationMessageTemplate, {
+    messageId: message.messageId,
+    roomName: roomName,
+    userCount: userInCollaboration.length,
+    userList: displayUserList,
+    insertDate: message.insertDate,
+    collaborationType: collaborationInfo.collaborationType,
+    meetingId: meetingID,
+    isToday: isToday,
+    createdAtDay: messageTime.createdAtDay,
+    createdAtTime: messageTime.createdAtTime,
+    createdAtYear: createdAtYear,
+    isOtherYear: isOtherYear,
+    isEnded: message.messageType == MessageType.COMMUNICATIONEND ? true : false,
+  });
+  return message.message.includes("attachedImages") ||
+    message.message.includes("attachedVideos")
+    ? CHAT_UTIL.htmlDecode(html)
+    : html;
+};
+
+ChatRoom.getMeetingID = function (collaborationInfo) {
+  if (typeof collaborationInfo.meetingId != "undefined") {
+    return collaborationInfo.meetingId;
+  } else {
+    return 0;
+  }
+};
+
+ChatRoom.getDisplayUserList = function (userList) {
+  userList.forEach(function (user) {
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+  });
+  return userList.length > 3 ? userList.slice(0, 3) : userList;
+};
+
+ChatRoom.renderChatMessage = function (message, isToday, isOtherYear) {
+  const template = ChatRoom.getChatMessageTemplate(
+    message.messageType,
+    message.shopMemberId
+  );
+
+  const messageTime = CHAT_UTIL.formatDate(message.insertDate);
+
+  const createdAtYear =
+    message.insertDate.substring(0, 4) + getLocalizedString("year") + " ";
+
+  const html = Mustache.render(template, {
+    text: message.message,
+    from: message.loginId,
+    messageId: message.messageId,
+    shopMemberId: message.shopMemberId,
+    profileImage: message.profileUrl,
+    createdAtDay: messageTime.createdAtDay,
+    createdAtTime: messageTime.createdAtTime,
+    createdAtYear: createdAtYear,
+    unreadCount: message.unreadCount,
+    isOtherYear: isOtherYear,
+    isToday: isToday,
+  });
+  return message.message.includes("attachedImages") ||
+    message.message.includes("attachedVideos")
+    ? CHAT_UTIL.htmlDecode(html)
+    : html;
+};

public_new/js/views/chats/chat-room-search.js

+ChatRoom.bindSearchUI = function () {
+  const chatSearchForm = $(".chat_room_src_form");
+  const chatSearchInput = $('.chat_room_src_form input[type="search"]');
+  const searchMessage = $("#searchMessage");
+
+  // 検索アイコン押下イベント
+  $(".nav_item_wrap .search_menu").click(function () {
+    $(".nav_item_wrap").addClass("none");
+    $(".footer-wrap").addClass("none");
+    chatSearchForm.removeClass("none");
+    $(".room_container").addClass("none");
+    $(".overlay_src_msg").removeClass("none");
+    // フィルタ表示
+    $("#filter").removeClass("none");
+    $("#user_list").addClass("none");
+
+    chatSearchInput.focus();
+    searchMessage.addClass("onfocus");
+    $(".chat_list").removeClass("none");
+  });
+
+  $(".chat_room_src_form .cancel").click(function () {
+    $(".nav_item_wrap").removeClass("none");
+    $(".footer-wrap").removeClass("none");
+    chatSearchForm.addClass("none");
+    $(".chat_room_src_form input").val("");
+    $(".room_container").removeClass("none");
+    $(".overlay_src_msg").empty();
+    // ユーザーリスト表示
+    $("#filter").addClass("none");
+    $("#user_list").removeClass("none");
+
+    chatSearchInput.blur();
+    searchMessage.removeClass("onfocus");
+    $(".chat_list").addClass("none");
+    ChatRoom.scrollToBottom();
+  });
+
+  chatSearchInput.click(function () {
+    if (searchMessage.hasClass("onfocus")) {
+      searchMessage.removeClass("onfocus");
+      searchMessage.blur();
+    } else {
+      searchMessage.addClass("onfocus");
+      searchMessage.focus();
+    }
+  });
+
+  searchMessage.blur(function () {
+    searchMessage.removeClass("onfocus");
+  });
+
+  // チャットルーム
+  // メッセージ検索イベント
+  chatSearchInput.keyup(function (e) {
+    let workVal = "";
+    const keyword = chatSearchInput.val();
+    const enterKeyPressed = e.key == "Enter" || e.KeyCode == 13;
+    if (enterKeyPressed) {
+      if (keyword != "" && keyword.length != 0) {
+        chatSearchInput.blur();
+        return;
+      }
+    } else if (keyword == "" || keyword.length < 2) {
+      $(".overlay_src_msg").empty();
+      return;
+    }
+    ChatRoom.searchMessage(keyword, workVal);
+
+    if (enterKeyPressed) {
+      searchMessage.removeClass("onfocus");
+      chatSearchInput.blur();
+      return;
+    }
+  });
+
+  // iOSキーボード変換検知用
+  chatSearchInput.on("compositionend", function () {
+    if (deviceInfo.isIOS()) {
+      let workVal = "";
+      var keyword = chatSearchInput.val();
+      ChatRoom.searchMessage(keyword, workVal);
+    }
+  });
+
+  ChatRoom.bindUserFilteredMessage();
+
+  // フィルタ選択イベント
+  $(document).on("click", "#filter .img_wrap", function (event) {
+    // チェックアイコン追加
+    $(this).toggleClass("filter");
+  });
+};
+
+ChatRoom.bindUserFilteredMessage = function () {
+  $(document).on("click", ".filter_img", function (event) {
+    const keyword = $('.chat_room_src_form input[type="search"]').val();
+    $(".overlay_src_msg").empty();
+    let checkedUserList = ChatRoom.getCheckedUserList();
+    if (keyword.length == 1) {
+      return;
+    }
+    const messages = NativeBridgeDataSource.searchMessages(
+      keyword,
+      checkedUserList.join(",")
+    );
+    ChatRoom.appendSearchMessages(messages);
+  });
+};
+
+//　メッセージ検索
+ChatRoom.searchMessage = function (keyword, workVal) {
+  $(".overlay_src_msg").empty();
+  let checkedUserList = ChatRoom.getCheckedUserList();
+  const messages = NativeBridgeDataSource.searchMessages(
+    keyword,
+    checkedUserList.join(",")
+  );
+
+  ChatRoom.appendSearchMessages(messages, workVal);
+
+  if (messages.length == 0) {
+    const noResultMsg = getNoResultMessage();
+    $(".overlay_src_msg").append(noResultMsg);
+  }
+};
+
+ChatRoom.getCheckedUserList = function () {
+  let checkedUserList = [];
+  $(".img_wrap.filter").each(function (user) {
+    const selectedUser = $(".img_wrap.filter")[user];
+    checkedUserList.push($(selectedUser).data("user-id"));
+  });
+  return checkedUserList;
+};