Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue#2074 enabled ownership select in edit mode #2078

Merged
merged 4 commits into from
May 5, 2023
Merged

Issue#2074 enabled ownership select in edit mode #2078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9f48149
Disabled the ability to select the ownerships in edit mode
koliaBp May 3, 2023
9fc763b
Refactored code
koliaBp May 3, 2023
a68c9ef
Updated prettier config
koliaBp May 5, 2023
999d487
Merge branch 'develop' into Issue#2074-Enabled-Ownership-Select-In-Ed…
koliaBp May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .prettierrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"trailingComma": "none",
"endOfLine": "auto",
"tabWidth": 2,
"printWidth": 140
}
"printWidth": 140,
"bracketSameLine": true
}
44 changes: 11 additions & 33 deletions ...ersonal-cabinet/provider/create-provider/create-info-form/create-info-form.component.html
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The formatting looks a bit strange to me, what tool are you using?

Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
class="step-input"
formControlName="ownership"
name="ownership"
placeholder="{{ 'FORMS.PLACEHOLDERS.SELECT_OWNERSHIP' | translate }}">
placeholder="{{ 'FORMS.PLACEHOLDERS.SELECT_OWNERSHIP' | translate }}"
[disabled]="isEditMode">
<ng-container *ngFor="let type of selectableOwnerShipTypes | keyvalue">
<mat-option [value]="type.key" class="dropdown-option">
{{ ownershipTypesEnum[type.key] | translate }}
Expand All @@ -29,9 +30,7 @@
<div fxLayout="row" fxLayoutAlign="left space-between">
<label class="step-label">{{ 'FORMS.LABELS.LICENSE' | translate }}</label>
<i
[ngClass]="
opened ? 'material-icons status-info-icon activeInfoBtn' : 'material-icons status-info-icon inactiveInfoBtn'
"
[ngClass]="opened ? 'material-icons status-info-icon activeInfoBtn' : 'material-icons status-info-icon inactiveInfoBtn'"
[matMenuTriggerFor]="licenseInfo"
#childTrigger="matMenuTrigger"
(menuOpened)="opened = childTrigger.menuOpen"
Expand Down Expand Up @@ -73,9 +72,7 @@
</mat-form-field>
<app-validation-hint [validationFormControl]="InfoFormGroup.get('institutionType')"> </app-validation-hint>

<label class="step-label">
{{ 'FORMS.LABELS.ORGANIZATION_TYPE' | translate }}<span class="step-required">*</span></label
>
<label class="step-label"> {{ 'FORMS.LABELS.ORGANIZATION_TYPE' | translate }}<span class="step-required">*</span></label>
<mat-form-field floatLabel="never" appearance="none">
<mat-select
disableOptionCentering
Expand Down Expand Up @@ -106,24 +103,16 @@
</mat-form-field>
<app-validation-hint [validationFormControl]="InfoFormGroup.get('institution')"> </app-validation-hint>

<label class="step-label"
>{{ 'FORMS.LABELS.ORGANIZATION_STATUS' | translate }}<span class="step-required">*</span></label
>
<label class="step-label">{{ 'FORMS.LABELS.ORGANIZATION_STATUS' | translate }}<span class="step-required">*</span></label>
<mat-form-field floatLabel="never" appearance="none">
<mat-select
disableOptionCentering
panelClass="dropdown-panel"
class="step-input"
formControlName="institutionStatusId">
<mat-select disableOptionCentering panelClass="dropdown-panel" class="step-input" formControlName="institutionStatusId">
<mat-option *ngFor="let status of institutionStatuses$ | async" [value]="status.id" class="dropdown-option">
{{ status.name }}
</mat-option>
</mat-select>
</mat-form-field>

<label class="step-label">
{{ 'FORMS.LABELS.FULL_ORGANIZATION_NAME' | translate }}<span class="step-required">*</span></label
>
<label class="step-label"> {{ 'FORMS.LABELS.FULL_ORGANIZATION_NAME' | translate }}<span class="step-required">*</span></label>
<mat-form-field>
<input matInput class="step-input" type="text" formControlName="fullTitle" autocomplete="none" appTrimValue />
</mat-form-field>
Expand All @@ -133,9 +122,7 @@
[maxCharachters]="validationConstants.INPUT_LENGTH_60">
</app-validation-hint>

<label class="step-label">
{{ 'FORMS.LABELS.SHORT_ORGANIZATION_NAME' | translate }}<span class="step-required">*</span></label
>
<label class="step-label"> {{ 'FORMS.LABELS.SHORT_ORGANIZATION_NAME' | translate }}<span class="step-required">*</span></label>
<mat-form-field>
<input matInput class="step-input" type="text" formControlName="shortTitle" autocomplete="none" appTrimValue />
</mat-form-field>
Expand Down Expand Up @@ -187,13 +174,7 @@

