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

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