You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by aa...@apache.org on 2020/06/16 20:39:04 UTC
[airavata-mft-portal] 25/26: added Grid view
This is an automated email from the ASF dual-hosted git repository.
aarushi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-mft-portal.git
commit d877846c980cfd87735407ecda84f24f3b7455fc
Author: Akhil Nagulavancha <ak...@Akhils-MacBook-Pro.local>
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 6c671fd..2cd7bd4 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 323b81b..b413e44 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"}]