<label class="step-label">{{ 'FORMS.LABELS.EMAIL' | translate }}<span class="step-required">*</span></label>
<mat-form-field appearance="none">
<input
matInput
class="step-input"
type="email"
formControlName="email"
appTrimValue
[placeholder]="mailFormPlaceholder" />
<input matInput class="step-input" type="email" formControlName="email" appTrimValue [placeholder]="mailFormPlaceholder" />
</mat-form-field>
<app-validation-hint [validationFormControl]="InfoFormGroup.get('email')"> </app-validation-hint>

Expand All @@ -217,9 +198,7 @@
[maxCharachters]="validationConstants.INPUT_LENGTH_60">
</app-validation-hint>

<label class="step-label"
>{{ 'FORMS.LABELS.DIRECTOR_BIRTHDAY' | translate }}<span class="step-required">*</span></label
>
<label class="step-label">{{ 'FORMS.LABELS.DIRECTOR_BIRTHDAY' | translate }}<span class="step-required">*</span></label>
<mat-form-field appPlaceholderStyling class="step-input step-input-date" floatLabel="never">
<input
[min]="minDate"
Expand All @@ -232,6 +211,5 @@
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<app-validation-hint [validationFormControl]="InfoFormGroup.get('directorDateOfBirth')" minMaxDate="true">
</app-validation-hint>
<app-validation-hint [validationFormControl]="InfoFormGroup.get('directorDateOfBirth')" minMaxDate="true"> </app-validation-hint>
</form>
113 changes: 54 additions & 59 deletions .../personal-cabinet/provider/create-provider/create-info-form/create-info-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { filter, first, Observable, Subject, takeUntil } from 'rxjs';

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Select, Store } from '@ngxs/store';
import { filter, first, Observable, Subject, takeUntil } from 'rxjs';

import { Constants, CropperConfigurationConstants } from '../../../../../shared/constants/constants';
import { DATE_REGEX, NAME_REGEX } from '../../../../../shared/constants/regex-constants';
import { ValidationConstants } from '../../../../../shared/constants/validation';
Expand All @@ -10,67 +12,62 @@ import { InstitutionTypes, OwnershipTypes, SelectableOwnershipTypes } from '../.
import { Institution } from '../../../../../shared/models/institution.model';
import { DataItem } from '../../../../../shared/models/item.model';
import { Provider } from '../../../../../shared/models/provider.model';
import {
GetAllInstitutions,
GetInstitutionStatuses,
GetProviderTypes,
} from '../../../../../shared/store/meta-data.actions';
import { GetAllInstitutions, GetInstitutionStatuses, GetProviderTypes } from '../../../../../shared/store/meta-data.actions';
import { MetaDataState } from '../../../../../shared/store/meta-data.state';
import { Util } from '../../../../../shared/utils/utils';

