diff --git a/src/app/shared/forms/planet-rating.component.ts b/src/app/shared/forms/planet-rating.component.ts index d18dcf6fcd..9bb9c7b48e 100644 --- a/src/app/shared/forms/planet-rating.component.ts +++ b/src/app/shared/forms/planet-rating.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnChanges } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { CouchService } from '../couchdb.service'; import { PlanetMessageService } from '../planet-message.service'; import { UserService } from '../user.service'; @@ -26,6 +26,17 @@ const popupFormFields = [ } ]; +interface RateFormModel { + rate: number; +} + +interface PopupFormModel extends RateFormModel { + comment: string; +} + +type RateFormControls = { [K in keyof RateFormModel]: FormControl }; +type PopupFormControls = { [K in keyof PopupFormModel]: FormControl }; + @Component({ templateUrl: './planet-rating.component.html', styles: [ ` .list-item-rating { @@ -41,22 +52,22 @@ export class PlanetRatingComponent implements OnChanges { @Input() ratingType = ''; @Input() disabled = false; - rateForm: UntypedFormGroup; - popupForm: UntypedFormGroup; + rateForm: FormGroup; + popupForm: FormGroup; isPopupOpen = false; stackedBarData = []; enrolled = true; - get rateFormField() { + get rateFormField(): RateFormModel { return { rate: this.rating.userRating.rate || 0 }; } - get commentField() { + get commentField(): Pick { return { comment: this.rating.userRating.comment || '' }; } private dbName = 'ratings'; constructor( - private fb: UntypedFormBuilder, + private fb: FormBuilder, private couchService: CouchService, private planetMessage: PlanetMessageService, private userService: UserService, @@ -64,8 +75,13 @@ export class PlanetRatingComponent implements OnChanges { private ratingService: RatingService, private stateService: StateService ) { - this.rateForm = this.fb.group(this.rateFormField); - this.popupForm = this.fb.group(Object.assign({}, this.rateFormField, this.commentField)); + this.rateForm = this.fb.group({ + rate: this.fb.nonNullable.control(this.rateFormField.rate) + }); + this.popupForm = this.fb.group({ + rate: this.fb.nonNullable.control(this.rateFormField.rate), + comment: this.fb.nonNullable.control(this.commentField.comment) + }); } ngOnChanges() { @@ -80,8 +96,13 @@ export class PlanetRatingComponent implements OnChanges { }, { class: 'accent-color', amount: this.rating.femaleRating, align: 'right' } ]; - this.rateForm.setValue(this.rateFormField); - this.popupForm.setValue(Object.assign({}, this.rateFormField, this.commentField)); + this.rateForm.setValue({ + rate: this.rateFormField.rate + }); + this.popupForm.setValue({ + rate: this.rateFormField.rate, + comment: this.commentField.comment + }); } isEnrolled(id: any, type: any): boolean { @@ -90,7 +111,7 @@ export class PlanetRatingComponent implements OnChanges { return inShelf; } - onStarClick(form = this.rateForm) { + onStarClick(form: FormGroup | FormGroup = this.rateForm) { if (!this.isEnrolled(this.item._id, this.ratingType)) { if (this.ratingType === 'course') { this.planetMessage.showMessage($localize`Please join the ${this.ratingType} before rating!`); @@ -121,7 +142,7 @@ export class PlanetRatingComponent implements OnChanges { }); } - updateRating(form) { + updateRating(form: FormGroup | FormGroup) { // Later parameters of Object.assign will overwrite values from previous objects const configuration = this.stateService.configuration; const newRating = { @@ -162,9 +183,6 @@ export class PlanetRatingComponent implements OnChanges { ratingError() { this.planetMessage.showAlert($localize`There was an issue updating your rating`); this.rateForm.patchValue({ rate: this.rating.userRating.rate || 0 }); - // If the dialog is open, then there will also be a comment control to reset - if (this.rateForm.controls.comment) { - this.rateForm.patchValue({ comment: this.rating.userRating.comment || '' }); - } + this.popupForm.patchValue({ comment: this.rating.userRating.comment || '' }); } }