Tf nira preprod

admin-ui/src/app/app-routing.module.ts

@@ -36,6 +36,13 @@ const routes: Routes = [
             m => m.PacketStatusModule
           )
       },
+      {
+        path: 'download-card',
+        loadChildren: () =>
+          import('./features/download-card/download-card.module').then(
+            m => m.DownloadCardModule
+          )
+      },
       {
         path: 'rid-status',
         loadChildren: () =>

admin-ui/src/app/app.constants.ts

@@ -76,6 +76,14 @@ export const navItems = [
     auditEventId: 'ADM-008',
     roles: ['REGISTRATION_ADMIN']
   },
+  {
+    displayName: 'menuItems.item9.title',
+    icon: './assets/images/packet-status.svg',
+    route: '/admin/download-card',
+    children: null,
+    auditEventId: 'ADM-009',
+    roles: ['REGISTRATION_ADMIN']
+  },
   // {
   //   displayName: 'menuItems.item5.title',
   //   icon: './assets/images/id-card.svg',

admin-ui/src/app/core/services/data-storage.service.ts

@@ -356,6 +356,13 @@ export class DataStorageService {
     );
   }
 
+  sentPacketToPerso(data: FormData) {
+    return this.http.post(
+      this.BASE_URL  + 'admin'  + '/packetstatusupdate/sentToPerso',
+      data
+    );
+  }
+
   getCreateUpdateSteps(entity: string) {
   return this.http.get(`./assets/create-update-steps/${entity}-steps.json`);
   }
@@ -373,4 +380,18 @@ export class DataStorageService {
   getWorkingDays(langCode: string){
     return this.http.get(this.BASE_URL + appConstants.MASTERDATA_BASE_URL + 'workingdays/'+ langCode);
   }
+
+  getLoginDetails() {
+    return this.http.get(this.BASE_URL + 'admin/applicantDetails/getLoginDetails');
+  }
+
+  getCardStatus(registrationId: string) {
+    return this.http.get(this.BASE_URL + 'admin/applicantDetails/'+registrationId);
+  }
+
+  downloadCard(id:string): Observable<HttpResponse<Blob>> {
+    let buildURL = this.BASE_URL + 'admin/rid-digital-card/'+id+'?isAcknowledged='+true;
+    let response = this.http.get<Blob>(buildURL, { observe: 'response', responseType: 'blob' as 'json' });
+    return response;
+  }
 }

admin-ui/src/app/features/download-card/download-card-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DownloadCardComponent } from './download-card/download-card.component';
+import { RolesGuard } from 'src/app/core/services/roles.guard';
+
+
+const routes: Routes = [
+    { path: '', redirectTo: 'view', pathMatch: 'full' },
+    { path: 'view', component: DownloadCardComponent, canActivate: [RolesGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DownloadCardRoutingModule { }

admin-ui/src/app/features/download-card/download-card.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DownloadCardComponent } from './download-card/download-card.component';
+import { DownloadCardRoutingModule } from './download-card-routing.module';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { FormsModule } from '@angular/forms';
+import { MaterialModule } from 'src/app/shared/material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DownloadCardRoutingModule,
+    SharedModule,
+    FormsModule,
+    MaterialModule
+  ],
+  declarations: [DownloadCardComponent]
+})
+export class DownloadCardModule { }

admin-ui/src/app/features/download-card/download-card/download-card.component.html

