Connect view with logic in component 4:

Component 4 (List all article's)
	commercial.html (old view)
	--> AllArticlesWebPagination.component.html (new view)
	--> +
	--> AllArticlesWebPagination.component.ts (logic)

Author: IvanmgmSoftwareEngineering

angular/wallypop/src/app/components/article/AllArticlesWebPagination.component.html

@@ -1,15 +1,15 @@
-{{>header}}
+<!-- {>header}} -->{
 <!-- ====== Page content ======-->
 <section class="section">
-    {{>search}}
-    {{#ERROR}}
+    <!--{{>search}}-->
+    <!--{{#ERROR}}-->
     <br>
     <div class="container">
         <div class="alert alert-danger" role="alert">
             <center>El artículo que buscas no existe o ya no está disponible</center>
         </div>
     </div>
-    {{/ERROR}}
+    <!--{{/ERROR}}-->
     <hr>
     <div class="container-fluid">
         <div class="row">
@@ -20,13 +20,13 @@
                         FILTROS <i aria-hidden="true" class="fa fa-sort pull-right"></i>
                     </button>
                     <form action="/search/commercial" class="full-width menu-commercial" method="GET">
-                        <h4 class="text-light">CATEGORÍA</h4>
+                        <h4 class="text-light">CATEGORÃA</h4>
                         <div class="form-group">
                             <select class="form-control" name="id_category">
                                 <option disabled selected>Selecciona una categoría</option>
-                                {{#lcategory}}
+                                <!--{{#lcategory}}-->
                                 <option name="CATEGORY" value="{{ID_CATEGORY}}">{{TITLE}}</option>
-                                {{/lcategory}}
+                               <!-- {{/lcategory}-->
                             </select>
                         </div>
                         <p class="text-center">
@@ -46,17 +46,17 @@ <h4 class="text-light">CATEGORÍA</h4>
             <div class="col-xs-12 col-sm-9 col-md-10">
                 <div class="full-width">
                     <ol class="breadcrumb">
-                        {{#lcategory}}
+                       <!-- {{#lcategory}}-->
                         <li><a href="/commercial/{{ID_CATEGORY}}">{{TITLE}}</a></li>
-                        {{/lcategory}}
+                        <!--{{/lcategory}}-->
                     </ol>
                 </div>
                 <div class="full-widht">
                     <i class="fa fa-th-large btn btn-default hidden-xs btn-change-post"></i>
                     <i class="fa fa-refresh btn btn-default"></i>
                     <i class="fa fa-angle-right btn btn-default"></i>
                 </div>
-                {{>article}}
+                <!--{{>article}}-->
                 <div class="clearfix"></div>
                 <nav class="text-center">
                     <ul class="pagination">

angular/wallypop/src/app/components/article/AllArticlesWebPagination.component.ts

@@ -1,7 +1,8 @@
-
-
 import {Component} from '@angular/core';
-import { Article } from 'src/app/models/article.model';
+import {Observable, throwError} from 'rxjs';
+//ESTA LINEA HAY QUE DESCOMENTARLA CUANDO SE HAGA EL MERGE CON LA RAMA CATEGORY
+//import {Category } from 'src/app/models/category.model';
+import {Article } from 'src/app/models/article.model';
 import {ArticleService} from '../../services/article.service';
 import {LoginService} from '../../services/login.service';
 
@@ -13,9 +14,17 @@ export class AllArticlesWebPagination {
     constructor(public articleService: ArticleService, public loginService: LoginService) {
     }
 
-    listAllArticlesWebPagination(event: any,): void {
+    listAllArticlesWebPagination(event: any,): Observable<Object> {
+        event.preventDefault();
+        return this.articleService.listAllArticlesWebPagination();
+    }
+    
+    /*
+     * ESTE METODO HAY QUE DESCOMENTARLO CUANDO SE HAGA EL MERGE CON LA RAMA CATEGORY
+    showCategories(event: any): Observable<Category[]> {
         event.preventDefault();
-        this.articleService.listAllArticlesWebPagination();
+        this.articleService.addArticle(title,description,city, price, postal_code);
     }
+    */
 }
 

angular/wallypop/src/app/services/article.service.ts

@@ -109,6 +109,7 @@ export class ArticleService {
     }
 
     listArticlesUserPagination (user: User){
+        // MIRAR TRANSPARENCIAS 14  APIS REST Y SERVICIOS
         return this.httpClient.get(BASE_URL + user.articles).pipe(
                 catchError(error => this.handleError(error))
             ) as Observable<string>;
@@ -121,38 +122,7 @@ export class ArticleService {
 
     }
 
-    /*
-     * AQUÍ LA PAGINACIÓN QUE HICIMOS PARA LA API REST. HAY QUE TRADUCIR ESTE MÉTODO DE JAVA A TYPESCRIPT
-    @GetMapping(params = {"page"})
-    public ResponseEntity<List<Article>> articlesPagination(HttpServletRequest request, @RequestParam("page") int page) {
-        if (page != -1) { // with pagination
-            
-            int pageSize = 4;
-            try {
-                List<Article> lArticlesPageable = new LinkedList<>();
-                Pageable paging = PageRequest.of(0, pageSize);
-                Page<Article> articlePage;
-                articlePage = articleService.findAllPageable(paging.withPage(page));
-                if (articlePage.getNumberOfElements() == 0) {
-                    // Empty
-                } else {
-                    for (Article a : articlePage) {
-                        lArticlesPageable.add(a);
-                    }
-                }
-                return new ResponseEntity<>(lArticlesPageable, HttpStatus.OK);
-            } catch (Exception e) {
-                return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
-            }
-        } else { // without pagination
-            try {
-                return new ResponseEntity<>(articleService.findAll(), HttpStatus.OK);
-            } catch (Exception e) {
-                return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
-            }
-        }
-    }
-*/
+   
 
 
 }