adding

app/Filemanager/Filemanager.php

@@ -0,0 +1,70 @@
+<?php
+
+/**
+ *
+ *
+ *
+ */
+
+class Filemanager
+{
+    /**
+     *
+     *  
+     *  @param  [type] $path [description]
+     *  @return [type]       [description]
+     */
+    public function find($path)
+    {
+        $results = [];
+
+        // getting files from directory
+        $files = scandir($path);
+
+        foreach($files as $file) {
+
+            // ignore parent directories
+            if ($file === '.' || $file === '..') {
+                continue;
+            }
+
+            // getting meta for file
+            $meta = stat($path.'/'.$file);
+
+            $result = [
+                'filename' => $file,
+                'is_file' => is_file($path.'/'.$file),
+                'meta' => [
+                    'updated_at' => \Carbon\Carbon::parse($meta['mtime'])->format('d.m.Y h:m:i')
+                ]
+            ];
+
+            if ($result['is_file']) {
+                $result['size'] = $this->formatBytes($meta['size']);
+            }
+
+            $results[] = $result;
+        }
+
+        return $results;
+    }
+
+    /**
+     *
+     *  @param  [type]  $size      [description]
+     *  @param  integer $precision [description]
+     *  @return [type]             [description]
+     */
+    private function formatBytes($size, $precision = 1)
+    {
+        if ($size === 0) {
+            return '0 bytes';
+        }
+
+        $base = log($size, 1024);
+        $suffixes = array('bytes', 'kB', 'MB', 'G', 'T');
+
+        return round(pow(1024, $base - floor($base)), $precision).' '.$suffixes[floor($base)];
+    }
+
+}

app/Http/Controllers/Api/FileController.php

@@ -16,9 +16,10 @@ class FileController extends BaseController
      *  @return object
      *
      */
-    public function index()
+    public function index($id)
     {
-        $files = scandir($dir);
+        // create bucket
+        $bucket = Bucket::find($id);
 
         return response()->json([
             'files' => $files

app/Http/Controllers/BucketController.php

@@ -33,37 +33,11 @@ class BucketController extends BaseController
      */
     public function single($id)
     {
-        $results = [];
-
         // create bucket
         $bucket = Bucket::find($id);
 
-        $files = scandir($bucket->path);
-
-        foreach($files as $file) {
-
-            if ($file === '.' || $file === '..') {
-                continue;
-            }
-
-            $meta = stat($bucket->path.'/'.$file);
-
-            $size = ($meta['size'] / 1000);
-
-            if (($meta['size'] / 1000) < 1000) {
-                $size = ($meta['size'] / 1000);
-            }
-
-            $results[] = [
-                'filename' => $file,
-                'is_file'  => is_file($bucket->path.'/'.$file),
-                'meta' => [
-                    'size' => $this->formatBytes($meta['size']),
-                    'updated_at' => \Carbon\Carbon::parse($meta['mtime'])->format('d.m.Y h:m:i')
-                ]
-            ];
-
-        }
+        // getting files
+        $files = FileManager::find($bucket->path); 
 
         return view('bucket.single', [
             'bucket' => $bucket,

public/spritemap.js

@@ -1 +1,13 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{null:function(n,w){}}]);
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["spritemap"],{
+
+/***/ null:
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (function(module, exports) {
+
+
+
+/***/ })
+
+}]);

public/symbol-defs.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol></svg>
+<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-back" viewBox="0 0 30 30"><title>back</title><path d="M12.48 11.25q6.094.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098L3.749 15l8.73-8.73v4.98z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-folder" viewBox="0 0 30 30"><title>folder</title><path d="M12.48 4.98L15 7.5h10.02q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol></svg>

resources/icons/back.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>back</title>
+<path d="M12.48 11.25q6.094 0.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098l-8.73-8.73 8.73-8.73v4.98z"></path>
+</svg>

resources/icons/folder.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>folder</title>
+<path d="M12.48 4.98l2.52 2.52h10.020q0.996 0 1.729 0.762t0.732 1.758v12.48q0 0.996-0.732 1.758t-1.729 0.762h-20.039q-0.996 0-1.729-0.762t-0.732-1.758v-15q0-0.996 0.732-1.758t1.729-0.762h7.5z"></path>
+</svg>

resources/js/components/filemanager/directory.riot

@@ -0,0 +1,23 @@
+<urban-filemanager-directory>
+    <div class="file-table__row">
+        <div class="file-table__column file-table__column--select" onchange={ (event) => { props.handleMarked(event, this) } }>
+            <input type="checkbox" value="true" />
+        </div>
+        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, this) } }>
+            <svg class="icon fill-primary mr-2" aria-hidden="true">
+                <use xlink:href="/symbol-defs.svg#icon-folder"></use>
+            </svg>
+            { props.file.filename }
+        </div>
+        <div class="file-table__column file-table__column--date">
+            <div class="file-table__inner has-text-right">{ props.file.meta.updated_at }</div>
+        </div>
+    </div>
+    <script>
+
+    export default {
+
+    }
+
+    </script>
+</urban-filemanager-directory>