@@ -0,0 +1,126 @@
+<div class="packet-status__container">
+    <p class="packet-status__header-text">{{'download-card.header' | translate}}</p>
+    <mat-card style="border-radius: 0;">
+        <span style=" font-family: Roboto, sans-serif; margin-left:30px; font-size: 12px;">{{'download-card.text' | translate}}</span>
+        <br><br>
+        <strong><span style="font-family: Roboto, sans-serif; margin-left:600px; font-size: 12px;">{{'download-card.searchLimit' | translate}}&nbsp;{{searchLimitCount}}&nbsp;{{'download-card.outof' | translate}}&nbsp;{{searchLimitMaxCount}}&nbsp;{{'download-card.dailylimit' | translate}}</span></strong>
+        <!-- <table style="width: 100%;">
+            <caption>Retrieve NIN Table</caption>
+            <thead>
+                <tr>
+                    <th id="textColumn" style="border-radius: 0;">
+                        <strong><span style="font-family: Roboto, sans-serif; margin-left:30px; font-size: 12px;">{{'download-card.text' | translate}}</span></strong>
+                    </th>
+                    <th id="limitColumn" style="width: 50%; text-align: right;" *ngIf="searchLimitCount">
+                        <strong><span style="font-family: Roboto, sans-serif; margin-left:30px; font-size: 12px;">{{'download-card.searchLimit' | translate}}&nbsp;{{searchLimitCount}}&nbsp;{{'download-card.outof' | translate}}&nbsp;{{searchLimitMaxCount}}&nbsp;{{'download-card.dailylimit' | translate}}</span></strong>
+                    </th>
+                </tr>
+                <tr>
+                    <th id="downloadCard" colspan="2">
+                        <span style="font-family: Roboto, sans-serif; margin-left: 30px; font-size: 10px;">Retrieve NIN</span>
+                    </th>
+                </tr>
+            </thead>
+        </table><br> -->
+        <mat-form-field class="packet-status__input-placer">
+            <input matInput placeholder="Enter Registration ID" [(ngModel)]="id"/>
+        </mat-form-field>
+        <img src="./assets/images/search.png" (click)="search()" alt="search" class="packet-status__image-placer" height="20px" width="20px" (keypress)="search()">
+        <mat-error style="margin-left: 30px ;font-size: 9.5px" *ngIf="error">{{'download-card.error' | translate}}</mat-error>
+    </mat-card>
+    <mat-card *ngIf="showDetails" style="border-radius: 0;margin-top: 20px;">
+        <div class="packet-status__details-container" *ngIf="data">
+            <div>
+                <table>
+                    <!-- <caption>Download Card Information</caption> -->
+                    <thead>
+                        <tr>
+                            <th id="dobHeader">Applicant Photo</th>
+                            <th id="verifyHeader">Verify Applicant and Retrieve NIN</th>
+                        </tr>
+                    </thead>
+                    <tr>
+                        <td><img style="width: 150px;height: 200px;" [src]="applicantPhoto" alt="Applicant"></td>
+                        <td>
+                            <table>
+                                <caption>Demographic and Biometric Details</caption>
+                                <!-- <tr>
+                                    <th id="dateOfBirthHeader">{{ 'download-card.dob' | translate }}</th>
+                                </tr>
+                                <tr>
+                                    <th id="dateOfBirth">{{ data.dateOfBirth }}</th>
+                                </tr> -->
+                                <!-- <tr>
+                                    <th id="verificationHeader">{{ 'download-card.verify' | translate }}</th>
+                                </tr> -->
+                                <tr>
+                                    <td><strong>{{'download-card.dob' | translate}} :</strong> {{data.dateOfBirth}}</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>{{'download-card.verify' | translate}}</strong></td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <mat-button-toggle-group name="favoriteColor" aria-label="Favorite Color">
+                                          <mat-button-toggle  (click)="captureSelection('true')" value="true"  (keypress)="captureSelection('true')"><mat-icon style="color: green;">check</mat-icon>&nbsp;&nbsp;{{'download-card.verifyanddownload' | translate}}</mat-button-toggle>
+                                          <mat-button-toggle  (click)="captureSelection('false')" value="false"  (keypress)="captureSelection('false')"><mat-icon style="color:red;">clear</mat-icon>&nbsp;&nbsp;{{'download-card.reject' | translate}}</mat-button-toggle>
+                                        </mat-button-toggle-group>
+                                    </td>
+                                    <!-- <th id="actionHeader">Action</th> -->
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <!-- <mat-card-actions class="action-buttons" *ngIf="showDownload">
+                                            <button id="createButton" mat-raised-button (click)="submit('true')">{{'download-card.download' | translate}}</button>
+                                        </mat-card-actions>
+                                        <mat-card-actions class="action-buttons" *ngIf="showSubmit">
+                                            <button id="createButton" mat-raised-button (click)="submit('false')">{{'download-card.rejected' | translate}}</button>
+                                        </mat-card-actions> -->
+                                        <mat-card-actions class="action-buttons" *ngIf="showDownload">
+                                            <button id="createButton" mat-raised-button (click)="getNIN()">{{'download-card.getNIN' | translate}}</button>
+                                        </mat-card-actions>
+                                        <mat-card-actions class="action-buttons" *ngIf="showNinValue">
+                                            <div class="nin-display">
+                                                NIN: {{ displayNIN }}
+                                            </div>
+                                        </mat-card-actions>
+                                        <mat-card-actions class="action-buttons" *ngIf="showSubmit">
+                                            <div class="reject-message">
+                                                Face verification failed for this Registration ID. Please provide a valid RID.
+                                            </div>
+                                        </mat-card-actions>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>                    
+                </table>
+            </div>
+            <div>
+
+                <!-- <table>
+                    <tr (click)="viewMore()">
+                        <td *ngIf="!showTimeline">{{'download-card.viewMore' | translate}}</td>
+                        <td *ngIf="showTimeline" >{{'download-card.viewLess' | translate}}</td><td>
+                            <i *ngIf="!showTimeline" class="material-icons">keyboard_arrow_down</i>
+                            <i *ngIf="showTimeline" class="material-icons">keyboard_arrow_up</i>
+                        </td>
+                    </tr>
+                </table> -->
+                <!-- <ul *ngIf="showTimeline">
+                    <li *ngFor="let item of data" [ngClass]="item.statusCode === 'SUCCESS' || item.statusCode === 'PROCESSED' ? 'complete' : ''">
+                        <i [ngClass]="item.statusCode === 'IN_PROGRESS' ? 'dot hollow-dot' : item.statusCode === 'SUCCESS' || item.statusCode === 'PROCESSED' ? 'milestone-complete dot' : 'dot incomplete-hollow' "></i>
+                        <h3><div *ngIf = "item.transactionTypeCode">{{item.transactionTypeCode.replace("_", " ")}}</div></h3>
+                        <p *ngIf="item.statusCode === 'SUCCESS'">
+                            {{item.statusComment}},   <span *ngIf = "item.createdDateTimes">{{item.createdDateTimes | date:'medium':'+0530'}} </span>                      
+                         </p>
+                         <p *ngIf="item.statusCode !== 'SUCCESS'" >
+                              <span style="text-transform: capitalize;"><span *ngIf = "item.statusCode">{{item.statusCode.replace("_", " ").toLowerCase()}}</span> , {{item.statusComment}} , <span *ngIf = "item.createdDateTimes">{{item.createdDateTimes | date:'medium':'+0530'}}</span></span>  
+                         </p>
+                    </li>
+                </ul> -->
+            </div>
+        </div>
+
+    </mat-card>
+</div>

