This is an automated email from the ASF dual-hosted git repository. yasith pushed a commit to branch merge-portals in repository https://gitbox.apache.org/repos/asf/airavata-portals.git
commit d877846c980cfd87735407ecda84f24f3b7455fc Author: Akhil Nagulavancha <[email protected]> AuthorDate: Mon Jun 15 17:20:54 2020 -0400 added Grid view --- .../js/containers/Storage.vue | 36 +++++++++++++++++----- airavata_mft/apps/workspace/views.py | 2 +- 2 files changed, 30 insertions(+), 8 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 index 6c671fd24..2cd7bd4b0 100644 --- 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 @@ -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> \ No newline at end of file diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py index 323b81b48..b413e447f 100644 --- a/airavata_mft/apps/workspace/views.py +++ b/airavata_mft/apps/workspace/views.py @@ -5,7 +5,7 @@ import json 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"}]
