You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
6.7 KiB
203 lines
6.7 KiB
<urban-filemanager>
|
|
<div class="bucket-filemanager">
|
|
<div class="file-multi">
|
|
<urban-filemanager-upload></urban-filemanager-upload>
|
|
</div>
|
|
<div class="file-multi">
|
|
<urban-filemanager-actions files={ state.marked }></urban-filemanager-actions>
|
|
</div>
|
|
<div class="file-table">
|
|
<urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
|
|
<template each={ (file, index) in state.files }>
|
|
<div class={ classNames({ 'file-table__row': true, 'file-table__row--current': isFileInArray(file) }) }>
|
|
|
|
<div class="file-table__column file-table__column--select" onchange={ (event) => { handleMarked(event, file) } }>
|
|
<input id="marked_{ index }" type="checkbox" value="true" />
|
|
<label for="marked_{ index }">
|
|
<svg class="icon checked" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-checkbox_checked"></use>
|
|
</svg>
|
|
<svg class="icon unchecked" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-checkbox"></use>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
|
|
<div if={ file.is_file } class="file-table__column file-table__column--filename">
|
|
{ file.filename }
|
|
</div>
|
|
<div if={ !file.is_file } class="file-table__column file-table__column--filename" onclick={ (event) => { handleDirectoryClick(event, file) } }>
|
|
<svg class="icon fill-primary mr-2" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-folder"></use>
|
|
</svg>
|
|
{ file.filename }
|
|
</div>
|
|
|
|
<div if={ file.is_file } class="file-table__column file-table__column--size">
|
|
<div class="file-table__inner has-text-right width-100">{ file.meta.size }</div>
|
|
</div>
|
|
|
|
<div if={ file.is_file } class="file-table__column file-table__column--date">
|
|
<div class="file-table__inner has-text-right">{ file.meta.updated_at }</div>
|
|
</div>
|
|
|
|
<div class="file-table__column file-table__column--actions">
|
|
<div class="file-table__inner has-text-right">
|
|
<button type="button" disabled={ true } onclick={ (event) => { handlePreview(event, file) } }>
|
|
<svg class="icon fill-success mr-1" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-eye"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" onclick={ (event) => { handlePreview(event, file) } }>
|
|
<svg class="icon fill-success mr-1" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-download"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" onclick={ (event) => { handlePreview(event, file) } }>
|
|
<svg class="icon fill-danger mr-1" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" onclick={ (event) => { handlePreview(event, file) } }>
|
|
<svg class="icon fill-grey mr-1" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-build"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
import File from './file.riot'
|
|
import Upload from './upload.riot'
|
|
import Directory from './directory.riot'
|
|
import Parent from './parent.riot'
|
|
import Actions from './actions.riot'
|
|
|
|
riot.register('urban-filemanager-file', File)
|
|
riot.register('urban-filemanager-upload', Upload)
|
|
riot.register('urban-filemanager-directory', Directory)
|
|
riot.register('urban-filemanager-parent', Parent)
|
|
riot.register('urban-filemanager-actions', Actions)
|
|
|
|
export default {
|
|
|
|
state: {
|
|
files: [
|
|
|
|
],
|
|
path: [
|
|
|
|
],
|
|
marked: [
|
|
|
|
]
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @param {[type]} props [description]
|
|
* @param {[type]} state [description]
|
|
*
|
|
*
|
|
*/
|
|
onBeforeMount(props, state) {
|
|
state.files = props.files
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event [description]
|
|
* @param {[type]} file [description]
|
|
*
|
|
*/
|
|
handlePreview(event, file) {
|
|
console.log(file)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
handleParentClick(event) {
|
|
this.state.path.pop()
|
|
this.files()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
handleDirectoryClick(event, file) {
|
|
this.state.path.push(file.filename)
|
|
this.files()
|
|
},
|
|
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
handleMarked(event, file) {
|
|
|
|
let exists = this.isFileInArray(file)
|
|
|
|
if (exists === false) {
|
|
this.state.marked.push(file)
|
|
} else {
|
|
this.state.marked.splice(this.state.marked.indexOf(file), 1)
|
|
}
|
|
|
|
this.update()
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {Boolean} [description]
|
|
*/
|
|
isFileInArray(file)
|
|
{
|
|
let exists = false
|
|
|
|
this.state.marked.forEach((f, index) => {
|
|
if (file.filename === f.filename) {
|
|
exists = true
|
|
}
|
|
})
|
|
|
|
return exists
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
files() {
|
|
axios.get('/api/file/' + this.props.id, {
|
|
params: {
|
|
path: this.state.path.join('/')
|
|
}
|
|
}).then((response) => {
|
|
this.state.files = response.data.files
|
|
this.update()
|
|
})
|
|
},
|
|
}
|
|
|
|
</script>
|
|
</urban-filemanager>
|