Add pagination in manage-resources, and delete resource

cvazquezlos · Apr 20, 2017 · b0bbf2b · b0bbf2b
1 parent f20d553
commit b0bbf2b
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 17 deletions.
diff --git a/frontend/src/app/component/admin/manage-resources/manage-resources.component.css b/frontend/src/app/component/admin/manage-resources/manage-resources.component.css
@@ -0,0 +1,3 @@
+table {
+  background-color: white !important;
+}
diff --git a/frontend/src/app/component/admin/manage-resources/manage-resources.component.html b/frontend/src/app/component/admin/manage-resources/manage-resources.component.html
@@ -1,9 +1,20 @@
+<div *ngIf="successMessage" class="alert alert-success">
+  <strong>¡Eliminado!</strong> {{message}}
+</div>
+<div *ngIf="errorMessage" class="alert alert-danger">
+  <strong>Algo ha ido mal...</strong> {{message}}
+</div>
+
 <section class="content-header">
   <h1>Administración de recursos <small>Administra los libros o las revistas</small></h1>
+  <ol class="breadcrumb">
+    <li><a [routerLink]="['/admin']"><i class="fa fa-dashboard"></i>Inicio</a></li>
+    <li class="active">Recursos</li>
+  </ol>
 </section>
 
 <section class="content">
-  <table class="table table-bordered table-striped" style="background-color: white !important;">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th width="14%">Título</th>
@@ -29,15 +40,25 @@ <h1>Administración de recursos <small>Administra los libros o las revistas</sma
           <a [routerLink]="['../resource', resource.id]">
             <button type="button" class="btn btn-success"><span class="fa fa-pencil"></span></button>
           </a>
-          <a>
-            <button type="button" class="btn btn-warning"><span class="fa fa-trash"></span></button>
-          </a>
+          <button type="button" class="btn btn-warning" (click)="deleteResource(resource.id)"><span class="fa fa-trash"></span></button>
         </td>
       </tr>
     </tbody>
   </table>
-  <a>
-    <button type="button" class="btn btn-primary"><span class="fa fa-plus-circle"> </span> &nbsp; Añadir recurso</button>
-  </a>
 
+  <div>
+    <div class="pull-left">
+      <a [routerLink]="['/admin/users/new']">
+        <button type="button" class="btn btn-primary"><span class="fa fa-plus-circle">  </span>&nbsp;Añadir recurso</button>
+      </a>
+    </div>
+    <div class="pull-right">
+      <button *ngIf="showPreviousPage" type="button" class="btn btn-primary" (click)="previousPage()">
+        <i class="fa fa-arrow-left" aria-hidden="true"></i>
+      </button>
+      <button *ngIf="showNextPage" type="button" class="btn btn-primary" (click)="nextPage()">
+        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
 </section>
