BRS-817 locking records/fiscal years front end (#163)

BRS-817 adding keycloaksettings for new lock-records route

BRS-817 Locked records show as locked

src/app/app-routing.module.ts

@@ -16,6 +16,8 @@ import { LoginComponent } from './login/login.component';
 import { ExportResolver } from './resolvers/export.resolver';
 import { FormResolver } from './resolvers/form.resolver';
 import { SubAreaResolver } from './resolvers/sub-area.resolver';
+import { LockRecordsComponent } from './lock-records/lock-records.component';
+import { LockRecordsResolver } from './resolvers/lock-records.resolver';
 
 const routes: Routes = [
   {
@@ -126,6 +128,16 @@ const routes: Routes = [
     },
     resolve: [ExportResolver],
   },
+  {
+    path: 'lock-records',
+    component: LockRecordsComponent,
+    canActivate: [AuthGuard],
+    data: {
+      label: 'Lock Records',
+      breadcrumb: 'Lock Records',
+    },
+    resolve: [LockRecordsResolver],
+  },
   {
     path: 'unauthorized',
     pathMatch: 'full',

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { InfiniteLoadingBarModule } from './shared/components/infinite-loading-b
 import { ToastrModule } from 'ngx-toastr';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoadingService } from './services/loading.service';
+import { LockRecordsModule } from './lock-records/lock-records.module';
 
 export function initConfig(
   configService: ConfigService,
@@ -57,6 +58,7 @@ export function initConfig(
     BreadcrumbModule,
     ExportReportsModule,
     EnterDataModule,
+    LockRecordsModule,
     HeaderModule,
     FooterModule,
     HomeModule,

src/app/enter-data/accordion-manager/backcountry-cabins-accordion/backcountry-cabins-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'backcountry-cabins'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/backcountry-camping-accordion/backcountry-camping-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'backcountry-camping'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/boating-accordion/boating-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'boating'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/day-use-accordion/day-use-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'day-use'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/frontcountry-cabins-accordion/frontcountry-cabins-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'frontcountry-cabins'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/frontcountry-camping-accordion/frontcountry-camping-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'frontcountry-camping'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/enter-data/accordion-manager/group-camping-accordion/group-camping-accordion.component.html

@@ -6,5 +6,6 @@
   [notes]="data?.notes"
   [summaries]="summaries"
   [editLink]="'group-camping'"
+  [recordLock]="data?.isLocked"
 >
 </app-accordion>

src/app/guards/auth.guard.ts

@@ -63,6 +63,10 @@ export class AuthGuard implements CanActivate {
       return this.router.parseUrl('/');
     }
 
+    if (!this.keycloakService.isAllowed('lock-records') && state.url === '/lock-records') {
+      return this.router.parseUrl('/');
+    }
+
     // Show the requested page.
     return true;
   }

src/app/header/header.component.ts

@@ -30,7 +30,10 @@ export class HeaderComponent implements OnDestroy {
     this.routes = router.config.filter(function (obj) {
       if (obj.path === 'export-reports') {
         return keycloakService.isAllowed('export-reports');
-      } else {
+      } else if (obj.path === 'lock-records') {
+        return keycloakService.isAllowed('lock-records')
+      }
+        {
         return obj.path !== '**' && obj.path !== 'unauthorized';
       }
     });

src/app/home/home.component.html

@@ -4,8 +4,8 @@ <h1>
       <span>BC Parks - Attendance and Revenue</span>
     </h1>
   </div>
-  <div class="row justify-content-center">
-    <div class="col-lg-6 col-md-12" *ngFor="let card of cardConfig">
+  <div class="row">
+    <div class="col-lg-6 col-md-12 mb-4" *ngFor="let card of cardConfig">
         <app-nav-card
           [cardHeader]="card.cardHeader"
           [cardTitle]="card.cardTitle"

src/app/home/home.component.ts

@@ -26,5 +26,14 @@ export class HomeComponent {
         navigation: 'export-reports',
       });
     }
+    if (keyCloakService.isAllowed('lock-records')) {
+      this.cardConfig.push({
+        cardHeader: 'Lock/Unlock Records',
+        cardTitle: 'Lock/Unlock by fiscal year',
+        cardText: 'Use this section to lock/unlock fiscal years (April-March) against editing.',
+        navigation: 'lock-records',
+      });
+    }
+
   }
 }

src/app/lock-records/fiscal-year-lock-table/fiscal-year-lock-table.component.html

@@ -0,0 +1,6 @@
+<h2>Locked records</h2>
+<app-table
+  [columnSchema]="columnSchema"
+  [data]="tableRows"
+  [emptyTableMsg]="'There are currently no locked fiscal years.'"
+></app-table>

