<urban-filemanager>
|
|
<div class="bucket-filemanager">
|
|
<div class="file-table">
|
|
<urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
|
|
<template each={ file in state.files }>
|
|
<urban-filemanager-file
|
|
if={ file.is_file }
|
|
file={ file }
|
|
handleClick={ handleFileClick }
|
|
handleMarked={ handleMarked }
|
|
></urban-filemanager-file>
|
|
<urban-filemanager-directory
|
|
if={ !file.is_file }
|
|
file={ file }
|
|
handleClick={ handleDirectoryClick }
|
|
handleMarked={ handleMarked }
|
|
></urban-filemanager-directory>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
import File from './file.riot'
|
|
import Directory from './directory.riot'
|
|
import Parent from './parent.riot'
|
|
|
|
riot.register('urban-filemanager-file', File)
|
|
riot.register('urban-filemanager-directory', Directory)
|
|
riot.register('urban-filemanager-parent', Parent)
|
|
|
|
export default {
|
|
|
|
state: {
|
|
files: [
|
|
|
|
],
|
|
path: [
|
|
|
|
]
|
|
},
|
|
|
|
onBeforeMount(props, state) {
|
|
state.files = props.files
|
|
},
|
|
|
|
handleFileClick() {
|
|
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @param {object} event
|
|
*
|
|
*/
|
|
handleParentClick(event) {
|
|
this.state.path.pop()
|
|
this.files()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
handleDirectoryClick(event, file) {
|
|
this.state.path.push(file)
|
|
this.files()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
files() {
|
|
axios.get('/api/file/' + this.props.id, {
|
|
params: {
|
|
path: this.state.path.join('/')
|
|
}
|
|
}).then((response) => {
|
|
this.state.files = response.data.files
|
|
this.update()
|
|
})
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
handleMarked() {
|
|
console.log('marked')
|
|
},
|
|
}
|
|
|
|
</script>
|
|
</urban-filemanager>
|