@Component({
selector: 'app-create-info-form',
templateUrl: './create-info-form.component.html',
styleUrls: ['./create-info-form.component.scss'],
styleUrls: ['./create-info-form.component.scss']
})
export class CreateInfoFormComponent implements OnInit {
readonly validationConstants = ValidationConstants;
readonly mailFormPlaceholder = Constants.MAIL_FORMAT_PLACEHOLDER;
readonly phonePrefix = Constants.PHONE_PREFIX;
public readonly validationConstants = ValidationConstants;
public readonly mailFormPlaceholder = Constants.MAIL_FORMAT_PLACEHOLDER;
public readonly phonePrefix = Constants.PHONE_PREFIX;

readonly cropperConfig = {
public readonly cropperConfig = {
cropperMinWidth: CropperConfigurationConstants.cropperMinWidth,
cropperMaxWidth: CropperConfigurationConstants.cropperMaxWidth,
cropperMinHeight: CropperConfigurationConstants.cropperMinHeight,
cropperMaxHeight: CropperConfigurationConstants.cropperMaxHeight,
cropperAspectRatio: CropperConfigurationConstants.coverImageCropperAspectRatio,
croppedHeight: CropperConfigurationConstants.croppedCoverImage.height,
croppedFormat: CropperConfigurationConstants.croppedFormat,
croppedQuality: CropperConfigurationConstants.croppedQuality,
croppedQuality: CropperConfigurationConstants.croppedQuality
};

readonly ownershipTypes = OwnershipTypes;
readonly selectableOwnerShipTypes = SelectableOwnershipTypes; //TODO: temporary removed for 1st release
readonly ownershipTypesEnum = OwnershipTypesEnum;
readonly institutionTypes = InstitutionTypes;
readonly institutionTypesEnum = InstitutionTypesEnum;
public readonly ownershipTypes = OwnershipTypes;
public readonly selectableOwnerShipTypes = SelectableOwnershipTypes; //TODO: temporary removed for 1st release
public readonly ownershipTypesEnum = OwnershipTypesEnum;
public readonly institutionTypes = InstitutionTypes;
public readonly institutionTypesEnum = InstitutionTypesEnum;

@Select(MetaDataState.institutions)
institutions$: Observable<Institution[]>;
public institutions$: Observable<Institution[]>;
@Select(MetaDataState.providerTypes)
providerTypes$: Observable<Institution[]>;
public providerTypes$: Observable<Institution[]>;
@Select(MetaDataState.institutionStatuses)
institutionStatuses$: Observable<DataItem[]>;
institutionStatuses: DataItem[];
public institutionStatuses$: Observable<DataItem[]>;

@Input() provider: Provider;
@Input() isRelease3: boolean;
@Input() public provider: Provider;
@Input() public isRelease3: boolean;

@Output() passInfoFormGroup = new EventEmitter();
@Output() public passInfoFormGroup = new EventEmitter();

InfoFormGroup: FormGroup;
dateFilter: RegExp = DATE_REGEX;
maxDate: Date = Util.getMaxBirthDate();
minDate: Date = Util.getMinBirthDate(ValidationConstants.BIRTH_AGE_MAX);
destroy$: Subject<boolean> = new Subject<boolean>();
private destroy$: Subject<boolean> = new Subject<boolean>();

get EdrpouIpnLabel(): string {
return this.InfoFormGroup.get('ownership').value === OwnershipTypes.State
? 'FORMS.LABELS.EDRPO'
: 'FORMS.LABELS.IPN';
public InfoFormGroup: FormGroup;
public dateFilter: RegExp = DATE_REGEX;
public maxDate: Date = Util.getMaxBirthDate();
public minDate: Date = Util.getMinBirthDate(ValidationConstants.BIRTH_AGE_MAX);
public isEditMode = false;

public get EdrpouIpnLabel(): string {
return this.InfoFormGroup.get('ownership').value === OwnershipTypes.State ? 'FORMS.LABELS.EDRPO' : 'FORMS.LABELS.IPN';
}

get ownershipTypeControl(): AbstractControl {
public get ownershipTypeControl(): AbstractControl {
return this.InfoFormGroup.get('ownership');
}

Expand All @@ -79,23 +76,23 @@ export class CreateInfoFormComponent implements OnInit {
fullTitle: new FormControl('', [
Validators.required,
Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
]),
shortTitle: new FormControl('', [
Validators.required,
Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
]),
edrpouIpn: new FormControl('', [
Validators.required,
Validators.minLength(ValidationConstants.INPUT_LENGTH_8),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_10),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_10)
]),
director: new FormControl('', [
Validators.required,
Validators.pattern(NAME_REGEX),
Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
]),
directorDateOfBirth: new FormControl('', Validators.required),
phoneNumber: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]),
Expand All @@ -107,49 +104,47 @@ export class CreateInfoFormComponent implements OnInit {
institutionStatusId: new FormControl('', Validators.required),
license: new FormControl('', [
Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
]),
founder: new FormControl('', [
Validators.required,
Validators.pattern(NAME_REGEX),
Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
]),
Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
])
});
}

ngOnInit(): void {
public ngOnInit(): void {
this.store.dispatch([new GetAllInstitutions(true), new GetProviderTypes(), new GetInstitutionStatuses()]);
this.initData();
this.passInfoFormGroup.emit(this.InfoFormGroup);
}

compareInstitutions(institution1: Institution, institution2: Institution): boolean {
public compareInstitutions(institution1: Institution, institution2: Institution): boolean {
return institution1.id === institution2.id;
}

public ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}

/**
* This method fills inputs with information of edited provider
*/
private activateEditMode(): void {
this.isEditMode = true;
this.InfoFormGroup.patchValue(this.provider, { emitEvent: false });
}

private initData(): void {
this.institutionStatuses$
.pipe(filter(Boolean), first(), takeUntil(this.destroy$))
.subscribe((institutionStatuses: DataItem[]) => {
this.institutionStatuses = institutionStatuses;
if (this.provider) {
this.activateEditMode();
} else {
this.InfoFormGroup.get('institutionStatusId').setValue(institutionStatuses[0].id, { emitEvent: false });
}
});
}

ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.unsubscribe();
this.institutionStatuses$.pipe(filter(Boolean), first(), takeUntil(this.destroy$)).subscribe((institutionStatuses: DataItem[]) => {
if (this.provider) {
this.activateEditMode();
} else {
this.InfoFormGroup.get('institutionStatusId').setValue(institutionStatuses[0].id, { emitEvent: false });
}
});
}
}