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 <dmytro.minochkin@gmail.com>
ita-social-projects · Aug 15, 2022 · acd1830 · acd1830
1 parent 14dad73
commit acd1830
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 53 deletions.
diff --git 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/...l-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts b/...l-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/...sonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html b/...sonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html
@@ -116,7 +116,7 @@
         <div fxLayout="row" fxLayoutAlign="center center" class="price">
           <mat-radio-button #radio2 name="radioBtn2" [value]="true"><input matInput class="step-input price-input"
               appDigitOnly appMinMax formControlName="price" type="number"
-              [directiveFormControl]="AboutFormGroup.get('price')" [min]="validationConstants.MIN_PRICE"
+              [directiveFormControl]="priceControl" [min]="validationConstants.MIN_PRICE"
               [max]="validationConstants.MAX_PRICE">
           </mat-radio-button>
         </div>
@@ -133,8 +133,8 @@
         </div>
       </div>
     <app-validation-hint
-        [validationFormControl]="AboutFormGroup.get('payRate')"
-        [isTouched]="AboutFormGroup.get('payRate').touched">
+        [validationFormControl]="payRateControl"
+        [isTouched]="payRateControl.touched">
     </app-validation-hint>
   </mat-radio-group>
 
@@ -154,7 +154,7 @@
                  type="number"
                  [directiveFormControl]="availableSeatsControl"
                  [min]="MIN_SEATS"
-                 [max]="maxAvailableSeats">
+                 [max]="UNLIMITED_SEATS">
         </mat-radio-button>
       </div>
     </div>

diff --git a/...ersonal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.ts b/...ersonal-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,40 +53,46 @@ 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 {
     this.destroy$.next(true);
     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/...rovider/create-workshop/create-workshop-address/create-workshop-address.component.spec.ts b/...rovider/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
@@ -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());
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       ngOnInit(): void {
         this.initData();
       }
       /**
        * This method handle Angular Lifecycle hook OnDestroy
        */
@@ Expand Down @@