feat: 邮件详情页: 回复, 转发

src/views/Conversations/Online/Components/BubbleEmail.jsx

@@ -47,6 +47,7 @@ const ChatboxEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
       onOpen={() => handlePreview(message)}
       onTitleClick={() => handlePreview(message)}
       text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} email={message.emailOrigin} sender={message.sender} />}
+      // forwarded={true}
       // replyButton={message.sender !== 'me'}
       // replyButton={['text', 'document', 'image'].includes(message.whatsapp_msg_type)}
       {...(message.sender === 'me'

src/views/Conversations/Online/Components/EmailDetail.jsx

@@ -5,6 +5,7 @@ import Modal from '@dckj/react-better-modal';
 import { Avatar as Avatar1 } from 'react-chat-elements';
 import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
 import { isEmpty, olog, stringToColour } from '@/utils/commons';
+import EmailEditorPopup from '../Input/EmailEditorPopup';
 
 const TagColorStyle = (tag) => {
   const color = stringToColour(tag);
@@ -14,11 +15,23 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
   let { emailOrigin } = emailDetail;
   emailOrigin = emailOrigin || {};
   // const [open, setOpen] = useState(false);
+  const [initialPosition, setInitialPosition] = useState({});
+  const [initialSize, setInitialSize] = useState({});
+  const [initialMailTo, setInitialMailTo] = useState({});
   function onHandleMove(e) {
-    console.log(e, '--->>> onHandleMove');
+    // console.log(e, '--->>> onHandleMove');
+    const { top, left, width, height } = e;
+    setInitialPosition({ top, left });
+    console.log('top, left, width, height', '--->>> onHandleMove');
+    console.log(top, left, width, height, '--->>> onHandleMove');
   }
   function onHandleResize(e) {
-    console.log(e, '--->>> onHandleResize');
+    // console.log(e, '--->>> onHandleResize');
+    const { top, left, width, height } = e;
+    setInitialPosition({ top, left });
+    setInitialSize({ width, height });
+    console.log('top, left, width, height', '--->>> onHandleResize');
+    console.log(top, left, width, height, '--->>> onHandleResize');
   }
 
   function onHandleOk() {
@@ -32,6 +45,21 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
   function onStageChange({ state }) {
     console.log(state);
   }
+
+  const [action, setAction] = useState('');
+
+  const [openEmailEditor, setOpenEmailEditor] = useState(false);
+  const [fromEmail, setFromEmail] = useState('');
+  const [ReferEmailMsg, setReferEmailMsg] = useState('');
+  const onOpenEditor = (emailOrigin, action) => {
+    const { replyToEmail: email_addr, content } = emailOrigin;
+    setOpenEmailEditor(true);
+    setFromEmail(email_addr);
+    setReferEmailMsg(emailOrigin);
+    setAction(action);
+    setOpen(false);
+  };
+
   return (
     <>
       <Modal
@@ -52,6 +80,10 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
         initialHeight={600}
         initialTop={74}
         initialLeft={window.innerWidth - 700}
+        // left={initialPosition.left}
+        // top={initialPosition.top}
+        // width={initialSize.width}
+        // height={initialSize.height}
         // title={`${reference ? '回复: ' : '写邮件: '} ${fromEmail || ''}`}
         title={emailOrigin.subject}
         minimizeButton={<></>}
@@ -80,10 +112,10 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
               </div>
               <div className='flex flex-col justify-start gap-1 items-end'>
                 <div className='flex items-center  '>
-                  <Button size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
+                  <Button onClick={() => onOpenEditor(emailOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
                     回复
                   </Button>
-                  <Button size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
+                  <Button onClick={() => onOpenEditor(emailOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
                     转发
                   </Button>
                 </div>
@@ -119,6 +151,7 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
           </div>
         </div>
       </Modal>
+      <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} quote={ReferEmailMsg} initial={{...initialPosition, ...initialSize}} action={action} key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}/>
     </>
   );
 };

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -27,7 +27,7 @@ import { isEmpty } from '@/utils/commons';
 // function onError(error) {
 //   console.error(error);
 // }
-const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...props }) => {
+const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, initial = {}, action='reply', ...props }) => {
   const [form] = Form.useForm();
 
   // const [open, setOpen] = useState(false);
@@ -81,10 +81,13 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
     // console.log('body', body);
     form
       .validateFields()
-      .then((values) => {})
-      .catch((err) => {});
+      .then((values) => {
+        form.resetFields();
+
+      })
+      // .catch((err) => {})
+        ;
 
-    form.resetFields();
 
     // setOpen(false);
   };
@@ -125,8 +128,8 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
       </p>
       <p class="editor-paragraph" dir="ltr">${content}</p>
       `;
-      // <blockquote class="editor-quote">
-      // </blockquote>
+    // <blockquote class="editor-quote">
+    // </blockquote>
 
     setInitialContent(preQuoteBody);
     const _formValues = {
@@ -134,12 +137,17 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
       cc: quote.cc,
       subject: `Re: ${subject}`,
     };
-    form.setFieldsValue(_formValues);
-    setInitialForm(_formValues);
+    const forwardValues = {subject: `Fw: ${subject}`,};
+    if (action === 'reply') {
+      form.setFieldsValue(_formValues);
+      setInitialForm(_formValues);
+    } else if (action === 'forward') {
+      form.setFieldsValue(forwardValues);
+      setInitialForm(forwardValues);
+    }
 
     return () => {};
-  }, [quote])
-
+  }, [quote, open]);
 
   return (
     <>
@@ -157,10 +165,10 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
         contentClassName='p-2'
         footerClassName='p-2'
         zIndex={2}
-        initialWidth={680}
-        initialHeight={600}
-        initialTop={74}
-        initialLeft={window.innerWidth - 700}
+        initialWidth={initial.width || 680}
+        initialHeight={initial.height || 600}
+        initialTop={initial.top || (isEmpty(reference) ? 20 : 74)}
+        initialLeft={initial.left || window.innerWidth - 700}
         title={initialForm.subject || `${reference ? '回复: ' : '写邮件: '} ${fromEmail || ''}`}
         minimizeButton={<></>}
         onMove={onHandleMove}
@@ -170,19 +178,20 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
         onStageChange={onStageChange}
         footer={
           <div className='w-full flex gap-8 justify-start items-center text-indigo-600'>
-            <Button type='primary' className='bg-indigo-500 shadow shadow-indigo-300 hover:!bg-indigo-400 active:bg-indigo-400 focus:bg-indigo-400'
-              onClick={onHandleSend}
-            >
+            <Button type='primary' className='bg-indigo-500 shadow shadow-indigo-300 hover:!bg-indigo-400 active:bg-indigo-400 focus:bg-indigo-400' onClick={onHandleSend}>
               发送
             </Button>
             <Popover>
               {/* <Switch checkedChildren='纯文本' unCheckedChildren='HTML' /> */}
-              <Checkbox checked={!isRichText} onChange={e => setIsRichText(!(e.target.checked))}>纯文本</Checkbox>
+              <Checkbox checked={!isRichText} onChange={(e) => setIsRichText(!e.target.checked)}>
+                纯文本
+              </Checkbox>
             </Popover>
           </div>
         }>
         <Form
-          form={form} preserve={false}
+          form={form}
+          preserve={false}
           name='conversation_filter_form'
           size='small'
           variant={'borderless'}
@@ -191,7 +200,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
           className='*:mb-2 *:border-b *:border-t-0 *:border-x-0 *:border-indigo-100 *:border-solid '
           requiredMark={false}
           labelCol={{ span: 3 }}>
-          <Form.Item label='To' name={'to'} rules={[{required: true}]}>
+          <Form.Item label='To' name={'to'} rules={[{ required: true }]}>
             {/* <Mentions
               split='; '
               options={[
@@ -223,7 +232,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
           <Form.Item label='Bcc' name={'bcc'} hidden={!showBcc}>
             <Input />
           </Form.Item>
-          <Form.Item label='Subject' name={'subject'} rules={[{required: true}]}>
+          <Form.Item label='Subject' name={'subject'} rules={[{ required: true }]}>
             <Input />
           </Form.Item>
           <Form.Item name='content' hidden>
@@ -233,7 +242,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote={}, ...pr
             <Input />
           </Form.Item>
         </Form>
-        <LexicalEditor {...{isRichText}} onChange={handleEditorChange} initialValue={initialContent} />
+        <LexicalEditor {...{ isRichText }} onChange={handleEditorChange} initialValue={initialContent} />
       </Modal>
     </>
   );

src/views/Conversations/Online/MessagesWrapper.jsx

@@ -9,9 +9,9 @@ import { useVisibilityState } from '@/hooks/useVisibilityState';
 import ConversationNewItem from './ConversationsNewItem';
 import emailItem from './Components/emailSent.json';
 import emailReItem from './Components/emailRe.json';
-import EmailEditor from './Input/EmailEditor';
+// import EmailEditor from './Input/bak/EmailEditor';
 import EmailEditorPopup from './Input/EmailEditorPopup';
-import EmailDetail from './Input/EmailDetail';
+import EmailDetail from './Components/EmailDetail';
 
 const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
   const userId = useAuthStore((state) => state.loginUser.userId);
@@ -193,8 +193,8 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
         onCancel={() => setNewChatModalVisible(false)}
       />
       {/* <EmailEditor open={openEmailEditor} setOpen={setOpenEmailEditor} reference={ReferEmailMsg} setRefernce={setReferEmailMsg} {...{ fromEmail, }} key={'email-editor-reply'} /> */}
-      <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} quote={ReferEmailMsg} key={`email-editor-reply-popup_${ReferEmailMsg.id}`}/>
-      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailDetail={emailDetail} />
+      <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} quote={ReferEmailMsg} key={`email-editor-reply-top-popup_${ReferEmailMsg.id}`}/>
+      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailDetail={emailDetail} key={`email-detail-${emailDetail.id}`} />
       </>
   );
 };