From 4ba53213c181c38fc62cdad7f3223a0117825768 Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Mon, 6 Nov 2023 20:49:13 +0000
Subject: [PATCH] Add email list page

---
 packages/dashboard-v2/public/logo-white.svg   |   5 +
 .../dashboard-v2/src/layouts/MainLayout.vue   |   2 +-
 .../src/pages/email/EmailFolderPage.vue       | 108 +++---------------
 .../src/pages/files/FilesFolderPage.vue       |   1 +
 .../dashboard-v2/src/stores/auth-store.js     |   2 +-
 worker/dev/wrangler.toml                      |   8 +-
 6 files changed, 30 insertions(+), 96 deletions(-)
 create mode 100644 packages/dashboard-v2/public/logo-white.svg

diff --git a/packages/dashboard-v2/public/logo-white.svg b/packages/dashboard-v2/public/logo-white.svg
new file mode 100644
index 0000000..80ebe65
--- /dev/null
+++ b/packages/dashboard-v2/public/logo-white.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="62.438px" height="53.605px" viewBox="0 0 62.438 53.605" enable-background="new 0 0 62.438 53.605" xml:space="preserve">
+<path fill="#ffffff"
+          d="M 31.215 28.283 L 21.917 32.794 L 9.333 26.691 L 9.333 42.941 L 31.216 53.554 L 53.099 42.941 L 53.099 26.691 L 40.515 32.794 L 31.215 28.283 Z M 42.156 40.763 L 42.156 43.258 M 30.592 33.435 L 31.838 33.435 L 31.838 48.401 L 30.592 48.401 L 30.592 33.435 Z M 9.332 15.177 L 31.215 25.79 L 21.917 30.299 L 0.033 19.687 L 9.332 15.177 Z M 53.097 15.177 L 62.395 19.687 L 40.513 30.299 L 31.214 25.79 L 53.097 15.177 Z M 9.332 15.177 L 31.215 4.564 L 21.917 0.053 L 0.033 10.666 L 9.332 15.177 Z M 53.097 15.177 L 62.395 10.666 L 40.513 0.053 L 31.214 4.564 L 53.097 15.177 Z"/>
+</svg>
diff --git a/packages/dashboard-v2/src/layouts/MainLayout.vue b/packages/dashboard-v2/src/layouts/MainLayout.vue
index c60c178..c7f3610 100644
--- a/packages/dashboard-v2/src/layouts/MainLayout.vue
+++ b/packages/dashboard-v2/src/layouts/MainLayout.vue
@@ -7,7 +7,7 @@
 
         <q-toolbar-title class="text-bold">
           <q-avatar>
-            <img src="/logo.png">
+            <img src="/logo-white.svg">
           </q-avatar>
           R2-Explorer
         </q-toolbar-title>
diff --git a/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue b/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue
index 25eec82..975ef7e 100644
--- a/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue
+++ b/packages/dashboard-v2/src/pages/email/EmailFolderPage.vue
@@ -12,10 +12,9 @@
         :flat="true"
         @row-click="rowClick">
 
-        <template v-slot:body-cell-name="prop">
-          <td class="flex" style="align-items: center">
-            <q-icon :name="prop.row.icon" size="sm" :color="prop.row.color" class="q-mr-xs" />
-            {{prop.row.name}}
+        <template v-slot:body-cell-has_attachments="prop">
+          <td>
+            <q-icon v-if="prop.row.has_attachments" name="attachment" size="sm" color="black" />
           </td>
         </template>
 
@@ -62,10 +61,10 @@
 import { defineComponent } from "vue";
 import { api } from "boot/axios";
 import { useMainStore } from "stores/main-store";
