Added sorting to msgs sub and added some styling for messaging items. BOD-309 BOD-310

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,6 +1,5 @@
-import { Badge, List } from "antd";
+import { Badge, List, Tag } from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
@@ -22,43 +21,46 @@ export function ChatConversationListComponent({
   selectedConversation,
   setSelectedConversation,
 }) {
-  const { t } = useTranslation();
-
   return (
-    <List
-      bordered
-      size="small"
-      dataSource={conversationList}
-      renderItem={(item) => (
-        <List.Item
-          onClick={() => setSelectedConversation(item.id)}
-          className={`chat-list-item ${
-            item.id === selectedConversation
-              ? "chat-list-selected-conversation"
-              : null
-          }`}
-        >
-          <List.Item.Meta
-            title={<PhoneFormatter>{item.phone_num}</PhoneFormatter>}
-            description={
-              item.job_conversations.length > 0 ? (
-                <div>
-                  {item.job_conversations.map(
-                    (j) =>
-                      `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
-                        j.job.ownr_co_nm || ""
-                      }`
-                  )}
-                </div>
-              ) : (
-                t("messaging.labels.nojobs")
-              )
-            }
-          />
-          <Badge count={item.messages_aggregate.aggregate.count || 0} />
-        </List.Item>
-      )}
-    />
+    <div className="chat-list-container">
+      <List
+        bordered
+        size="small"
+        dataSource={conversationList}
+        renderItem={(item) => (
+          <List.Item
+            onClick={() => setSelectedConversation(item.id)}
+            className={`chat-list-item ${
+              item.id === selectedConversation
+                ? "chat-list-selected-conversation"
+                : null
+            }`}
+          >
+            {item.job_conversations.length > 0 ? (
+              <div className="chat-name">
+                {item.job_conversations.map((j, idx) => (
+                  <span key={idx}>
+                    {`${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
+                      j.job.ownr_co_nm || ""
+                    } `}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+            )}
+            {item.job_conversations.length > 0
+              ? item.job_conversations.map((j, idx) => (
+                  <Tag key={idx} className="ro-number-tag">
+                    {j.job.ro_number}
+                  </Tag>
+                ))
+              : null}
+            <Badge count={item.messages_aggregate.aggregate.count || 0} />
+          </List.Item>
+        )}
+      />
+    </div>
   );
 }
 export default connect(

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -1,10 +1,24 @@
 .chat-list-selected-conversation {
   background-color: rgba(128, 128, 128, 0.2);
 }
+.chat-list-container {
+  flex: 1;
+  overflow: auto;
+  height: 100%;
+}
 
 .chat-list-item {
+  display: flex;
+  flex-direction: row;
   &:hover {
     cursor: pointer;
     color: #ff7a00;
   }
+  .chat-name {
+    flex: 1;
+    display: inline;
+  }
+  .ro-number-tag {
+    align-self: baseline;
+  }
 }