(front) Albums: reset query button

dashboard/src/app/albums/albums.component.css

@@ -0,0 +1,34 @@
+/***  BOTTOM BUTTON PART  ***/
+/* Thank to https://codyhouse.co/gem/back-to-top/ */
+.btn-top {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  /* image replacement properties */
+  /*overflow: hidden;*/
+  /*text-indent: 100%;*/
+  /*white-space: nowrap;*/
+  /*background: rgba(232, 98, 86, 0.8);*/
+  /*background: #ff9000;*/
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+.btn-top.btn-top-is-visible, .no-touch .btn-top:hover {
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+.btn-top.btn-top-is-visible {
+  /* the button becomes visible */
+  visibility: visible;
+  opacity: 1;
+}
+
+/***  END BOTTOM BUTTON PART  ***/

dashboard/src/app/albums/albums.component.html

@@ -66,4 +66,9 @@
       </tbody>
   </table>
 </div>
+
+<button type="button" class="btn btn-danger btn-top" [class.btn-top-is-visible]="queryEdited"
+  aria-label="Reset filters" (click)="resetQuery()" title="Reset filters and reload datas">
+  <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+</button>
 </div>

dashboard/src/app/albums/albums.component.ts

@@ -18,7 +18,8 @@ enum query_edit_type {
 export class AlbumsComponent implements OnInit {
   numberToArray = Utils.numberToArray;
   albums: Album[] = [];
-  filterQuery = ElsAlbumService.GET_ALBUMS_DEFAULT_QUERY;
+  filterQuery = Object.assign({}, ElsAlbumService.GET_ALBUMS_DEFAULT_QUERY);
+  queryEdited = false;
 
   constructor(private elsService : ElsAlbumService) { }
 
@@ -48,6 +49,8 @@ export class AlbumsComponent implements OnInit {
         [field]: value[field]
       }
     })
+
+    this.queryEdited = true;
   }
 
   exlude(field: string, value: string): void {
@@ -60,6 +63,11 @@ export class AlbumsComponent implements OnInit {
     this.loadData()
   }
 
+  resetQuery(): void {
+    this.filterQuery = Object.assign({}, ElsAlbumService.GET_ALBUMS_DEFAULT_QUERY);
+    this.loadData();
+  }
+
   loadData(): void {
     // console.log(JSON.stringify(this.filterQuery))
     this.elsService.getAlbums(this.filterQuery).subscribe(data => this.albums = data);