feat: cleanup minor ui issues (#241)

bcgov-nr · Aug 7, 2024 · 82d5c12 · 82d5c12
1 parent 5d28fc5
commit 82d5c12
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 47 deletions.
diff --git a/ui/src/app/browse/collection-table/collection-table.component.html b/ui/src/app/browse/collection-table/collection-table.component.html
@@ -101,13 +101,22 @@ <h1>Browse</h1>
   @if (data && data.length > 0) {
     <mat-card class="team-table">
       <mat-card-content>
-        <table mat-table [dataSource]="data">
+        <table
+          mat-table
+          [dataSource]="data">
 
           @for (item of (fields | keyvalue); track item.key) {
-            <ng-container matColumnDef="{{item.key}}">
-              <th mat-header-cell *matHeaderCellDef> {{item.value.name}} </th>
-              <td mat-cell *matCellDef="let element">
-                {{ element.collection[item.key] }}
+            <ng-container
+              matColumnDef="{{item.key}}">
+              <th
+                mat-header-cell
+                *matHeaderCellDef> {{item.value.name}} </th>
+              <td
+                mat-cell
+                *matCellDef="let element">
+                <app-inspector-vertex-field
+                  [type]="getFieldType(item.key)"
+                  [value]="element.collection[item.key]"></app-inspector-vertex-field>
               </td>
             </ng-container>
           }
@@ -118,7 +127,7 @@ <h1>Browse</h1>
             <td mat-cell *matCellDef="let element">
               <button mat-stroked-button extended color="primary"
                 (click)="openInGraph($event, element)">
-                View in Graph
+                View on Graph
               </button>
             </td>
           </ng-container>

diff --git a/ui/src/app/browse/collection-table/collection-table.component.ts b/ui/src/app/browse/collection-table/collection-table.component.ts
@@ -24,8 +24,8 @@ import {
   tap,
 } from 'rxjs';
 import { CollectionApiService } from '../../service/collection-api.service';
-import { CURRENT_USER } from '../../app-initialize.factory';
-import { UserDto } from '../../service/graph.types';
+import { CONFIG_MAP, CURRENT_USER } from '../../app-initialize.factory';
+import { CollectionConfigMap, UserDto } from '../../service/graph.types';
 import { GraphUtilService } from '../../service/graph-util.service';
 import { GraphApiService } from '../../service/graph-api.service';
 import { GraphTypeaheadData } from '../../service/dto/graph-typeahead-result.dto';
@@ -41,6 +41,7 @@ import { AddTeamDialogComponent } from '../../team/add-team-dialog/add-team-dial
 import { CollectionCombo } from '../../service/dto/collection-search-result.dto';
 import { CollectionComboRestDto } from '../../service/dto/collection-combo-rest.dto';
 import { PreferencesService } from '../../preferences.service';
+import { InspectorVertexFieldComponent } from '../../graph/inspector-vertex-field/inspector-vertex-field.component';
 
 interface filterOptions<T> {
   value: T;
@@ -63,6 +64,7 @@ interface filterOptions<T> {
     MatTableModule,
     ReactiveFormsModule,
     RouterModule,
+    InspectorVertexFieldComponent,
   ],
   templateUrl: './collection-table.component.html',
   styleUrl: './collection-table.component.scss',
@@ -109,7 +111,8 @@ export class CollectionTableComponent implements OnInit, OnDestroy {
     private readonly collectionApi: CollectionApiService,
     private readonly preferences: PreferencesService,
     @Inject(CURRENT_USER) public readonly user: UserDto,
-    public graphUtil: GraphUtilService,
+    public readonly graphUtil: GraphUtilService,
+    @Inject(CONFIG_MAP) private readonly configMap: CollectionConfigMap,
   ) {}
 
   ngOnInit(): void {
@@ -368,4 +371,11 @@ export class CollectionTableComponent implements OnInit, OnDestroy {
         this.refresh();
       });
   }
+
+  getFieldType(key: string) {
+    if (!this.configMap[this.collectionFilter]) {
+      return '';
+    }
+    return this.configMap[this.collectionFilter].fields[key]?.type;
+  }
 }
diff --git a/ui/src/app/browse/team-accounts/team-accounts.component.html b/ui/src/app/browse/team-accounts/team-accounts.component.html
@@ -8,7 +8,7 @@ <h2>Accounts</h2>
         <button
           mat-icon-button
           (click)="openInGraph(account.collection)"
-          aria-label="View in Graph">
+          aria-label="View on Graph">
           <mat-icon>account_tree</mat-icon>
         </button>
       </mat-card-header>

diff --git a/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.html b/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.html
@@ -0,0 +1,34 @@
+<span class="ellipsis">
+  @switch (type) {
+      @case ('boolean') {
+        @if (value) {
+          Yes
+        } @else {
+          No
+        }
+      }
+      @case ('date') {
+        {{value | date:'shortDate':'UTC'}}
+      }
+      @case ('email') {
+        {{value}}
+      }
+      @case ('json') {
+        {{value}}
+      }
+      @case ('number') {
+        {{value}}
+      }
+      @case ('string') {
+        {{value}}
+      }
+      @case ('stringArray') {
+        {{value.join(', ')}}
+      }
+      @case ('url') {
+        <a href="{{value}}" target="_blank">{{value}}</a>
+      }
+      @default {
+      }
+  }
+</span>
diff --git a/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.scss b/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.scss
@@ -0,0 +1,5 @@
+span.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.spec.ts b/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InspectorVertexFieldComponent } from './inspector-vertex-field.component';
+
+describe('InspectorVertexFieldComponent', () => {
+  let component: InspectorVertexFieldComponent;
+  let fixture: ComponentFixture<InspectorVertexFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InspectorVertexFieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InspectorVertexFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.ts b/ui/src/app/graph/inspector-vertex-field/inspector-vertex-field.component.ts
@@ -0,0 +1,14 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-inspector-vertex-field',
+  standalone: true,
+  imports: [DatePipe],
+  templateUrl: './inspector-vertex-field.component.html',
+  styleUrl: './inspector-vertex-field.component.scss',
+})
+export class InspectorVertexFieldComponent {
+  @Input() public type!: string;
+  @Input() public value: any;
+}
diff --git a/ui/src/app/graph/inspector-vertex-fields/inspector-vertex-fields.component.html b/ui/src/app/graph/inspector-vertex-fields/inspector-vertex-fields.component.html
@@ -14,40 +14,9 @@
         *matHeaderCellDef> Value </th>
       <td mat-cell
         *matCellDef="let element">
