Fix email attachments and mobile ui

G4brym · Mar 9, 2024 · 3654759 · 3654759
1 parent a30907c
commit 3654759
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -3,8 +3,7 @@
 ## Build and publish Dashboard into Dev
 
 ```bash
-cd packages/dashboard/
-npm run build
+make build-dashboard
 wrangler pages publish --branch dev --project-name r2-explorer-dashboard dist/
 ```
 

diff --git a/Makefile b/Makefile
@@ -1,12 +1,7 @@
 build-dashboard:
-	rm -rf packages/dashboard/dist/
 	rm -rf packages/dashboard-v2/dist/
 	rm -rf dist/
 
-	cd packages/dashboard/ && \
-	npm install && \
-	npm run build
-
 	cd packages/dashboard-v2/ && \
 	npm install && \
 	npm run build

diff --git a/packages/dashboard-v2/src/pages/email/EmailFilePage.vue b/packages/dashboard-v2/src/pages/email/EmailFilePage.vue
@@ -66,7 +66,7 @@
               <q-card-section class="q-pa-sm flex" style="align-items: center">
                 <q-icon name="description" size="md" color="blue" class="q-mr-sm"/>
                 {{ attachment.filename }}
-                <q-btn color="white" text-color="black" icon="download" class="q-mr-0 q-ml-auto" />
+                <q-btn color="white" text-color="black" icon="download" class="q-mr-0 q-ml-auto" @click="downloadAtt(attachment)" />
               </q-card-section>
             </q-card>
 
@@ -147,7 +147,7 @@ export default defineComponent({
 
       const filename = fileName.split(".json")[0];
       for (const att of fileData.data.attachments) {
-        att.downloadUrl = `${this.mainStore.serverUrl}/api/buckets/${this.selectedBucket}/${encode(`${filename}/${att.filename}`)}`;
+        att.downloadUrl = `${this.mainStore.serverUrl}/api/buckets/${this.selectedBucket}/${encode(`.r2-explorer/emails/${this.selectedFolder}/${filename}/${att.filename}`)}`;
       }
       this.file = fileData.data;
 
@@ -193,6 +193,18 @@ export default defineComponent({
         message: 'Email marked as read!',
         timeout: 2500 // we will timeout it in 2.5s
       })
+    },
+    downloadAtt: function(attachment) {
+      console.log(attachment)
+      // return
+      const link = document.createElement('a')
+      link.download = attachment.filename
+
+      link.href = attachment.downloadUrl
+
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
     }
   },
   created() {

diff --git a/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue b/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page class="">
-    <div class="q-pa-md">
+    <div class="">
       <q-infinite-scroll ref="infScroll" :disable="loadMoreAutomatically" @load="loadNextPage" :offset="250"
                          :debounce="100">
         <q-table
@@ -48,7 +48,20 @@
 
           <template v-slot:body-cell-sender="prop">
             <q-td :props="prop" class="email-sender" :class="rowClass(prop)">
-              {{ prop.value }}
+              <div class="flex column">
+                <div class="flex">
+                  <div class="mobile-title">
+                    {{ prop.value }}
+                  </div>
+                  <div class="mobile-last-modified mobile-subject">
+                    {{prop.row.lastModified}}
+                    <q-icon v-if="prop.row.has_attachments" name="attachment" size="sm" color="black" />
+                  </div>
+                </div>
+                <div class="email-subject mobile-subject">
+                  {{prop.row.subject}}
+                </div>
+              </div>
             </q-td>
           </template>
 
@@ -248,6 +261,7 @@ export default defineComponent({
       await this.loadNextPage(0, () => {
       });
       await this.$refs.infScroll.setIndex(0);  // First page is 0
+      await this.$refs.infScroll.poll();
 
       this.loadMoreAutomatically = false;
 
@@ -326,6 +340,30 @@ export default defineComponent({
   .mobile-subject {
     display: none;
   }
+
+  @media (max-width: 992px) {
+    width: 100%;
+    height: auto !important;
+
+    .mobile-subject {
+      display: block;
+    }
+
+    .mobile-title {
+      font-size: 18px;
+    }
+
+    .mobile-last-modified {
+      margin-right: 0;
+      margin-left: auto;
+      align-self: end;
+    }
+
+    .email-subject {
+      font-size: 14px;
+      max-width: 100%;
+    }
+  }
 }
 
 .email-subject {
@@ -352,6 +390,12 @@ export default defineComponent({
 
 .email-list td {
   vertical-align: middle !important;
+
+  @media (max-width: 992px) {
+    &:not(.email-sender) {
+      display: none;
+    }
+  }
 }
 
 .email-list tbody tr {