Ability to create sub folders

Modules/Media/Assets/js/components/MediaList.vue

@@ -12,7 +12,7 @@
                     <div class="box-body">
                         <div class="tool-bar el-row" style="padding-bottom: 20px;">
                             <div class="actions el-col el-col-14">
-                                <new-folder></new-folder>
+                                <new-folder :parent-id="folderId"></new-folder>
                                 <upload-button></upload-button>
                                 <el-button-group>
                                     <el-button type="primary" :disabled="selectedMedia.length === 0">Move</el-button>
@@ -50,7 +50,9 @@
 
                             <el-table-column prop="filename" :label="trans('media.table.filename')" sortable="custom">
                                 <template scope="scope">
-                                    <strong v-if="scope.row.is_folder" style="cursor: pointer;">{{ scope.row.filename }}</strong>
+                                    <strong v-if="scope.row.is_folder" style="cursor: pointer;" @click="enterFolder(scope)">
+                                        {{ scope.row.filename }}
+                                    </strong>
                                     <span v-else>{{ scope.row.filename }}</span>
                                 </template>
                             </el-table-column>
@@ -110,6 +112,7 @@
                 },
                 links: {},
                 searchQuery: '',
+                folderId: 0,
                 selectedMedia: {},
             }
         },
@@ -121,6 +124,7 @@
                     order_by: this.order_meta.order_by,
                     order: this.order_meta.order,
                     search: this.searchQuery,
+                    folder_id: this.folderId,
                 };
 
                 axios.get(route('api.media.all-vue', _.merge(properties, customProperties)))
@@ -158,6 +162,11 @@
                 this.tableIsLoading = true;
                 this.queryServer({search: query});
             },
+            enterFolder(scope) {
+                this.tableIsLoading = true;
+                this.queryServer({folder_id: scope.row.id});
+                this.folderId = scope.row.id;
+            },
             insertMedia(scope) {
                 this.$events.emit('fileWasSelected', scope.row);
             },
@@ -171,6 +180,9 @@
             this.$events.listen('fileWasUploaded', eventData => {
                 this.fetchMediaData();
             });
+            this.$events.listen('folderWasCreated', eventData => {
+                this.fetchMediaData();
+            });
         }
     }
 </script>

Modules/Media/Assets/js/components/NewFolder.vue

