Improve volume directory browser

It now only shows avaliable storage disks and has a new button to choose the current directory.
biigle · Mar 21, 2018 · 5f7e2cb · 5f7e2cb
1 parent 8e794f0
commit 5f7e2cb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/Http/Controllers/VolumeController.php b/src/Http/Controllers/VolumeController.php
@@ -25,12 +25,13 @@ public function create(Request $request)
     {
         $project = Project::findOrFail($request->input('project'));
         $this->authorize('update', $project);
+        $disks = array_intersect(array_keys(config('filesystems.disks')), config('volumes.browser_disks'));
 
         return view('volumes::create', [
             'project' => $project,
             'mediaTypes' => MediaType::all(),
             'hasBrowser' => config('volumes.browser'),
-            'disks' => config('volumes.browser_disks'),
+            'disks' => $disks,
         ]);
     }
 

diff --git a/src/public/assets/scripts/main.js b/src/public/assets/scripts/main.js
diff --git a/src/resources/assets/js/createVolumeForm.js b/src/resources/assets/js/createVolumeForm.js
@@ -33,6 +33,16 @@ biigle.$viewModel('create-volume-form', function (element) {
             canGoBack: function () {
                 return this.breadCrumbs.length > 0 || disks.length > 1;
             },
+            hasCurrentDirectory: function () {
+                return this.breadCrumbs.length > 0;
+            },
+            currentDirectory: function () {
+                if (this.hasCurrentDirectory) {
+                    return this.breadCrumbs[this.breadCrumbs.length - 1];
+                }
+
+                return null;
+            },
         },
         methods: {
             toggleBrowse: function () {
@@ -89,7 +99,9 @@ biigle.$viewModel('create-volume-form', function (element) {
             },
             selectDirectory: function (directory) {
                 var crumbs = this.breadCrumbs.slice();
-                crumbs.push(directory);
+                if (directory) {
+                    crumbs.push(directory);
+                }
                 this.fetchImages(this.storageDisk, crumbs.join('/'))
                     .then(this.setImages)
                     .then(function () {

diff --git a/src/resources/views/create.blade.php b/src/resources/views/create.blade.php
@@ -64,10 +64,13 @@
                      </span>
                      <div class="list-group file-browser__dirs">
                         <a href="#" v-for="directory in currentDirectories" v-on:click="openDirectory(directory)" class="list-group-item" title="Open this directory">
-                           <button type="button" class="btn btn-default btn-xs pull-right" v-on:click.stop="selectDirectory(directory)" title="Select this directory for the new volume"><i class="fa fa-check"></i></button>
+                           <button type="button" class="btn btn-default btn-xs pull-right" v-on:click.stop="selectDirectory(directory)" v-bind:title="'Select '+directory+' for the new volume'"><i class="fa fa-check"></i></button>
                            @{{directory}}
                         </a>
-                        <a v-if="!hasDirectories" href="#" class="list-group-item disabled">No directories</a>
+                        <a v-if="!hasDirectories" href="#" class="list-group-item disabled">
+                            <button v-if="hasCurrentDirectory" type="button" class="btn btn-default btn-xs pull-right" v-on:click.stop="selectDirectory()" v-bind:title="'Select '+currentDirectory+' for the new volume'"><i class="fa fa-check"></i></button>
+                            No directories
+                        </a>
                      </div>
                   </div>
                </div>