Show expanded sequence information

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

@@ -24,12 +24,74 @@
         <v-data-table
         :headers="headers"
         :items="items"
+        item-key="sequence"
         :server-items-length="num_rows"
         :options.sync="options"
         :loading="loading"
         :fixed-header="true"
+        show-expand
         >
 
+          <template v-slot:expanded-item="{ headers, item }">
+            <td :colspan="headers.length" class="pa-0">
+              <v-container fluid class="pa-0">
+                <v-row no-gutters>
+                  <v-col>
+                    <v-card outlined>
+                      <v-card-subtitle>
+                        Sequence details
+                      </v-card-subtitle>
+                      <v-card-text>
+                        <v-list>
+                          <v-list-group value="true">
+                            <template v-slot:activator>
+                              <v-list-item-title>
+                                Raw files
+                                <span class="grey--text text--lighten-1">
+                                  {{item.raw_files.length}}
+                                </span>
+                              </v-list-item-title>
+                            </template>
+                            <v-list-item v-for="(path, index) in item.raw_files"
+                              key="index"
+                              link
+                              title="View the shot log"
+                            >
+                              {{ basename(path) }}
+                            </v-list-item>
+                          </v-list-group>
+                          <v-list-group value="true">
+                            <template v-slot:activator>
+                              <v-list-item-title>
+                                Final files
+                                <span class="grey--text text--lighten-1">
+                                  {{item.final_files.length}}
+                                </span>
+                              </v-list-item-title>
+                            </template>
+                            <v-list-item v-for="(path, index) in item.final_files"
+                              key="index"
+                              link
+                              title="View the shot log"
+                            >
+                              {{ basename(path) }}
+                            </v-list-item>
+                          </v-list-group>
+                        </v-list>
+                      </v-card-text>
+                    </v-card>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </td>
+          </template>
+
+          <template v-slot:item.sequence="{value}">
+            <a
+              :href="`/projects/${$route.params.project}/log/sequence/${value}`"
+              title="View the event log for this sequence">{{value}}</a>
+          </template>
+
           <template v-slot:item.status="{value}">
             <span :class="{'success--text': value=='final', 'warning--text': value=='raw', 'danger--text': value=='ntbp'}">
               {{ value == "final" ? "Processed" : value == "raw" ? "Acquired" : `Unknown (${status})` }}
@@ -128,6 +190,7 @@ td span {
 
 <script>
 import { mapActions } from 'vuex';
+import { basename } from 'path';
 
 export default {
   name: "SequenceList",
@@ -135,6 +198,9 @@ export default {
   data () {
     return {
       headers: [
+        {
+          value: 'data-table-expand'
+        },
         {
           value: "sequence",
           text: "Sequence"
@@ -222,6 +288,7 @@ export default {
           text: "Remarks"
         }
       ],
+      expanded: [],
       items: [],
       filter: "",
       options: {},
@@ -251,6 +318,7 @@ export default {
 
       const query = new URLSearchParams(this.options);
       query.set("filter", this.filter);
+      query.set("files", true);
       if (this.options.itemsPerPage < 0) {
         query.delete("itemsPerPage");
       }
@@ -261,6 +329,10 @@ export default {
       this.loading = false;
     },
 
+    basename (path, ext) {
+      return basename(path, ext);
+    },
+
     ...mapActions(["api"])
   },