diff --git a/project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.html b/project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.html index e4287ce6..4dd4ff80 100644 --- a/project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.html +++ b/project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.html @@ -36,16 +36,21 @@
-
-
- Organisation Name + +
+
+ Organisation Name +
+ + + Organization name is + required. + This organization name + is already in use. +
- - - Organization name is - required. - -
+ + (); constructor( private formBuilder: FormBuilder, private snackBar: MatSnackBar, @@ -56,14 +62,18 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy { if (this.openMode === 'editMode') { this.getOrganization(this.rowData.organisation, this.rowData.type.toLowerCase()) } + + this.organizationNameList = this.orgList.map(org => org.organisation.trim().toLowerCase()) } ngOnDestroy(): void { this.removeOverflowHidden() + + this.untilDestroyed$.next() + this.untilDestroyed$.complete() } initialization() { - console.log(this.rowData) if (this.dropdownList) { this.statesList = _.get(this.dropdownList, 'statesList', []) @@ -85,6 +95,16 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy { this.valueChangeEvents() } + createDuplicateOrgNameValidator(organizationNameList: string[]) { + return (control: AbstractControl) => { + if (!organizationNameList || !control.value) { + return null + } + const isDuplicate = organizationNameList.includes(control.value.trim().toLowerCase()) + return isDuplicate ? { duplicateOrgName: true } : null + } + } + get controls() { return this.organisationForm.controls } @@ -109,22 +129,36 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy { valueChangeEvents() { if (this.organisationForm && this.organisationForm.controls.category) { - this.organisationForm.controls.category.valueChanges.subscribe(val => { - if (val === 'state') { - this.organisationForm.controls.state.setValidators([Validators.required]) - this.organisationForm.controls.state.updateValueAndValidity() - this.organisationForm.controls.ministry.setValue('') - this.organisationForm.controls.ministry.clearValidators() - this.organisationForm.controls.ministry.updateValueAndValidity() - } else if (val === 'ministry') { - this.organisationForm.controls.ministry.setValidators([Validators.required]) - this.organisationForm.controls.ministry.updateValueAndValidity() - this.organisationForm.controls.state.setValue('') - this.organisationForm.controls.state.clearValidators() - this.organisationForm.controls.state.updateValueAndValidity() + this.organisationForm.controls.category.valueChanges + .pipe(takeUntil(this.untilDestroyed$)).subscribe(val => { + if (val === 'state') { + this.organisationForm.controls.state.setValidators([Validators.required]) + this.organisationForm.controls.state.updateValueAndValidity() + this.organisationForm.controls.ministry.setValue('') + this.organisationForm.controls.ministry.clearValidators() + this.organisationForm.controls.ministry.updateValueAndValidity() + } else if (val === 'ministry') { + this.organisationForm.controls.ministry.setValidators([Validators.required]) + this.organisationForm.controls.ministry.updateValueAndValidity() + this.organisationForm.controls.state.setValue('') + this.organisationForm.controls.state.clearValidators() + this.organisationForm.controls.state.updateValueAndValidity() + } + }) + } + + + this.organisationForm.controls.organisationName.valueChanges + .pipe(takeUntil(this.untilDestroyed$), debounceTime(500), distinctUntilChanged()) + .subscribe((_value) => { + const control = this.organisationForm.controls.organisationName + const error = this.createDuplicateOrgNameValidator(this.organizationNameList)(control) + if (error) { + control.setErrors(error) + } else { + control.setErrors(null) } }) - } } get getCategory() { @@ -216,7 +250,7 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy { if (input.files?.length) { this.selectedLogoFile = input.files[0] this.selectedLogoName = this.selectedLogoFile.name - const maxFileSize = this.maxFileSize * 1024 + const maxFileSize = this.maxFileSize * 1024 * 1024 if (!this.validFileTypes.includes(this.selectedLogoFile.type)) { this.snackBar.open('Invalid file type', 'X', { panelClass: ['error'] }) @@ -224,7 +258,7 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy { } if (this.selectedLogoFile.size > maxFileSize) { - this.snackBar.open(`File size exceeds ${this.maxFileSize} KB. Please select a smaller file.`, 'X', { panelClass: ['error'] }) + this.snackBar.open(`File size exceeds ${this.maxFileSize} MB. Please select a smaller file.`, 'X', { panelClass: ['error'] }) return } this.uploadOrganizationLogo() diff --git a/project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html b/project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html index d46feda3..d89c3325 100644 --- a/project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html +++ b/project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html @@ -2,7 +2,8 @@
+ [orgList]="this.dataSource.data" (buttonClick)="buttonClickAction($event)" + (organizationCreated)="organizationCreatedEmit($event)">