From 8db0a6096f4fda3423c054a67b281294b70b8fcf Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 4 Sep 2021 20:56:00 +0200
Subject: [PATCH] Migrate to ui component

---
 .../accounts-table/accounts-table.module.ts   |   2 +-
 .../performance-chart-dialog.module.ts        |   2 +-
 .../portfolio-performance.module.ts           |   2 +-
 .../portfolio-summary.module.ts               |   2 +-
 .../position-detail-dialog.module.ts          |   2 +-
 .../components/position/position.module.ts    |   2 +-
 .../positions-table/positions-table.module.ts |   2 +-
 .../transactions-table.module.ts              |   2 +-
 .../app/components/value/value.component.html |  45 -------
 .../app/components/value/value.component.scss |   5 -
 .../app/components/value/value.component.ts   | 111 ------------------
 .../src/app/components/value/value.module.ts  |  13 --
 ...ate-or-update-transaction-dialog.module.ts |   2 +-
 libs/ui/src/index.ts                          |   2 +-
 libs/ui/src/lib/ui.module.ts                  |  12 --
 15 files changed, 10 insertions(+), 196 deletions(-)
 delete mode 100644 apps/client/src/app/components/value/value.component.html
 delete mode 100644 apps/client/src/app/components/value/value.component.scss
 delete mode 100644 apps/client/src/app/components/value/value.component.ts
 delete mode 100644 apps/client/src/app/components/value/value.module.ts
 delete mode 100644 libs/ui/src/lib/ui.module.ts

diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
index 06d3bf629..7f8bbe1d1 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
@@ -5,10 +5,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { AccountsTableComponent } from './accounts-table.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts b/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts
index 1db013464..b1d16cf29 100644
--- a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts
+++ b/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts
@@ -3,12 +3,12 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { GfFearAndGreedIndexModule } from '../fear-and-greed-index/fear-and-greed-index.module';
-import { GfValueModule } from '../value/value.module';
 import { PerformanceChartDialog } from './performance-chart-dialog.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts b/apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts
index e0ea5c92c..6e9c96fff 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioPerformanceComponent } from './portfolio-performance.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts
index 451984adf..d950275a3 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioSummaryComponent } from './portfolio-summary.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
index 38d42e914..956fddbff 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
@@ -3,11 +3,11 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../../dialog-header/dialog-header.module';
-import { GfValueModule } from '../../value/value.module';
 import { PositionDetailDialog } from './position-detail-dialog.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/position/position.module.ts b/apps/client/src/app/components/position/position.module.ts
index 98255976b..dcdfa6bdf 100644
--- a/apps/client/src/app/components/position/position.module.ts
+++ b/apps/client/src/app/components/position/position.module.ts
@@ -3,10 +3,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
-import { GfValueModule } from '../value/value.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
 import { PositionComponent } from './position.component';
 
