feat: add post validation to cps-autocomplete component (#404)

* fix add post validatio nto cps-autocomplete component * fix onBeforeOptionsHidden function
AbsaOSS · Oct 14, 2024 · 6f4efe8 · 6f4efe8
1 parent 69b18fc
commit 6f4efe8
Show file tree

Hide file tree

Showing 6 changed files with 475 additions and 29 deletions.
diff --git a/projects/composition/src/app/api-data/cps-autocomplete.json b/projects/composition/src/app/api-data/cps-autocomplete.json
@@ -325,6 +325,14 @@
                         "default": "500",
                         "description": "Debounce time for inputChanged event."
                     },
+                    {
+                        "name": "validating",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Determines whether the component is currently validating the selected value asynchronously."
+                    },
                     {
                         "name": "_value",
                         "optional": false,

diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
@@ -142,6 +142,21 @@
         prefixIcon="search"
         appearance="borderless">
       </cps-autocomplete>
+
+      <cps-autocomplete
+        label="Autocomplete with async validation"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        placeholder="Select a city"
+        [clearable]="true"
+        [(ngModel)]="selectedOption"
+        [ngModelOptions]="{ standalone: true }"
+        [validating]="validating"
+        (valueChanged)="onOptionSelected($event)"
+        [externalError]="externalError"
+        hint="This autocomplete simulates async validation upon selection.">
+      </cps-autocomplete>
     </div>
   </form>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts
@@ -2,22 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import {
   FormsModule,
   ReactiveFormsModule,
-  UntypedFormBuilder,
-  UntypedFormGroup,
+  FormBuilder,
+  FormGroup,
   Validators
 } from '@angular/forms';
 import { CpsAutocompleteComponent } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
 import ComponentData from '../../api-data/cps-autocomplete.json';
-import {
-  Observable,
-  Subject,
-  catchError,
-  delay,
-  finalize,
-  of,
-  switchMap
-} from 'rxjs';
+import { Observable, Subject, of, delay } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -58,25 +51,30 @@ export class AutocompletePageComponent implements OnInit {
     { title: 'Tesla', val: 'TSLA', ticker: 'TSLA' }
   ];
 
-  form!: UntypedFormGroup;
+  form!: FormGroup;
   syncVal: any = [];
   componentData = ComponentData;
 
   isSingleLoading = false;
   isMultiLoading = false;
+  externalError = '';
 
   private _singleFilterOptionSubject$ = new Subject<string>();
   singleOptionsObservable$?: Observable<any>;
 
   private _multiFilterOptionSubject$ = new Subject<string>();
   multiOptionsObservable$?: Observable<any>;
 
+  // New properties for the validating example
+  validating = false;
+  selectedOption: any = null;
+
   get availableOptionInfo() {
     return this.options.map((option) => option.name).join(', ');
   }
 
   // eslint-disable-next-line no-useless-constructor
-  constructor(private _formBuilder: UntypedFormBuilder) {}
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit(): void {
     this.form = this._formBuilder.group({
@@ -116,13 +114,12 @@ export class AutocompletePageComponent implements OnInit {
         if (single) this.isSingleLoading = true;
         else this.isMultiLoading = true;
         return this._getOptionsFromServer(value).pipe(
-          catchError((error) => {
-            console.error('Failed to retrieve options list', error);
-            return of([]);
-          }),
-          finalize(() => {
-            if (single) this.isSingleLoading = false;
-            else this.isMultiLoading = false;
+          // Handle errors and finalize loading state
+          tap({
+            complete: () => {
+              if (single) this.isSingleLoading = false;
+              else this.isMultiLoading = false;
+            }
           })
         );
       })
@@ -135,4 +132,25 @@ export class AutocompletePageComponent implements OnInit {
     });
     return of(filteredRes).pipe(delay(1000));
   }
+
+  // Method to handle selection changes for async validation
+  onOptionSelected(option: any) {
+    this.validating = true;
+    this.selectedOption = option;
+    this.externalError = '';
+    // Simulate async validation with a delay
+    of(option)
+      .pipe(
+        delay(3000) // Simulate a delay of 2 seconds
+      )
+      .subscribe({
+        next: () => {
+          this.validating = false;
+        },
+        error: () => {
+          // Handle errors and finalize validation state
+          this.externalError = 'Validation failed';
+        }
+      });
+  }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
@@ -218,7 +218,7 @@
       </div>
     </cps-menu>
     <cps-progress-linear
-      *ngIf="loading"
+      *ngIf="loading || validating"
       height="3"
       radius="4"
       opacity="0.3"
@@ -234,7 +234,7 @@
   <div
     *ngIf="(error || externalError) && !hideDetails"
     class="cps-autocomplete-error">
-    {{ error }}
+    {{ error || externalError }}
   </div>
 </div>