Skip to content
Permalink
Browse files
added Grid view
  • Loading branch information
Akhil Nagulavancha authored and Akhil Nagulavancha committed Jun 15, 2020
1 parent 071fe01 commit d877846c980cfd87735407ecda84f24f3b7455fc
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 8 deletions.
@@ -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>
@@ -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"}]

0 comments on commit d877846

Please sign in to comment.