feat(apps): adiciona bandeja de aplicativos e remove do dashboard da home

Author: Danilo Otavio Lima Salve

src/app/core/components/home/currency-quotes/currency-quotes.component.html

@@ -1,5 +1,4 @@
 <po-widget
-  class="po-sm-12 po-md-12 po-lg-4 po-xl-3 po-mb-2"
   p-title="Cotações"
   p-primary-label="Obter Cotações"
   (p-primary-action)="getCurrencyQuotes()"
@@ -39,3 +38,5 @@
     </div>
   </po-modal>
 </po-widget>
+
+<po-loading-overlay p-text="Buscando Cotações" [hidden]="isHideLoading" />

src/app/core/components/home/currency-quotes/currency-quotes.component.ts

@@ -1,6 +1,7 @@
 import {
   PoFieldModule,
   PoInfoModule,
+  PoLoadingModule,
   PoModalComponent,
   PoModalModule,
   PoNotificationService,
@@ -9,7 +10,7 @@ import {
 } from '@po-ui/ng-components';
 import { ChangeDetectionStrategy, Component, inject, signal, viewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { map, take } from 'rxjs';
+import { finalize, map, take } from 'rxjs';
 
 import { CurrencyQuotesService } from './shared/services/currency-quotes.service';
 import { CurrencyInfo } from './shared/interfaces/currency-info';
@@ -18,7 +19,7 @@ import { CurrencyInfoMapper } from './shared/helpers/currency-info-mapper';
 import { CurrencyFormatter } from './shared/helpers/currency-formatter';
 @Component({
   selector: 'app-currency-quotes',
-  imports: [PoFieldModule, PoWidgetModule, FormsModule, PoInfoModule, PoModalModule, PoTooltipModule],
+  imports: [PoFieldModule, PoWidgetModule, FormsModule, PoInfoModule, PoModalModule, PoTooltipModule, PoLoadingModule],
   templateUrl: './currency-quotes.component.html',
   changeDetection: ChangeDetectionStrategy.Default
 })
@@ -28,16 +29,19 @@ export class CurrencyQuotesComponent {
   private readonly poNotification = inject(PoNotificationService);
   readonly options = this.currencyQuotesServices.getCurrencyOptions();
   readonly currencyIds = signal<string[]>([]);
+  protected isHideLoading = true;
   currencyInfo: CurrencyInfo[] = [];
   private readonly currencyInfoMapper = new CurrencyInfoMapper(new CurrencyFormatter());
 
   getCurrencyQuotes(): void {
     if ((this.currencyIds()?.length ?? 0) > 0) {
+      this.isHideLoading = false;
       this.currencyQuotesServices
         .getByCurrencyIds(this.currencyIds()!)
         .pipe(
           map((currencys: CurrencyQuotes) => this.currencyInfoMapper.mapFromQuotes(currencys)),
-          take(1)
+          take(1),
+          finalize(() => this.isHideLoading = true)
         )
         .subscribe({
           next: (infos: CurrencyInfo[]) => {

src/app/core/components/home/dashboard/coins/coins.component.html

@@ -1,7 +1,6 @@
 <po-widget
   appIsDeveloperMode
   resourceName="'Informações de Cripto Moedas'"
-  class="po-sm-12 po-md-12 po-lg-4 po-xl-3 po-mb-2"
   p-title="Cripto Moedas"
   [p-height]="220"
 >

src/app/core/components/home/dashboard/dashboard.component.html

@@ -10,10 +10,5 @@
         />
       }
     </po-container>
-    <po-container class="po-sm-12 po-md-12 po-lg-12 po-xl-12" p-title="Aplicativos">
-      <app-coins />
-      <app-currency-quotes />
-      <app-weather />
-    </po-container>
   </div>
 </po-page-default>

src/app/core/components/home/dashboard/dashboard.component.ts

@@ -1,9 +1,6 @@
 import { Component } from '@angular/core';
 import { PoContainerModule, PoPageModule } from '@po-ui/ng-components';
 
-import { CoinsComponent } from './coins/coins.component';
-import { WeatherComponent } from '../weather/weather.component';
-import { CurrencyQuotesComponent } from '../currency-quotes/currency-quotes.component';
 import { SamplesComponent } from './samples/samples.component';
 import { SampleHome } from './samples/shared/interfaces/sample-home';
 
@@ -12,9 +9,6 @@ import { SampleHome } from './samples/shared/interfaces/sample-home';
   imports: [
     PoPageModule,
     PoContainerModule,
-    CoinsComponent,
-    WeatherComponent,
-    CurrencyQuotesComponent,
     SamplesComponent
   ],
   templateUrl: './dashboard.component.html'

src/app/core/components/home/weather/weather.component.html

@@ -1,4 +1,4 @@
-<po-widget class="po-sm-12 po-md-12 po-lg-6 po-xl-6 po-mb-2" style="position: relative" p-title="Previsão do tempo">
+<po-container style="position: relative" p-title="Previsão do tempo" >
   <po-input
     class="po-sm-12 po-md-12 po-lg-12 po-xl-12 po-mb-1"
     p-icon="an an-map-pin"
@@ -19,7 +19,7 @@
     <p class="po-sm-12 po-md-12 po-lg-12 po-xl-12 po-mb-2">Tente novamente mais tarde.</p>
   } @else {
     @if (hasValue) {
-      <po-container class="po-sm-12 po-md-12 po-lg-12 po-xl-12 po-mb-2">
+      <po-container class="po-sm-12 po-md-12 po-lg-12 po-xl-12 po-mb-2" [p-no-padding]="true" [p-no-border]="true">
         @if (weather.temperature && weather.wind) {
           <p class="po-font-text-large-bold" style="text-align: center">{{ city() }}</p>
           <p class="po-font-subtitle" style="text-align: center">{{ weather.temperature }}</p>
@@ -50,4 +50,4 @@
       }
     }
   }
-</po-widget>
+</po-container>

src/app/shared/components/toolbar/app-menu/app-menu.component.html

@@ -0,0 +1,34 @@
+<div #appElement>
+  <po-icon class="po-toolbar-icon" p-icon="an an-dots-nine" p-tooltip="Meus aplicativos" />
+</div>
+
+<po-popover p-trigger="click" [p-target]="appElement" [p-hide-arrow]="true">
+  @for (app of apps; track app.icon) {
+    <po-button
+      class="po-mr-2"
+      [p-icon]="app.icon"
+      (p-click)="app.action()"
+      [p-tooltip]="app.tooltip"
+      [p-aria-label]="app.label"
+    />
+  }
+</po-popover>
+
+<!-- Aplicativos -->
+<po-modal #coins p-title="Cripto Moedas">
+  @defer (when !(coinsModal().isHidden)) {
+    <app-coins />
+  }
+</po-modal>
+
+<po-modal #currencyQuotes p-title="Moedas">
+  @defer (when !(currencyModal().isHidden)) {
+    <app-currency-quotes />
+  }
+</po-modal>
+
+<po-modal #weather p-title="Previsão do tempo">
+  @defer (when !(weatherModal().isHidden)) {
+    <app-weather />
+  }
+</po-modal>

src/app/shared/components/toolbar/app-menu/app-menu.component.ts

@@ -0,0 +1,60 @@
+import { Component, viewChild } from '@angular/core';
+import { PoIconModule, PoPopoverModule, PoTooltipModule, PoButtonModule, PoModalComponent, PoModalModule } from '@po-ui/ng-components';
+
+import { CurrencyQuotesComponent } from '../../../../core/components/home/currency-quotes/currency-quotes.component';
+import { CoinsComponent } from '../../../../core/components/home/dashboard/coins/coins.component';
+import { WeatherComponent } from '../../../../core/components/home/weather/weather.component';
+
+@Component({
+  selector: 'app-app-menu',
+  imports: [
+    PoButtonModule,
+    PoIconModule,
+    PoModalModule,
+    PoPopoverModule,
+    PoTooltipModule,
+    CoinsComponent,
+    WeatherComponent,
+    CurrencyQuotesComponent
+  ],
+  templateUrl: './app-menu.component.html'
+})
+export class AppMenuComponent {
+  readonly coinsModal = viewChild.required('coins', { read: PoModalComponent });
+  readonly currencyModal = viewChild.required('currencyQuotes', { read: PoModalComponent });
+  readonly weatherModal = viewChild.required('weather', { read: PoModalComponent });
+
+  readonly apps = [
+    {
+      icon: 'an an-currency-btc',
+      action: this.onClickCoins.bind(this),
+      label: 'Valores das cripto moedas',
+      tooltip: 'Abrir aplicativo para consultar valor de cripto moedas em tempo real'
+    },
+    {
+      icon: 'an an-coins',
+      action: this.onClickCurrency.bind(this),
+      label: 'Valores das moedas',
+      tooltip: 'Abrir aplicativo para consultar Valores das moedas'
+    },
+    {
+      icon: 'an an-cloud-sun',
+      action: this.onClickWealther.bind(this),
+      label: 'Previsão do tempo',
+      tooltip: 'Abrir aplicatio para consultar previsão do tempo'
+    }
+  ];
+
+
+  onClickCoins(): void {
+    this.coinsModal().open();
+  }
+
+  onClickCurrency(): void {
+    this.currencyModal().open()
+  }
+
+  onClickWealther(): void {
+    this.weatherModal().open();
+  }
+}

src/app/shared/components/toolbar/toolbar.component.html

@@ -1,6 +1,7 @@
 <div class="po-toolbar">
   <div class="po-toolbar-title">Exemplos Angular</div>
   <div class="po-toolbar-group-icon">
+    <app-app-menu class="po-toolbar-actions po-clickable" />
     <app-theme-button class="po-toolbar-actions po-clickable" />
     <app-notification-button class="po-toolbar-notification po-clickable" />
     <app-profile-menu class="po-toolbar-profile po-clickable" />

src/app/shared/components/toolbar/toolbar.component.ts

@@ -3,10 +3,11 @@ import { Component } from '@angular/core';
 import { ThemeButtonComponent } from './theme-button/theme-button.component';
 import { NotificationButtonComponent } from './notification-button/notification-button.component';
 import { ProfileMenuComponent } from './profile-menu/profile-menu.component';
+import { AppMenuComponent } from './app-menu/app-menu.component';
 
 @Component({
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html',
-  imports: [ThemeButtonComponent, NotificationButtonComponent, ProfileMenuComponent]
+  imports: [AppMenuComponent, ThemeButtonComponent, NotificationButtonComponent, ProfileMenuComponent]
 })
 export class ToolbarComponent {}