admin-ui/src/app/features/download-card/download-card/download-card.component.scss

@@ -0,0 +1,125 @@
+.packet-status__container {
+    margin: 40px;
+}
+
+.packet-status__header-text {
+    font-size: 14px;
+    font-weight: bold;
+    font-family: "Roboto", sans-serif;
+}
+
+.packet-status__input-placer {
+    margin-left: 30px;
+    width: 300px;
+    font-size: smaller;
+}
+
+.packet-status__image-placer {
+    margin-bottom: -8px !important;
+    cursor: pointer;
+}
+
+.packet-status__details-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 2.5% 5% !important;
+    font-size: 12px;
+
+}
+
+.packet-status__details-container div {
+    margin-right: 70px;
+    font-size: 10px !important;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+}
+
+.packet-status__details-container div table tr td {
+    font-size: 11px !important;
+    padding: 15px;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+}
+
+.packet-status__details-container div:nth-child(3) table tr td {
+    padding: 0;
+    cursor: pointer;
+}
+
+.packet-status__details-container div:nth-child(3) ul li {
+    height: 100px;
+    border-left: 2px solid grey;
+    margin-bottom: -15px;
+    padding-left: 20px;
+}
+
+.packet-status__details-container div:nth-child(3) ul li h3{
+    margin-top: -20px;
+}
+
+.complete {
+    border-left-color: #FF4081 !important;
+}
+
+.milestone-complete {
+    background-color: #FF4081 !important;
+}
+
+
+.dot {
+    margin-left: -26px !important;
+    margin-top: -10px;
+    height: 10px;
+    width: 10px;
+    background-color: grey;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+.hollow-dot {
+    margin-left: -32px !important;
+    height: 10px !important;
+    width: 10px !important;
+    background-color: white !important;
+    border: 2px solid #FF4081 !important;
+}
+
+.incomplete-hollow {
+    background-color: white !important;
+    border: 2px solid grey !important;
+}
+
+.packet-status__details-container div:nth-child(3) ul li:last-child {
+    border-left-color: white;
+}
+
+.packet-status__details-container div:nth-child(3) ul li:first-child {
+    margin-top: 30px;
+}
+
+@media(max-width: 1040px) {
+    .packet-status__details-container div:nth-child(3) {
+        margin-top: 50px;
+    }
+}
+
+h3 {
+    font-size: 10.5px;
+}
+#createButton{
+    background-color: #ff4081!important;
+    color: white;
+}
+
+mat-card-actions.action-buttons .reject-message {
+    font-size: 13px !important;
+    font-weight: 600;
+    color: #d9534f;
+    padding-top: 10px;
+}
+
+mat-card-actions.action-buttons .nin-display {
+    font-size: 13px !important;
+    font-weight: bold;
+    padding-top: 10px;
+}

admin-ui/src/app/features/download-card/download-card/download-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadCardComponent } from './download-card.component';
+
+describe('PacketStatusComponent', () => {
+  let component: DownloadCardComponent;
+  let fixture: ComponentFixture<DownloadCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DownloadCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});