-import { bytesToSize, decode, encode, timeSince } from "../../appUtils";
+import { encode, timeSince } from "../../appUtils";
 
 export default defineComponent({
-  name: 'EmailIndexPage',
+  name: 'EmailFolderPage',
   data: function () {
     return {
       loading: false,
@@ -75,19 +74,21 @@ export default defineComponent({
           name: 'sender',
           required: true,
           field: 'sender',
+          align: 'left',
           sortable: false
         },
         {
-          name: 'title',
+          name: 'subject',
           required: true,
-          field: 'title',
+          field: 'subject',
+          align: 'left',
           sortable: false
         },
         {
-          name: 'attachments',
+          name: 'has_attachments',
           required: true,
           align: 'left',
-          field: 'attachments',
+          field: 'has_attachments',
           sortable: false,
         },
         {
@@ -104,53 +105,15 @@ export default defineComponent({
     selectedBucket: function () {
       return this.$route.params.bucket
     },
-    selectedFolder: function () {
-      // TODO check if is root folder
-      if (this.$route.params.folder) {
-        return decode(this.$route.params.folder)
-      }
-      return ''
-    },
-    breadcrumbs: function () {
-      if (this.selectedFolder) {
-        return [{
-          name: "Home",
-          path: '/'
-        }, ...this.selectedFolder.split('/')
-          .filter((obj) => obj !== '')
-          .map((item, index, arr) => {
-            return {
-              name: item,
-              path: arr.slice(0, index + 1).join('/').replace('Home/', '') + '/'
-            }
-          })
-        ]
-      } else {
-        return [{
-          name: "Home",
-          path: '/'
-        }]
-      }
-    }
   },
   watch: {
     selectedBucket(newVal) {
       this.fetchFiles()
     },
-    selectedFolder(newVal) {
-      this.fetchFiles()
-    },
   },
   methods: {
-    breadcrumbsClick: function(obj) {
-      this.$router.push({ name: `files-folder`, params: { bucket: this.selectedBucket, folder: encode(obj.path) }})
-    },
     rowClick: function(evt, row, index) {
-      if (row.type === 'folder') {
-        this.$router.push({ name: `files-folder`, params: { bucket: this.selectedBucket, folder: encode(row.key) }})
-      } else {
-        console.log(row)
-      }
+      console.log(row)
     },
     fetchFiles: async function () {
       const self = this
@@ -158,13 +121,12 @@ export default defineComponent({
       let truncated = true
       let cursor = null
       let contentFiles = []
-      let contentFolders = []
 
       while (truncated) {
         const response = await api.get(`/buckets/${this.selectedBucket}?include=customMetadata&include=httpMetadata`, {
           params: {
             delimiter: '/',
-            prefix: this.selectedFolder && this.selectedFolder !== '/' ? encode(this.selectedFolder) : '',
+            prefix: encode('.r2-explorer/emails/inbox/'),
             cursor: cursor
           }
         })
@@ -180,62 +142,28 @@ export default defineComponent({
 
             return {
               ...obj,
-              name: obj.key.replace(self.selectedFolder, ''),
+              sender: obj.customMetadata.from_name || obj.customMetadata.from_address,
+              subject: obj.customMetadata.subject,
+              has_attachments: obj.customMetadata.has_attachments === 'true',
+              read: obj.customMetadata.read,
               lastModified: timeSince(date),
               timestamp: date.getTime(),
-              size: bytesToSize(obj.size),
-              sizeRaw: obj.size,
-              type: 'file',
-              icon: 'article',
-              color: 'grey',
             }
-          }).filter(obj => {
-            // Remove hidden files
-            return !(this.mainStore.configuration.showHiddenFiles !== true && obj.name.startsWith('.'))
           })
 
           for (const f of files) {
             contentFiles.push(f)
           }
         }
-
-        if (response.data.delimitedPrefixes) {
-          const folders = response.data.delimitedPrefixes.map(function (obj) {
-            return {
-              name: obj.replace(self.selectedFolder, ''),
-              key: obj,
-              lastModified: '--',
-              timestamp: 0,
-              size: '--',
-              sizeRaw: 0,
-              type: 'folder',
-              icon: 'folder',
-              color: 'orange',
-            }
-          }).filter(obj => {
-            // Remove hidden files
-            return !(this.mainStore.configuration.showHiddenFiles !== true && obj.name.startsWith('.'))
-          })
-          console.log(folders)
-          for (const f of folders) {
-            contentFolders.push(f)
-          }
-        }
       }
 
-      this.rows = [
-        ...contentFolders,
-        ...contentFiles
-      ]
+      this.rows = contentFiles
       this.loading = false
     }
   },
   created() {
     this.fetchFiles()
   },
-  mounted() {
-    this.$refs.table.sort('name')
-  },
   setup () {
     return {
       mainStore: useMainStore()
diff --git a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
index f6ee787..47a091e 100644
--- a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
+++ b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
@@ -222,6 +222,7 @@ export default defineComponent({
           }).filter(obj => {
             // Remove hidden files
             console.log(this.mainStore.configuration)
+            console.log(this.mainStore.configuration.showHiddenFiles)
             return !(this.mainStore.configuration.showHiddenFiles !== true && obj.name.startsWith('.'))
           })
 
diff --git a/packages/dashboard-v2/src/stores/auth-store.js b/packages/dashboard-v2/src/stores/auth-store.js
index 290979b..0c78985 100644
--- a/packages/dashboard-v2/src/stores/auth-store.js
+++ b/packages/dashboard-v2/src/stores/auth-store.js
@@ -58,7 +58,7 @@ export const useAuthStore = defineStore('auth', {
       } catch (e) {
         // Auth token expired
         delete api.defaults.headers.common['Authorization'];
-        this.router.replace({ name: 'login', query: { next: this.router.currentRoute.fullPath } });
+        await this.router.replace({ name: 'login', query: { next: this.router.currentRoute.fullPath } });
         return
       }
 
diff --git a/worker/dev/wrangler.toml b/worker/dev/wrangler.toml
index 9dedf2c..b876ce2 100644
--- a/worker/dev/wrangler.toml
+++ b/worker/dev/wrangler.toml
@@ -18,7 +18,7 @@ binding = 'r2-explorer-example-1'
 bucket_name = 'r2-explorer-example-1'
 preview_bucket_name = 'r2-explorer-example-1'
 
-[[r2_buckets]]
-binding = 'drive'
-bucket_name = 'drive'
-preview_bucket_name = 'drive'
+#[[r2_buckets]]
+#binding = 'drive'
+#bucket_name = 'drive'
+#preview_bucket_name = 'drive'