From 3dda02660cfd8a385ff7f657c94116fcf869f196 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 12 Aug 2023 08:31:42 -0700
Subject: [PATCH] Implement isNumber pipe

---
 src-ui/src/app/app.module.ts                        |  2 ++
 .../document-card-large.component.html              |  2 +-
 .../document-card-large.component.spec.ts           |  2 ++
 .../document-card-small.component.html              |  2 +-
 .../document-card-small.component.spec.ts           |  2 ++
 .../document-list/document-list.component.spec.ts   |  3 ++-
 src-ui/src/app/pipes/is-number.pipe.spec.ts         | 13 +++++++++++++
 src-ui/src/app/pipes/is-number.pipe.ts              | 10 ++++++++++
 8 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src-ui/src/app/pipes/is-number.pipe.spec.ts
 create mode 100644 src-ui/src/app/pipes/is-number.pipe.ts

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 7a94f4316..f5b30467c 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -93,6 +93,7 @@ import { PermissionsFormComponent } from './components/common/input/permissions/
 import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component'
 import { UsernamePipe } from './pipes/username.pipe'
 import { LogoComponent } from './components/common/logo/logo.component'
+import { IsNumberPipe } from './pipes/is-number.pipe'
 
 import localeAr from '@angular/common/locales/ar'
 import localeBe from '@angular/common/locales/be'
@@ -223,6 +224,7 @@ function initializeApp(settings: SettingsService) {
     PermissionsFilterDropdownComponent,
     UsernamePipe,
     LogoComponent,
+    IsNumberPipe,
   ],
   imports: [
     BrowserModule,
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 296f5af06..5bc27c8a1 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -87,7 +87,7 @@
               </svg>
               <small>{{(document.storage_path$ | async)?.name}}</small>
             </button>
-            <div *ngIf="document.archive_serial_number" class="list-group-item me-2 bg-light text-dark p-1 border-0">
+            <div *ngIf="document.archive_serial_number | isNumber" class="list-group-item me-2 bg-light text-dark p-1 border-0">
               <svg class="metadata-icon me-2 text-muted" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#upc-scan"/>
               </svg>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
index 407bb01c4..7b3d0a5bb 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -18,6 +18,7 @@ import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentCardLargeComponent } from './document-card-large.component'
+import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 
 const doc = {
   id: 10,
@@ -48,6 +49,7 @@ describe('DocumentCardLargeComponent', () => {
         CustomDatePipe,
         IfPermissionsDirective,
         SafeUrlPipe,
+        IsNumberPipe,
       ],
       providers: [DatePipe],
       imports: [
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index d1b8aff95..98d8e2770 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -65,7 +65,7 @@
             <small>{{document.created_date | customDate:'mediumDate'}}</small>
           </div>
         </div>
-        <div *ngIf="document.archive_serial_number" class="ps-0 p-1">
+        <div *ngIf="document.archive_serial_number | isNumber" class="ps-0 p-1">
           <svg class="metadata-icon me-2 text-muted" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#upc-scan"/>
           </svg>
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
index 67081cbd5..b4b5efe11 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
@@ -21,6 +21,7 @@ import { of } from 'rxjs'
 import { By } from '@angular/platform-browser'
 import { TagComponent } from '../../common/tag/tag.component'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 
 const doc = {
   id: 10,
@@ -62,6 +63,7 @@ describe('DocumentCardSmallComponent', () => {
         IfPermissionsDirective,
         SafeUrlPipe,
         TagComponent,
+        IsNumberPipe,
       ],
       providers: [DatePipe],
       imports: [
diff --git a/src-ui/src/app/components/document-list/document-list.component.spec.ts b/src-ui/src/app/components/document-list/document-list.component.spec.ts
index 6e6dd8f6c..525ac50b2 100644
--- a/src-ui/src/app/components/document-list/document-list.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts
@@ -17,7 +17,6 @@ import {
   NgbDropdownModule,
   NgbModal,
   NgbModalRef,
-  NgbPagination,
   NgbPopoverModule,
   NgbTooltipModule,
 } from '@ng-bootstrap/ng-bootstrap'
@@ -63,6 +62,7 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 
 const docs: PaperlessDocument[] = [
   {
@@ -126,6 +126,7 @@ describe('DocumentListComponent', () => {
         DocumentTitlePipe,
         UsernamePipe,
         SafeHtmlPipe,
+        IsNumberPipe,
       ],
       providers: [
         FilterPipe,
diff --git a/src-ui/src/app/pipes/is-number.pipe.spec.ts b/src-ui/src/app/pipes/is-number.pipe.spec.ts
new file mode 100644
index 000000000..227ea5572
--- /dev/null
+++ b/src-ui/src/app/pipes/is-number.pipe.spec.ts
@@ -0,0 +1,13 @@
+import { IsNumberPipe } from './is-number.pipe'
+
+describe('IsNumberPipe', () => {
+  it('should detect numbers', () => {
+    const pipe = new IsNumberPipe()
+    expect(pipe.transform(0)).toBeTruthy()
+    expect(pipe.transform(123)).toBeTruthy()
+    expect(pipe.transform('123')).toBeFalsy()
+    expect(pipe.transform(null)).toBeFalsy()
+    expect(pipe.transform(undefined)).toBeFalsy()
+    expect(pipe.transform(NaN)).toBeFalsy()
+  })
+})
diff --git a/src-ui/src/app/pipes/is-number.pipe.ts b/src-ui/src/app/pipes/is-number.pipe.ts
new file mode 100644
index 000000000..2e1014ade
--- /dev/null
+++ b/src-ui/src/app/pipes/is-number.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'isNumber',
+})
+export class IsNumberPipe implements PipeTransform {
+  transform(value: any): boolean {
+    return typeof value === 'number' && !isNaN(value)
+  }
+}