(feat) : Adapt data sources to new schema specification and add remote-select Question

Author: donaldkibet

projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts

@@ -138,17 +138,22 @@ export class RemoteSelectComponent implements OnInit, ControlValueAccessor {
 
   private loadOptions() {
     this.remoteOptions$ = concat(
-      of([]), // default items
+      this.dataSource.searchOptions(
+        '',
+        this.dataSource?.dataSourceOptions ?? {}
+      ) ?? of([]), // default items
       this.remoteOptionInput$.pipe(
         distinctUntilChanged(),
         tap(() => {
           this.loading = true;
         }),
         switchMap((term) =>
-          this.dataSource.searchOptions(term).pipe(
-            catchError(() => of([])), // empty list on error
-            tap(() => (this.loading = false))
-          )
+          this.dataSource
+            .searchOptions(term, this.dataSource?.dataSourceOptions ?? {})
+            .pipe(
+              catchError(() => of([])), // empty list on error
+              tap(() => (this.loading = false))
+            )
         )
       )
     );

projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts

@@ -33,6 +33,7 @@ import { MinLengthValidationModel } from '../question-models/min-length-validati
 import { WorkspaceLauncherQuestion } from '../question-models';
 import { DecimalValidationModel } from '../question-models/decimal-validation.model';
 import { DisallowDecimalsValidationModel } from '../question-models/disallow-decimals-validation.model';
+import { RemoteSelectQuestion } from '../question-models/remote-select-question';
 @Injectable()
 export class QuestionFactory {
   dataSources: any = {};
@@ -745,6 +746,38 @@ export class QuestionFactory {
     return question;
   }
 
+  toRemoteSelectQuestion(schemaQuestion: any): RemoteSelectQuestion {
+    const dataSource = this.getDataSourceConfig(schemaQuestion);
+    const question = new RemoteSelectQuestion({
+      dataSource: dataSource.name,
+      dataSourceOptions: dataSource.options,
+      type: '',
+      key: ''
+    });
+    question.questionIndex = this.quetionIndex;
+    question.label = schemaQuestion.label;
+    question.prefix = schemaQuestion.prefix;
+    question.key = schemaQuestion.id;
+    question.renderingType = 'remote-select';
+    question.validators = this.addValidators(schemaQuestion);
+    question.extras = schemaQuestion;
+    return question;
+  }
+
+  private getDataSourceConfig(
+    schemaQuestion: any
+  ): { name: string; options: any } {
+    const dataSourceName = schemaQuestion.questionOptions?.dataSource;
+    const dataSourceOptions = schemaQuestion.questionOptions?.dataSourceOptions;
+    // See https://github.com/openmrs/openmrs-contrib-json-schemas/blob/main/form.schema.json
+    const legacyDataSource = schemaQuestion.questionOptions?.datasource;
+
+    return {
+      name: dataSourceName ?? legacyDataSource?.name ?? '',
+      options: dataSourceOptions ?? legacyDataSource?.config ?? {}
+    };
+  }
+
   toDecimalQuestion(schemaQuestion: any): TextInputQuestion {
     const question = new TextInputQuestion({
       placeholder: '',
@@ -938,6 +971,8 @@ export class QuestionFactory {
         return this.toFileUploadQuestion(schema);
       case 'workspace-launcher':
         return this.toWorkspaceLauncher(schema);
+      case 'remote-select':
+        return this.toRemoteSelectQuestion(schema);
       default:
         console.warn('New Schema Question Type found.........' + renderType);
         return this.toTextQuestion(schema);

projects/ngx-formentry/src/form-entry/question-models/interfaces/data-source.ts

@@ -2,10 +2,13 @@ import { SelectOption } from './select-option';
 import { Observable } from 'rxjs';
 
 export interface DataSource {
-  dataSourceOptions?: any;
+  dataSourceOptions?: Record<string, unknown>;
   dataFromSourceChanged?: Observable<SelectOption[]>;
   resolveSelectedValue(value): Observable<SelectOption>;
-  searchOptions(searchText): Observable<SelectOption[]>;
+  searchOptions(
+    searchText,
+    dataSourceOptions?: Record<string, unknown>
+  ): Observable<SelectOption[]>;
   fileUpload(data): Observable<any>;
   fetchFile(url: string, fileType?: string): Observable<any>;
 }

projects/ngx-formentry/src/form-entry/question-models/interfaces/remote-select-question-options.ts

@@ -0,0 +1,6 @@
+import { BaseOptions } from '../interfaces/base-options';
+
+export interface RemoteSelectQuestionOptions extends BaseOptions {
+  dataSource: string;
+  dataSourceOptions?: Record<string, unknown>;
+}

projects/ngx-formentry/src/form-entry/question-models/question-base.ts

@@ -30,7 +30,7 @@ export class QuestionBase implements BaseOptions {
   historicalDataValue?: any;
   extras?: any;
   dataSource?: string;
-  dataSourceOptions?: any;
+  dataSourceOptions?: Record<string, any>;
 
   controlType?: AfeControlType;
   validators?: Array<ValidationModel>;

projects/ngx-formentry/src/form-entry/question-models/remote-select-question.ts

@@ -0,0 +1,16 @@
+import { QuestionBase } from './question-base';
+import { AfeControlType } from '../../abstract-controls-extension/afe-control-type';
+import { RemoteSelectQuestionOptions } from './interfaces/remote-select-question-options';
+
+export class RemoteSelectQuestion extends QuestionBase {
+  rendering: string;
+  options: any[];
+
+  constructor(options: RemoteSelectQuestionOptions) {
+    super(options);
+    this.renderingType = 'select';
+    this.controlType = AfeControlType.AfeFormControl;
+    this.dataSource = options.dataSource || '';
+    this.dataSourceOptions = options.dataSourceOptions || {};
+  }
+}

src/app/adult-1.6.json

@@ -318,6 +318,23 @@
                 "rendering": "ui-select-extended"
               }
             },
+            {
+              "id": "admitToLocation",
+              "type": "obs",
+              "required": true,
+              "label": "Admit to location",
+              "questionOptions": {
+                "rendering": "remote-select",
+                "required": true,
+                "concept": "CIEL:169403",
+                "datasource": {
+                  "name": "location_datasource",
+                  "config": {
+                    "tag": "Login Location"
+                  }
+                }
+              }
+            },
             {
               "type": "encounterLocation",
               "label": "Facility name (site/satellite clinic required):",
@@ -3362,7 +3379,9 @@
                   "type": "obs",
                   "hide": {
                     "field": "tb_current",
-                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
+                    "value": [
+                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
+                    ]
                   },
                   "id": "__ptxCzFD2s"
                 }
@@ -6991,7 +7010,9 @@
                   "type": "obs",
                   "hide": {
                     "field": "q26f",
-                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
+                    "value": [
+                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
+                    ]
                   },
                   "id": "__Jywyp94Lw"
                 }
@@ -8012,7 +8033,16 @@
               "questionOptions": {
                 "concept": "318a5e8b-218c-4f66-9106-cd581dec1f95",
                 "rendering": "date",
-                "weeksList": [2, 4, 6, 8, 12, 16, 24, 36]
+                "weeksList": [
+                  2,
+                  4,
+                  6,
+                  8,
+                  12,
+                  16,
+                  24,
+                  36
+                ]
               },
               "validators": [
                 {
@@ -8042,7 +8072,17 @@
               "questionOptions": {
                 "concept": "a8a666ba-1350-11df-a1f1-0026b9348838",
                 "rendering": "date",
-                "weeksList": [2, 4, 6, 8, 12, 16, 20, 24, 36]
+                "weeksList": [
+                  2,
+                  4,
+                  6,
+                  8,
+                  12,
+                  16,
+                  20,
+                  24,
+                  36
+                ]
               },
               "validators": [
                 {
@@ -8178,4 +8218,4 @@
       ]
     }
   ]
-}
+}

src/app/app.component.ts

@@ -19,6 +19,7 @@ import {
 import { MockObs } from './mock/mock-obs';
 import { mockTranslationsData } from './mock/mock-translations';
 import { PatientIdentifierAdapter } from 'projects/ngx-formentry/src/form-entry/value-adapters/patient-identifier.adapter';
+import { LocationService } from './location.service';
 
 const adultReturnVisitForm = require('./adult-1.6.json');
 const adultReturnVisitFormObs = require('./mock/obs.json');
@@ -50,7 +51,8 @@ export class AppComponent implements OnInit {
     private http: HttpClient,
     private translate: TranslateService,
     private personAttributeAdapter: PersonAttribuAdapter,
-    private patientIdenfierAdapter: PatientIdentifierAdapter
+    private patientIdenfierAdapter: PatientIdentifierAdapter,
+    private locationService: LocationService
   ) {
     this.schema = adultReturnVisitForm;
   }
@@ -72,6 +74,10 @@ export class AppComponent implements OnInit {
       searchOptions: this.sampleSearch,
       resolveSelectedValue: this.sampleResolve
     });
+    this.dataSources.registerDataSource('location_datasource', {
+      searchOptions: this.locationService.getLocations.bind(this),
+      resolveSelectedValue: this.sampleResolve
+    });
     this.dataSources.registerDataSource('provider', {
       searchOptions: this.sampleSearch,
       resolveSelectedValue: this.sampleResolve
@@ -350,7 +356,8 @@ export class AppComponent implements OnInit {
     });
   }
 
-  public sampleSearch(): Observable<any> {
+  public sampleSearch(searchText: string): Observable<any> {
+    console.log('searchText', searchText);
     const items: Array<any> = [
       { value: '0', label: 'Aech' },
       { value: '5b6e58ea-1359-11df-a1f1-0026b9348838', label: 'Art3mis' },

src/app/app.module.ts

@@ -1,17 +1,27 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi
+} from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormEntryModule } from '@openmrs/ngx-formentry';
 import { AppComponent } from './app.component';
 import { NgxTranslateModule } from './translate/translate.module';
+import { LocationService } from './location.service';
 
-@NgModule({ declarations: [AppComponent],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    bootstrap: [AppComponent], imports: [BrowserModule,
-        BrowserAnimationsModule,
-        FormEntryModule,
-        ReactiveFormsModule,
-        NgxTranslateModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+@NgModule({
+  declarations: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  bootstrap: [AppComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    FormEntryModule,
+    ReactiveFormsModule,
+    NgxTranslateModule
+  ],
+  providers: [provideHttpClient(withInterceptorsFromDi()), LocationService]
+})
 export class AppModule {}

src/app/location.service.ts

@@ -0,0 +1,44 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, catchError, map, throwError } from 'rxjs';
+
+interface LocationResponse {
+  results: Array<{ uuid: string; display: string }>;
+}
+
+type LocationOption = { value: string; label: string };
+
+@Injectable({ providedIn: 'root' })
+export class LocationService {
+  constructor(private http: HttpClient) {}
+
+  getLocations(
+    search: string,
+    options?: { tag?: string }
+  ): Observable<LocationOption[]> {
+    const apiUrl = 'https://dev3.openmrs.org/openmrs/ws/rest/v1/location';
+    const params = new URLSearchParams();
+    if (search) params.append('q', search);
+    if (options?.tag) params.append('tag', options.tag);
+    console.log(apiUrl);
+    return this.http
+      .get<LocationResponse>(`${apiUrl}?${params}`, {
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .pipe(
+        map((res) =>
+          res.results.map((r) => ({
+            value: r.uuid,
+            label: r.display
+          }))
+        ),
+        catchError((error: HttpErrorResponse) => {
+          const msg =
+            error.error instanceof ErrorEvent
+              ? error.error.message
+              : `Server error: ${error.status}`;
+          return throwError(() => new Error(msg));
+        })
+      );
+  }
+}