Merge pull request #1494 from bcgov/feature/ALCS-1423

Add Inline Toggle Component

alcs-frontend/src/app/features/board/dialogs/planning-review/create/create-planning-review-dialog.component.html

@@ -10,7 +10,7 @@ <h2 class="card-title">Create Planning Review</h2>
           class="card-local-government"
           [items]="localGovernments"
           appendTo="body"
-          placeholder="Local Government*"
+          placeholder="Local/First Nation Government*"
           bindLabel="name"
           bindValue="uuid"
           [clearable]="false"

alcs-frontend/src/app/features/planning-review/header/header.component.ts

@@ -1,16 +1,16 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { CardDto } from '../../../services/card/card.dto';
-import { PlanningReviewDetailedDto, PlanningReviewDto } from '../../../services/planning-review/planning-review.dto';
+import { PlanningReviewDetailedDto } from '../../../services/planning-review/planning-review.dto';
 import { CLOSED_PR_LABEL, OPEN_PR_LABEL } from '../../../shared/application-type-pill/application-type-pill.constants';
 
 @Component({
   selector: 'app-header[planningReview]',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent implements OnChanges {
   destroy = new Subject<void>();
 
   @Input() planningReview!: PlanningReviewDetailedDto;
@@ -22,13 +22,6 @@ export class HeaderComponent implements OnInit {
 
   constructor(private router: Router) {}
 
-  ngOnInit(): void {
-    this.setupLinkedCards();
-    if (!this.planningReview.open) {
-      this.statusPill = CLOSED_PR_LABEL;
-    }
-  }
-
   async onGoToCard(card: CardDto) {
     const boardCode = card.boardCode;
     const cardUuid = card.uuid;
@@ -44,4 +37,9 @@ export class HeaderComponent implements OnInit {
       });
     }
   }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.setupLinkedCards();
+    this.statusPill = this.planningReview.open ? OPEN_PR_LABEL : CLOSED_PR_LABEL;
+  }
 }

alcs-frontend/src/app/features/planning-review/overview/overview.component.html

@@ -12,5 +12,20 @@ <h5>Planning Review Type</h5>
 </section>
 <section *ngIf="planningReview">
   <h5>Status</h5>
-  <div>{{ planningReview.open ? 'Open' : 'Closed' }}</div>
+  <div>
+    <app-inline-button-toggle
+      (save)="onSaveStatus($event)"
+      [selectedValue]="planningReview.open ? 'Open' : 'Closed'"
+      [options]="[
+        {
+          label: 'Open',
+          value: 'Open'
+        },
+        {
+          label: 'Closed',
+          value: 'Closed'
+        }
+      ]"
+    />
+  </div>
 </section>

alcs-frontend/src/app/features/planning-review/overview/overview.component.ts

@@ -48,4 +48,12 @@ export class OverviewComponent implements OnInit, OnDestroy {
       });
     }
   }
+
+  async onSaveStatus($event: string) {
+    if (this.planningReview) {
+      await this.planningReviewDetailService.update(this.planningReview.fileNumber, {
+        open: $event === 'Open',
+      });
+    }
+  }
 }

alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.html

@@ -0,0 +1,27 @@
+<div class="inline-button-toggle">
+  <span class="left" *ngIf="!isEditing">
+    <a (click)="toggleEdit()" class="add-date" *ngIf="!selectedValue"> Select Option </a>
+    <span *ngIf="selectedValue">
+      {{ selectedValue }}
+    </span>
+    <button *ngIf="selectedValue !== null" class="edit-button" mat-icon-button (click)="toggleEdit()">
+      <mat-icon class="edit-icon">edit</mat-icon>
+    </button>
+  </span>
+  <div
+    class="editing"
+    [ngClass]="{
+      hidden: !isEditing
+    }"
+  >
+    <form [formGroup]="form">
+      <mat-button-toggle-group [formControl]="selectFormControl">
+        <mat-button-toggle *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-button-toggle>
+      </mat-button-toggle-group>
+    </form>
+    <div class="button-container">
+      <button mat-button (click)="toggleEdit()">CANCEL</button>
+      <button mat-button class="save" (click)="onSave()">SAVE</button>
+    </div>
+  </div>
+</div>

alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.scss