src/app/lock-records/fiscal-year-lock-table/fiscal-year-lock-table.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiscalYearLockTableComponent } from './fiscal-year-lock-table.component';
+
+describe('FiscalYearLockTableComponent', () => {
+  let component: FiscalYearLockTableComponent;
+  let fixture: ComponentFixture<FiscalYearLockTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FiscalYearLockTableComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FiscalYearLockTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/lock-records/fiscal-year-lock-table/fiscal-year-lock-table.component.ts

@@ -0,0 +1,82 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DataService } from 'src/app/services/data.service';
+import { columnSchema } from 'src/app/shared/components/table/table.component';
+import { Constants } from 'src/app/shared/utils/constants';
+import { FiscalYearUnlockerComponent } from './fiscal-year-unlocker/fiscal-year-unlocker.component';
+
+@Component({
+  selector: 'app-fiscal-year-lock-table',
+  templateUrl: './fiscal-year-lock-table.component.html',
+  styleUrls: ['./fiscal-year-lock-table.component.scss'],
+})
+export class FiscalYearLockTableComponent implements OnInit {
+  @Input() data: any[];
+
+  private subscriptions = new Subscription();
+  public columnSchema: columnSchema[] = [];
+  public tableRows: any[] = [];
+
+  constructor(protected dataService: DataService) {
+    this.subscriptions.add(
+      dataService
+        .getItemValue(Constants.dataIds.LOCK_RECORDS_FISCAL_YEARS_DATA)
+        .subscribe((res) => {
+          if (res && res.length) {
+            this.tableRows = this.filterLockedYears(res);
+          }
+        })
+    );
+  }
+
+  ngOnInit(): void {
+    this.createColumnSchema();
+  }
+
+  filterLockedYears(data) {
+    let lockedYears: any[] = [];
+    for (const year of data) {
+      if (year.isLocked) {
+        lockedYears.push(year);
+      }
+    }
+    return lockedYears;
+  }
+
+  // fiscalYearEndObject schema
+  // pk: fiscalYearEnd
+  // sk: 2022
+  // isLocked: true
+  createColumnSchema() {
+    this.columnSchema = [
+      {
+        id: 'year',
+        displayHeader: 'Year',
+        columnClasses: 'ps-3 pe-5',
+        mapValue: (row) => row.sk,
+      },
+      {
+        id: 'parkName',
+        displayHeader: 'Park',
+        width: '70%',
+        columnClasses: 'px-5',
+        mapValue: () => 'All Parks',
+      },
+      {
+        id: 'lockedStatus',
+        displayHeader: 'Unlock',
+        width: '10%',
+        columnClasses: 'ps-5 pe-3',
+        mapValue: (row) => row.isLocked,
+        cellTemplate: (row) => {
+          return {
+            component: FiscalYearUnlockerComponent,
+            data: {
+              data: row,
+            },
+          };
+        },
+      },
+    ];
+  }
+}

src/app/lock-records/fiscal-year-lock-table/fiscal-year-unlocker/fiscal-year-unlocker.component.html

@@ -0,0 +1,3 @@
+<button class="btn btn-outline-primary" (click)="unlockFiscalYear()">
+  <i class="bi bi-unlock-fill"></i>
+</button>

src/app/lock-records/fiscal-year-lock-table/fiscal-year-unlocker/fiscal-year-unlocker.component.spec.ts

@@ -0,0 +1,28 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigService } from 'src/app/services/config.service';
+
+import { FiscalYearUnlockerComponent } from './fiscal-year-unlocker.component';
+
+describe('FiscalYearUnlockerComponent', () => {
+  let component: FiscalYearUnlockerComponent;
+  let fixture: ComponentFixture<FiscalYearUnlockerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [FiscalYearUnlockerComponent],
+      providers: [ConfigService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FiscalYearUnlockerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/lock-records/fiscal-year-lock-table/fiscal-year-unlocker/fiscal-year-unlocker.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { FiscalYearLockService } from 'src/app/services/fiscal-year-lock.service';
+
+@Component({
+  selector: 'app-fiscal-year-unlocker',
+  templateUrl: './fiscal-year-unlocker.component.html',
+  styleUrls: ['./fiscal-year-unlocker.component.scss'],
+})
+export class FiscalYearUnlockerComponent {
+  @Input() data: any;
+
+  constructor(private fiscalYearLockService: FiscalYearLockService) {}
+
+  unlockFiscalYear() {
+    this.fiscalYearLockService.lockUnlockFiscalYear(
+      this.data.year.value,
+      false
+    );
+  }
+}

src/app/lock-records/lock-records.component.html

@@ -0,0 +1,51 @@
+<section class="container mt-5">
+  <h1 class="mb-1">Lock or Unlock Records</h1>
+  <p>
+    Select a date rage below to lock or unlock all records for all parks for the
+    selected dates.
+  </p>
+</section>
+<section class="container mt-3">
+  <div>
+    <label class="fw-bold mb-2">Date range:</label>
+    <div class="row mb-3">
+      <div class="col-md-12 col-lg-4">
+        <button (click)="dp.toggle()" class="form-control">
+          <span
+            autocomplete="off"
+            bsDatepicker
+            #dp="bsDatepicker"
+            minMode="year"
+            (onShown)="onOpenCalendar($event)"
+            (bsValueChange)="datePickerOutput($event)"
+          >
+          </span>
+          <div class="text-muted d-flex justify-content-left">
+            <i class="bi-calendar me-2 text-muted"></i>
+            {{ fiscalYearRangeString }}
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 col-lg-4">
+      <button
+        class="btn btn-primary w-100"
+        type="button"
+        (click)="submit()"
+        [disabled]="fiscalYearRangeString === 'Select a fiscal year'"
+      >
+        <app-text-to-loading-spinner
+          [text]="'Lock Records '"
+          (loadingStatus)="loading = $event"
+        ></app-text-to-loading-spinner>
+      </button>
+    </div>
+  </div>
+</section>
+<section class="container mt-5">
+  <app-fiscal-year-lock-table
+    [data]="fiscalYearsList"
+  ></app-fiscal-year-lock-table>
+</section>

src/app/lock-records/lock-records.component.spec.ts

@@ -0,0 +1,34 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { ConfigService } from '../services/config.service';
+import { DatePickerModule } from '../shared/components/date-picker/date-picker.module';
+
+import { LockRecordsComponent } from './lock-records.component';
+
+describe('LockRecordsComponent', () => {
+  let component: LockRecordsComponent;
+  let fixture: ComponentFixture<LockRecordsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        DatePickerModule,
+        BsDatepickerModule.forRoot(),
+      ],
+      declarations: [LockRecordsComponent],
+      providers: [ConfigService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LockRecordsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});