fin sección pipesapp

sugarnet · Dec 14, 2024 · 39f6a85 · 39f6a85
1 parent a41f73b
commit 39f6a85
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 11 deletions.
diff --git a/05-pipesApp/angular.json b/05-pipesApp/angular.json
@@ -40,7 +40,8 @@
               "src/styles.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/primeng/resources/themes/lara-dark-indigo/theme.css",
-              "node_modules/primeng/resources/primeng.min.css"
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/primeflex/primeflex.min.css"
             ],
             "scripts": []
           },

diff --git a/05-pipesApp/package-lock.json b/05-pipesApp/package-lock.json
diff --git a/05-pipesApp/package.json b/05-pipesApp/package.json
@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.13",
     "rxjs": "~7.8.0",

diff --git a/05-pipesApp/src/app/app.module.ts b/05-pipesApp/src/app/app.module.ts
@@ -1,11 +1,20 @@
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
 
+// configuración del locale de la aplicación
+import localeEsAr from '@angular/common/locales/es-AR';
+import localeFrCa from '@angular/common/locales/fr-CA';
+
+import { registerLocaleData } from '@angular/common';
+
+registerLocaleData(localeEsAr);
+registerLocaleData(localeFrCa);
+
 @NgModule({
   declarations: [
     AppComponent
@@ -16,7 +25,11 @@ import { SharedModule } from './shared/shared.module';
     AppRoutingModule,
     SharedModule
   ],
-  providers: [],
+  providers: [
+    {
+      provide: LOCALE_ID, useValue: 'es-AR'
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/05-pipesApp/src/app/products/pages/basics-page/basics-page.component.html b/05-pipesApp/src/app/products/pages/basics-page/basics-page.component.html
@@ -1,24 +1,61 @@
-<p-panel [showHeader]="false">
-    <h1>Pipe Básicos</h1>
+<p-panel header="Pipes Básicos" class="p-1">
     <p>
         Pipes incluídos en Angular - Usualmente en el Common Module 
     </p>
 </p-panel>
 
-<div class="p-grid">
-    <div class="p-col-4">
+<div class="grid">
+    <div class="col-12 md:col-4">
         <p-card header="uppercase">
             {{ nameLower | uppercase }}
         </p-card>
     </div>
-    <div class="p-col-4">
+    <div class="col-12 md:col-4">
         <p-card header="lowercase">
             {{ nameUpper | lowercase }}
         </p-card>
     </div>
-    <div class="p-col-4">
+    <div class="col-12 md:col-4">
         <p-card header="titlecase">
             {{ fullName | titlecase }}
         </p-card>
     </div>
+    <div class="col-12 md:col-6">
+        <p-card header="date">
+            <ol>
+                <li>fecha | date</li>
+                <li>fecha | date:'short'</li>
+                <li>fecha | date:'long'</li>
+                <li>fecha | date:'MMMM'</li>
+                <li>fecha | date:'MMMM dd, yyyy'</li>
+            </ol>
+            <hr>
+            <ol>
+                <li>fecha | date:'long':'GMT-3'</li>
+                <li>fecha | date:'long':'GMT-6'</li>
+                <li>fecha | date:'long':'':'es-AR'</li>
+                <li>fecha | date:'long':'':'en-US'</li>
+                <li>fecha | date:'long':'':'fr-CA'</li>
+            </ol>
+        </p-card>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-card header="date">
+            <ol>
+                <li>{{ customDate | date }}</li>
+                <li>{{ customDate | date:'short' }}</li>
+                <li>{{ customDate | date:'long' }}</li>
+                <li>{{ customDate | date:'MMMM' }}</li>
+                <li>{{ customDate | date:'MMMM dd, yyyy' }}</li>
+            </ol>
+            <hr>
+            <ol>
+                <li>{{ customDate | date:'long':'GMT-3' }}</li>
+                <li>{{ customDate | date:'long':'GMT-6' }}</li>
+                <li>{{ customDate | date:'long':'':'es-AR' }}</li>
+                <li>{{ customDate | date:'long':'':'en-US' }}</li>
+                <li>{{ customDate | date:'long':'':'fr-CA' }}</li>
+            </ol>
+        </p-card>
+    </div>
 </div>
diff --git a/05-pipesApp/src/app/products/pages/basics-page/basics-page.component.ts b/05-pipesApp/src/app/products/pages/basics-page/basics-page.component.ts
@@ -10,4 +10,6 @@ export class BasicsPageComponent {
   public nameLower: string = 'diego';
   public nameUpper: string = 'DIEGO';
   public fullName: string = 'DiEgO';
+
+  public customDate: Date = new Date();
 }
diff --git a/05-pipesApp/src/app/products/pages/numbers-page/numbers-page.component.html b/05-pipesApp/src/app/products/pages/numbers-page/numbers-page.component.html
@@ -1 +1,23 @@
-<p>numbers-page works!</p>
+<p-panel header="Pipes Numéricos" class="p-1">
+    <p>
+        Pipes incluídos en Angular - Usualmente en el Common Module 
+    </p>
+</p-panel>
+
+<div class="grid">
+    <div class="col-12 md:col-4">
+        <p-card header="Ventas Netas" subheader="del presente año">
+            {{ (totalSells + 54654) | number:'1.2-2' }}
+        </p-card>
+    </div>
+    <div class="col-12 md:col-4">
+        <p-card header="Ventas Brutas" subheader="del presente año">
+            {{ (totalSells + 54654) | currency:'ARS':'symbol-narrow':'1.4-4' }}
+        </p-card>
+    </div>
+    <div class="col-12 md:col-4">
+        <p-card header="Ganancia Porcentual" subheader="del presente año">
+            {{ percent | percent:'1.2-2' }}
+        </p-card>
+    </div>
+</div>
diff --git a/05-pipesApp/src/app/products/pages/numbers-page/numbers-page.component.ts b/05-pipesApp/src/app/products/pages/numbers-page/numbers-page.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class NumbersPageComponent {
 
+  public totalSells: number = 987564.5648;
+  public percent: number = 0.764357;
 }
diff --git a/05-pipesApp/src/app/products/pages/uncommon-page/uncommon-page.component.html b/05-pipesApp/src/app/products/pages/uncommon-page/uncommon-page.component.html
@@ -1 +1,74 @@
-<p>uncommon-page works!</p>
+<p-panel header="Pipes Básicos" class="p-1">
+    <p>
+        Pipes incluídos en Angular - Usualmente en el Common Module 
+    </p>
+</p-panel>
+
+<div class="grid">
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="i18nSelect Pipe" [toggleable]="true">
+
+            <p>
+                Saudos {{ name }} es un placer {{ gender | i18nSelect:invitationMap }}
+                a nuestro evento
+            </p>
+
+            <p-button (click)="changeClient()" label="Cambiar Persona"></p-button>
+        </p-fieldset>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="i18nPlural Pipe" [toggleable]="true">
+            <p>
+                Actualmente {{ customers.length | i18nPlural:customersMap }}
+            </p>
+            <p-button (click)="removeCustomer()" label="Remover Cliente"></p-button>
+        </p-fieldset>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="Slice Pipe" [toggleable]="true">
+            <b>Original</b>
+            <pre>{{ customers }}</pre>
+
+            <b>slice:0:2</b>
+            <pre>{{ customers | slice:0:2 }}</pre>
+
+            <b>slice:1:2</b>
+            <pre>{{ customers | slice:1:2 }}</pre>
+
+            <b>slice:1:3</b>
+            <pre>{{ customers | slice:1:3 }}</pre>
+
+            <b>slice:3:4</b>
+            <pre>{{ customers | slice:3:4 }}</pre>
+
+            <b>slice:0:-3</b>
+            <pre>{{ customers | slice:0:-3 }}</pre>
+
+
+        </p-fieldset>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="Json Pipe" [toggleable]="true">
+            <pre>{{ person | json }}</pre>
+        </p-fieldset>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="KeyValue Pipe" [toggleable]="true">
+
+            <ul>
+                <li *ngFor="let item of person | keyvalue">
+                    <b>{{ item.key }}:</b> {{ item.value }}
+                </li>
+            </ul>
+        </p-fieldset>
+    </div>
+    <div class="col-12 md:col-6">
+        <p-fieldset legend="Async Pipe" [toggleable]="true">
+            <pre *ngIf="!(myObservableTimer | async)">Resolviendo observable</pre>
+            <pre>{{ myObservableTimer | async }}</pre>
+
+            <pre *ngIf="!(promiseValue | async)">Resolviendo promesa</pre>
+            <pre>{{ promiseValue | async }}</pre>
+        </p-fieldset>
+    </div>
+</div>
diff --git a/05-pipesApp/src/app/products/pages/uncommon-page/uncommon-page.component.ts b/05-pipesApp/src/app/products/pages/uncommon-page/uncommon-page.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { interval, Observable, tap } from 'rxjs';
 
 @Component({
   selector: 'app-uncommon-page',
@@ -7,4 +8,51 @@ import { Component } from '@angular/core';
 })
 export class UncommonPageComponent {
 
+  //i18n Select
+  public name: string = 'Diego';
+  public gender: 'male'|'female' = 'male';
+
+
+  public invitationMap = {
+    'male': 'invitarlo',
+    'female': 'invitarla'
+  };
+
+  changeClient(): void {
+    this.name = 'Sol';
+    this.gender = 'female';
+  }
+
+  //i18n Plural
+  public customers: string[] = ['Diego', 'Alma', 'Valen', 'Sol', 'Pedro', 'Lucas', 'Stella'];
+  public customersMap = {
+    '=0': 'no tenemos clientes esperado.',
+    '=1': 'tenemos un cliente esperado.',
+    '=2': 'tenemos # clientes esperado.',
+    'other': 'tenemos # clientes esperado.',
+  };
+
+  removeCustomer(): void {
+    this.customers.shift();
+  }
+
+  // keyvalue
+  public person = {
+    name: 'Diego',
+    age: 41,
+    address: 'Gral Gutiérrez, Maipú.'
+  };
+
+  // async
+  public myObservableTimer: Observable<number> = interval(2000).pipe(
+    tap( value => console.log('tap:', value) )
+  );
+
+  public promiseValue: Promise<string> = new Promise( (resolve, reject) => {
+    setTimeout(() => {
+      resolve('Tenemos data en la promesa');
+      console.log('Tenemos data en la promesa');
+    }, 3500);
+  } )
+
 }