[AT-4] Implementación del listado y paginación

src/app/app-routing.module.ts

@@ -1,10 +1,37 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { TablaComponent } from './rick/pages/tabla/tabla.component';
 
-const routes: Routes = [];
+
+const routes: Routes = [
+  {
+    path: '', 
+    component: TablaComponent,
+    pathMatch: 'full'
+  },
+
+ /*  {
+     path: 'buscar',
+     component: 
+  },
+  {
+     path: 'ordenar',
+     component:         
+  }, */
+  {
+     path: '**',
+     redirectTo: ''
+  }
+
+
+];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
 })
 export class AppRoutingModule { }

src/app/app.component.css

@@ -0,0 +1,5 @@
+
+
+
+
+

src/app/app.component.html

@@ -1,2 +1,4 @@
 
 
+
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subject } from 'rxjs';
+
+
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent  {
   title = 'rickandmortyApp';
 }

src/app/app.module.ts

@@ -5,16 +5,26 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import { RickModule } from './rick/rick.module';
+import { MaterialModule } from './material/material.module';
+import { HttpClientModule } from '@angular/common/http';
+
+
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+
+
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    HttpClientModule,
+    MaterialModule,
+    RickModule
 
   ],
   providers: [],

src/app/material/material.module.ts

@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+
+import {MatCardModule} from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {CdkTableModule} from '@angular/cdk/table';
+
+
+
+import { MatSidenavModule } from '@angular/material/sidenav';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatTableModule} from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+
+
+@NgModule({
+  declarations: [],
+
+  exports:[
+    MatCardModule,
+    CdkTableModule,
+    MatIconModule,
+    MatListModule,
+
+    MatSidenavModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatToolbarModule
+
+  ],
+  imports:[
+    MatCardModule,
+    CdkTableModule,
+    MatIconModule,
+    MatListModule,
+
+    MatSidenavModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatToolbarModule
+  ]
+})
+export class MaterialModule { }

src/app/rick/interfaces/rick.interfaces.ts

@@ -0,0 +1,53 @@
+export interface Rickmorty {
+    info:    Info;
+    results: Result[];
+}
+
+export interface Info {
+    count: number;
+    pages: number;
+    next:  string;
+    prev:  null;
+}
+
+export interface Result {
+    id:        number;
+    name:      string;
+    status:    string | Status;
+    species?:  Species;
+    type?:     Type;
+    gender:    string |Gender;
+    origin?:   Location;
+    location?: Location;
+    image?:    string;
+    episode?:  string[];
+    url?:      string;
+    created?:  Date;
+}
+
+export enum Gender {
+    Female = "Female",
+    Male =   "Male",
+}
+
+export interface Location {
+    name: string;
+    url:  string;
+}
+
+export enum Species {
+    Alien = "Alien",
+    Human = "Human",
+    Unknown = "unknown",
+}
+
+export enum Status {
+    Alive = "Alive",
+}
+
+export enum Type {
+    Chair = "Chair",
+    Clone = "Clone",
+    Empty = "",
+    Pickle = "Pickle",
+}

src/app/rick/pages/tabla/tabla.component.css

@@ -0,0 +1,13 @@
+
+table {
+  width: 100%;
+}
+
+a {
+  cursor: pointer;
+}
+
+th{
+  width: 20%;
+}
+

src/app/rick/pages/tabla/tabla.component.html

@@ -0,0 +1,56 @@
+<div class="container">
+  <mat-card class="mat-elevation-z4">
+    <mat-card-title> <span>Rick&MortyAPP</span></mat-card-title>
+  </mat-card>
+</div>
+
+<div class="container" style="width:70%; margin: 40px auto ">
+  <div class="mat-elevation-z4" >
+    <table mat-table [dataSource]="dataSource">
+
+      <!-- Id Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> No. </th>
+        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+      </ng-container>
+
+      <!-- Nombre Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Nombre </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <!-- Genero Column -->
+      <ng-container matColumnDef="gender">
+        <th mat-header-cell *matHeaderCellDef> Genero </th>
+        <td mat-cell *matCellDef="let element"> {{element.gender}} </td>
+      </ng-container>
+
+      <!-- Tipo Column -->
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef> Tipo </th>
+        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
+      </ng-container>
+      <!-- Estatus Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef> Estatus </th>
+        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+      </ng-container>
+      <!-- Ver (ficha de personaje) Column -->
+      <ng-container matColumnDef="ver">
+        <th mat-header-cell *matHeaderCellDef> Ver más </th>
+        <td mat-cell *matCellDef="let element" style="text-align: center;">
+          <a href="" style="color: white;" matTooltip = "Ver mas información">
+            <mat-icon>search</mat-icon>
+          </a>
+         </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="Columns"></tr>
+      <tr mat-row *matRowDef="let row; columns: Columns;"></tr>
+    </table>
+    <!-- Paginacion -->
+    <mat-paginator [pageSizeOptions]="[10]"></mat-paginator>
+
+  </div>
+</div>

src/app/rick/pages/tabla/tabla.component.ts

@@ -0,0 +1,54 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { Rickmorty } from '../../interfaces/rick.interfaces';
+import { RickService } from '../../services/rick.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+
+
+
+
+@Component({
+  selector: 'app-tabla',
+  templateUrl: './tabla.component.html',
+  styleUrls: ['./tabla.component.css']
+})
+
+export class TablaComponent implements AfterViewInit, OnInit {
+
+  Columns: string[] = [ 'id', 'name', 'gender', 'type', 'status', 'ver' ];
+  dataSource = new MatTableDataSource<Rickmorty>;
+
+
+  constructor( private rickService: RickService ) { }
+
+   @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  } 
+
+  cargaRick() {
+    this.rickService.getRick()
+        .subscribe( (res:any) =>{
+          console.log(res);  
+          if (!res.info){
+            return console.log ('no info check data ');
+          }
+          else {
+            this.dataSource.data = res.results;
+          }                 
+        })   
+  }
+
+  ngOnInit(): void { 
+    this.cargaRick()
+
+
+  }
+}
+
+
+
+
+
+

src/app/rick/rick.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TablaComponent } from './pages/tabla/tabla.component';
+import { MaterialModule } from '../material/material.module';
+
+
+
+@NgModule({
+  declarations: [
+    TablaComponent,
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+  ]
+})
+export class RickModule { }

src/app/rick/services/rick.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+import { Observable } from 'rxjs';
+import { Rickmorty } from '../interfaces/rick.interfaces';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RickService {
+
+  private baseUrl: string = environment.baseUrl;
+
+
+  constructor(private http: HttpClient) { }
+
+  getRick() : Observable<Rickmorty> {
+    return this.http.get<Rickmorty>(`${this.baseUrl}`);
+  }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  baseUrl: 'https://rickandmortyapi.com/api/character' 
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  baseUrl: 'https://rickandmortyapi.com/api/character'
 };
 
 /*