From b37fb2c1aaab88e069b293eb658b21d660233e5c Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Wed, 9 Oct 2024 16:14:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E7=AD=9B=E9=80=89:?=
 =?UTF-8?q?=20=E5=9B=BE=E7=89=87=E6=8C=89=E6=97=A5=E6=9C=9F,?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Online/Components/MessageListFilter.jsx   | 49 ++++++++++++++++---
 .../Online/Input/EmailEditorPopup.jsx         |  2 +-
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/views/Conversations/Online/Components/MessageListFilter.jsx b/src/views/Conversations/Online/Components/MessageListFilter.jsx
index b45dce0..d6d9ebf 100644
--- a/src/views/Conversations/Online/Components/MessageListFilter.jsx
+++ b/src/views/Conversations/Online/Components/MessageListFilter.jsx
@@ -1,8 +1,8 @@
 import { createContext, useEffect, useState } from 'react';
-import { Button, Tag, Radio, Popover, Form, Dropdown, Tabs, List, Image, Empty, Avatar } from 'antd';
+import { Button, Tag, Radio, Popover, Form, Dropdown, Tabs, List, Image, Empty, Avatar, Card } from 'antd';
 import { FileSearchOutlined, FilterOutlined, FilterTwoTone } from '@ant-design/icons';
 import { FilterIcon, InboxIcon, MailSendIcon, SendPlaneFillIcon, SendPlaneLineIcon } from '@/components/Icons';
-import { isEmpty, objectMapper, stringToColour } from '@/utils/commons';
+import { groupBy, isEmpty, objectMapper, stringToColour } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import EmailDetail from './EmailDetail';
@@ -12,6 +12,10 @@ const CalColorStyle = (tag, outerStyle = true) => {
   const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
   return { color: `${color}`, ...outerStyleObj };
 };
+const getVideoName = (vUrl) => {
+  const url = new URL(vUrl);
+  return url.pathname.split('/').pop();
+};
 const MessageListFilter = ({ ...props }) => {
   const activeMessages = useConversationStore(
     useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn] : []))
@@ -23,13 +27,20 @@ const MessageListFilter = ({ ...props }) => {
 
   const Album = () => {
     const data = (activeMessages || []).filter((item) => item.type === 'photo').reverse();
+    const byDate = groupBy(data, (item) => item.localDate.slice(0, 10));
     return (
       <>
         {data.length === 0 && <Empty description={false} />}
-        <div className='grid grid-cols-5 gap-2 max-h-96 overflow-y-auto'>
+        <div className='max-h-96 overflow-y-auto'>
           <Image.PreviewGroup className='my-4'>
-            {data.map((img) => (
-              <Image className='border object-cover' key={img.data.id} width={100} height={100} src={img.data.uri} />
+            {Object.keys(byDate).map((date, index) => (
+              <Card size='small' title={date} key={date} className='mb-2'>
+                <div className='grid grid-cols-5 gap-2 '>
+                  {byDate[date].map((img) => (
+                    <Image className='border object-cover' key={img.data.id} width={100} height={100} src={img.data.uri} />
+                  ))}
+                </div>
+              </Card>
             ))}
           </Image.PreviewGroup>
         </div>
@@ -42,7 +53,7 @@ const MessageListFilter = ({ ...props }) => {
     const data = (activeMessages || []).filter((item) => item.type === 'video').reverse();
     return (
       <>
-        {data.length === 0 && <Empty description={false} />}
+        {/* {data.length === 0 && <Empty description={false} />}
         <div className='grid grid-cols-3 gap-2 max-h-96 overflow-y-auto'>
           {data.map((item) => (
             <video controls controlsList='nodownload nofullscreen noremoteplayback' preload='metadata' key={item.data.id} className='max-h-24'>
@@ -50,7 +61,31 @@ const MessageListFilter = ({ ...props }) => {
               Your browser does not support HTML video.
             </video>
           ))}
-        </div>
+        </div> */}
+        <List
+          className='max-h-96 overflow-y-auto'
+          itemLayout='horizontal'
+          dataSource={data}
+          renderItem={(item, index) => (
+            <List.Item actions={[item.localDate]}>
+              <List.Item.Meta
+                // avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
+                avatar={
+                  <Avatar size='small' style={CalColorStyle(item.sender)}>
+                    {item.senderName}
+                  </Avatar>
+                }
+                title={
+                  <a href={item.data.uri} target='_blank' rel='noreferrer'>
+                    {getVideoName(item?.data.videoURL)}
+                  </a>
+                }
+                description={item.text}
+              />
+              {/* {item.text} */}
+            </List.Item>
+          )}
+        />
       </>
     );
   };
diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
index 028f323..2ff8345 100644
--- a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
+++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
@@ -215,7 +215,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, ini
             </Popconfirm>
             <Select options={[
               {key: 'lyt@hainatravel.com', value: 'lyt@hainatravel.com', label: 'LYT <lyt@hainatravel.com>' },
-              {key: 'ycc@chinahighlights.com', value: 'ycc@chinahighlights.com', label: 'YCC <ycc@chinahighlights.com>' },
+              {key: 'XXX@chinahighlights.com', value: 'XXX@chinahighlights.com', label: 'XXX <XXX@chinahighlights.com>' },
             ]} value={newFromEmail || fromEmail} onChange={(val) => setNewFromEmail(val)} variant={'borderless'}  />
           </div>
         }>