Skip to content
Permalink
Browse files
Merge pull request #8 from akhil-8607/master
Added Sorting , Grid view for storage units
  • Loading branch information
aarushiibisht committed Jun 16, 2020
2 parents fee22c0 + d877846 commit 1464acd6034cd2ae8b4fc39b6fa57c42a36862a3
Showing 4 changed files with 49 additions and 18 deletions.
@@ -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 = '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">
<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 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,13 +89,25 @@ export default {
return {
storageList: this.initialStorageList,
heading: this.title,
selectedStorage: this.initialStorageList[0]
selectedStorage: this.initialStorageList[0],
layout: 'grid',
numberOfColumns: 3
}
},
computed: {
gridStyle() {
return {
gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`
}
},
},
methods: {
showDescription(unit) {
this.selectedStorage = unit
this.$bvModal.show("description-dialog")
},
sortBy(prop){
this.storageList.sort((a,b)=>a[prop] < b[prop] ? -1 : 1)
}
}
}
@@ -128,4 +149,11 @@ export default {
.table-item{
cursor: pointer;
}
.card-list {
display: grid;
list-style-type: none;
}
.card-item {
padding: 2em;
}
</style>
@@ -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>

@@ -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": "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"}]

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})
@@ -102,8 +102,6 @@

/* Bootstrap 4 text input with search icon */

.has-search {
}
.form-control {
padding-left: 2.375rem;
background-color: #DCDCDC;

0 comments on commit 1464acd

Please sign in to comment.