diff --git a/alcs-frontend/src/app/features/board/dialogs/planning-review/create/create-planning-review-dialog.component.html b/alcs-frontend/src/app/features/board/dialogs/planning-review/create/create-planning-review-dialog.component.html index 6a8da68505..93ea06e761 100644 --- a/alcs-frontend/src/app/features/board/dialogs/planning-review/create/create-planning-review-dialog.component.html +++ b/alcs-frontend/src/app/features/board/dialogs/planning-review/create/create-planning-review-dialog.component.html @@ -10,7 +10,7 @@

Create Planning Review

class="card-local-government" [items]="localGovernments" appendTo="body" - placeholder="Local Government*" + placeholder="Local/First Nation Government*" bindLabel="name" bindValue="uuid" [clearable]="false" diff --git a/alcs-frontend/src/app/features/planning-review/header/header.component.ts b/alcs-frontend/src/app/features/planning-review/header/header.component.ts index 5506b55ecd..70534faaa4 100644 --- a/alcs-frontend/src/app/features/planning-review/header/header.component.ts +++ b/alcs-frontend/src/app/features/planning-review/header/header.component.ts @@ -1,8 +1,8 @@ -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({ @@ -10,7 +10,7 @@ import { CLOSED_PR_LABEL, OPEN_PR_LABEL } from '../../../shared/application-type templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], }) -export class HeaderComponent implements OnInit { +export class HeaderComponent implements OnChanges { destroy = new Subject(); @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; + } } diff --git a/alcs-frontend/src/app/features/planning-review/overview/overview.component.html b/alcs-frontend/src/app/features/planning-review/overview/overview.component.html index d57bc19dc7..c534794c8c 100644 --- a/alcs-frontend/src/app/features/planning-review/overview/overview.component.html +++ b/alcs-frontend/src/app/features/planning-review/overview/overview.component.html @@ -12,5 +12,20 @@
Planning Review Type
Status
-
{{ planningReview.open ? 'Open' : 'Closed' }}
+
+ +
diff --git a/alcs-frontend/src/app/features/planning-review/overview/overview.component.ts b/alcs-frontend/src/app/features/planning-review/overview/overview.component.ts index 9808255de5..6afb4dcb09 100644 --- a/alcs-frontend/src/app/features/planning-review/overview/overview.component.ts +++ b/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', + }); + } + } } diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.html b/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.html new file mode 100644 index 0000000000..3ed252eb39 --- /dev/null +++ b/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.html @@ -0,0 +1,27 @@ +
+ + Select Option + + {{ selectedValue }} + + + +
+
+ + {{ option.label }} + +
+
+ + +
+
+
diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.scss b/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.scss new file mode 100644 index 0000000000..8d84e8b809 --- /dev/null +++ b/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; + } +} diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.spec.ts b/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.spec.ts new file mode 100644 index 0000000000..e44962f7a6 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.ts b/alcs-frontend/src/app/shared/inline-editors/inline-button-toggle/inline-button-toggle.component.ts new file mode 100644 index 0000000000..9c9f05d423 --- /dev/null +++ b/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(); + + 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; + } +} diff --git a/alcs-frontend/src/app/shared/shared.module.ts b/alcs-frontend/src/app/shared/shared.module.ts index 3cbdc88bc4..5a4dce9a07 100644 --- a/alcs-frontend/src/app/shared/shared.module.ts +++ b/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 { diff --git a/services/apps/alcs/src/alcs/planning-review/planning-review.dto.ts b/services/apps/alcs/src/alcs/planning-review/planning-review.dto.ts index 7135eddd5a..75d4bf500e 100644 --- a/services/apps/alcs/src/alcs/planning-review/planning-review.dto.ts +++ b/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;