resources/js/components/filemanager/file.riot

@@ -1,14 +1,16 @@
 <urban-filemanager-file>
-    <div class="filemanger-file">
-        <div class="bucket-filemanager__filename" onchange={ (event) => { props.handleMarked(event, this) } }>
+    <div class="file-table__row">
+        <div class="file-table__column file-table__column--select" onchange={ (event) => { props.handleMarked(event, this) } }>
             <input type="checkbox" value="true" />
         </div>
-        <div class="bucket-filemanager__filename" onclick={ (event) => { props.handleClick(event, this) } }>
+        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, this) } }>
             { props.file.filename }
         </div>
-        <div class="bucket-filemanager__meta" onclick={ (event) => { props.handleClick(event, this) } }>
-            { props.file.meta.size }
-            { props.file.meta.updated_at }
+        <div class="file-table__column file-table__column--size">
+            <div class="file-table__inner has-text-right width-100">{ props.file.meta.size }</div>
+        </div>
+        <div class="file-table__column file-table__column--date">
+            <div class="file-table__inner has-text-right">{ props.file.meta.updated_at }</div>
         </div>
     </div>
     <script>

resources/js/components/filemanager/filemanager.riot

@@ -1,26 +1,54 @@
 <urban-filemanager>
     <div class="bucket-filemanager">
-        <div>
-            <div each={ file in props.files }>
+        <div class="file-table">
+            <urban-filemanager-parent></urban-filemanager-parent>
+            <template each={ file in props.files }>
                 <urban-filemanager-file
                     if={ file.is_file }
                     file={ file }
-                    handleClick={ handleClick }
+                    handleClick={ handleDirectoryClick }
                     handleMarked={ handleMarked }
                 ></urban-filemanager-file>
-            </div>
+                <urban-filemanager-directory
+                    if={ !file.is_file }
+                    file={ file }
+                    handleClick={ handleFileClick }
+                    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 {
-        handleClick() {
-            console.log('ddd')
+
+        handleFileClick() {
+
+        },
+
+        /**
+         *
+         *
+         *
+         */
+        handleDirectoryClick(event, file) {
+            axios.get('/api/', {
+                params: {
+                    filename: file.filename
+                }
+            }).then((response) => {
+
+            })
         },
 
         handleMarked() {

resources/js/components/filemanager/parent.riot

@@ -0,0 +1,20 @@
+<urban-filemanager-parent>
+    <div class="file-table__row">
+        <div class="file-table__column file-table__column--select">
+
+        </div>
+        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, this) } }>
+            <svg class="icon fill-grey mr-2" aria-hidden="true">
+                <use xlink:href="/symbol-defs.svg#icon-back"></use>
+            </svg>
+            ..
+        </div>
+    </div>
+    <script>
+
+    export default {
+
+    }
+
+    </script>
+</urban-filemanager-parent>

resources/scss/bootstrap.scss

@@ -3,6 +3,7 @@
 @import "../../node_modules/bulma/sass/utilities/_all.sass";
 @import "../../node_modules/bulma/sass/base/_all.sass";
 @import "../../node_modules/bulma/sass/helpers/spacing.sass";
+@import "../../node_modules/bulma/sass/helpers/typography.sass";
 @import "../../node_modules/bulma/sass/form/_all.sass";
 
 @import "../../node_modules/bulma/sass/elements/button.sass";
@@ -21,6 +22,8 @@
 
 @import "components/accordion";
 @import "components/buckets";
+@import "components/file-table";
+@import "components/icon";
 
 .icon {
     svg {
@@ -83,4 +86,6 @@ label.required {
 }
 
 @include component__accordion();
-@include component__buckets();
+@include component__buckets();
+@include component__file-table();
+@include component__icon();

resources/scss/components/_file-table.scss

@@ -0,0 +1,44 @@
+/**
+ *
+ *
+ *
+ */
+
+@mixin component__file-table()
+{
+    .file-table {
+        display: block;
+        width: 100%;
+
+        &__row {
+            display: flex;
+            flex-wrap: wrap;
+
+            padding: 5px 0;
+            border-bottom: 1px solid $grey;
+        }
+
+        &__inner {
+            width: 100%;
+        }
+
+        &__column {
+            display: flex;
+            flex: 2;
+            align-items: center;
+
+            &--select {
+                max-width: 30px;
+
+                input[type=checkbox] {
+                    margin: -17px 0 0 0;
+                }
+            }
+        }
+    }
+
+    .bucket-filemanager {
+        padding: 10px 15px 15px 15px;
+        border: 1px solid $grey-light;
+    }
+}

resources/scss/components/_icon.scss

@@ -0,0 +1,26 @@
+/**
+ *
+ *
+ *
+ */
+
+@mixin component__icon()
+{
+    .icon {
+        display: inline-block;
+        font-size: inherit;
+        height: 1.5em;
+        width: 1.5em;
+        overflow: visible;
+        max-height: 100%;
+        max-width: 100%;
+    }
+
+    .fill-primary {
+        fill: $primary;
+    }
+
+    .fill-grey {
+        fill: $grey;
+    }
+}