FEAT: add modal for file import logs

src/components/FileManager.vue

@@ -227,6 +227,9 @@
             </b-button>
           </div>
 
+          <!-- We also import the modal for showing file import logs here -->
+          <app-modalFileManagerLog ref="appModalFileManagerLog" />
+
           <!-- And here comes the table -->
           <b-table
             ref="filesTable"
@@ -325,6 +328,13 @@
                 <b-button @click="editFile(data.item.id)">
                   Edit
                 </b-button>
+                <b-button
+                  v-b-tooltip.hover
+                  title="Show import log"
+                  @click="$refs.appModalFileManagerLog.show(data.item.show, data.item.id)"
+                >
+                  &#128220;
+                </b-button>
                 <b-button
                   variant="danger"
                   @click="deleteFile(data.item.id)"
@@ -653,8 +663,14 @@
 import axios from 'axios'
 import filesize from 'filesize'
 import prettyDate from '../mixins/prettyDate'
+import modalFileManagerLog from './FileManagerModalLog.vue'
 
 export default {
+  // include the modal for displaying file import logs
+  components: {
+    'app-modalFileManagerLog': modalFileManagerLog
+  },
+
   // generic functions that we want to use from our mixins folder
   mixins: [ prettyDate ],
 

src/components/FileManagerModalLog.vue

+<template>
+  <div>
+    <b-modal
+      id="modal-file-manager-log"
+      title="File import log"
+      size="xl"
+      ok-only
+    >
+      <div v-if="loaded">
+        <div v-if="error">
+          <b-alert
+            variant="danger"
+            show
+          >
+            {{ error }}
+          </b-alert>
+        </div>
+        <div v-else>
+          {{ log }}
+          <hr>
+          <div v-if="results.fetch">
+            <h2>Fetch log</h2>
+            <b-table :items="results.fetch" />
+          </div>
+          <div v-if="results.normalize">
+            <h2>Normalize log</h2>
+            <b-table :items="results.normalize" />
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div align="center">
+          <img
+            src="../assets/radio.gif"
+            width="96"
+            alt="loading data"
+          ><br>
+          Loading file import log...
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data () {
+    return {
+      loaded: false, // flag to indicate if log is loaded
+      slug: null,    // the show's slug of the log's file
+      id: null,      // the id of the log's file
+      log: '',       // the log output
+      error: '',     // potential error message
+      results: null, // the results object for the logs
+    }
+  },
+  methods: {
+    loadLog: function () {
+      let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.slug + '/files/' + this.id + '/logs'
+      this.log = ''
+      this.error = ''
+      axios.get(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+      }).then(response => {
+        this.results = response.data.results
+        this.log = 'Available logs: ' + Object.keys(response.data.results).join(', ')
+        this.loaded = true
+      }).catch(error => {
+        this.error = 'Error: could not fetch import log from tank. See console for details.'
+        this.loaded = true
+        if (error.response) {
+          this.$log.error(error.response.status + ' ' + error.response.statusText)
+          this.$log.error(error.response)
+        } else if (error.request) {
+          this.$log.error(error.request)
+        } else {
+          this.$log.error(error.message)
+        }
+      })
+    },
+    show: function (slug, id) {
+      this.loaded = false
+      this.slug = slug
+      this.id = id
+      this.$bvModal.show('modal-file-manager-log')
+      this.loadLog()
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>