added sort by name and size

apache · Jun 12, 2020 · 071fe01 · 071fe01
1 parent fee22c0
commit 071fe01
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
@@ -9,14 +9,14 @@
                     <div class="dropdown">
                         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                            <a class="dropdown-item" href="#">Name</a>
-                            <a class="dropdown-item" href="#">Size</a>
+                            <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a>
+                            <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a>
                         </div>
                     </div>
                 </div>
                 <div class="btn-group mr-4" role="group">
-                    <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
-                    <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
+                    <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars" v-on:click="layout = 'listview'" v-bind:class="{ 'active': layout == 'listview'}"></i></button>
+                    <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th" v-on:click="layout = 'grid'" v-bind:class="{ 'active': layout == 'grid'}"></i></button>
                 </div>
                 <div class="btn-group mr-4 new-unit" role="group">
                     <button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
@@ -43,7 +43,7 @@
                 <b-button class="btn btn-sm btn-info browse" :href="selectedStorage.storageId">Browse</b-button>
             </div>
         </b-modal>
-        <table class="table table-hover main-table">
+        <table class="table table-hover main-table " >
         <thead>
             <tr>
               <th scope="col">Name</th>
@@ -83,12 +83,18 @@ export default {
             selectedStorage: this.initialStorageList[0]
         }
     },
+        layout: 'listview',
     methods: {
         showDescription(unit) {
             this.selectedStorage = unit
             this.$bvModal.show("description-dialog")
+        },
+        sortBy(prop){
+            this.storageList.sort((a,b)=>a[prop] < b[prop] ? -1 : 1)
         }
+
     }
+
 }
 </script>
 

diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue
@@ -9,8 +9,8 @@
                     <div class="dropdown">
                         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                            <a class="dropdown-item" href="#">Name</a>
-                            <a class="dropdown-item" href="#">Size</a>
+                            <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a>
+                            <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a>
                         </div>
                     </div>
                 </div>
@@ -53,6 +53,11 @@
                 heading: this.title
             }
         },
+        methods:{
+        sortBy(prop){
+            this.resources.sort((a,b)=>a[prop] < b[prop] ? -1 : 1)
+        }
+    }
     }
 </script>
 

diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py
@@ -5,21 +5,21 @@
 
 def storage(request):
     # TODO: grpc calls to backend
-    storage_json = [{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "localhost", "port": 22, "user": "root"},
-                    {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp1", "port": 22, "user": "root"},
-                    {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp2", "port": 22, "user": "root"},
-                    {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}]
+    storage_json = [{"storageId": "ssh-storage1", "name": "One Drive", "size": "20B", "occupied": "10GB", "lastModified":"26, March 2020", "host": "localhost", "port": 22, "user": "root"},
+                    {"storageId": "ssh-storage1", "name": "Google Drive", "size": "10GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp1", "port": 22, "user": "root"},
+                    {"storageId": "ssh-storage1", "name": "Box", "size": "30GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp2", "port": 22, "user": "root"},
+                    {"storageId": "ssh-storage1", "name": "Drop Box", "size": "40GB", "occupied": "10GB", "lastModified":"26, March 2020"}]
 
     return render(request, 'storage.html', {'bundle_name': 'storage',
                                             'data': json.dumps(storage_json),
                                             'title': 'Storage Unit'})
 
 
 def resources(request, storage_id):
-    resource_json = [{"resourceId": "Spring project", "name": "Spring project", "size": "12 GB", "lastModified": "Jan 15, 2020"},
+    resource_json = [{"resourceId": "Spring project", "name": "Spring project", "size": "11 GB", "lastModified": "Jan 15, 2020"},
                      {"resourceId": "Trial", "name": "Trial", "size": "12 GB", "lastModified": "Jan 15, 2020"},
-                     {"resourceId": "New", "name": "New", "size": "12 GB", "lastModified": "Jan 15, 2020"},
-                     {"resourceId": "Random testing", "name": "Random testing", "size": "12 GB", "lastModified": "Jan 15, 2020"}]
+                     {"resourceId": "New", "name": "New", "size": "13 GB", "lastModified": "Jan 15, 2020"},
+                     {"resourceId": "Random testing", "name": "Random testing", "size": "14 GB", "lastModified": "Jan 15, 2020"}]
     return render(request, 'resources.html', {'bundle_name': 'resources',
                                               'data': json.dumps(resource_json),
                                               'title': 'Storage Unit > ' + storage_id})

diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html
@@ -102,8 +102,6 @@
 
     /* Bootstrap 4 text input with search icon */
 
-    .has-search {
-    }
     .form-control {
         padding-left: 2.375rem;
         background-color: #DCDCDC;