diff --git a/frontend/src/app/component/admin/manage-resources/manage-resources.component.ts b/frontend/src/app/component/admin/manage-resources/manage-resources.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
+import { Resource } from 'app/model/resource.model';
+
+import { SessionService } from 'app/service/session.service';
 import { ResourceService } from 'app/service/resource.service';
 
 @Component({
@@ -8,17 +12,94 @@ import { ResourceService } from 'app/service/resource.service';
 })
 export class ManageResourcesComponent implements OnInit {
 
-  private resources: Object[] = [];
+  private resources: Resource[] = [];
+  errorMessage: boolean;
+  message: String;
+  showNextPage: boolean;
+  showPreviousPage: boolean;
+  successMessage: boolean;
+  resourcesPage: number;
 
-  constructor(private service: ResourceService) {
+  constructor(private router: Router,
+    private sessionService: SessionService,
+    private ResourceService: ResourceService) {
+    this.successMessage = false;
+    this.errorMessage = false;
+    this.resourcesPage = 0;
+    this.showNextPage = false;
+    this.showPreviousPage = false;
   }
 
   ngOnInit() {
-    this.service.getAllResources().subscribe(
-      resources => {
-        this.resources = resources;
+    if (!this.sessionService.checkCredentials()) {
+      this.router.navigate(["/login"]);
+    } else {
+      this.getResources();
+      this.checkNextPage();
+      this.checkPreviousPage();
+    }
+  }
+
+  getResources() {
+    this.ResourceService.getPageResources(this.resourcesPage).subscribe(
+      resources => this.resources = resources,
+      error => console.log("Fail trying to get current page of resources.")
+    );
+  }
+
+  nextPage() {
+    this.showNextPage = false;
+    this.showPreviousPage = false;
+    this.resourcesPage++;
+    this.getResources();
+    this.checkNextPage();
+    this.showPreviousPage = true;
+  }
+
+  previousPage() {
+    this.showNextPage = false;
+    this.showPreviousPage = false;
+    this.resourcesPage--;
+    this.getResources();
+    this.checkPreviousPage();
+    this.showNextPage = true;
+  }
+
+  checkNextPage() {
+    this.ResourceService.getPageResources(this.resourcesPage + 1).subscribe(
+      resources => this.showNextPage = (Object.keys(resources).length === 0) ? false : true
+    );
+  }
+
+  checkPreviousPage() {
+    if (this.resourcesPage > 0) {
+      this.ResourceService.getPageResources(this.resourcesPage - 1).subscribe(
+        resources => this.showPreviousPage = (Object.keys(resources).length === 0) ? false : true
+      );
+    } else {
+      this.showPreviousPage = false;
+    }
+  }
+
+  deleteResource(id: number) {
+    this.ResourceService.deleteUser(id).subscribe(
+      response => {
+        this.successMessage = true;
+        this.errorMessage = false;
+        this.message = 'Recurso eliminado correctamente.';
+        this.resourcesPage = 0;
+        console.log('Resource successfully deleted.');
+        this.getResources();
+        this.checkNextPage();
+        this.checkPreviousPage();
       },
-      error => console.log(error)
+      error => {
+        this.successMessage = false;
+        this.errorMessage = true;
+        this.message = 'No se ha podido eliminar el recurso.'
+        console.log('Fail trying to delete selected resource.');
+      }
     );
   }
+
 }
diff --git a/frontend/src/app/component/admin/manage-users/manage-users.component.html b/frontend/src/app/component/admin/manage-users/manage-users.component.html
@@ -46,6 +46,7 @@ <h1>
     </ng-template>
     </tbody>
   </table>
+
   <div>
     <div class="pull-left">
       <a [routerLink]="['/admin/users/new']">

diff --git a/frontend/src/app/service/resource.service.ts b/frontend/src/app/service/resource.service.ts
@@ -1,15 +1,21 @@
-import {Injectable} from '@angular/core';
-import {Http, Response} from '@angular/http';
-import {Observable} from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { Headers, Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/Rx';
-import {RESOURCES_URL} from "../util";
+import { RESOURCES_URL } from "../util";
 
 @Injectable()
 export class ResourceService {
 
+  authCreds: string;
+
   constructor(private http: Http) {
   }
 
+  setAuthHeaders(authCreds: string) {
+    this.authCreds = authCreds;
+  }
+
   getResource(id: number) {
     return this.http.get(RESOURCES_URL + '/' + id)
       .map(response => response.json())
@@ -23,9 +29,27 @@ export class ResourceService {
       .catch(error => Observable.throw('Server error'));
   }
 
+  getPageResources(page?: number) {
+    let url = (page) ? RESOURCES_URL + '?page=' + page : RESOURCES_URL;
+    return this.http.get(url)
+      .map(response => response.json().content)
+      .catch(error => Observable.throw('Server error'));
+  }
+
   searchResources(name: string, page: number) {
     return this.http.get(RESOURCES_URL + '?name=' + name + '&page=' + page)
       .map(response => response.json().content)
       .catch(error => Observable.throw('Server error'));
   }
+
+  deleteUser(id: number) {
+    this.authCreds = localStorage.getItem("creds");
+    let headers: Headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    headers.append('X-Requested-With', 'XMLHttpRequest');
+    headers.append('Authorization', 'Basic ' + this.authCreds);
+    return this.http.delete(RESOURCES_URL + '/' + id, { headers: headers })
+      .map(response => response.json())
+      .catch(error => Observable.throw('Server error'));
+  }
 }