feat: #438 admin search by fom number

admin/src/app/foms/fom-detail/fom-detail.component.html

@@ -2,7 +2,7 @@
   <div class="container" *ngIf="project">
     <div class="title-container">
       <div class="title-container__title">
-        <h1>FOM ID: {{project.id}}</h1>
+        <h1>FOM Number: {{project.id}}</h1>
       </div>
       <div class="title-container__actions">
         <div class="btn-container">

admin/src/app/foms/fom-submission/fom-submission.component.html

@@ -38,7 +38,7 @@ <h1 class="text-muted">FSP ID: {{project.fspId}}</h1>
         <legend>FOM Spatial Submission</legend>
         <div class="row">
           <div class="form-group col-md-3">
-            <label>FOM ID:</label>
+            <label>FOM Number:</label>
           </div>
           <div class="col-md-2">
             <input

admin/src/app/foms/interactions/interactions.component.html

@@ -7,7 +7,7 @@
         </div>
         <div class="title-container">
           <div class="title-container__title">
-            <h1>Stakeholder Engagements for FOM #:{{projectId}}</h1>
+            <h1>Stakeholder Engagements for FOM Number:{{projectId}}</h1>
           </div>
           <div class="title-container__actions"
                 *ngIf="project.workflowState.code == 'COMMENT_OPEN' || project.workflowState.code == 'COMMENT_CLOSED'">

admin/src/app/foms/public-notice/public-notice-edit.component.html

@@ -3,7 +3,7 @@
     <div class="title-container">
       <div class="title-container__title">
         <h1 class="text-muted">
-          {{ editMode? (isAddNewNotice()? 'New': 'Edit' ): '' }}  Online Public Notice &nbsp; FOM ID: {{projectId}}
+          {{ editMode? (isAddNewNotice()? 'New': 'Edit' ): '' }}  Online Public Notice &nbsp; FOM Number: {{projectId}}
         </h1>
       </div>
       <div class="title-container__actions"

admin/src/app/foms/review-comments/review-comments.component.html

@@ -7,7 +7,7 @@
       </div>
       <div class="title-container">
         <div class="title-container__title">
-          <h1>Review Comments for FOM ID : {{projectId}}</h1>
+          <h1>Review Comments for FOM Number: {{projectId}}</h1>
         </div>
       </div>
     </div>

admin/src/app/foms/summary/summary.component.html

@@ -6,10 +6,10 @@
           <em class="material-icons md-20">arrow_back </em> Back to FOM Details</a>
       </div>
       <div class="title-container row">
-        <div class="col col-sm-4 title-container__title">
-          <h1>Summary for FOM ID: {{project?.id}}</h1>
+        <div class="col col-sm-5 title-container__title">
+          <h1>Summary for FOM Number: {{project?.id}}</h1>
         </div>
-        <div class="col col-sm-4">
+        <div class="col col-sm-3">
           <mat-form-field [style.width.px]=500>
             <mat-label>Comment Scope</mat-label>
             <mat-select [(ngModel)]="selectedScope" name="commentScope"

admin/src/app/search/search.component.html

@@ -25,13 +25,27 @@ <h1 class="text-muted">Search FOMs</h1>
   <div class="bottom-container scroll">
     <div class="container" style="background: #f7f8fa; padding-bottom: 0;">
       <div class="row">
-        <div class="form-group col-md-1">
+        <div class="form-group col-md-2">
+          <label for="fomNumberInput" style="white-space: nowrap;">
+                FOM Number
+          </label>
+
+          <input id="fNumberInput" name="fNumber" type="number"
+                min="0" step="1"
+                oninput="this.value = this.value.slice(0, 9)"
+                class="form-control"
+                style="font-size: 14px;"
+                [(ngModel)]="fNumber"
+                [disabled]="searching" autofocus/>
+        </div>
+
+        <div class="form-group col-md-2">
           <label for="fspIdInput" style="white-space: nowrap;">
                 FSP ID
           </label>
           <input id="fspIdInput" name="fFspId" type="number"
                 min="0" step="1"
-                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, 9);"
+                oninput="this.value = this.value.slice(0, 9)"
                 class="form-control"
                 style="font-size: 14px;"
                 [(ngModel)]="fFspId"
@@ -96,7 +110,7 @@ <h2 *ngIf="!searching && count > 0">
         <table class="table" *ngIf="count > 0" aria-label="Search Results">
           <thead>
           <tr>
-            <th id="fomId" class="disp">FOM ID</th>
+            <th id="fomId" class="disp">FOM Number</th>
             <th id="fomName" class="client">FOM Name</th>
             <th id="fspId" class="disp">FSP ID</th>
             <th id="fomHolder" class="client">FOM Holder Name</th>

admin/src/app/search/search.component.scss

@@ -169,7 +169,7 @@ $sr-table-row-bg: #f7f8fa;
 }
 
 .disp {
-  width: 5.0rem;
+  min-width: 5rem;
 }
 
 .status {

admin/src/app/search/search.component.ts

@@ -1,3 +1,6 @@
+import { CognitoService } from "@admin-core/services/cognito.service";
+import { ModalService } from '@admin-core/services/modal.service';
+import { StateService } from '@admin-core/services/state.service';
 import { DatePipe, Location, NgFor, NgIf, TitleCasePipe } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -10,9 +13,6 @@ import { User } from "@utility/security/user";
 import { isNil } from 'lodash';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CognitoService } from "@admin-core/services/cognito.service";
-import { ModalService } from '@admin-core/services/modal.service';
-import { StateService } from '@admin-core/services/state.service';
 
 @Component({
     standalone: true,
@@ -37,6 +37,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   private paramMap: ParamMap = null;
   private snackBarRef: MatSnackBarRef<SimpleSnackBar> = null;
   public user: User;
+  public fNumber: number; // filter: FOM Number
   public fFspId: number; // filter: FSP ID
   public fStatus: string; // filter: workflowStateCode
   public fDistrict: number; // filter: district id
@@ -81,7 +82,8 @@ export class SearchComponent implements OnInit, OnDestroy {
     const workFlowStateCodeArg = this.fStatus === 'undefined'? null: this.fStatus;
     const districtArg = (isNaN(this.fDistrict) || isNil(this.fDistrict))? null : this.fDistrict.toString();
     const fspIdArg = (isNaN(this.fFspId) || isNil(this.fFspId))? null : this.fFspId.toString();
-    this.searchProjectService.projectControllerFind(fspIdArg , districtArg, workFlowStateCodeArg, this.fHolder)
+    const projectIdArg = (isNaN(this.fNumber) || isNil(this.fNumber))? null : this.fNumber.toString();
+    this.searchProjectService.projectControllerFind(projectIdArg, fspIdArg , districtArg, workFlowStateCodeArg, this.fHolder)
       .subscribe(
         projects => {
           this.projects = projects;
@@ -126,6 +128,9 @@ export class SearchComponent implements OnInit, OnDestroy {
     if (this.fHolder != null) {
       params['fHolder'] = this.fHolder;
     }
+    if (this.fNumber != null) {
+        params['fNumber'] = this.fNumber;
+    }
 
     // change browser URL without reloading page (so any query params are saved in history)
     this.location.go(this.router.createUrlTree([], {relativeTo: this.route, queryParams: params}).toString());
@@ -144,6 +149,7 @@ export class SearchComponent implements OnInit, OnDestroy {
     this.fDistrict = null;
     this.fStatus = undefined;
     this.fHolder = null;
+    this.fNumber = null;
     this.saveQueryParameters();
     this.projects = [];
     this.count = 0;