urban-filehub/resources/js/components/filemanager/filemanager.riot

<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>