Feature/improve exchange rates table (#394)

* Improve exchange rates table

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Reformatted the exchange rates table in the admin control panel
+
 ## 1.56.0 - 25.09.2021
 
 ### Added

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">
+              <table>
-                1 {{ exchangeRate.label1 }} = {{ exchangeRate.value | number :
+                <tr *ngFor="let exchangeRate of exchangeRates">
-                '1.5-5' }} {{ exchangeRate.label2 }}
+                  <td class="d-flex">
-              </div>
+                    <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">

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