Pipes personalizados

workspace/04-pipesApp/package.json

@@ -11,6 +11,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.2.0",
+    "@angular/cdk": "^13.2.3",
     "@angular/common": "~13.2.0",
     "@angular/compiler": "~13.2.0",
     "@angular/core": "~13.2.0",

workspace/04-pipesApp/src/app/prime-ng/prime-ng.module.ts

@@ -5,13 +5,17 @@ import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { MenubarModule } from 'primeng/menubar';
 import { FieldsetModule } from 'primeng/fieldset';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TableModule } from 'primeng/table';
 
 @NgModule({
   exports: [
     ButtonModule,
     CardModule,
     MenubarModule,
-    FieldsetModule
+    FieldsetModule,
+    ToolbarModule,
+    TableModule
   ]
 })
 export class PrimeNgModule { }

workspace/04-pipesApp/src/app/shared/menu/menu.component.ts

@@ -39,7 +39,8 @@ export class MenuComponent implements OnInit {
       },
       {
         label: 'Pipes personalizados',
-        icon: 'pi pi-cog'
+        icon: 'pi pi-cog',
+        routerLink: '/ordenar'
       }
     ];
   }

workspace/04-pipesApp/src/app/ventas/interfaces/ventas.interface.ts

@@ -0,0 +1,9 @@
+export enum Color {
+    rojo, negro, azul, verde
+}
+
+export interface Heroe {
+    nombre: string;
+    vuela: boolean;
+    color: Color;
+}

workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.html

@@ -1 +1,70 @@
-<p>ordenar works!</p>
+<div class="text-layout">
+
+    <h1>Pipes personalizados</h1>
+    <p>Pipes creados por {{ 'nosotros' | mayusculas:enMayusculas }}</p>
+
+</div>
+
+<p-toolbar>
+    <div class="p-toolbar-group-left">
+
+    </div>
+
+    <div class="p-toolbar-group-right">
+        <p-button label="En myúsculas" icon="pi pi-check" styleClass="p-button-md" (onClick)="cambiarTamanio()"
+            class="mr-1">
+        </p-button>
+        <button pButton icon="pi pi-sort" label="Por nombre" class="mr-1 p-button-warning"
+            (click)="cambiarOrden('nombre')"></button>
+        <button pButton icon="pi pi-sort" label="Vuela" class="mr-1 p-button-success "
+            (click)="cambiarOrden('vuela')"></button>
+        <button pButton icon="pi pi-sort" label="Por color" class="mr-1 p-button-help"
+            (click)="cambiarOrden('color')"></button>
+    </div>
+</p-toolbar>
+
+<div class="grid">
+    <div class="col mt-2">
+        <p-table [value]="heroes | ordenar: ordenarPor " responsiveLayout="scroll">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th>Nombre</th>
+                    <th>Vuela</th>
+                    <th>Color</th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-heroe>
+                <tr>
+                    <td>{{heroe.nombre | titlecase}}</td>
+                    <td>{{heroe.vuela | vuela | titlecase }}</td>
+                    <td>{{heroe.color }}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </div>
+</div>
+
+
+<div class="grid">
+    <div class="col mt-2">
+        <p-table [value]="heroes | slice:0" responsiveLayout="scroll">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th pSortableColumn="nombre">Nombre <p-sortIcon field="nombre"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="vuela">Vuela <p-sortIcon field="vuela"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon>
+                    </th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-heroe>
+                <tr>
+                    <td>{{heroe.nombre | titlecase}}</td>
+                    <td>{{heroe.vuela | vuela | titlecase }}</td>
+                    <td>{{heroe.color }}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </div>
+</div>

workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.ts

@@ -1,16 +1,52 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Color, Heroe } from '../../interfaces/ventas.interface';
 
 @Component({
   selector: 'app-ordenar',
   templateUrl: './ordenar.component.html',
   styles: [
   ]
 })
-export class OrdenarComponent implements OnInit {
+export class OrdenarComponent {
 
-  constructor() { }
+  enMayusculas: boolean = false;
 
-  ngOnInit(): void {
+  ordenarPor: string = '';
+
+  heroes: Heroe[] = [
+    {
+      nombre: 'Superman',
+      vuela: true,
+      color: Color.azul
+    },
+    {
+      nombre: 'Bataman',
+      vuela: false,
+      color: Color.negro
+    },
+    {
+      nombre: 'Robin',
+      vuela: false,
+      color: Color.verde
+    },
+    {
+      nombre: 'Dart Devil',
+      vuela: false,
+      color: Color.rojo
+    },
+    {
+      nombre: 'Linterna Verde',
+      vuela: true,
+      color: Color.verde
+    },
+  ];
+
+
+  cambiarTamanio() {
+    (this.enMayusculas) ? this.enMayusculas = false : this.enMayusculas = true;
   }
 
+  cambiarOrden(valor: string){
+    this.ordenarPor = valor;
+  }
 }

workspace/04-pipesApp/src/app/ventas/pipes/mayusculas.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'mayusculas'
+})
+export class MayusculasPipe implements PipeTransform {
+
+    transform(valor: string, enMayusculas: boolean = true): string {
+        return (enMayusculas) ? valor.toUpperCase() : valor.toLowerCase();
+    }
+
+}
+

workspace/04-pipesApp/src/app/ventas/pipes/ordenar.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Heroe } from '../interfaces/ventas.interface';
+
+@Pipe({
+  name: 'ordenar'
+})
+export class OrdenarPipe implements PipeTransform {
+
+  transform(heroes: Heroe[], ordenarPor: string = 'sin valor'): Heroe[] {
+
+    switch (ordenarPor) {
+      case 'nombre':
+        return heroes = heroes.sort((a, b) => (a.nombre > b.nombre) ? 1 : -1);
+      case 'vuela':
+        return heroes = heroes.sort((a, b) => (a.vuela > b.vuela) ? -1 : 1);
+      case 'color':
+        return heroes = heroes.sort((a, b) => (a.color > b.color) ? 1 : -1);
+
+      default:
+        return heroes;
+    }
+
+  }
+
+}

workspace/04-pipesApp/src/app/ventas/pipes/vuela.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'vuela'
+})
+export class VuelaPipe implements PipeTransform {
+
+    transform(vuela: boolean): string {
+        return (vuela) ? 'vuela' : 'no vuela';
+    }
+
+}

workspace/04-pipesApp/src/app/ventas/ventas.module.ts

@@ -7,15 +7,24 @@ import { NumerosComponent } from './pages/numeros/numeros.component';
 import { NoComunesComponent } from './pages/no-comunes/no-comunes.component';
 import { BasicosComponent } from './pages/basicos/basicos.component';
 import { OrdenarComponent } from './pages/ordenar/ordenar.component';
+import { MayusculasPipe } from './pipes/mayusculas.pipe';
+import { VuelaPipe } from './pipes/vuela.pipe';
+import { OrdenarPipe } from './pipes/ordenar.pipe';
 
 
 
 @NgModule({
   declarations: [
+    // Componentes
     NumerosComponent,
     NoComunesComponent,
     BasicosComponent,
-    OrdenarComponent
+    OrdenarComponent,
+
+    // Pipes
+    MayusculasPipe,
+    VuelaPipe,
+    OrdenarPipe
   ],
   exports: [
     NumerosComponent,