Add edit mode and stages

src/app/shared/enum/competition.ts

@@ -9,8 +9,8 @@ export enum CompetitionStatus {
 export enum TypeOfCompetition {
   EducationalProject = 'EducationalProject',
   Competition = 'Competition',
-  ParentCompetition = 'MainCompetition'
-  // CompetitionStage = 'CompetitionStage'
+  ParentCompetition = 'MainCompetition',
+  CompetitionStage = 'CompetitionStage'
 }
 
 export enum CompetitionCoverage {

src/app/shared/models/competition.model.ts

@@ -17,12 +17,12 @@ export abstract class CompetitionBase {
   website?: string;
   facebook?: string;
   instagram?: string;
-  startTime: Date;
-  endTime: Date;
+  startDate: Date;
+  endDate: Date;
   regStartDate?: Date;
   regEndDate?: Date;
   typeOfCompetition: TypeOfCompetition;
-  parentCompetition?: Competition;
+  parentCompetition?: string;
   availableSeats: number;
   category?: Direction;
   subcategory?: string;
@@ -48,8 +48,8 @@ export abstract class CompetitionBase {
     this.shortTitle = required.shortTitle;
     this.phone = required.phone;
     this.email = required.email;
-    this.startTime = required.competitionDateRangeGroup.start;
-    this.endTime = required.competitionDateRangeGroup.end;
+    this.startDate = required.competitionDateRangeGroup.start;
+    this.endDate = required.competitionDateRangeGroup.end;
     this.typeOfCompetition = required.typeOfCompetition;
     this.availableSeats = required.availableSeats;
     this.address = address;
@@ -154,7 +154,7 @@ export interface CompetitionRequired {
   competitionDateRangeGroup: { start: Date; end: Date };
   registrationDateRangeGroup?: { start: Date; end: Date };
   typeOfCompetition: TypeOfCompetition;
-  parentCompetition?: Competition;
+  parentCompetition?: string;
   availableSeats: number;
   coverImageId?: string;
   coverImage?: File;

src/app/shell/personal-cabinet/provider/create-competition/create-competition-address/create-competition-address.component.ts

@@ -15,7 +15,7 @@ export class CreateCompetitionAddressComponent implements OnInit {
 
   @Output() public passAddressFormGroup = new EventEmitter();
 
-  public readonly validationConstants = ValidationConstants;
+  protected readonly ValidationConstants = ValidationConstants;
 
   public addressFormGroup: FormGroup;
   public searchFormGroup: FormGroup;
@@ -76,6 +76,4 @@ export class CreateCompetitionAddressComponent implements OnInit {
       this.addressFormGroup.markAsDirty({ onlySelf: true });
     }
   }
-
-  protected readonly ValidationConstants = ValidationConstants;
 }

src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.html

@@ -53,11 +53,11 @@
   <label class="step-label">{{ 'FORMS.LABELS.COVERAGE' | translate }}</label>
   <mat-form-field appearance="fill">
     <mat-select
-      name="competitionCoverage"
+      name="coverage"
       placeholder="{{ 'FORMS.LABELS.COVERAGE' | translate }}"
       disableOptionCentering
       panelClass="dropdown-panel"
-      [formControl]="competitionCoverageControl"
+      [formControl]="coverageControl"
       class="step-input">
       <mat-option
         *ngFor="let competitionCoverage of CompetitionCoverage | keyvalue: sortTime"
@@ -67,7 +67,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <app-validation-hint [validationFormControl]="competitionCoverageControl"> </app-validation-hint>
+  <app-validation-hint [validationFormControl]="coverageControl"> </app-validation-hint>
 
   <label class="step-label">{{ 'FORMS.LABELS.FORM_OF_LEARNING' | translate }}</label>
   <mat-radio-group formControlName="formOfLearning" color="primary" fxLayout="column" fxLayoutAlign="center space-between">

src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.ts

@@ -77,6 +77,10 @@ export class CreateCompetitionDescriptionFormComponent implements OnInit, OnDest
 
     this.initForm();
 
+    if (this.competition) {
+      this.activateEditMode();
+    }
+
     this.onDisabilityOptionCtrlInit();
     this.onSelectionOptionsCtrlInit();
     this.onBenefitsOptionsCtrlInit();
@@ -89,8 +93,8 @@ export class CreateCompetitionDescriptionFormComponent implements OnInit, OnDest
     return this.DescriptionFormGroup.get('category') as FormControl;
   }
 
-  public get competitionCoverageControl(): FormControl {
-    return this.DescriptionFormGroup.get('competitionCoverage') as FormControl;
+  public get coverageControl(): FormControl {
+    return this.DescriptionFormGroup.get('coverage') as FormControl;
   }
 
   public ngOnDestroy(): void {
@@ -172,6 +176,33 @@ export class CreateCompetitionDescriptionFormComponent implements OnInit, OnDest
     }
   }
 
+  /**
+   * This method fills inputs with information of edited workshop
+   */
+  public activateEditMode(): void {
+    this.DescriptionFormGroup.patchValue(this.competition, { emitEvent: false });
+
+    if (this.competition.disabilities) {
+      this.disabilityOptionRadioBtn.setValue(this.competition.disabilities, { emitEvent: false });
+      this.DescriptionFormGroup.get('disabilityOptionsDesc').enable({ emitEvent: false });
+    }
+
+    if (this.competition.competitiveSelection) {
+      this.selectionOptionRadioBtn.setValue(this.competition.competitiveSelection, { emitEvent: false });
+      this.DescriptionFormGroup.get('selectionOptionsDesc').enable({ emitEvent: false });
+    }
+
+    if (this.competition.price) {
+      this.priceRadioBtn.setValue(!!this.competition.price, { emitEvent: false });
+      this.DescriptionFormGroup.get('price').enable({ emitEvent: false });
+    }
+
+    if (this.competition.benefits) {
+      this.benefitsOptionRadioBtn.setValue(this.competition.benefits, { emitEvent: false });
+      this.DescriptionFormGroup.get('benefitsOptionsDesc').enable({ emitEvent: false });
+    }
+  }
+
   private initForm(): void {
     this.DescriptionFormGroup = this.formBuilder.group({
       imageFiles: new FormControl(''),
@@ -183,7 +214,7 @@ export class CreateCompetitionDescriptionFormComponent implements OnInit, OnDest
         Validators.maxLength(ValidationConstants.MAX_DESCRIPTION_LENGTH_500),
         Validators.pattern(MUST_CONTAIN_LETTERS)
       ]),
-      competitionCoverage: new FormControl(null),
+      coverage: new FormControl(null),
       formOfLearning: new FormControl(FormOfLearning.Offline),
       disabilityOptionsDesc: new FormControl({ value: '', disabled: true }, [
         Validators.minLength(ValidationConstants.MIN_DESCRIPTION_LENGTH_1),

src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.html

@@ -20,6 +20,7 @@ <h3 class="wrapper-title">
             fxLayout="row"
             fxLayoutAlign="center center"
             [competition]="competition"
+            [parentCompetition]="parentCompetition"
             [isImagesFeature]="isImagesFeature"
             [provider]="provider"
             (PassRequiredFormGroup)="onReceiveRequiredFormGroup($event)">
@@ -85,8 +86,8 @@ <h3 class="wrapper-title">
             <p class="step-name">{{ 'TITLES.JUDGES' | translate }}</p>
           </ng-template>
           <app-create-judge
+            [chiefJudge]="competition?.chiefJudge"
             [judges]="competition?.judges"
-            [isImagesFeature]="isImagesFeature"
             (passJudgeFormArray)="onReceiveJudgeFormArray($event)">
           </app-create-judge>
 

src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.ts

@@ -34,6 +34,7 @@ export class CreateCompetitionComponent extends CreateFormComponent implements O
 
   public provider: Provider;
   public competition: Competition;
+  public parentCompetition: string;
 
   public RequiredFormGroup: FormGroup;
   public DescriptionFormGroup: FormGroup;
@@ -59,9 +60,16 @@ export class CreateCompetitionComponent extends CreateFormComponent implements O
         filter((provider: Provider) => !!provider)
       )
       .subscribe((provider: Provider) => (this.provider = provider));
+
     this.determineEditMode();
     this.determineRelease();
     this.addNavPath();
+
+    const id = Boolean(this.route.snapshot.paramMap.get('id'));
+    const param = Boolean(this.route.snapshot.paramMap.get('param'));
+    if (id && param) {
+      this.parentCompetition = this.route.snapshot.paramMap.get('id');
+    }
   }
 
   public ngAfterContentChecked(): void {
@@ -92,7 +100,7 @@ export class CreateCompetitionComponent extends CreateFormComponent implements O
   }
 
   public setEditMode(): void {
-    const competitionId = this.route.snapshot.paramMap.get('param');
+    const competitionId = this.route.snapshot.paramMap.get('id');
     this.store.dispatch(new GetCompetitionById(competitionId));
     this.selectedCompetition$
       .pipe(

src/app/shell/personal-cabinet/provider/create-competition/create-judge/create-judge.component.ts

@@ -22,6 +22,7 @@ const defaultValidators = [
   styleUrls: ['./create-judge.component.scss']
 })
 export class CreateJudgeComponent implements OnInit {
+  @Input() public chiefJudge: Judge;
   @Input() public judges: Judge[];
 
   @Output() public passJudgeFormArray = new EventEmitter();
@@ -34,10 +35,15 @@ export class CreateJudgeComponent implements OnInit {
   ) {}
 
   public ngOnInit(): void {
-    if (this.judges?.length) {
-      this.judges.forEach((judge: Judge) => this.onAddJudge(judge));
+    if (this.chiefJudge) {
+      this.onAddJudge(this.chiefJudge);
+      if (this.judges?.length) {
+        this.judges.forEach((judge: Judge) => this.onAddJudge(judge));
+      }
+      this.markFormAsDirtyOnUserInteraction();
+    } else {
+      this.onAddJudge();
     }
-    this.onAddJudge();
   }
 
   /**

src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.html

@@ -80,7 +80,7 @@
 
   <label class="step-label">{{ 'FORMS.LABELS.COMPETITION_RANGE' | translate }}<span class="step-required">*</span></label>
   <mat-form-field appPlaceholderStyling class="step-input step-input-date-range" floatLabel="never">
-    <mat-date-range-input [rangePicker]="competitionPicker" formGroupName="competitionDateRangeGroup" [min]="startDate" [max]="endDate">
+    <mat-date-range-input [rangePicker]="competitionPicker" formGroupName="competitionDateRangeGroup" [min]="minDate" [max]="maxDate">
       <input matStartDate placeholder="{{ 'FORMS.PLACEHOLDERS.SHORT_DATE_FORMAT' | translate }}" formControlName="start" />
       <input matEndDate placeholder="{{ 'FORMS.PLACEHOLDERS.SHORT_DATE_FORMAT' | translate }}" formControlName="end" />
     </mat-date-range-input>
@@ -95,7 +95,7 @@
     <mat-date-range-input
       [rangePicker]="registrationPicker"
       formGroupName="registrationDateRangeGroup"
-      [min]="startDate"
+      [min]="minDate"
       [max]="RequiredFormGroup.get('competitionDateRangeGroup.end').value">
       <input matStartDate placeholder="{{ 'FORMS.PLACEHOLDERS.SHORT_DATE_FORMAT' | translate }}" formControlName="start" />
       <input matEndDate placeholder="{{ 'FORMS.PLACEHOLDERS.SHORT_DATE_FORMAT' | translate }}" formControlName="end" />
@@ -109,21 +109,17 @@
   <label class="step-label">{{ 'FORMS.LABELS.FORM_OF_LEARNING' | translate }}<span class="step-required">*</span></label>
   <mat-form-field appearance="fill">
     <mat-select
-      name="typeOfCompetition"
+      formControlName="typeOfCompetition"
       placeholder="{{ 'FORMS.LABELS.FORM_OF_LEARNING' | translate }}"
       disableOptionCentering
       panelClass="dropdown-panel"
-      [formControl]="typeOfCompetitionControl"
       class="step-input">
-      <mat-option
-        *ngFor="let typeOfCompetition of TypeOfCompetition | keyvalue: sortTime"
-        [value]="typeOfCompetition.key"
-        class="dropdown-option">
+      <mat-option *ngFor="let typeOfCompetition of filteredTypeOfCompetition" [value]="typeOfCompetition.key">
         {{ TypeOfCompetitionEnum[typeOfCompetition.key] | translate }}
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <app-validation-hint [validationFormControl]="typeOfCompetitionControl"> </app-validation-hint>
+  <app-validation-hint [validationFormControl]="typeOfCompetitionControl"></app-validation-hint>
 
   <div *ngIf="provider.ownership !== ownershipType.State" fxLayout="column" fxLayoutAlign="center space-between">
     <div fxLayout="row" fxLayoutAlign="left space-between">

src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.ts

@@ -19,6 +19,7 @@ import { Subject } from 'rxjs';
 })
 export class CreateRequiredFormComponent implements OnInit, OnDestroy {
   @Input() public competition: Competition;
+  @Input() public parentCompetition: string;
   @Input() public provider: Provider;
   @Input() public isImagesFeature: boolean;
   @Output() public PassRequiredFormGroup = new EventEmitter();
@@ -29,8 +30,8 @@ export class CreateRequiredFormComponent implements OnInit, OnDestroy {
   public readonly TypeOfCompetitionEnum = TypeOfCompetitionEnum;
   public readonly mailFormPlaceholder = Constants.MAIL_FORMAT_PLACEHOLDER;
 
-  protected startDate: Date = new Date();
-  protected endDate: Date = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
+  protected minDate: Date = new Date(new Date().setMonth(new Date().getMonth() - 1));
+  protected maxDate: Date = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
   protected readonly TypeOfCompetition = TypeOfCompetition;
   protected readonly InfoMenuType = InfoMenuType;
   protected readonly ownershipType = OwnershipTypes;
@@ -49,6 +50,7 @@ export class CreateRequiredFormComponent implements OnInit, OnDestroy {
   public isShowHintAboutCompetitionAutoClosing: boolean = false;
   public availableSeatsRadioBtnControl: FormControl = new FormControl(true);
   public useProviderInfoCtrl: FormControl = new FormControl(false);
+  public filteredTypeOfCompetition: { key: string; value: string }[] = [];
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
   private minimumSeats: number = 1;
@@ -63,10 +65,6 @@ export class CreateRequiredFormComponent implements OnInit, OnDestroy {
     return this.RequiredFormGroup.get('typeOfCompetition') as FormControl;
   }
 
-  public get parentCompetitionControl(): FormControl {
-    return this.RequiredFormGroup.get('parentCompetitionControl') as FormControl;
-  }
-
   public get minSeats(): number {
     if (this.competition?.takenSeats === 0 || !this.competition) {
       return this.minimumSeats;
@@ -80,9 +78,26 @@ export class CreateRequiredFormComponent implements OnInit, OnDestroy {
       : this.competition?.availableSeats;
   }
 
+  private filterTypeOfCompetition(stage?: boolean): void {
+    this.filteredTypeOfCompetition = Object.entries(TypeOfCompetition)
+      .filter(([key]) => stage || key !== 'CompetitionStage')
+      .map(([key, value]) => ({ key, value }));
+  }
+
   public ngOnInit(): void {
     this.initForm();
     this.PassRequiredFormGroup.emit(this.RequiredFormGroup);
+
+    this.filterTypeOfCompetition(Boolean(this.parentCompetition));
+
+    if (this.competition) {
+      this.activateEditMode();
+    }
+    if (this.parentCompetition) {
+      this.typeOfCompetitionControl.setValue(TypeOfCompetition.CompetitionStage);
+      this.typeOfCompetitionControl.disable();
+    }
+
     this.initListeners();
   }
 
@@ -104,6 +119,43 @@ export class CreateRequiredFormComponent implements OnInit, OnDestroy {
     return 0;
   }
 
+  /**
+   * This method fills inputs with information of edited workshop
+   */
+  public activateEditMode(): void {
+    this.RequiredFormGroup.patchValue(this.competition, { emitEvent: false });
+    if (this.competition.startDate) {
+      this.minDate = new Date(new Date(this.competition.startDate).setMonth(new Date(this.competition.startDate).getMonth() - 1));
+    }
+
+    if (this.competition.startDate && this.competition.endDate) {
+      this.RequiredFormGroup.get('competitionDateRangeGroup')?.patchValue({
+        start: this.competition.startDate,
+        end: this.competition.endDate
+      });
+
+      this.RequiredFormGroup.get('competitionDateRangeGroup')?.get('start')?.markAsTouched();
+      this.RequiredFormGroup.get('competitionDateRangeGroup')?.get('end')?.markAsTouched();
+    }
+
+    if (this.competition.regStartDate && this.competition.regEndDate) {
+      this.RequiredFormGroup.get('registrationDateRangeGroup')?.patchValue({
+        start: this.competition.regStartDate,
+        end: this.competition.regEndDate
+      });
+
+      this.RequiredFormGroup.get('registrationDateRangeGroup')?.get('start')?.markAsTouched();
+      this.RequiredFormGroup.get('registrationDateRangeGroup')?.get('end')?.markAsTouched();
+    }
+
+    if (this.competition.availableSeats === this.UNLIMITED_SEATS) {
+      this.setAvailableSeatsControlValue(null, 'disable', false);
+    } else {
+      this.setAvailableSeatsControlValue(this.availableSeats, 'enable', false);
+      this.availableSeatsRadioBtnControl.setValue(false);
+    }
+  }
+
   private initForm(): void {
     this.RequiredFormGroup = this.formBuilder.group({
       image: new FormControl(''),

src/app/shell/shell-routing.module.ts

@@ -177,6 +177,13 @@ const routes: Routes = [
     canLoad: [ProviderGuard],
     canDeactivate: [CreateGuard]
   },
+  {
+    path: 'create-competition/:id/:param',
+    component: CreateCompetitionComponent,
+    loadChildren: () => import('./personal-cabinet/provider/provider.module').then((m) => m.ProviderModule),
+    canLoad: [ProviderGuard],
+    canDeactivate: [CreateGuard]
+  },
   { path: '**', component: ErrorPageComponent }
 ];