diff --git a/apps/client/src/app/components/positions-table/positions-table.module.ts b/apps/client/src/app/components/positions-table/positions-table.module.ts
index 29812f91a..12b5a3d97 100644
--- a/apps/client/src/app/components/positions-table/positions-table.module.ts
+++ b/apps/client/src/app/components/positions-table/positions-table.module.ts
@@ -8,12 +8,12 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { PositionsTableComponent } from './positions-table.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.module.ts b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
index c544ee1e7..7dec1819c 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.module.ts
+++ b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
@@ -10,11 +10,11 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { TransactionsTableComponent } from './transactions-table.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/value/value.component.html b/apps/client/src/app/components/value/value.component.html
deleted file mode 100644
index daa585adb..000000000
--- a/apps/client/src/app/components/value/value.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<ng-container *ngIf="value || value === 0 || value === null">
-  <div
-    class="d-flex"
-    [ngClass]="position === 'end' ? 'justify-content-end' : ''"
-  >
-    <ng-container *ngIf="isNumber || value === null">
-      <div *ngIf="colorizeSign && value > 0" class="mr-1 text-success">+</div>
-      <div *ngIf="colorizeSign && value < 0" class="mr-1 text-danger">-</div>
-      <div *ngIf="isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        {{ formattedValue }}%
-      </div>
-      <div *ngIf="!isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        <ng-container *ngIf="value === null">
-          <span class="text-monospace text-muted">***</span>
-        </ng-container>
-        <ng-container *ngIf="value !== null">
-          {{ formattedValue }}
-        </ng-container>
-      </div>
-      <small *ngIf="currency && size === 'medium'" class="ml-1">
-        {{ currency }}
-      </small>
-      <div *ngIf="currency && size !== 'medium'" class="ml-1">
-        {{ currency }}
-      </div>
-    </ng-container>
-    <ng-container *ngIf="isDate">
-      <div [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        {{ formattedDate }}
-      </div>
-    </ng-container>
-  </div>
-  <small *ngIf="label">
-    {{ label }}
-  </small>
-</ng-container>
-
-<ngx-skeleton-loader
-  *ngIf="value === undefined"
-  animation="pulse"
-  [theme]="{
-    height: '1.5rem',
-    width: '5rem'
-  }"
-></ngx-skeleton-loader>
diff --git a/apps/client/src/app/components/value/value.component.scss b/apps/client/src/app/components/value/value.component.scss
deleted file mode 100644
index 7452006e0..000000000
--- a/apps/client/src/app/components/value/value.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  font-variant-numeric: tabular-nums;
-}
diff --git a/apps/client/src/app/components/value/value.component.ts b/apps/client/src/app/components/value/value.component.ts
deleted file mode 100644
index 1452bef59..000000000
--- a/apps/client/src/app/components/value/value.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-  OnInit
-} from '@angular/core';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { format, isDate } from 'date-fns';
-import { isNumber } from 'lodash';
-
-@Component({
-  selector: 'gf-value',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './value.component.html',
-  styleUrls: ['./value.component.scss']
-})
-export class ValueComponent implements OnChanges, OnInit {
-  @Input() colorizeSign: boolean;
-  @Input() currency: string;
-  @Input() isCurrency: boolean;
-  @Input() isInteger: boolean;
-  @Input() isPercent: boolean;
-  @Input() label: string;
-  @Input() locale: string;
-  @Input() position: string;
-  @Input() size: string;
-  @Input() value: number | string;
-
-  public absoluteValue: number;
-  public formattedDate: string;
-  public formattedValue: string;
-  public isDate: boolean;
-  public isNumber: boolean;
-  public useAbsoluteValue = false;
-
-  public constructor() {}
-
-  public ngOnInit() {}
-
-  public ngOnChanges() {
-    if (this.value || this.value === 0) {
-      if (isNumber(this.value)) {
-        this.isDate = false;
-        this.isNumber = true;
-        this.absoluteValue = Math.abs(<number>this.value);
-
-        if (this.colorizeSign) {
-          this.useAbsoluteValue = true;
-          if (this.currency || this.isCurrency) {
-            try {
-              this.formattedValue = this.absoluteValue.toLocaleString(
-                this.locale,
-                {
-                  maximumFractionDigits: 2,
-                  minimumFractionDigits: 2
-                }
-              );
-            } catch {}
-          } else if (this.isPercent) {
-            try {
-              this.formattedValue = (this.absoluteValue * 100).toLocaleString(
-                this.locale,
-                {
-                  maximumFractionDigits: 2,
-                  minimumFractionDigits: 2
-                }
-              );
-            } catch {}
-          }
-        } else if (this.isPercent) {
-          try {
-            this.formattedValue = (this.value * 100).toLocaleString(
-              this.locale,
-              {
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 2
-              }
-            );
-          } catch {}
-        } else if (this.currency || this.isCurrency) {
-          try {
-            this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: 2,
-              minimumFractionDigits: 2
-            });
-          } catch {}
-        } else if (this.isInteger) {
-          try {
-            this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: 0,
-              minimumFractionDigits: 0
-            });
-          } catch {}
-        }
-      } else {
-        try {
-          if (isDate(new Date(this.value))) {
-            this.isDate = true;
-            this.isNumber = false;
-
-            this.formattedDate = format(
-              new Date(<string>this.value),
-              DEFAULT_DATE_FORMAT
-            );
-          }
-        } catch {}
-      }
-    }
-  }
-}
diff --git a/apps/client/src/app/components/value/value.module.ts b/apps/client/src/app/components/value/value.module.ts
deleted file mode 100644
index 9d3c9aedb..000000000
--- a/apps/client/src/app/components/value/value.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { ValueComponent } from './value.component';
-
-@NgModule({
-  declarations: [ValueComponent],
-  exports: [ValueComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule],
-  providers: []
-})
-export class GfValueModule {}
diff --git a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
index 72d6d687b..53dcd7ee4 100644
--- a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
@@ -9,8 +9,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { GfValueModule } from '@ghostfolio/client/components/value/value.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
 
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 416af118f..8ed75c3e3 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1 +1 @@
-export * from './lib/ui.module';
+export * from './lib/value/value.module';
diff --git a/libs/ui/src/lib/ui.module.ts b/libs/ui/src/lib/ui.module.ts
deleted file mode 100644
index 60de72e7c..000000000
--- a/libs/ui/src/lib/ui.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { ValueComponent } from './value/value.component';
-// import { GfValueModule } from './value/value.module';
-
-@NgModule({
-  imports: [CommonModule /*, GfValueModule*/],
-  declarations: [ValueComponent],
-  exports: [ValueComponent]
-})
-export class UiModule {}