From 901f6f9cf6426440a0974ece4f8dcb20fbefa50d Mon Sep 17 00:00:00 2001 From: Yaroslav Petryshyn Date: Wed, 25 Sep 2024 12:34:45 +0300 Subject: [PATCH] Add edit mode and stages --- src/app/shared/enum/competition.ts | 4 +- src/app/shared/models/competition.model.ts | 12 ++-- .../create-competition-address.component.ts | 4 +- ...ompetition-description-form.component.html | 6 +- ...-competition-description-form.component.ts | 37 ++++++++++- .../create-competition.component.html | 3 +- .../create-competition.component.ts | 10 ++- .../create-judge/create-judge.component.ts | 12 +++- .../create-required-form.component.html | 14 ++-- .../create-required-form.component.ts | 64 +++++++++++++++++-- src/app/shell/shell-routing.module.ts | 7 ++ 11 files changed, 136 insertions(+), 37 deletions(-) diff --git a/src/app/shared/enum/competition.ts b/src/app/shared/enum/competition.ts index 659651b8c..477a1e763 100644 --- a/src/app/shared/enum/competition.ts +++ b/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 { diff --git a/src/app/shared/models/competition.model.ts b/src/app/shared/models/competition.model.ts index 25c4b00de..c808062a1 100644 --- a/src/app/shared/models/competition.model.ts +++ b/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; diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-address/create-competition-address.component.ts b/src/app/shell/personal-cabinet/provider/create-competition/create-competition-address/create-competition-address.component.ts index 1426b152c..2c9cf932f 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-address/create-competition-address.component.ts +++ b/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; } diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.html b/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.html index f18e113b3..9851c0166 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.html +++ b/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.html @@ -53,11 +53,11 @@ - + diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.ts b/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.ts index ee4ce507a..908486a90 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-competition-description-form/create-competition-description-form.component.ts +++ b/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), diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.html b/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.html index 417c8d571..92582ae3b 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.html +++ b/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.html @@ -20,6 +20,7 @@

fxLayout="row" fxLayoutAlign="center center" [competition]="competition" + [parentCompetition]="parentCompetition" [isImagesFeature]="isImagesFeature" [provider]="provider" (PassRequiredFormGroup)="onReceiveRequiredFormGroup($event)"> @@ -85,8 +86,8 @@

{{ 'TITLES.JUDGES' | translate }}

diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.ts b/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.ts index a98e7a96c..990f692a2 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-competition.component.ts +++ b/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( diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-judge/create-judge.component.ts b/src/app/shell/personal-cabinet/provider/create-competition/create-judge/create-judge.component.ts index ae09a1346..f779ead37 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-judge/create-judge.component.ts +++ b/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(); } /** diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.html b/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.html index 07d9eef1c..bfe36642b 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.html +++ b/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.html @@ -80,7 +80,7 @@ - + @@ -95,7 +95,7 @@ @@ -109,21 +109,17 @@ - + {{ TypeOfCompetitionEnum[typeOfCompetition.key] | translate }} - +
diff --git a/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.ts b/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.ts index 26526020c..094b29404 100644 --- a/src/app/shell/personal-cabinet/provider/create-competition/create-required-form/create-required-form.component.ts +++ b/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 = new Subject(); 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(''), diff --git a/src/app/shell/shell-routing.module.ts b/src/app/shell/shell-routing.module.ts index 4d9ab735d..09990323f 100644 --- a/src/app/shell/shell-routing.module.ts +++ b/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 } ];