@@ -0,0 +1,47 @@
+@use '../../../../styles/colors';
+
+.editing.hidden {
+  display: none;
+}
+
+.edit-button {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.edit-icon {
+  font-size: inherit;
+  line-height: 22px;
+}
+
+.inline-button-toggle {
+  max-width: 500px;
+  padding-top: 4px;
+}
+
+.button-container {
+  button:not(:last-child) {
+    margin-right: 2px !important;
+  }
+
+  .save {
+    color: colors.$primary-color;
+  }
+}
+
+:host::ng-deep {
+  .mat-form-field-wrapper {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  button mat-icon {
+    overflow: visible;
+  }
+
+  .mat-mdc-icon-button.mat-mdc-button-base {
+    padding: 0 !important;
+  }
+}

alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { SharedModule } from '../../shared.module';
+
+import { InlineButtonToggleComponent } from './inline-button-toggle.component';
+
+describe('InlineButtonToggleComponent', () => {
+  let component: InlineButtonToggleComponent;
+  let fixture: ComponentFixture<InlineButtonToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SharedModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule],
+      declarations: [InlineButtonToggleComponent],
+      providers: [],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InlineButtonToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.ts

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-inline-button-toggle[selectedValue][options]',
+  templateUrl: './inline-button-toggle.component.html',
+  styleUrls: ['./inline-button-toggle.component.scss'],
+})
+export class InlineButtonToggleComponent implements OnInit {
+  @Input() selectedValue?: string | null;
+  @Input() options: { label: string; value: string }[] = [];
+
+  @Output() save = new EventEmitter<string>();
+
+  selectFormControl = new FormControl();
+
+  form!: FormGroup;
+  isEditing = false;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.selectFormControl.setValue(this.selectedValue);
+    this.form = this.fb.group({
+      selectFormControl: this.selectFormControl,
+    });
+  }
+
+  toggleEdit() {
+    this.isEditing = !this.isEditing;
+    this.form = this.fb.group({
+      selectedValue: this.selectedValue,
+    });
+  }
+
+  onSave() {
+    this.save.emit(this.selectFormControl.value);
+    this.isEditing = false;
+  }
+}

alcs-frontend/src/app/shared/shared.module.ts

@@ -44,6 +44,7 @@ import { ErrorMessageComponent } from './error-message/error-message.component';
 import { FavoriteButtonComponent } from './favorite-button/favorite-button.component';
 import { InlineApplicantTypeComponent } from './inline-applicant-type/inline-applicant-type.component';
 import { InlineBooleanComponent } from './inline-editors/inline-boolean/inline-boolean.component';
+import { InlineButtonToggleComponent } from './inline-editors/inline-button-toggle/inline-button-toggle.component';
 import { InlineChairReviewOutcomeComponent } from './inline-editors/inline-chair-review-outcome/inline-chair-review-outcome.component';
 import { InlineDatepickerComponent } from './inline-editors/inline-datepicker/inline-datepicker.component';
 import { InlineDropdownComponent } from './inline-editors/inline-dropdown/inline-dropdown.component';
@@ -109,6 +110,7 @@ import { WarningBannerComponent } from './warning-banner/warning-banner.componen
     ApplicationLegacyIdComponent,
     TableColumnNoDataPipe,
     InlineChairReviewOutcomeComponent,
+    InlineButtonToggleComponent,
   ],
   imports: [
     CommonModule,
@@ -205,6 +207,7 @@ import { WarningBannerComponent } from './warning-banner/warning-banner.componen
     TableColumnNoDataPipe,
     InlineChairReviewOutcomeComponent,
     MatSlideToggleModule,
+    InlineButtonToggleComponent,
   ],
 })
 export class SharedModule {

services/apps/alcs/src/alcs/planning-review/planning-review.dto.ts

@@ -1,5 +1,11 @@
 import { AutoMap } from 'automapper-classes';
-import { IsNotEmpty, IsNumber, IsOptional, IsString } from 'class-validator';
+import {
+  IsBoolean,
+  IsNotEmpty,
+  IsNumber,
+  IsOptional,
+  IsString,
+} from 'class-validator';
 import { BaseCodeDto } from '../../common/dtos/base.dto';
 import { CardDto } from '../card/card.dto';
 import { ApplicationRegionDto } from '../code/application-code/application-region/application-region.dto';
@@ -101,7 +107,7 @@ export class PlanningReviewDetailedDto extends PlanningReviewDto {
 }
 
 export class UpdatePlanningReviewDto {
-  @IsString()
+  @IsBoolean()
   @IsOptional()
   open?: boolean;