From acd18306519fbb545751fb13135778da859cb2d8 Mon Sep 17 00:00:00 2001 From: Oleksandra Lytvynets Date: Mon, 15 Aug 2022 14:11:59 +0300 Subject: [PATCH] Workshop fix - Available seats, Price, PayRate fix (#1553) * address for workshop * provider * shared address for provider and workshop * tets fir for workshop component * Update address.model.ts * final fix * Update address.model.ts * comment fix * test fix * test fix * Update create-address-form.component.spec.ts * fix * Update create-about-form.component.ts * Update create-about-form.component.ts * Update create-about-form.component.ts Co-authored-by: Dmytro Minochkin --- src/app/shared/models/workshop.model.ts | 16 ++- .../create-contacts-form.component.ts | 2 +- .../create-about-form.component.html | 8 +- .../create-about-form.component.ts | 108 +++++++++++------- .../create-workshop-address.component.spec.ts | 3 +- .../create-workshop.component.ts | 6 + 6 files changed, 90 insertions(+), 53 deletions(-) diff --git a/src/app/shared/models/workshop.model.ts b/src/app/shared/models/workshop.model.ts index b3b4e6eb84..29381be303 100644 --- a/src/app/shared/models/workshop.model.ts +++ b/src/app/shared/models/workshop.model.ts @@ -47,19 +47,17 @@ export class Workshop { this.email = about.email; this.minAge = about.minAge; this.maxAge = about.maxAge; - this.price = about.price; this.address = address; this.teachers = teachers; this.withDisabilityOptions = Boolean(description.disabilityOptionsDesc); this.providerId = provider.id; this.providerTitle = provider.fullTitle; - if(about.payRate){ - this.payRate = about.payRate; - } + this.workshopDescriptionItems = description.workshopDescriptionItems; this.keywords = description.keyWords; this.dateTimeRanges = about.workingHours; this.institutionHierarchyId = description.institutionHierarchyId; this.institutionId = description.institutionId; + this.workshopDescriptionItems = description.workshopDescriptionItems; if (id) { this.id = id; } @@ -87,10 +85,18 @@ export class Workshop { if (about.coverImageId?.length) { this.coverImageId = about.coverImageId[0]; } + if (about.availableSeats) { + this.availableSeats = about.availableSeats; + } + if (about.payRate) { + this.payRate = about.payRate; + } + if (about.price) { + this.price = about.price; + } if(about.availableSeats){ this.availableSeats = about.availableSeats; } - this.workshopDescriptionItems = description.workshopDescriptionItems; } } diff --git a/src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts b/src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts index c40dc2937f..4843a36295 100644 --- a/src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts +++ b/src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts @@ -67,7 +67,7 @@ export class CreateContactsFormComponent implements OnInit, OnDestroy { ngOnInit(): void { this.initData(); } - + /** * This method handle Angular Lifecycle hook OnDestroy */ diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html b/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html index 488ee34fca..90584e508a 100644 --- a/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html +++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html @@ -116,7 +116,7 @@
@@ -133,8 +133,8 @@ + [validationFormControl]="payRateControl" + [isTouched]="payRateControl.touched"> @@ -154,7 +154,7 @@ type="number" [directiveFormControl]="availableSeatsControl" [min]="MIN_SEATS" - [max]="maxAvailableSeats"> + [max]="UNLIMITED_SEATS"> diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts b/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts index 5053752109..ceb7856d98 100644 --- a/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts +++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts @@ -15,7 +15,7 @@ import { Workshop } from 'src/app/shared/models/workshop.model'; selector: 'app-create-about-form', templateUrl: './create-about-form.component.html', styleUrls: ['./create-about-form.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class CreateAboutFormComponent implements OnInit, OnDestroy { readonly validationConstants = ValidationConstants; @@ -34,7 +34,7 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { croppedHeight: CropperConfigurationConstants.croppedCoverImage.height, croppedFormat: CropperConfigurationConstants.croppedFormat, croppedQuality: CropperConfigurationConstants.croppedQuality, - } + }; readonly PayRateType = PayRateType; readonly PayRateTypeUkr = PayRateTypeUkr; @@ -53,15 +53,13 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { // competitiveSelectionRadioBtn: FormControl = new FormControl(false); TODO: add to teh second release - constructor(private formBuilder: FormBuilder, private store: Store) { - } + constructor(private formBuilder: FormBuilder, private store: Store) {} ngOnInit(): void { this.initForm(); - this.initListeners(); - this.PassAboutFormGroup.emit(this.AboutFormGroup); this.workshop && this.activateEditMode(); + this.initListeners(); } ngOnDestroy(): void { @@ -69,24 +67,32 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { this.destroy$.unsubscribe(); } - get availableSeatsControl(): FormControl { - return this.AboutFormGroup.get('availableSeats') as FormControl; + get priceControl(): FormControl { + return this.AboutFormGroup.get('price') as FormControl; } - get maxAvailableSeats(): number { - return this.workshop?.availableSeats ?? this.UNLIMITED_SEATS; + get payRateControl(): FormControl { + return this.AboutFormGroup.get('payRate') as FormControl; + } + + get availableSeatsControl(): FormControl { + return this.AboutFormGroup.get('availableSeats') as FormControl; } private get availableSeats(): number { return this.workshop?.availableSeats === this.UNLIMITED_SEATS ? this.MIN_SEATS : this.workshop?.availableSeats; } + private get workshopPrice(): number { + return this.workshop?.price ? this.workshop.price : ValidationConstants.MIN_PRICE; + } + private initForm(): void { this.AboutFormGroup = this.formBuilder.group({ title: new FormControl('', [ Validators.required, Validators.minLength(ValidationConstants.INPUT_LENGTH_1), - Validators.maxLength(ValidationConstants.INPUT_LENGTH_60) + Validators.maxLength(ValidationConstants.INPUT_LENGTH_60), ]), phone: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]), email: new FormControl('', [Validators.required, Validators.email]), @@ -101,23 +107,29 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { payRate: new FormControl({ value: null, disabled: true }, [Validators.required]), coverImage: new FormControl(''), coverImageId: new FormControl(''), - availableSeats: new FormControl({ value: 0, disabled: true }, [Validators.required]) + availableSeats: new FormControl({ value: 0, disabled: true }, [Validators.required]), // competitiveSelectionDescription: new FormControl('', Validators.required),TODO: add to the second release }); } private initListeners(): void { - this.onPriceCtrlInit(); this.useProviderInfo(); this.availableSeatsControlListener(); + this.priceControlListener(); } /** * This method makes input enable if radiobutton value is true and sets the value to teh formgroup */ - private onPriceCtrlInit(): void { + private priceControlListener(): void { this.priceRadioBtn.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((isPrice: boolean) => { - isPrice ? this.setPriceControlValue(ValidationConstants.MIN_PRICE, 'enable') : this.setPriceControlValue(); + if (isPrice) { + this.setPriceControlValue(this.workshopPrice, 'enable'); + this.setPayRateControlValue(this.workshop.payRate, 'enable'); + } else { + this.setPriceControlValue(null, 'disable'); + this.setPayRateControlValue(null, 'disable'); + } }); } @@ -126,24 +138,38 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { * makes formGroup input enable if radiobutton value is true */ private availableSeatsControlListener(): void { - this.availableSeatsRadioBtnControl.valueChanges - .pipe(takeUntil(this.destroy$)) - .subscribe((noLimit: boolean) => { - if (noLimit) { - this.availableSeatsControl.disable({ emitEvent: false }); - this.availableSeatsControl.setValue(0, { emitEvent: false }); - } else { - this.availableSeatsControl.enable({ emitEvent: false }); - this.availableSeatsControl.setValue(this.availableSeats, { emitEvent: false }); - } - }); + this.availableSeatsRadioBtnControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((noLimit: boolean) => { + if (noLimit) { + this.setAvailableSeatsControlValue(null, 'disable'); + } else { + this.setAvailableSeatsControlValue(this.availableSeats, 'enable'); + } + }); } - private setPriceControlValue = (price: number = 0, action: string = 'disable', emitEvent: boolean = true) => { - this.AboutFormGroup.get('price')[action]({ emitEvent }); - this.AboutFormGroup.get('price').setValue(price, { emitEvent }); - this.AboutFormGroup.get('payRate')[action]({ emitEvent }); - this.AboutFormGroup.get('payRate').setValue(price, { emitEvent }); + /** + * This method sets null as value for available setas when there is no limit, otherwise it sests either workshop value, or null for selecting new value + */ + private setAvailableSeatsControlValue = ( + availableSeats: number = null, + action: string = 'disable', + emitEvent: boolean = true + ) => { + this.availableSeatsControl[action]({ emitEvent }); + this.availableSeatsControl.setValue(availableSeats, { emitEvent }); + }; + + private setPriceControlValue = (price: number = null, action: string = 'disable', emitEvent: boolean = true) => { + this.priceControl[action]({ emitEvent }); + this.priceControl.setValue(price, { emitEvent }); + }; + + /** + * This method sets null as value for payRate when the price is null, otherwise it sests either workshop value, or null for selecting new value + */ + private setPayRateControlValue = (payRate: string = null, action: string = 'disable', emitEvent: boolean = true) => { + this.payRateControl[action]({ emitEvent }); + this.payRateControl.setValue(payRate, { emitEvent }); }; /** @@ -169,19 +195,19 @@ export class CreateAboutFormComponent implements OnInit, OnDestroy { this.AboutFormGroup.get('coverImageId').setValue([this.workshop.coverImageId], { emitEvent: false }); } if (this.workshop.price) { - this.priceRadioBtn.setValue(true, { emitEvent: false }); this.setPriceControlValue(this.workshop.price, 'enable', false); - this.AboutFormGroup.get('payRate').setValue(this.workshop.payRate, { emitEvent: false }); + this.setPayRateControlValue(this.workshop.payRate, 'enable', false); + this.priceRadioBtn.setValue(true); + } else { + this.setPriceControlValue(null, 'disable', false); + this.setPayRateControlValue(null, 'disable', false); } - if (this.workshop.availableSeats) { - if (this.workshop.availableSeats === this.UNLIMITED_SEATS) { - this.availableSeatsControl.reset(null, { emitEvent: false }); - } else { - this.availableSeatsRadioBtnControl.setValue(false, { emitEvent: false }); - this.availableSeatsControl.enable({ emitEvent: false }); - this.availableSeatsControl.setValue(this.workshop.availableSeats, { emitEvent: false }); - } + if (this.workshop.availableSeats === this.UNLIMITED_SEATS) { + this.setAvailableSeatsControlValue(null, 'disable', false); + } else { + this.setAvailableSeatsControlValue(this.availableSeats, 'enable', false); + this.availableSeatsRadioBtnControl.setValue(false); } } diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop-address/create-workshop-address.component.spec.ts b/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop-address/create-workshop-address.component.spec.ts index ada8f95aeb..cf9e844ba9 100644 --- a/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop-address/create-workshop-address.component.spec.ts +++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop-address/create-workshop-address.component.spec.ts @@ -1,7 +1,6 @@ - +import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CreateWorkshopAddressComponent } from './create-workshop-address.component'; -import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { MatFormFieldModule } from '@angular/material/form-field'; import { NgxsModule } from '@ngxs/store'; diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop.component.ts b/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop.component.ts index 72052dd541..2dbc4523f4 100644 --- a/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop.component.ts +++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-workshop.component.ts @@ -1,3 +1,4 @@ +import { ResetProviderWorkshopDetails } from './../../../../shared/store/user.actions'; import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper'; import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormArray, FormGroup } from '@angular/forms'; @@ -169,4 +170,9 @@ export class CreateWorkshopComponent extends CreateFormComponent implements OnIn } return teachers; } + + ngOnDestroy(): void { + super.ngOnDestroy(); + this.store.dispatch(new ResetProviderWorkshopDetails()); + } }