improve no latest backup support

client/src/app/app.component.html

@@ -23,17 +23,17 @@
           }
         </ul>
       </div>
-      @if (time) {
+
       <h3 bt>
         Last backup
         <span
           bt-badge
           [attr.bt-green]="!olderThenOneDay(time) ? '' : null"
           [attr.bt-red]="olderThenOneDay(time) ? '' : null"
-          >{{ time | relativeTime }}</span
+          >@if (time) {{{ time | relativeTime }}} @else { — }</span
         >
       </h3>
-      } }
+      }
     </div>
   </nav>
 </header>

client/src/app/databases/databases.component.html

@@ -24,19 +24,17 @@ <h2 bt>
       <td bt-no-wrap bt-center-align>{{ database.tablesCount }}</td>
       <td bt-no-wrap bt-center-align>{{ database.totalRowCount }}</td>
       <td bt-no-wrap bt-center-align>{{ database.backupsCount }}</td>
-      @if (database.lastBackupTime) {
+
       <td
         bt-no-wrap
         bt-right-align
         bt-text
         [attr.bt-green]="!olderThenOneDay(database.lastBackupTime) ? '' : null"
         [attr.bt-red]="olderThenOneDay(database.lastBackupTime) ? '' : null"
       >
-        {{ database.lastBackupTime | relativeTime }}
+        @if (database.lastBackupTime)
+        {{{ database.lastBackupTime | relativeTime }}}@else { — }
       </td>
-      } @else {
-      <td bt-no-wrap></td>
-      }
     </tr>
     }
   </tbody>

client/src/app/databases/databases.service.ts

@@ -44,7 +44,8 @@ export class DatabasesService {
             map((databases) =>
               databases.map((db) => ({
                 ...db,
-                lastBackupTime: new Date(db.lastBackupTime),
+                lastBackupTime:
+                  db.lastBackupTime && new Date(db.lastBackupTime),
               }))
             ),
             tap(() => this.loading.set(false))

client/src/app/utils/dateUtils.ts

@@ -1,3 +1,3 @@
-export function olderThenOneDay(date?: Date): boolean {
+export function olderThenOneDay(date?: Date | null): boolean {
   return !date || Date.now() - date.getTime() > 24 * 60 * 60 * 1000;
 }

client/src/mocks/browser.ts

@@ -17,6 +17,13 @@ const databases: Database[] = [
     backupsCount: 3,
     lastBackupTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 0.5),
   },
+  {
+    name: 'db3',
+    tablesCount: 1,
+    totalRowCount: 3,
+    backupsCount: 1,
+    lastBackupTime: null,
+  },
 ];
 
 function getDatabase(name: string): Database {

client/src/types.ts

@@ -3,7 +3,7 @@ export type Database = {
   tablesCount: number;
   totalRowCount: number;
   backupsCount: number;
-  lastBackupTime: Date;
+  lastBackupTime: Date | null;
 };
 
 export type Table = {