Fix #801

wowup-electron/src/app/components/date-tooltip-cell/date-tooltip-cell.component.html

@@ -0,0 +1 @@
+<span [matTooltip]="params.value | date:'medium'">{{params.value | relativeDuration}}</span>

wowup-electron/src/app/components/date-tooltip-cell/date-tooltip-cell.component.spec.ts

@@ -0,0 +1,35 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RelativeDurationPipe } from "../../pipes/relative-duration-pipe";
+import { getStandardTestImports } from "../../utils/test.utils";
+
+import { DateTooltipCellComponent } from "./date-tooltip-cell.component";
+
+describe("DateTooltipCellComponent", () => {
+  let component: DateTooltipCellComponent;
+  let fixture: ComponentFixture<DateTooltipCellComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DateTooltipCellComponent, RelativeDurationPipe],
+      imports: [...getStandardTestImports()],
+      providers: [RelativeDurationPipe],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DateTooltipCellComponent);
+    component = fixture.componentInstance;
+
+    component.agInit({
+      value: new Date().getTime(),
+    } as any);
+
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

wowup-electron/src/app/components/date-tooltip-cell/date-tooltip-cell.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from "@angular/core";
+import { AgRendererComponent } from "ag-grid-angular";
+import { IAfterGuiAttachedParams, ICellRendererParams } from "ag-grid-community";
+
+@Component({
+  selector: "app-date-tooltip-cell",
+  templateUrl: "./date-tooltip-cell.component.html",
+  styleUrls: ["./date-tooltip-cell.component.scss"],
+})
+export class DateTooltipCellComponent implements AgRendererComponent {
+  public params: ICellRendererParams;
+
+  public constructor() {}
+
+  public agInit(params: ICellRendererParams): void {
+    this.params = params;
+  }
+
+  public refresh(params: ICellRendererParams): boolean {
+    return false;
+  }
+
+  public afterGuiAttached?(params?: IAfterGuiAttachedParams): void {}
+}

wowup-electron/src/app/pages/home/home.module.ts

@@ -28,6 +28,7 @@ import { WowClientOptionsComponent } from "../../components/wow-client-options/w
 import { AddonThumbnailComponent } from "../../components/addon-thumbnail/addon-thumbnail.component";
 import { TableContextHeaderCellComponent } from "../../components/table-context-header-cell/table-context-header-cell.component";
 import { CellWrapTextComponent } from "../../components/cell-wrap-text/cell-wrap-text.component";
+import { DateTooltipCellComponent } from "../../components/date-tooltip-cell/date-tooltip-cell.component";
 import { DirectiveModule } from "../../directive.module";
 import { MatModule } from "../../mat-module";
 import { DownloadCountPipe } from "../../pipes/download-count.pipe";
@@ -76,6 +77,7 @@ import { HomeComponent } from "./home.component";
     CenteredSnackbarComponent,
     TableContextHeaderCellComponent,
     CellWrapTextComponent,
+    DateTooltipCellComponent,
     AddonThumbnailComponent,
   ],
   imports: [

wowup-electron/src/app/pages/my-addons/my-addons.component.ts

@@ -37,6 +37,7 @@ import { WowClientType } from "../../../common/warcraft/wow-client-type";
 import { AddonViewModel } from "../../business-objects/addon-view-model";
 import { CellWrapTextComponent } from "../../components/cell-wrap-text/cell-wrap-text.component";
 import { ConfirmDialogComponent } from "../../components/confirm-dialog/confirm-dialog.component";
+import { DateTooltipCellComponent } from "../../components/date-tooltip-cell/date-tooltip-cell.component";
 import { MyAddonStatusColumnComponent } from "../../components/my-addon-status-column/my-addon-status-column.component";
 import { MyAddonsAddonCellComponent } from "../../components/my-addons-addon-cell/my-addons-addon-cell.component";
 import { TableContextHeaderCellComponent } from "../../components/table-context-header-cell/table-context-header-cell.component";
@@ -221,6 +222,7 @@ export class MyAddonsComponent implements OnInit, OnDestroy, AfterViewInit {
       myAddonStatus: MyAddonStatusColumnComponent,
       contextHeader: TableContextHeaderCellComponent,
       wrapTextCell: CellWrapTextComponent,
+      dateTooltipCell: DateTooltipCellComponent,
     };
 
     this.columnDefs = this.createColumns();
@@ -1093,8 +1095,8 @@ export class MyAddonsComponent implements OnInit, OnDestroy, AfterViewInit {
         field: "installedAt",
         sortable: true,
         headerName: this._translateService.instant("PAGES.MY_ADDONS.TABLE.UPDATED_AT_COLUMN_HEADER"),
-        valueFormatter: (row) => this.relativeDurationPipe.transform(row.data.installedAt),
         ...baseColumn,
+        cellRenderer: "dateTooltipCell",
       },
       {
         field: "latestVersion",
@@ -1106,8 +1108,8 @@ export class MyAddonsComponent implements OnInit, OnDestroy, AfterViewInit {
         field: "releasedAt",
         sortable: true,
         headerName: this._translateService.instant("PAGES.MY_ADDONS.TABLE.RELEASED_AT_COLUMN_HEADER"),
-        valueFormatter: (row) => this.relativeDurationPipe.transform(row.data.releasedAt),
         ...baseColumn,
+        cellRenderer: "dateTooltipCell",
       },
       {
         field: "gameVersion",

wowup-electron/src/app/utils/test.utils.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpClientModule } from "@angular/common/http";
 import { TranslateCompiler, TranslateLoader, TranslateModule } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { TranslateMessageFormatCompiler } from "ngx-translate-messageformat-compiler";
@@ -7,6 +7,10 @@ export function testHttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
 }
 
+export function getStandardTestImports() {
+  return [HttpClientModule, createTranslateModule()];
+}
+
 export function createTranslateModule() {
   return TranslateModule.forRoot({
     loader: {