foo.js

import {api} from '../../share/hlp'
import Header from './header'
import pgList from '../../cmp/pgList'
import editBox from '../../cmp/editBox'
import Modal from '../../cmp/modal'
export default function Storage(){
    let modalstate = false
    let folderView = 1
    let folder = ""
    let dataList = []
    let forms = [
        { name : '', folder : folder}
    ]

    function toggleModal(){ modalstate = !modalstate }
    function setFV(){ folderView = arguments[0] === 1 ? 1 : 0 }

    function addFile(){
        try {
            let upFile = document.getElementById('upFile')
            let isTrue = true
            upFile.click()
            upFile.addEventListener('change', function(){
               console.log(Math.random(1).toFixed(4))
                if(!upFile.files[0]) return false;
               let data = new FormData()
               data.append('file', upFile.files[0]);
               data.append('folder', folder)
               isTrue && api.post('api/storage/addfile', {body: data})
               .then(res=>{
                   res.ok ? getDataList() : alert(res.msg)
               }).catch(err=>console.log(err.message))
               isTrue = false
            })
        } catch (error) {
            alert(error.message)
        }
    }

    function submitForm(){
        api.post('api/storage/addfolder', {body: forms[0]}).then(res=>{
            res.ok ? getDataList() : alert(res.msg)
        }).catch(err=>alert(err.message))
    }

    function changePage(idx){
        getDataList(idx)
    }

    function getDataList(idx = 1){
        api.get('api/storage/pg?page=' + idx).then(res => dataList = res.ok ? res.data : [])
    }

    function editItem(id){
        let row = dataList.data.find(row => row.id == id)
        alert(JSON.stringify(row))
    }

    function deleteItem(id){
        alert(id)
    }

    function getUi(){
        toggleModal()
    }

    return {
        oninit: ()=>getDataList(),
        view : (v)=>{
            return m('div.w-100', [
                m(Header, { forms, submitForm, addFile, setFV, getUi}),
                m('input.#upFile.zero.dn[type=file][name=file]'),
                m('div.flex.flex-column.flex-row-ns', 
                [
                    m('div.w-100.flex', [
                    dataList.data && m('div.w-100.striped', 
                    [
                            folderView ? dataList.data.map(row => m('div.zero.bb.flex.justify-between.items-center', 
                            [
                                m('div.pa3.pointer.flex.items-center', [
                                    m('i.material-icons.mr3.dib.br-100.ba.pa2.b--silver', {
                                        title : row.size > 0 ? 'Файл' : 'Папка',
                                        class : row.size > 0 ? 'file' : 'folder',
                                        onclick : ()=>editItem(row.id)
                                    }, row.size > 0 ? 'description' : 'folder'),
                                    m('p.pointer.zero', [
                                        m('span.b.lh-copy', row.name),
                                        m('br'),
                                        m('span', row.size ? row.mime : row.path)
                                    ])
                                ]),
                                m('div.pv3', m(editBox, { id: row.id, editItem, deleteItem }))
                            ]))
                            :  m('div.w-100.bb.cf.pa3-l pr0-l.striped.bg-body',
                                    dataList.data.map(row =>  
                                        m('div.ma3.pa3.w-100.w-50-m.w-30-l.ba.flex.flex-row.items-center.fl.bg-body', 
                                        [
                                            m('i.material-icons.mr3.dib.br-100.ba.pa2.b--silver', {
                                                title : row.size > 0 ? 'Файл' : 'Папка',
                                                class : row.size > 0 ? 'file' : 'folder',
                                                onclick : ()=>editItem(row.id)
                                            }, row.size > 0 ? 'description' : 'folder'),
                                            m('p.pointer.zero',[
                                                m('span.b.lh-copy', row.name),
                                                m('br'),
                                                m('span', row.size ? row.mime : row.path)
                                            ])
                                        ])
                                )
                                
                            ), 
                            m(pgList, { d : dataList, changePage })
                        ])
                    ])
                ]),
                m(Modal, {toggleModal, modalstate}, [
                    m('div.flex.items-center.justify-center.pa4', 'some content')
                ])
            ])
        }
    }
}