-        <span class="ellipsis">
-        @switch (getFieldType(element.key)) {
-            @case ('boolean') {
-              @if (element.value) {
-                Yes
-              } @else {
-                No
-              }
-            }
-            @case ('date') {
-              {{element.value | date:'shortDate':'UTC'}}
-            }
-            @case ('email') {
-              {{element.value}}
-            }
-            @case ('json') {
-              {{element.value}}
-            }
-            @case ('number') {
-              {{element.value}}
-            }
-            @case ('string') {
-              {{element.value}}
-            }
-            @case ('stringArray') {
-              {{element.value.join(', ')}}
-            }
-            @case ('url') {
-              <a href="{{element.value}}" target="_blank">{{element.value}}</a>
-            }
-            @default {
-            }
-        }
-      </span>
+        <app-inspector-vertex-field
+          [type]="getFieldType(element.key)"
+          [value]="element.value"></app-inspector-vertex-field>
       </td>
     </ng-container>
     <tr mat-header-row

diff --git a/ui/src/app/graph/inspector-vertex-fields/inspector-vertex-fields.component.ts b/ui/src/app/graph/inspector-vertex-fields/inspector-vertex-fields.component.ts
@@ -1,17 +1,18 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { DatePipe, KeyValuePipe } from '@angular/common';
+import { KeyValuePipe } from '@angular/common';
 import { MatTableModule } from '@angular/material/table';
 
 import { CollectionConfigRestDto } from '../../service/dto/collection-config-rest.dto';
 import {
   CollectionDtoRestUnion,
   CollectionNames,
 } from '../../service/dto/collection-dto-union.type';
+import { InspectorVertexFieldComponent } from '../inspector-vertex-field/inspector-vertex-field.component';
 
 @Component({
   selector: 'app-inspector-vertex-fields',
   standalone: true,
-  imports: [DatePipe, KeyValuePipe, MatTableModule],
+  imports: [InspectorVertexFieldComponent, KeyValuePipe, MatTableModule],
   templateUrl: './inspector-vertex-fields.component.html',
   styleUrl: './inspector-vertex-fields.component.scss',
 })

diff --git a/ui/src/app/shared/collection-header/collection-header.component.html b/ui/src/app/shared/collection-header/collection-header.component.html
@@ -28,7 +28,7 @@
     extended
     color="primary"
     (click)="openInGraph()">
-    View in Graph
+    View on Graph
   </button>
   <button
     mat-stroked-button