added Grid view

airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue

@@ -15,7 +15,7 @@
                     </div>
                 </div>
                 <div class="btn-group mr-4" role="group">
-                    <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-bars" v-on:click="layout = 'list'" v-bind:class="{ 'active': layout == 'list'}"></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">
@@ -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 v-if="layout === 'list'" class="table table-hover main-table " >
         <thead>
             <tr>
               <th scope="col">Name</th>
@@ -68,7 +68,16 @@
             </tr>
           </tbody>
         </table>
-    </div>
+            <div v-if="layout === 'grid'" class="table table-hover main-table " >
+                <!-- Icons of respective storages should be should be added  -->
+                <ul :style="gridStyle" class="card-list ">
+                <li v-for="storage in storageList " v-bind:key="storage.storageId" class="card-item " @click="showDescription(storage)">
+                    <br>{{ storage.name }}<br/>
+                    <br>{{ storage.size}}<br/>
+                </li>
+                </ul>
+            </div>
+        </div>
 </template>
 
 <script>
@@ -80,10 +89,18 @@ export default {
         return {
             storageList: this.initialStorageList,
             heading: this.title,
-            selectedStorage: this.initialStorageList[0]
+            selectedStorage: this.initialStorageList[0],
+            layout: 'grid',
+            numberOfColumns: 3
         }
     },
-        layout: 'listview',
+    computed: {
+    gridStyle() {
+      return {
+        gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`
+      }
+    },
+    },
     methods: {
         showDescription(unit) {
             this.selectedStorage = unit
@@ -92,9 +109,7 @@ export default {
         sortBy(prop){
             this.storageList.sort((a,b)=>a[prop] < b[prop] ? -1 : 1)
         }
-
     }
-
 }
 </script>
 
@@ -134,4 +149,11 @@ export default {
     .table-item{
         cursor: pointer;
     }
+    .card-list {
+  display: grid;
+  list-style-type: none;
+    }
+    .card-item {
+  padding: 2em;
+    }
 </style>

airavata_mft/apps/workspace/views.py

@@ -5,7 +5,7 @@
 
 def storage(request):
     # TODO: grpc calls to backend
-    storage_json = [{"storageId": "ssh-storage1", "name": "One Drive", "size": "20B", "occupied": "10GB", "lastModified":"26, March 2020", "host": "localhost", "port": 22, "user": "root"},
+    storage_json = [{"storageId": "ssh-storage1", "name": "One Drive", "size": "20GB", "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"}]