From ca397ab3a90f526d32070031fb248a5f286a6511 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Wed, 20 Nov 2024 15:33:50 +0100
Subject: [PATCH] feat: Don't show seconds on last seen and make creation time
 relative

- Don't show seconds on last seen
- Make creation date relative
- Fix Story not having mock date
---
 .../src/app/general/relative-time/relative-time.component.ts  | 4 +++-
 .../sessions/session-overview/session-overview.component.html | 3 ++-
 .../app/sessions/session-overview/session-overview.stories.ts | 4 ++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/general/relative-time/relative-time.component.ts b/frontend/src/app/general/relative-time/relative-time.component.ts
index 1d1292b53..72182790c 100644
--- a/frontend/src/app/general/relative-time/relative-time.component.ts
+++ b/frontend/src/app/general/relative-time/relative-time.component.ts
@@ -16,6 +16,7 @@ import { DateArg } from 'date-fns/types';
 export class RelativeTimeComponent {
   @Input() date?: DateArg<Date>;
   @Input() suffix = true;
+  @Input() showSeconds = true;
 
   get relativeTime(): string {
     if (!this.date) return '';
@@ -24,6 +25,7 @@ export class RelativeTimeComponent {
 
   get absoluteTime(): string {
     if (!this.date) return '';
-    return format(this.date, 'PPpp');
+    if (this.showSeconds) return format(this.date, 'PPpp');
+    return format(this.date, 'PPp');
   }
 }
diff --git a/frontend/src/app/sessions/session-overview/session-overview.component.html b/frontend/src/app/sessions/session-overview/session-overview.component.html
index c7993c8e6..88be53e25 100644
--- a/frontend/src/app/sessions/session-overview/session-overview.component.html
+++ b/frontend/src/app/sessions/session-overview/session-overview.component.html
@@ -35,7 +35,7 @@
     <ng-container matColumnDef="created_at">
       <th mat-header-cell *matHeaderCellDef>Creation date</th>
       <td mat-cell *matCellDef="let element">
-        {{ element.created_at | date: "EE, dd MMM y HH:mm:ss" }}
+        <app-relative-time [date]="element.created_at" />
       </td>
     </ng-container>
 
@@ -62,6 +62,7 @@
               [date]="
                 subMinutes(Date.now(), element.idle_state.idle_for_minutes!)
               "
+              [showSeconds]="false"
             />
           }
         } @else {
diff --git a/frontend/src/app/sessions/session-overview/session-overview.stories.ts b/frontend/src/app/sessions/session-overview/session-overview.stories.ts
index 6af5210c3..2a6c56b93 100644
--- a/frontend/src/app/sessions/session-overview/session-overview.stories.ts
+++ b/frontend/src/app/sessions/session-overview/session-overview.stories.ts
@@ -4,6 +4,7 @@
  */
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { userEvent, within } from '@storybook/test';
+import MockDate from 'mockdate';
 import { of } from 'rxjs';
 import {
   Session,
@@ -22,6 +23,9 @@ import { SessionOverviewComponent } from './session-overview.component';
 const meta: Meta<SessionOverviewComponent> = {
   title: 'Session Components/Session Overview',
   component: SessionOverviewComponent,
+  beforeEach: () => {
+    MockDate.set(new Date('2024-05-01'));
+  },
 };
 
 export default meta;