feat(signals): adiciona exemplo de Signals

Author: Danilo Otavio Lima Salve

src/app/pages/signals/signals-sample/signals-sample.component.html

@@ -1,9 +1,11 @@
 <po-page-default p-title="Exemplos Signals" p-subtitle="Exemplos de uso de Signals">
-  <div class="po-row">
-    <app-untracked class="po-sm-12 po-md-12 po-lg-6 po-xl-12" />
-    <app-linked class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
-    <app-store class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
-    <app-effect class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
-    <app-to-signal class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
-  </div>
+  <po-container class="po-sm-12 po-md-12 po-lg-12 po-xl-12 po-mb-2">
+    <div class="po-row">
+      <app-untracked class="po-sm-12 po-md-12 po-lg-6 po-xl-12" />
+      <app-linked class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
+      <app-store class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
+      <app-effect class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
+      <app-to-signal class="po-sm-12 po-md-12 po-lg-6 po-xl-4" />
+    </div>
+  </po-container>
 </po-page-default>

src/app/pages/signals/signals-sample/signals-sample.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { PoPageModule } from '@po-ui/ng-components';
+import { PoContainerModule, PoPageModule } from '@po-ui/ng-components';
 
 import { UntrackedComponent } from './untracked/untracked.component';
 import { LinkedComponent } from './linked/linked.component';
@@ -9,7 +9,15 @@ import { ToSignalComponent } from './to-signal/to-signal.component';
 
 @Component({
   selector: 'app-signals-sample',
-  imports: [PoPageModule, UntrackedComponent, LinkedComponent, EffectComponent, StoreComponent, ToSignalComponent],
+  imports: [
+    PoPageModule,
+    UntrackedComponent,
+    LinkedComponent,
+    EffectComponent,
+    StoreComponent,
+    ToSignalComponent,
+    PoContainerModule
+  ],
   templateUrl: './signals-sample.component.html'
 })
 export class SignalsSampleComponent {}

src/app/pages/signals/signals-sample/to-signal/good-child/good-child.component.html

@@ -1,10 +1,15 @@
 <div class="po-row">
   <po-info class="po-sm-12" p-label="Cidade" [p-value]="cityName()" [p-orientation]="infoOrientation" />
   <po-info class="po-sm-12" p-label="Estado" [p-value]="state()" [p-orientation]="infoOrientation" />
-  <po-info class="po-sm-12" p-label="Atualizado em" [p-value]="dateOfUpdate()" [p-orientation]="infoOrientation" />
+  <po-info
+    class="po-sm-12"
+    p-label="Atualizado em"
+    [p-value]="transformDate(dateOfUpdate())"
+    [p-orientation]="infoOrientation"
+  />
 
   @for (clima of clima(); track $index) {
-    <po-info class="po-sm-12" p-label="Data" [p-value]="clima.data" [p-orientation]="infoOrientation" />
+    <po-info class="po-sm-12" p-label="Data" [p-value]="transformDate(clima.data)" [p-orientation]="infoOrientation" />
     <po-info class="po-sm-12" p-label="Condição" [p-value]="clima.condicao_desc" [p-orientation]="infoOrientation" />
     <po-info class="po-sm-12" p-label="Minima" [p-value]="clima.min.toString()" [p-orientation]="infoOrientation" />
     <po-info class="po-sm-12" p-label="Maxima" [p-value]="clima.max.toString()" [p-orientation]="infoOrientation" />
@@ -15,6 +20,4 @@
       [p-orientation]="infoOrientation"
     />
   }
-
-  {{ climate() | json }}
 </div>

src/app/pages/signals/signals-sample/to-signal/good-child/good-child.component.ts

@@ -1,11 +1,12 @@
-import { ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { PoInfoModule, PoInfoOrientation } from '@po-ui/ng-components';
 import { Climate } from '../shared/interfaces/climate';
-import { JsonPipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-good-child',
-  imports: [PoInfoModule, JsonPipe],
+  imports: [PoInfoModule],
+  providers: [DatePipe],
   templateUrl: './good-child.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -16,11 +17,10 @@ export class GoodChildComponent {
   readonly dateOfUpdate = computed(() => (this.climate() ? this.climate()?.atualizado_em : ''));
   readonly state = computed(() => (this.climate() ? this.climate()?.estado : ''));
   protected readonly infoOrientation = PoInfoOrientation.Horizontal;
+  private readonly datePipe = inject(DatePipe);
 
-  constructor() {
-    effect(() => {
-      // eslint-disable-next-line no-console
-      console.log(this.climate());
-    });
+  transformDate(date?: string): string {
+    if (!date) return '';
+    return this.datePipe.transform(date, 'dd/MM/yyyy') || date;
   }
 }

src/app/pages/signals/signals-sample/to-signal/to-signal.component.html

@@ -1,5 +1,5 @@
 <po-container p-title="toSignal">
   <po-icon p-icon="an an-question" class="po-clickable" p-tooltip="Exemplo de utilização do toSignal" />
 
-  <app-good-child [climate]="climate" />
+  <app-good-child [climate]="climate()" />
 </po-container>