Commit 2ac89e89 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

update file meta in store; import log to store

parent 6678349f
<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>
......@@ -22,6 +22,7 @@
the addFile method will be called. -->
<b-modal
id="modal-add-file"
ref="modalAddFile"
title="Add new file"
@ok="addFile"
>
......@@ -73,6 +74,7 @@
-->
<b-modal
id="modal-edit-file"
ref="modalEditFile"
title="Edit meta information"
size="lg"
@ok="saveFile"
......@@ -167,7 +169,7 @@
</div>
<!-- We also import the modal for showing file import logs here -->
<app-modalFileManagerLog ref="appModalFileManagerLog" />
<import-log ref="importLog" />
<!-- And here comes the table -->
<b-table
......@@ -255,7 +257,7 @@
<b-button
v-b-tooltip.hover
title="Show import log"
@click="$refs.appModalFileManagerLog.show(data.item.show, data.item.id)"
@click="$refs.importLog.openModal(data.item.id)"
>
&#128220;
</b-button>
......@@ -279,12 +281,12 @@ import { mapGetters } from 'vuex'
import axios from 'axios'
import filesize from 'filesize'
import prettyDate from '../../mixins/prettyDate'
import modalFileManagerLog from '../FileManagerModalLog.vue'
import importLog from './ImportLog.vue'
export default {
// include the modal for displaying file import logs
components: {
'app-modalFileManagerLog': modalFileManagerLog,
'import-log': importLog,
},
mixins: [ prettyDate ],
......@@ -330,7 +332,8 @@ export default {
...mapGetters({
selectedShow: 'shows/selectedShow',
files: 'files/files'
files: 'files/files',
getFileById: 'files/getFileById',
})
},
......@@ -354,31 +357,20 @@ export default {
this.$bvModal.show('modal-edit-file')
},
// Once the OK button is hit in the file editing modal, we have to check
// if anything changed and then send an appropriate metadata obecjt to
// the AuRa tank API to update it
saveFile: function (){
var file = this.getFileById(this.filemeta.id)
// we only want to send a PATCH request if some metadata actually changed
saveFile: function (event){
event.preventDefault()
let modal = this.$refs.modalEditFile
let file = this.getFileById(this.filemeta.id)
if (this.filemeta.artist !== file.metadata.artist || this.filemeta.album !== file.metadata.album || this.filemeta.title !== file.metadata.title ) {
// if a metadata property was in use before and now shall be emptied
// we cannot just omit the property, but have to explicitly send null
var metadata = {
artist: this.filemeta.artist ? this.filemeta.artist : null,
album: this.filemeta.album ? this.filemeta.album : null,
title: this.filemeta.title ? this.filemeta.title : null
}
var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.selectedShow.slug + '/files/' + file.id
// TODO: add mechanism to indicate the running patch request in the files table
axios.patch(uri, metadata, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$store.state.auth.user.access_token }
}).then(response => {
this.getFileById(this.filemeta.id).metadata = response.data.metadata
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not save metadata info to file. See console for details.')
this.$store.dispatch('files/updateFile', {
show: this.selectedShow.slug,
file: this.filemeta.id,
metadata: {
artist: this.filemeta.artist ? this.filemeta.artist : null,
album: this.filemeta.album ? this.filemeta.album : null,
title: this.filemeta.title ? this.filemeta.title : null
},
callback: () => { modal.hide() }
})
}
},
......
<template>
<div>
<b-modal
id="modal-file-manager-log"
title="File import log"
size="xl"
ok-only
>
<div v-if="error">
<b-alert
variant="danger"
show
>
Error: could not fetch import log from tank. See console for details.
</b-alert>
</div>
<div v-if="loaded">
{{ 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 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 { mapGetters } from 'vuex'
export default {
data () {
return {
error: false,
}
},
computed: {
loaded () { return this.$store.state.files.loaded.log },
log () { return 'Available logs: ' + Object.keys(this.results).join(', ') },
...mapGetters({
selectedShow: 'shows/selectedShow',
results: 'files/log',
})
},
methods: {
openModal: function (fileId) {
this.error = false
this.$bvModal.show('modal-file-manager-log')
this.$store.dispatch('files/fetchLog', {
slug: this.selectedShow.slug,
file: fileId,
callbackCancel: () => { this.error = true }
})
}
}
}
</script>
<style scoped>
</style>
......@@ -3,14 +3,27 @@ import handleApiError from '../handleApiError'
const state = {
files: [],
log: [],
loaded: {
files: false,
log: false,
}
}
const getters = {
files: state => state.files,
fileCount: state => state.files.length,
log: state => state.log,
getFileById: state => id => {
let file
if (id !== undefined) {
file = state.files.find(f => f.id === id)
if (file === undefined) {
console.log('[ERROR] getFileById: ID not found in store!')
}
}
return file
}
}
const mutations = {
......@@ -19,6 +32,12 @@ const mutations = {
setFiles (state, files) { state.files = files },
addFile (state, file) { state.files.push(file) },
setFileMeta (state, data) {
let file = state.files.find(f => f.id === data.id)
file.metadata = data.metadata
},
setLog (state, log) { state.log = log },
}
const actions = {
......@@ -36,11 +55,45 @@ const actions = {
ctx.commit('finishLoading', 'files')
if (data && typeof(data.callback) === 'function') { data.callback() }
}).catch(error => {
handleApiError(this, error, 'could not load shows')
handleApiError(this, error, 'could not load files')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
fetchLog (ctx, data) {
ctx.commit('loading', 'log')
let uri = process.env.VUE_APP_API_TANK + 'shows/' + data.slug + '/files/' + data.file + '/logs'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
// we don't have to check separately, if there are files, because tank
// always provides an empty array if there are no files (or even if there is no corresponding show)
ctx.commit('setLog', response.data.results)
ctx.commit('finishLoading', 'log')
if (data && typeof(data.callback) === 'function') { data.callback() }
}).catch(error => {
handleApiError(this, error, 'could not load file log')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
updateFile (ctx, data) {
let uri = process.env.VUE_APP_API_TANK + 'shows/' + data.show + '/files/' + data.file
// TODO: add mechanism to indicate the running patch request in the files table
axios.patch(uri, data.metadata, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
ctx.commit('setFileMeta', {id: data.file, metadata: response.data.metadata})
if (data && typeof(data.callback) === 'function') { data.callback() }
}).catch(error => {
handleApiError(this, error, 'could not update file')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
}
export default {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment