add file edit modal and saveFile function

src/components/FileManager.vue

@@ -60,6 +60,25 @@
             </b-form-checkbox>
           </div>
         </b-modal>
+        <b-modal id="modal-edit-file" title="Edit meta information" size="lg" @ok="saveFile">
+          <b-row>
+            <b-col md="2">Artist:</b-col>
+            <b-col><b-form-input v-model="temp.artist" type="text"></b-form-input></b-col>
+          </b-row>
+          <b-row>
+            <b-col md="2">Album:</b-col>
+            <b-col><b-form-input v-model="temp.album" type="text"></b-form-input></b-col>
+          </b-row>
+          <b-row>
+            <b-col md="2">Title:</b-col>
+            <b-col><b-form-input v-model="temp.title" type="text"></b-form-input></b-col>
+          </b-row>
+          <hr />
+          <b-row>
+            <b-col md="2">Sourced from:</b-col>
+            <b-col>{{ temp.uri }}</b-col>
+          </b-row>
+        </b-modal>
         <div v-if="files.length === 0" align="center">
           <b-alert show variant="warning">There are no files for this show yet.</b-alert>
           <b-button variant="success"  v-b-modal.modal-add-file>Upload or add a file</b-button>
@@ -129,6 +148,12 @@ export default {
         files: false,
         playlists: false
       },
+      temp: {
+        id: null,
+        artist: '',
+        album: '',
+        title: ''
+      },
       button: {
         files: 'info',
         playlists: 'outline-info'
@@ -166,8 +191,46 @@ export default {
     prettyFileSize: function (s) {
       return filesize(s)
     },
+    getFileById: function (id) {
+      for (var i in this.files) {
+        if (this.files[i].id === id) {
+          return this.files[i]
+        }
+      }
+      return null
+    },
     editFile: function (id) {
-      alert('Not yet implemented. ID:'+ id)
+      var file = this.getFileById(id)
+      this.temp.id = file.id
+      //this.temp.artist = file.metadata.artist === undefined ? '' : file.metadata.artist
+      //this.temp.album = file.metadata.album === undefined ? '' : file.metadata.album
+      //this.temp.title = file.metadata.title === undefined ? '' : file.metadata.title
+      this.temp.artist = file.metadata.artist
+      this.temp.album = file.metadata.album
+      this.temp.title = file.metadata.title
+      this.temp.uri = file.source.uri
+      this.$bvModal.show('modal-edit-file')
+    },
+    saveFile: function (){
+      var file = this.getFileById(this.temp.id)
+      if (this.temp.artist !== file.metadata.artist || this.temp.album !== file.metadata.album || this.temp.title !== file.metadata.title ) {
+        var metadata= {}
+        if (this.temp.artist) metadata.artist = this.temp.artist
+        if (this.temp.album) metadata.album = this.temp.album
+        if (this.temp.title) metadata.title = this.temp.title
+        console.log(metadata)
+        var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + file.id
+        axios.patch(uri, metadata, {
+          withCredentials: true,
+          headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
+        }).then(response => {
+          this.getFileById(this.temp.id).metadata = response.data.metadata
+        }).catch(error => {
+          console.log('Error:')
+          console.log(error)
+          alert('Error: could not save metadata info to file. See console log for details.')
+        })
+      }
     },
     deleteFile: function (id) {
       var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id