Commit 8ce490b6 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '535-MoSys-Asset-Folder-Handling' into 'release_2_5'

Added handling of asset folders

See merge request !59
parents bee2eab6 a74bd03b
Pipeline #112240 passed with stage
in 10 seconds
......@@ -10,23 +10,29 @@
q-item.text-grey-8.text-italic.q-mt-sm(v-else) No Assets Found!
template(v-else)
template(v-for="(asset, i) in userAssets")
template(v-if="userAssets.length" v-for="(asset, i) in userAssets")
// Single Assets
template(v-if="!asset.expandable")
q-item-separator.q-ma-none(v-if="i > 0", style="background-color: rgba(255,255,255,0.04);")
q-item.q-px-md.q-py-lg.media-item.custom-hover(@click.native="cacheNewCell(asset)")
q-item-main
q-item-tile.text-grey-3.q-mb-md {{ asset.title.length > 24 ? `${asset.title.slice(0, 24)}…` : asset.title }}
q-item-tile
img(:src="getAssetUrl(asset)" :alt="asset.title")
// Folder
template(v-else-if="asset.expandable && asset.childAssets.length")
q-item-separator.q-ma-none(v-if="i > 0", style="background-color: rgba(255,255,255,0.04);")
q-icon.q-px-md.q-py-lg(:name="asset.icon || 'folder'" size="24px" class="q-mr-sm")
span.q-pl-md {{ asset.label }}
q-item-separator.q-ma-none(v-if="i > 0", style="background-color: rgba(255,255,255,0.04);")
template(v-for="(child, j) in asset.childAssets")
q-item.q-px-md.q-py-lg.q-pl-xl.media-item.custom-hover(@click.native="cacheNewCell(child)")
q-item-main
q-item-tile.text-grey-3.q-mb-md {{ child.title.length > 24 ? `${child.title.slice(0, 24)}…` : child.title }}
q-item-tile
img(:src="getAssetUrl(child)" :alt="child.title")
q-item.q-px-md.q-py-lg.media-item.custom-hover(@click.native="cacheNewCell(asset)")
q-item-main
q-item-tile.text-grey-3.q-mb-md {{ asset.title.length > 24 ? `${asset.title.slice(0, 24)}…` : asset.title }}
// TODO: Test imgs
q-item-tile
img(
:src="getAssetUrl(asset)"
)
//q-img(
//:src="getAssetUrl(asset)"
//:ratio="16/9"
//contain
//)
q-item.text-grey-8.text-italic.q-mt-sm(v-else) No Assets Found!
</template>
<script>
......@@ -77,7 +83,6 @@ export default {
},
methods: {
cacheNewCell (asset) {
console.log('Handling it')
const item = asset.metadata['content-type'].slice(0, 5) === 'image' ? this.items.image : this.items.media
let resourceCell = {
source: {
......@@ -115,10 +120,20 @@ export default {
else return 'folder'
},
async initUserAssets () {
this.userAssets = await this.listDir(this.bucket, true)
this.userAssets = await this.listDir(this.bucket, true).then(result => {
const assets = []
// getting images in folder
result.forEach(async entry => {
if (!entry.size) {
entry.childAssets = await this.listDir(entry.fullpath)
}
assets.push(entry)
})
return assets
})
},
transformEntries (entries) {
return [].concat(entries.filter(entry => !entry.size).map(node => ({
const children = [].concat(entries.filter(entry => !entry.size).map(node => ({
label: path.basename(node.prefix),
fullpath: `${this.bucket}/${node.prefix || ''}${node.name || ''}`,
expandable: true,
......@@ -130,15 +145,28 @@ export default {
fullpath: `${this.bucket}/${node.prefix || ''}${node.name || ''}`,
size: node.size,
metadata: node.metaData,
expandable: false,
icon: this.getIcon(node)
expandable: false
})).sort((a, b) => a.label.localeCompare(b.label)))
if (!children.length) {
children.push({
fullpath: 'empty',
header: 'empty'
})
}
return children
},
async listDir (path, isRoot = false) {
this.$q.loading.show({ delay: 500 })
const entries = await this.$store.dispatch('assets/find', path)
this.$q.loading.hide()
// return this.transformEntries(entries, isRoot)
if (entries) {
return this.transformEntries(entries, isRoot)
}
else {
this.$router.push({ path: 'assets/upload' })
}
},
getAssetUrl (node) {
return `${process.env.API_HOST}/assets/${node.fullpath}?dl=true&token=${this.$auth.token}`
......
Markdown is supported
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