From 968f4246b67501e791404af503fec794ef36769e Mon Sep 17 00:00:00 2001
From: msramalho <19508417+msramalho@users.noreply.github.com>
Date: Sat, 8 Feb 2025 23:34:20 +0000
Subject: [PATCH] improves URL search/archive UI/UX

---
 src/store/index.js              |  1 +
 src/views/ArchiveSearchView.vue | 13 +++++++++++--
 src/views/ArchiveUrlView.vue    | 24 ++++++++++++++++--------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index f561a69..386c25f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -343,6 +343,7 @@ export default createStore({
           );
 
           // add permissions
+          // TODO: make sure this emailAdress is used according to the group
           await gapi.client.drive.permissions.create({
             fileId: spreadsheetId,
             resource: {
diff --git a/src/views/ArchiveSearchView.vue b/src/views/ArchiveSearchView.vue
index ff93bf5..8c6d69b 100644
--- a/src/views/ArchiveSearchView.vue
+++ b/src/views/ArchiveSearchView.vue
@@ -52,7 +52,15 @@
                     <a :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.url }}</a>
                   </template>
                   <template v-slot:item.created_at="{ item }">
-                    <time :datetime="item?.created_at">{{ item?.created_at }}</time>
+                    <time :datetime="item?.created_at"
+                      :title="$moment(item?.created_at).format(`MMMM Do YYYY, k:mm:ss`)">{{
+                        $moment(item?.created_at).fromNow() }}</time>
+                  </template>
+                  <template v-slot:item.store_until="{ item }">
+                    <time :datetime="item?.store_until"
+                      :title="`this archive will be deleted on: ${$moment(item?.store_until).format(`MMMM Do YYYY, k:mm:ss`)}`"
+                      :style="{ color: $moment().diff(item?.store_until, 'days') > -31 ? 'red' : 'inherit' }">{{
+                      item?.store_until ? $moment(item?.store_until).fromNow() : "never" }}</time>
                   </template>
                   <template v-slot:item.size="{ item }">
                     {{ ((item?.result?.metadata?.total_bytes || 0) / (1024 * 1024)).toFixed(2) }}
@@ -123,7 +131,8 @@ export default {
       headers: [
         { title: "URL", value: "url" },
         { title: "Result", value: "result" },
-        { title: "Archived At", value: "created_at" },
+        { title: "Archived", value: "created_at" },
+        { title: "Deleted", value: "store_until", width: "150px" },
         { title: "Size (MB)", value: "size" },
         { title: "Files", value: "files" },
         { title: '', key: 'data-table-expand' },
diff --git a/src/views/ArchiveUrlView.vue b/src/views/ArchiveUrlView.vue
index f7da1c5..b2d9bbb 100644
--- a/src/views/ArchiveUrlView.vue
+++ b/src/views/ArchiveUrlView.vue
@@ -1,7 +1,7 @@
 <template>
   <PermissionNeeded v-if="user && !featureEnabled" feature="Archive URL" />
   <v-container class="pane" v-if="user?.active && featureEnabled">
-    <v-card :loading="loadingArchive">
+    <v-card>
       <v-card-title class="text-center">
         Archive a single URL
       </v-card-title>
@@ -30,11 +30,12 @@
           <v-col cols="12">
             <p v-if="loadingArchive">
               <v-progress-circular color="teal" indeterminate></v-progress-circular>
-              Archive in progress task id = <code>{{ taskId }}</code>
+              Archive in progress <span v-if="taskId">task id = <code>{{ taskId }}</code></span>
             </p>
             <v-alert color="success" icon="mdi-information" v-if="archiveResult">
-              Archived successfully with id {{ taskId }} available <a :href="getUrlFromResult(archiveResult)"
-                target="_blank">here</a>.
+              Archived successfully with id {{ archiveResult.id }}
+              <span v-if="urlFromResult"> available <a :href="urlFromResult" target="_blank">here</a>.</span>
+              <span v-if="!urlFromResult">no archived content to show.</span>
             </v-alert>
             <v-alert color="warning" icon="mdi-alert" v-if="archiveFailure">
               Failure: {{ archiveFailure }}
@@ -115,8 +116,9 @@ export default {
     urlValidator() {
       return urlValidator;
     },
-    getUrlFromResult() {
-      return getUrlFromResult;
+    urlFromResult() {
+      if (!this.archiveResult) return null;
+      return getUrlFromResult(this.archiveResult);
     },
     validUrl() {
       return this.url && this.urlValidator(this.url) === true;
@@ -156,6 +158,10 @@ export default {
       this.archiveResult = null;
       this.archiveFailure = null;
       this.taskId = null;
+      if (this.loadingArchive) {
+        this.loadingArchive = false;
+        this.showSnackbar("Your previous archive will run in the background.", "yellow");
+      }
     },
   },
   methods: {
@@ -197,13 +203,15 @@ export default {
         .catch(error => {
           console.error("/archive ", error);
           this.showSnackbar(`Unable to archive URL: ${error.message}`);
-        }).finally(() => {
           this.loadingArchive = false;
         });
     },
     pollForArchiveResults() {
       this.loadingArchive = true;
       const poll = () => {
+        if (!this.loadingArchive) {
+          return;
+        }
         fetch(`${this.$store.state.API_ENDPOINT}/task/${this.taskId}`, {
           method: "GET",
           headers: {
@@ -216,8 +224,8 @@ export default {
             if (task.status === "SUCCESS") {
               this.showSnackbar(`URL archived successfully with id ${task.result.id}!`, "green");
               this.loadingArchive = false;
-              this.taskId = null;
               this.archiveResult = task;
+              this.taskId = task.id;
             } else if (task.status === "FAILURE") {
               this.showSnackbar(`Failed to archive URL: ${task.result.error}`);
               this.loadingArchive = false;