@@ -31,6 +31,9 @@
     import Form from 'form-backend-validation'
 
     export default {
+        props: {
+            parentId: {type: Number}
+        },
         data() {
             return {
                 dialogFormVisible: false,
@@ -43,7 +46,7 @@
         },
         methods: {
             onSubmit() {
-                this.form = new Form(this.folder);
+                this.form = new Form(_.merge(this.folder, {parent_id: this.parentId}));
                 this.loading = true;
                 this.form.post(route('api.media.folders.store'))
                     .then(response => {
@@ -53,6 +56,8 @@
                             message: response.message
                         });
                         this.dialogFormVisible = false;
+                        this.folder.name = '';
+                        this.$events.emit('folderWasCreated', response);
                     })
                     .catch(error => {
                         console.log(error);

Modules/Media/Repositories/Eloquent/EloquentFileRepository.php

@@ -131,6 +131,9 @@ class EloquentFileRepository extends EloquentBaseRepository implements FileRepos
     {
         $media = $this->allWithBuilder();
 
+        $media->orderBy('is_folder', 'desc');
+        $media->where('folder_id', $request->get('folder_id'));
+
         if ($request->get('search') !== null) {
             $term = $request->get('search');
             $media->where('filename', 'LIKE', "%{$term}%");

Modules/Media/Repositories/Eloquent/EloquentFolderRepository.php

@@ -13,6 +13,7 @@ class EloquentFolderRepository extends EloquentBaseRepository implements FolderR
             'filename' => array_get($data, 'name'),
             'path' => str_slug(array_get($data, 'name')),
             'is_folder' => true,
+            'folder_id' => array_get($data, 'parent_id'),
         ]);
     }
 }

Modules/Media/Resources/views/admin/index.blade.php

@@ -59,6 +59,9 @@
         </div>
     </div>
 </div>
+
+<media-manager></media-manager>
+
 @include('core::partials.delete-modal')
 @stop
 

public/js/app.js

@@ -93895,6 +93895,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //
 //
 //
+//
+//
 
 exports.default = {
     components: {
@@ -93918,6 +93920,7 @@ exports.default = {
             },
             links: {},
             searchQuery: '',
+            folderId: 0,
             selectedMedia: {}
         };
     },
@@ -93931,7 +93934,8 @@ exports.default = {
                 per_page: this.meta.per_page,
                 order_by: this.order_meta.order_by,
                 order: this.order_meta.order,
-                search: this.searchQuery
+                search: this.searchQuery,
+                folder_id: this.folderId
             };
 
             axios.get(route('api.media.all-vue', _.merge(properties, customProperties))).then(function (response) {
@@ -93968,6 +93972,11 @@ exports.default = {
             this.tableIsLoading = true;
             this.queryServer({ search: query });
         },
+        enterFolder: function enterFolder(scope) {
+            this.tableIsLoading = true;
+            this.queryServer({ folder_id: scope.row.id });
+            this.folderId = scope.row.id;
+        },
         insertMedia: function insertMedia(scope) {
             this.$events.emit('fileWasSelected', scope.row);
         },
@@ -93983,6 +93992,9 @@ exports.default = {
         this.$events.listen('fileWasUploaded', function (eventData) {
             _this2.fetchMediaData();
         });
+        this.$events.listen('folderWasCreated', function (eventData) {
+            _this2.fetchMediaData();
+        });
     }
 };
 
@@ -94088,6 +94100,9 @@ var _formBackendValidation2 = _interopRequireDefault(_formBackendValidation);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
+    props: {
+        parentId: { type: Number }
+    },
     data: function data() {
         return {
             dialogFormVisible: false,
@@ -94103,7 +94118,7 @@ exports.default = {
         onSubmit: function onSubmit() {
             var _this = this;
 
-            this.form = new _formBackendValidation2.default(this.folder);
+            this.form = new _formBackendValidation2.default(_.merge(this.folder, { parent_id: this.parentId }));
             this.loading = true;
             this.form.post(route('api.media.folders.store')).then(function (response) {
                 _this.loading = false;
@@ -94112,6 +94127,8 @@ exports.default = {
                     message: response.message
                 });
                 _this.dialogFormVisible = false;
+                _this.folder.name = '';
+                _this.$events.emit('folderWasCreated', response);
             }).catch(function (error) {
                 console.log(error);
                 _this.loading = false;
@@ -94401,7 +94418,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }
   }, [_c('div', {
     staticClass: "actions el-col el-col-14"
-  }, [_c('new-folder'), _vm._v(" "), _c('upload-button'), _vm._v(" "), _c('el-button-group', [_c('el-button', {
+  }, [_c('new-folder', {
+    attrs: {
+      "parent-id": _vm.folderId
+    }
+  }), _vm._v(" "), _c('upload-button'), _vm._v(" "), _c('el-button-group', [_c('el-button', {
     attrs: {
       "type": "primary",
       "disabled": _vm.selectedMedia.length === 0
@@ -94497,8 +94518,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         return [(scope.row.is_folder) ? _c('strong', {
           staticStyle: {
             "cursor": "pointer"
+          },
+          on: {
+            "click": function($event) {
+              _vm.enterFolder(scope)
+            }
           }
-        }, [_vm._v(_vm._s(scope.row.filename))]) : _c('span', [_vm._v(_vm._s(scope.row.filename))])]
+        }, [_vm._v("\n                                    " + _vm._s(scope.row.filename) + "\n                                ")]) : _c('span', [_vm._v(_vm._s(scope.row.filename))])]
       }
     }])
   }), _vm._v(" "), _c('el-table-column', {