NRPT-619: implement admin component for LNG map updates

angular/projects/admin-nrpti/src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { NewsResolver } from './news/news-resolver';
 import { NewsListComponent } from './news/news-list.component';
 import { CommunicationsComponent } from './communications/communications.component';
 import { CommunicationsResolver } from './communications/communications.resolver';
+import { LngMapInfoResolver } from './communications/lng-map-info/lng-map-info-resolver';
 
 const routes: Routes = [
   {
@@ -55,9 +56,10 @@ const routes: Routes = [
         },
         component: CommunicationsComponent,
         resolve: {
-          communicationsPackage: CommunicationsResolver
+          communicationsPackage: CommunicationsResolver,
+          lngMapData: LngMapInfoResolver
         }
-      },
+      }
     ]
   },
   {

angular/projects/admin-nrpti/src/app/communications/communications.component.html

@@ -68,14 +68,19 @@ <h4>Application Communication Popup</h4>
         </div>
         <!-- Add an advanced section for updating the communication package additional info json blob? -->
       </form>
+      <div class="d-flex justify-content-end mb-1">
+        <button class="btn btn-primary mr-1" (click)="cancel()" title="Cancel Popup">
+          Cancel Popup
+        </button>
+        <button class="btn btn-primary" type="submit" (click)="submit()" title="Save Popup">
+          Save Popup
+        </button>
+      </div>
     </section>
-    <div class="d-flex justify-content-end mb-1">
-      <button class="btn btn-primary mr-1" (click)="cancel()" title="Cancel Popup">
-        Cancel Popup
-      </button>
-      <button class="btn btn-primary" type="submit" (click)="submit()" title="Save Popup">
-        Save Popup
-      </button>
-    </div>
+
   </section>
+  <section *ngIf="this.selectedApplication === 'LNG'" class="my-3 py-3">
+    <app-lng-map-info></app-lng-map-info>
+  </section>
+
 </main>

angular/projects/admin-nrpti/src/app/communications/communications.component.ts

@@ -1,9 +1,11 @@
+import { LngMapInfoComponent } from './lng-map-info/lng-map-info.component';
 import { Component, OnInit, OnDestroy, ViewChild, EventEmitter } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs/Subject';
 import { FormGroup, FormControl } from '@angular/forms';
 import { CommunicationsPackage } from '../../../../common/src/app/models/master/common-models/communications-package';
+import { MapInfo } from './../../../../common/src/app/models/master/common-models/map-info';
 import { FactoryService } from '../services/factory.service';
 import { DatePickerComponent, LoadingScreenService, Utils } from 'nrpti-angular-components';
 
@@ -14,13 +16,16 @@ import { DatePickerComponent, LoadingScreenService, Utils } from 'nrpti-angular-
 })
 export class CommunicationsComponent implements OnInit, OnDestroy {
   @ViewChild(DatePickerComponent) DatePicker: DatePickerComponent;
+  @ViewChild(LngMapInfoComponent) LngMapInfoComponent: LngMapInfoComponent;
 
   private ngUnsubscribe: Subject<boolean> = new Subject<boolean>();
   public resetDates: EventEmitter<void> = new EventEmitter<void>();
+  public selectedApp: EventEmitter<void> = new EventEmitter<void>();
 
   public myForm: FormGroup;
 
   public commPackage: CommunicationsPackage;
+  public lngMapInfo: MapInfo;
   public selectedApplication: string;
 
   public tinyMceSettings = {
@@ -47,7 +52,6 @@ export class CommunicationsComponent implements OnInit, OnDestroy {
     this.route.data.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res: any) => {
       this.commPackage = res.communicationsPackage.COMMUNICATIONS;
       this.selectedApplication = this.route.snapshot.params.application.toUpperCase();
-
       this.buildForm();
     });
   }

angular/projects/admin-nrpti/src/app/communications/communications.module.ts

@@ -1,3 +1,4 @@
+import { LngMapInfoComponent } from './lng-map-info/lng-map-info.component';
 // modules
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -6,31 +7,32 @@ import { CommonModule } from '@angular/common';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { BrowserModule } from '@angular/platform-browser';
 import { EditorModule } from '@tinymce/tinymce-angular';
-
 import { GlobalModule } from 'nrpti-angular-components';
-import { CommonModule as NrptiCommonModule } from '../../../../common/src/app/common.module';
 
+import { CommonModule as NrptiCommonModule } from '../../../../common/src/app/common.module';
 import { CommunicationsComponent } from './communications.component';
