feat: created dual view system to view all mail and attachments separately

webui-src/app/mail/mail_attachment.js

@@ -1,24 +1,62 @@
 const m = require('mithril');
+const rs = require('rswebui');
 const util = require('mail/mail_util');
 
 const Layout = () => {
+  const files = [];
+  let changeView = false;
+
   return {
+    oninit: (v) => {
+      v.attrs.list.forEach(async (element) => {
+        const res = await rs.rsJsonApiRequest('/rsMsgs/getMessage', {
+          msgId: element.msgId,
+        });
+        if (res.body.retval) {
+          files.push(...res.body.msg.files);
+        }
+      });
+    },
     view: (v) => [
       m('.widget', [
-        m('h3', 'Attachment'),
+        m('div.msg-attachment-container', [
+          m('h3', 'Attachment'),
+          m('.view', [
+            m(
+              '.mail-view',
+              {
+                onclick: () => (changeView = false),
+                style: { backgroundColor: changeView ? '#fff' : '#019DFF' },
+              },
+              m('i.fas.fa-mail-bulk')
+            ),
+            m(
+              '.attachment-view',
+              {
+                onclick: () => (changeView = true),
+                style: { backgroundColor: changeView ? '#019DFF' : '#fff' },
+              },
+              m('i.fas.fa-file')
+            ),
+          ]),
+        ]),
         m('hr'),
-        m(
-          util.Table,
-          m(
-            'tbody',
-            v.attrs.list.map((msg) =>
-              m(util.MessageSummary, {
-                details: msg,
-                category: 'system',
-              })
-            )
-          )
-        ),
+        changeView
+          ? m(util.AttachmentSection, {
+              files,
+            })
+          : m(
+              util.Table,
+              m(
+                'tbody',
+                v.attrs.list.map((msg) =>
+                  m(util.MessageSummary, {
+                    details: msg,
+                    category: 'attachment',
+                  })
+                )
+              )
+            ),
       ]),
     ],
   };

webui-src/app/mail/mail_util.js

@@ -117,6 +117,53 @@ const MessageSummary = () => {
   };
 };
 
+const AttachmentSection = () => {
+  return {
+    view: (v) =>
+      m('.attachment-container', [
+        v.attrs.files.map((item) =>
+          m('.attachment', [
+            m('.detail', [m('i.fas.fa-file'), m('span', item.fname)]),
+            m(
+              'button',
+              {
+                onclick: () => {
+                  try {
+                    rs.rsJsonApiRequest(
+                      '/rsFiles/FileRequest',
+                      {
+                        fileName: item.fname,
+                        hash: item.hash,
+                        flags: util.RS_FILE_REQ_ANONYMOUS_ROUTING,
+                        size: {
+                          xstr64: item.size.xstr64,
+                        },
+                      },
+                      (status) => {
+                        status.retval
+                          ? widget.popupMessage([
+                              m('i.fas.fa-file-medical'),
+                              m('h3', 'File is being downloaded!'),
+                            ])
+                          : widget.popupMessage([
+                              m('i.fas.fa-file-medical'),
+                              m('h3', 'File is already downloaded!'),
+                            ]);
+                      }
+                    );
+                  } catch (error) {
+                    console.log('error: ', error);
+                  }
+                },
+              },
+              m('i.fas.fa-download')
+            ),
+          ])
+        ),
+      ]),
+  };
+};
+
 const MessageView = () => {
   let details = {};
   let files = [];
@@ -288,52 +335,13 @@ const MessageView = () => {
             },
             message
           ),
-          files.length > 0 &&
-            m('', [
-              m('hr'),
-              m('h3', 'Attachments'),
-              m('.attachment-container', [
-                files.map((item) =>
-                  m('.attachment', [
-                    m('.detail', [m('i.fas.fa-file'), m('span', item.fname)]),
-                    m(
-                      'button',
-                      {
-                        onclick: () => {
-                          try {
-                            rs.rsJsonApiRequest(
-                              '/rsFiles/FileRequest',
-                              {
-                                fileName: item.fname,
-                                hash: item.hash,
-                                flags: util.RS_FILE_REQ_ANONYMOUS_ROUTING,
-                                size: {
-                                  xstr64: item.size.xstr64,
-                                },
-                              },
-                              (status) => {
-                                status.retval
-                                  ? widget.popupMessage([
-                                      m('i.fas.fa-file-medical'),
-                                      m('h3', 'File is being downloaded!'),
-                                    ])
-                                  : widget.popupMessage([
-                                      m('i.fas.fa-file-medical'),
-                                      m('h3', 'File is already downloaded!'),
-                                    ]);
-                              }
-                            );
-                          } catch (error) {
-                            console.log('error: ', error);
-                          }
-                        },
-                      },
-                      m('i.fas.fa-download')
-                    ),
-                  ])
-                ),
-              ]),
-            ]),
+          files.length > 0 && [
+            m('hr'),
+            m('h3', 'Attachments'),
+            m(AttachmentSection, {
+              files,
+            }),
+          ],
         ]
       ),
   };
@@ -450,6 +458,7 @@ const SidebarQuickView = () => {
 module.exports = {
   MessageSummary,
   MessageView,
+  AttachmentSection,
   Table,
   SearchBar,
   Sidebar,

webui-src/app/scss/pages/_mail.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as *;
+
 /* star */
 table.mails th:nth-child(1) {
   width: 5%;
@@ -125,9 +127,8 @@ iframe.msg {
   flex-direction: column;
 }
 
-// Download Files
+// Normal mail attachment view
 .attachment-container {
-  max-height: 20vh;
   height: auto;
   overflow-y: scroll;
   display: flex;
@@ -144,3 +145,23 @@ iframe.msg {
     }
   }
 }
+
+// Attachment Section attachment view
+.msg-attachment-container {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+
+  & .view {
+    height: max-content;
+    border: 1px solid $primary-color;
+    border-radius: 4px;
+    display: flex;
+
+    & * {
+      padding: 4px 12px;
+      border-radius: 4px;
+    }
+  }
+}