Add ASAQC transfer support to client (sequence list)

lib/www/client/source/src/views/SequenceList.vue

@@ -80,6 +80,67 @@
                 <v-list-item-title>PDF</v-list-item-title>
               </v-list-item>
             </v-list-group>
+
+            <!-- ASAQC transfer queue actions -->
+
+            <!-- Item is not in queue -->
+            <v-list-item
+              v-if="writeaccess && !contextMenuItemInTransferQueue"
+              @click="addToTransferQueue(); contextMenuShow=false"
+            >
+              <v-list-item-content>
+                <v-list-item-title>Send to ASAQC</v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-icon>
+                <v-icon small>mdi-tray-plus</v-icon>
+              </v-list-item-icon>
+            </v-list-item>
+            <!-- Item queued, not yet sent -->
+            <v-list-item two-line
+              v-else-if="writeaccess && contextMenuItemInTransferQueue.status == 'queued'"
+              @click="removeFromTransferQueue(); contextMenuShow=false"
+            >
+              <v-list-item-content>
+                <v-list-item-title class="red--text">Cancel sending to ASAQC</v-list-item-title>
+                <v-list-item-subtitle class="info--text">
+                  Queued since: {{contextMenuItemInTransferQueue.created_on}}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-icon>
+                <v-icon small color="red">mdi-tray-remove</v-icon>
+              </v-list-item-icon>
+            </v-list-item>
+            <!-- Item already sent -->
+            <v-list-item two-line
+              v-else-if="writeaccess && contextMenuItemInTransferQueue.status == 'sent'"
+              @click="addToTransferQueue(); contextMenuShow=false"
+            >
+              <v-list-item-content>
+                <v-list-item-title>Resend to ASAQC</v-list-item-title>
+                <v-list-item-subtitle class="success--text">
+                  Last sent on: {{ contextMenuItemInTransferQueue.created_on }}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-icon>
+                <v-icon small>mdi-tray-plus</v-icon>
+              </v-list-item-icon>
+            </v-list-item>
+            <!-- Item sending was cancelled -->
+            <v-list-item two-line
+              v-else-if="writeaccess && contextMenuItemInTransferQueue.status == 'cancelled'"
+              @click="addToTransferQueue(); contextMenuShow=false"
+            >
+              <v-list-item-content>
+                <v-list-item-title>Send to ASAQC</v-list-item-title>
+                <v-list-item-subtitle class="info--text">
+                  Last send cancelled on: {{contextMenuItemInTransferQueue.updated_on}}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-icon>
+                <v-icon small>mdi-tray-plus</v-icon>
+              </v-list-item-icon>
+            </v-list-item>
+
           </v-list>
         </v-menu>
 
@@ -271,6 +332,23 @@
           <template v-slot:item.status="{value, item}">
             <span :class="{'success--text': value=='final', 'warning--text': value=='raw', 'error--text': value=='ntbp'}">
               {{ value == "final" ? "Processed" : value == "raw" ? item.raw_files ? "Acquired" : "In acquisition" : value == "ntbp" ? "NTBP" : `Unknown (${status})` }}
+              <v-icon small :title="`Sent to ASAQC on ${queuedItem(item.sequence).updated_on}`"
+                color="success"
+                v-if="queuedItem(item.sequence).status == 'sent'"
+              >mdi-upload</v-icon>
+              <v-icon small
+                title="Queued for sending to ASAQC"
+                v-else-if="queuedItem(item.sequence).status == 'queued'"
+              >mdi-upload-outline</v-icon>
+              <v-icon small
+                :title="`ASAQC transfer cancelled at ${queuedItem(item.sequence).updated_on}`"
+                v-else-if="queuedItem(item.sequence).status == 'cancelled'"
+              >mdi-upload-off-outline</v-icon>
+              <v-icon small
+                color="warning"
+                :title="`ASAQC transfer failed at ${queuedItem(item.sequence).updated_on}`"
+                v-else-if="queuedItem(item.sequence).status == 'failed'"
+              >mdi-upload-off</v-icon>
             </span>
           </template>
 
@@ -371,6 +449,7 @@ tr :nth-child(5), tr :nth-child(8), tr :nth-child(11), tr :nth-child(14) {
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { basename } from 'path';
+import throttle from '@/lib/throttle';
 
 export default {
   name: "SequenceList",
@@ -482,11 +561,19 @@ export default {
       contextMenuShow: false,
       contextMenuX: 0,
       contextMenuY: 0,
-      contextMenuItem: null
+      contextMenuItem: null,
+
+      // ASAQC transfer queue
+      queuedItems: []
     }
   },
 
   computed: {
+
+    contextMenuItemInTransferQueue () {
+      return this.queuedItems.find(i => i.payload.sequence == this.contextMenuItem.sequence);
+    },
+
     ...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent'])
   },
 
@@ -523,6 +610,15 @@ export default {
         } else {
           this.queuedReload = true;
         }
+      } else if (event.channel == "queue_items") {
+        const project =
+          event.payload?.project ??
+          event.payload?.new?.payload?.project ??
+          event.payload?.old?.payload?.project;
+
+        if (project == this.$route.params.project) {
+          this.getQueuedItems();
+        }
       }
     },
 
@@ -611,6 +707,59 @@ export default {
       await this.api([url, init]);
     },
 
+    async addToTransferQueue () {
+      const payload = [
+        {
+          project: this.$route.params.project,
+          sequence: this.contextMenuItem.sequence
+        }
+      ];
+
+      const url = `/queue/outgoing/asaqc`;
+      const init = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: payload
+      }
+
+      const callback = (err, res) => {
+        if (res && res.ok) {
+          const text = `Sequence ${this.contextMenuItem.sequence} queued for sending to ASAQC`;
+          this.showSnack([text, "info"]);
+        }
+      };
+
+      await this.api([url, init, callback]);
+    },
+
+    async removeFromTransferQueue () {
+      const item_id = this.contextMenuItemInTransferQueue.item_id;
+
+      if (item_id) {
+
+        const url = `/queue/outgoing/asaqc/${item_id}`;
+        const init = {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" }
+        }
+
+        const callback = (err, res) => {
+          if (res && res.ok) {
+            const text = `Cancelled sending of sequence ${this.contextMenuItem.sequence} to ASAQC`;
+            this.showSnack([text, "primary"]);
+          }
+        };
+
+        this.api([url, init, callback]);
+      } else {
+        this.showSnack(["No item ID in transfer queue", "error"]);
+      }
+    },
+
+    queuedItem (sequence) {
+      return this.queuedItems.find(i => i.payload.sequence == sequence) || {};
+    },
+
     editItem (item, key) {
       this.edit = {
         sequence: item.sequence,
@@ -665,6 +814,14 @@ export default {
 
     },
 
+    async getQueuedItems () {
+      const callback = async () => {
+        const url = `/queue/outgoing/asaqc/project/${this.$route.params.project}`;
+        this.queuedItems = Object.freeze(await this.api([url]) || []);
+      }
+      throttle(callback, this.getQueuedItems, 100, 500);
+    },
+
     basename (path, ext) {
       return basename(path, ext);
     },
@@ -702,12 +859,13 @@ export default {
       return false;
     },
 
-    ...mapActions(["api"])
+    ...mapActions(["api", "showSnack"])
   },
 
   mounted () {
     this.getSequences();
     this.getNumLines();
+    this.getQueuedItems();
   }
 
 }