diff --git a/src/views/Conversations/ChatWindow.jsx b/src/views/Conversations/ChatWindow.jsx index 54d0c84..e4c63c7 100644 --- a/src/views/Conversations/ChatWindow.jsx +++ b/src/views/Conversations/ChatWindow.jsx @@ -28,7 +28,7 @@ const ChatWindow = () => { { const { coli_guest_WhatsApp } = orderRow || {}; const { order_sn } = useParams(); const navigate = useNavigate(); - const userId = useAuthStore(state => state.loginUser.userId); + const userId = useAuthStore((state) => state.loginUser.userId); const initialState = useConversationStore((state) => state.initialState); const activeConversations = useConversationStore((state) => state.activeConversations); const currentConversation = useConversationStore((state) => state.currentConversation); @@ -27,6 +27,8 @@ const Conversations = () => { const receivedMessageList = useConversationStore((state) => state.receivedMessageList); const setMsgLoading = useConversationStore((state) => state.setMsgLoading); + const [dataSource, setDataSource] = useState(conversationsList); + const [switchToC, setSwitchToC] = useState({}); const [shouldFetchCList, setShouldFetchCList] = useState(true); useEffect(() => { @@ -91,14 +93,44 @@ const Conversations = () => { navigate(`/order/chat`, { replace: true }); } }; + + const searchInputRef = useRef(null); + const [searchContent, setSearchContent] = useState(''); + const handleSearchConversations = (val) => { + if (val.toLowerCase().trim() !== '') { + const res = conversationsList.filter( + (item) => (item.whatsapp_name.toLowerCase()).includes(val.toLowerCase().trim()) + || (item.whatsapp_name.toLowerCase()).includes(val.toLowerCase().trim()) + || (item.coli_id.toLowerCase()).includes(val.toLowerCase().trim()) + ); + setDataSource(res); + return false; + } + setDataSource(conversationsList); + }; + return ( - <> -
- {conversationsList.map((item) => ( +
+
+ { + setSearchContent(e.target.value); + handleSearchConversations(e.target.value); + }} + placeholder='搜索名称' + /> +
+
+ {dataSource.map((item) => ( { domEvent.stopPropagation(); switch (key) { @@ -115,19 +147,21 @@ const Conversations = () => { {...item} key={item.sn} id={item.sn} - letterItem={{id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5)}} + letterItem={{ id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5) }} alt={`${item.whatsapp_name.trim()}`} title={item.whatsapp_name.trim() || item.whatsapp_phone_number} subtitle={item.coli_id} date={item.last_received_time} unread={item.unread_msg_count} - className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''} + className={ + String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : '' + } onClick={() => onSwitchConversation(item)} /> ))}
- +
); }; export default Conversations; diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css index c3654c4..5d345b5 100644 --- a/src/views/Conversations/Conversations.css +++ b/src/views/Conversations/Conversations.css @@ -42,6 +42,9 @@ } /** Chat Window */ +.chatwindow-wrapper .h-parent .ant-layout-side-children, .chatwindow-wrapper .h-inherit{ + height: inherit; +} .chatwindow-wrapper .rce-container-mbox .rce-mbox{ max-width: 500px; }