+import { LngMapInfoResolver } from './lng-map-info/lng-map-info-resolver';
 
 
 @NgModule({
   imports: [
     BrowserModule,
+    EditorModule,
     FormsModule,
     ReactiveFormsModule,
-    FormsModule,
     CommonModule,
     GlobalModule,
-    ReactiveFormsModule,
     NrptiCommonModule,
     RouterModule,
     NgbModule,
-    EditorModule,
   ],
   declarations: [
-    CommunicationsComponent
+    CommunicationsComponent,
+    LngMapInfoComponent
+  ],
+  providers: [
+    LngMapInfoResolver
   ],
-  providers: [],
   entryComponents: [
     CommunicationsComponent
   ],

angular/projects/admin-nrpti/src/app/communications/lng-map-info/lng-map-info-resolver.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { FactoryService } from '../../services/factory.service';
+
+@Injectable()
+export class LngMapInfoResolver implements Resolve<Observable<object>> {
+  constructor(private factoryService: FactoryService) {}
+
+  resolve(): Observable<object> {
+    return this.factoryService.getRecords(
+      '',
+      ['MapLayerInfo'],
+      [],
+      1,
+      10,
+      '-dateAdded',
+      {},
+      false,
+      {},
+      [],
+      {}
+    );
+  }
+}

angular/projects/admin-nrpti/src/app/communications/lng-map-info/lng-map-info.component.html

@@ -0,0 +1,43 @@
+
+<form [formGroup]="mapForm" novalidate>
+  <div class="flex-container">
+    <div class="label-pair">
+      <label for="sectionNumber">Section Number</label>
+      <select name="sectionNumber" id="sectionNumber" formControlName="sectionNumber" class="form-control" (change)="onSelectSegment($event)">
+        <option *ngFor="let section of sections" [ngValue]="section">
+          {{ section }}
+        </option>
+      </select>
+    </div>
+  </div>
+  <div class="flex-container">
+    <div class="label-pair">
+      <label for="location">Location</label>
+      <input name="location" id="location" type="text" formControlName="location" class="form-control" />
+    </div>
+    <div class="label-pair">
+      <label for="length">Length</label>
+      <input name="length" id="length" type="text" formControlName="length" class="form-control" />
+    </div>
+  </div>
+  <div class="flex-container">
+    <div class="label-pair lrg">
+      <label for="description">Recent Updates</label>
+      <editor
+        [init]="tinyMceSettings"
+        name="recentUpdates"
+        id="recentUpdates"
+        formControlName="recentUpdates"
+      ></editor>
+    </div>
+  </div>
+</form>
+
+<div class="d-flex justify-content-end mb-1">
+  <button class="btn btn-primary mr-1" (click)="cancel()" title="Cancel Popup">
+    Cancel Map Updates
+  </button>
+  <button class="btn btn-primary" type="submit" (click)="submit()" title="Save Popup">
+    Save/Publish Map Updates
+  </button>
+</div>

angular/projects/admin-nrpti/src/app/communications/lng-map-info/lng-map-info.component.scss

@@ -0,0 +1,2 @@
+@import "assets/styles/base/base.scss";
+@import "assets/styles/components/add-edit.scss";

angular/projects/admin-nrpti/src/app/communications/lng-map-info/lng-map-info.component.spec.ts

@@ -0,0 +1,59 @@
+import { LoadingScreenService } from 'nrpti-angular-components';
+import { EditorModule } from '@tinymce/tinymce-angular';
+import { FactoryService } from './../../../../../public-nrpti/src/app/services/factory.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { KeycloakService } from '../../services/keycloak.service';
+
+import { LngMapInfoComponent } from './lng-map-info.component';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../../../../common/src/app/spec/spec-utils';
+
+describe('LngMapInfoComponent', () => {
+  let component: LngMapInfoComponent;
+  let fixture: ComponentFixture<LngMapInfoComponent>;
+
+  const mockActivatedRoute = new ActivatedRouteStub();
+  const mockFactoryService = jasmine.createSpyObj('FactoryService', [
+    'updateMapLayerInfo',
+    'userInRole',
+    'userInLngRole'
+  ]);
+  mockFactoryService.userInLngRole.and.returnValue(true);
+
+  const mockKeycloakService = jasmine.createSpyObj('KeycloackService', ['isMenuEnabled', 'getToken']);
+  const mockLoadingScreenService = {
+    isLoading: false,
+    setLoadingState: () => {
+      return false;
+    }
+  };
+
+  beforeEach((() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        EditorModule
+      ],
+      declarations: [ LngMapInfoComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: mockActivatedRoute},
+        { provide: KeycloakService, useValue: mockKeycloakService},
+        { provide: FactoryService, useValue: mockFactoryService },
+        { provide: LoadingScreenService, useValue: mockLoadingScreenService }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LngMapInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});