Commits (1)
<template lang="pug">
q-list.default-source-container
template(v-for="(file, i) in images")
q-item.custom-hover
q-item-side
q-icon(
draggable="true",
@dragstart.native="event => {handleItemDragStart(event, file)}",
:name="typeToIconName(getSimpleType(file.metaData['content-type']))", style="font-size: 1.8rem")
q-item-main {{ file.name }}
q-item-separator
</template>
<script>
import { mapGetters } from 'vuex'
const typeToIconName = {
'image': 'photo'
}
export default {
data () {
return {
files: []
}
},
async mounted () {
this.files = await this.$store.dispatch('files/list', this.bucketName)
},
computed: {
...mapGetters({
user: 'auth/getUserState'
}),
bucketName () {
return `user-${this.user.uuid}`
},
images () {
return this.files.filter(file => this.getSimpleType(file.metaData['content-type']) === 'image')
},
types () {
const _this = this
return this.files.reduce((types, file) => {
const mimetype = file.metaData && file.metaData['content-type'] ? file.metaData['content-type'] : undefined
if (mimetype) {
const type = _this.getSimpleType(mimetype)
if (types.indexOf(type) === -1) types.push(type)
}
return types
}, [])
}
},
methods: {
typeToIconName (type) {
let iconName = typeToIconName[type.toLowerCase()]
if (!iconName) {
iconName = 'broken image'
}
return iconName
},
getSimpleType (mimetype, capitalize = false) {
let type = mimetype
if (mimetype.indexOf('/') !== -1) type = mimetype.split('/')[0]
if (capitalize) {
type = type.substr(0, 1).toUpperCase() + type.substr(1)
}
return type
},
handleItemDragStart (event, item) {
const resourceCell = {
source: {
value: {
content: `${process.env.STORAGE_HOST}/files/${this.bucketName}/${item.name}`,
type: this.getSimpleType(item.metaData['content-type'], true)
}
},
configuration: {
value: {},
component: 'CellImage'
}
}
event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
}
}
}
</script>
<style scoped lang="stylus">
.q-list-header
padding-left 0
.q-input
padding-left 1em
padding-right 1em
.q-input:before
.q-input:after
display none
.q-input
padding-left 0
.custom-hover
cursor pointer
&:hover
background-color #eee
</style>