From 3df31dd174ec6bbe177e7e63d300439558a9cfbb Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 26 Sep 2021 20:49:03 +0200
Subject: [PATCH] Improve exchange rates table

---
 .../src/app/pages/admin/admin-page.html       | 30 +++++++++++++++----
 .../src/app/pages/admin/admin-page.module.ts  |  2 ++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index 7a1c54eb1..a946f68a8 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -6,13 +6,33 @@
       </h3>
       <mat-card class="mb-3">
         <mat-card-content>
-          <div *ngIf="exchangeRates?.length > 0" class="d-flex my-3">
+          <div
+            *ngIf="exchangeRates?.length > 0"
+            class="align-items-start d-flex my-3"
+          >
             <div class="w-50" i18n>Exchange Rates</div>
             <div class="w-50">
-              <div *ngFor="let exchangeRate of exchangeRates" class="mb-1">
-                1 {{ exchangeRate.label1 }} = {{ exchangeRate.value | number :
-                '1.5-5' }} {{ exchangeRate.label2 }}
-              </div>
+              <table>
+                <tr *ngFor="let exchangeRate of exchangeRates">
+                  <td class="d-flex">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [precision]="2"
+                      [value]="1"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
+                  <td class="px-2">=</td>
+                  <td class="d-flex justify-content-end">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [precision]="4"
+                      [value]="exchangeRate.value"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label2 }}</td>
+                </tr>
+              </table>
             </div>
           </div>
           <div class="d-flex my-3">
diff --git a/apps/client/src/app/pages/admin/admin-page.module.ts b/apps/client/src/app/pages/admin/admin-page.module.ts
index afcd6db61..d67d08bcd 100644
--- a/apps/client/src/app/pages/admin/admin-page.module.ts
+++ b/apps/client/src/app/pages/admin/admin-page.module.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminPageRoutingModule } from './admin-page-routing.module';
 import { AdminPageComponent } from './admin-page.component';
@@ -14,6 +15,7 @@ import { AdminPageComponent } from './admin-page.component';
   imports: [
     AdminPageRoutingModule,
     CommonModule,
+    GfValueModule,
     MatButtonModule,
     MatCardModule,
     MatMenuModule