chore(#10700): re-write Enketo form save workflow

tests/integration/cht-form/default/person-edit.wdio-spec.js

@@ -31,8 +31,6 @@ describe('cht-form web component - Edit Person Form', () => {
       role: 'chw',
       external_id: '12345',
       notes: 'Test notes',
-      contact: undefined,
-      parent: undefined,
       user_for_contact: {
         create: 'true'
       },
@@ -82,14 +80,12 @@ describe('cht-form web component - Edit Person Form', () => {
       role: 'patient',
       external_id: '54321',
       notes: 'Updated notes',
-      contact: undefined,
-      parent: '',
       meta: {
         ...initialPerson.meta,
         last_edited_by: '',
         last_edited_by_person_uuid: 'default_user',
         last_edited_by_place_uuid: ''
-      },
+      }
     };
 
     await mockConfig.loadForm('default', 'contact',  'person-edit');

webapp/src/ts/components/training-cards-form/training-cards-form.component.ts

@@ -13,6 +13,7 @@ import { TranslateFromService } from '@mm-services/translate-from.service';
 import { NgIf } from '@angular/common';
 import { EnketoComponent } from '@mm-components/enketo/enketo.component';
 import { TranslatePipe } from '@ngx-translate/core';
+import { FormConfig } from '@mm-services/form/form-config';
 
 @Component({
   selector: 'training-cards-form',
@@ -33,7 +34,7 @@ export class TrainingCardsFormComponent implements OnInit, OnDestroy {
   private trackRender;
   private trackEditDuration;
   private trackSave;
-  private trackMetadata = { action: '', form: '' };
+  private readonly trackMetadata = { action: '', form: '' };
   readonly FORM_WRAPPER_ID = 'training-cards-form';
   trainingCardFormId: null | string = null;
   formNoTitle = false;
@@ -112,23 +113,23 @@ export class TrainingCardsFormComponent implements OnInit, OnDestroy {
       this.loadingContent = true;
       this.geoHandle?.cancel();
       this.geoHandle = this.geolocationService.init();
-      const form = await this.xmlFormsService.get(this.trainingCardFormId);
-      await this.ngZone.run(() => this.renderForm(form));
+      const formConfig = await this.xmlFormsService.getFormConfig('training-card', this.trainingCardFormId!);
+      await this.ngZone.run(() => this.renderForm(formConfig));
     } catch (error) {
       this.setError(error);
       console.error('TrainingCardsFormComponent :: Error fetching form.', error);
     }
   }
 
-  private async renderForm(formDoc) {
+  private async renderForm(formConfig: FormConfig) {
     try {
-      const formContext = new WebappEnketoFormContext(`#${this.FORM_WRAPPER_ID}`, 'training-card', formDoc);
+      const formContext = new WebappEnketoFormContext(`#${this.FORM_WRAPPER_ID}`, formConfig);
       formContext.isFormInModal = !this.isEmbedded;
       formContext.valuechangeListener = this.resetFormError.bind(this);
 
       this.form = await this.formService.render(formContext);
-      this.formNoTitle = !formDoc?.title;
-      this.setNavigationTitle(formDoc);
+      this.formNoTitle = !formConfig.doc.title;
+      this.setNavigationTitle(formConfig.doc);
       this.showContent();
       this.recordPerformancePostRender();
     } catch (error) {
@@ -195,7 +196,7 @@ export class TrainingCardsFormComponent implements OnInit, OnDestroy {
     this.resetFormError();
 
     try {
-      const docs = await this.formService.save(this.trainingCardFormId, this.form, this.geoHandle);
+      const docs = await this.formService.save(this.form, this.geoHandle);
       console.debug('Saved form and associated docs', docs);
       const snackText = await this.translateService.get('training_cards.form.saved');
       this.globalActions.setSnackbarContent(snackText);

webapp/src/ts/modules/contacts/contacts-edit.component.ts

@@ -18,11 +18,11 @@ import { MatAccordion } from '@angular/material/expansion';
 import { EnketoComponent } from '@mm-components/enketo/enketo.component';
 import { TranslatePipe } from '@ngx-translate/core';
 import { DuplicateContactsComponent } from '@mm-components/duplicate-contacts/duplicate-contacts.component';
-import { DuplicateCheck } from '@mm-services/deduplicate.service';
 import { Contact, Qualifier } from '@medic/cht-datasource';
 import { TelemetryService } from '@mm-services/telemetry.service';
 import { CHTDatasourceService } from '@mm-services/cht-datasource.service';
-import events from 'enketo-core/src/js/event';
+import { XmlFormsService } from '@mm-services/xml-forms.service';
+import { FormValidationError } from '@mm-services/enketo.service';
 
 @Component({
   templateUrl: './contacts-edit.component.html',
@@ -37,6 +37,7 @@ export class ContactsEditComponent implements OnInit, OnDestroy, AfterViewInit {
     private readonly formService: FormService,
     private readonly contactTypesService: ContactTypesService,
     private readonly dbService: DbService,
+    private readonly xmlFormsService: XmlFormsService,
     private readonly performanceService: PerformanceService,
     private readonly telemetryService: TelemetryService,
     readonly chtDatasourceService: CHTDatasourceService,
@@ -50,8 +51,7 @@ export class ContactsEditComponent implements OnInit, OnDestroy, AfterViewInit {
 
   subscription = new Subscription();
   translationsLoadedSubscription;
-  private globalActions;
-  private xmlVersion;
+  private readonly globalActions;
   private readonly getContactFromDatasource: ReturnType<typeof Contact.v1.get>;
 
   enketoStatus;
@@ -70,9 +70,8 @@ export class ContactsEditComponent implements OnInit, OnDestroy, AfterViewInit {
   private trackRender;
   private trackEditDuration;
   private trackSave;
-  private trackMetadata = { action: '', form: '' };
+  private readonly trackMetadata = { action: '', form: '' };
 
-  private duplicateCheck?: DuplicateCheck;
   duplicatesAcknowledged = false;
 
   duplicates: Contact.v1.Contact[] = [];
@@ -323,13 +322,10 @@ export class ContactsEditComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private async renderForm(formId: string, titleKey: string) {
-    const formDoc = await this.dbService.get().get(formId);
-    this.xmlVersion = formDoc.xmlVersion;
-    this.duplicateCheck = formDoc.duplicate_check;
-
+    const formConfig = await this.xmlFormsService.getFormConfig('contact', formId);
     this.globalActions.setEnketoEditedStatus(false);
 
-    const formContext = new WebappEnketoFormContext('#contact-form', 'contact', formDoc, this.getFormInstanceData());
+    const formContext = new WebappEnketoFormContext('#contact-form', formConfig, this.getFormInstanceData());
     formContext.editedListener = this.markFormEdited.bind(this);
     formContext.valuechangeListener = this.resetFormError.bind(this);
     formContext.titleKey = titleKey;
@@ -434,64 +430,55 @@ export class ContactsEditComponent implements OnInit, OnDestroy, AfterViewInit {
     this.globalActions.setEnketoSavingStatus(true);
     this.globalActions.setEnketoError(null);
 
-    return Promise
-      .resolve(form.validate())
-      .then((valid) => {
-        if (!valid) {
-          throw new Error('Validation failed.');
-        }
+    if (this.duplicatesAcknowledged && this.duplicates.length) {
+      this.telemetryService.record(
+        ['enketo', 'contacts', this.enketoContact.type, 'duplicates_acknowledged'].join(':')
+      );
+    }
 
-        // Updating fields before save. Ref: #6670.
-        form.view.html.dispatchEvent(events.BeforeSave());
+    return this.formService
+      .saveContact(
+        { docId, type: this.enketoContact.type },
+        form,
+        this.duplicatesAcknowledged
+      )
+      .then((result) => {
+        console.debug('saved contact', result);
 
-        if (this.duplicatesAcknowledged && this.duplicates.length) {
-          this.telemetryService.record(
-            ['enketo', 'contacts', this.enketoContact.type, 'duplicates_acknowledged'].join(':')
-          );
-        }
+        this.globalActions.setEnketoSavingStatus(false);
+        this.globalActions.setEnketoEditedStatus(false);
+
+        this.trackSave?.stop({
+          name: ['enketo', 'contacts', this.trackMetadata.form, this.trackMetadata.action, 'save'].join(':'),
+          recordApdex: true,
+        });
+
+        this.translateService
+          .get(docId ? 'contact.updated' : 'contact.created')
+          .then(snackBarContent => this.globalActions.setSnackbarContent(snackBarContent));
 
-        return this.formService
-          .saveContact(
-            { docId, type: this.enketoContact.type }, 
-            { form, xmlVersion: this.xmlVersion, duplicateCheck: this.duplicateCheck}, 
-            this.duplicatesAcknowledged
-          )
-          .then((result) => {
-            console.debug('saved contact', result);
-
-            this.globalActions.setEnketoSavingStatus(false);
-            this.globalActions.setEnketoEditedStatus(false);
-
-            this.trackSave?.stop({
-              name: ['enketo', 'contacts', this.trackMetadata.form, this.trackMetadata.action, 'save'].join(':'),
-              recordApdex: true,
-            });
-
-            this.translateService
-              .get(docId ? 'contact.updated' : 'contact.created')
-              .then(snackBarContent => this.globalActions.setSnackbarContent(snackBarContent));
-
-            this.router.navigate(['/contacts', result.docId]);
-          })
-          .catch((err) => {
-            if (err instanceof DuplicatesFoundError) {
-              this.duplicates = err.duplicates;
-            } else {
-              this.duplicates = [];
-            }
-
-            console.error('Error submitting form data', err);
-
-            this.globalActions.setEnketoSavingStatus(false);
-            return this.translateService
-              .get('Error updating contact')
-              .then(error => this.globalActions.setEnketoError(error));
-          });
+        this.router.navigate(['/contacts', result.docId]);
       })
-      .catch(() => {
-        // validation messages will be displayed for individual fields.
-        // That's all we want, really.
+      .catch((err) => {
         this.globalActions.setEnketoSavingStatus(false);
+
+        if (err instanceof FormValidationError) {
+          // validation messages will be displayed for individual fields.
+          // That's all we want, really.
+          return;
+        }
+
+        if (err instanceof DuplicatesFoundError) {
+          this.duplicates = err.duplicates;
+        } else {
+          this.duplicates = [];
+        }
+
+        console.error('Error submitting form data', err);
+
+        return this.translateService
+          .get('Error updating contact')
+          .then(error => this.globalActions.setEnketoError(error));
       });
   }
 

webapp/src/ts/modules/contacts/contacts-report.component.ts

@@ -16,43 +16,44 @@ import { TranslateService } from '@mm-services/translate.service';
 import { NgIf } from '@angular/common';
 import { EnketoComponent } from '@mm-components/enketo/enketo.component';
 import { TranslatePipe } from '@ngx-translate/core';
+import { EnketoForm } from '@mm-services/enketo.service';
 
 @Component({
   templateUrl: './contacts-report.component.html',
   imports: [NgIf, EnketoComponent, TranslatePipe]
 })
 export class ContactsReportComponent implements OnInit, OnDestroy, AfterViewInit {
-  private globalActions;
+  private readonly globalActions;
   private geoHandle: any;
   private routeSnapshot;
   private trackRender;
   private trackEditDuration;
   private trackSave;
-  private trackMetadata = { form: '' };
+  private readonly trackMetadata = { form: '' };
 
   subscription: Subscription = new Subscription();
   enketoEdited;
   enketoStatus;
   enketoSaving;
   enketoError;
-  form;
+  form?: EnketoForm;
   loadingForm;
   errorTranslationKey;
   contentError;
   cancelCallback;
 
   constructor(
-    private store: Store,
-    private formService: FormService,
-    private geolocationService: GeolocationService,
-    private performanceService: PerformanceService,
-    private xmlFormsService: XmlFormsService,
-    private translateFromService: TranslateFromService,
-    private router: Router,
-    private route: ActivatedRoute,
-    private translateService: TranslateService,
-    private contactViewModelGeneratorService: ContactViewModelGeneratorService,
-    private ngZone: NgZone,
+    private readonly store: Store,
+    private readonly formService: FormService,
+    private readonly geolocationService: GeolocationService,
+    private readonly performanceService: PerformanceService,
+    private readonly xmlFormsService: XmlFormsService,
+    private readonly translateFromService: TranslateFromService,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute,
+    private readonly translateService: TranslateService,
+    private readonly contactViewModelGeneratorService: ContactViewModelGeneratorService,
+    private readonly ngZone: NgZone,
   ) {
     this.globalActions = new GlobalActions(store);
   }
@@ -64,7 +65,7 @@ export class ContactsReportComponent implements OnInit, OnDestroy, AfterViewInit
 
     this.geoHandle = this.geolocationService.init();
     this.resetFormError();
-    this.form = null;
+    this.form = undefined;
     this.loadingForm = true;
     this.globalActions.setShowContent(true);
     this.setCancelCallback();
@@ -115,7 +116,7 @@ export class ContactsReportComponent implements OnInit, OnDestroy, AfterViewInit
     return Promise
       .all([
         this.getContact(),
-        this.xmlFormsService.get(this.routeSnapshot.params?.formId),
+        this.xmlFormsService.getFormConfig('report', this.routeSnapshot.params?.formId),
       ]);
   }
 
@@ -129,15 +130,14 @@ export class ContactsReportComponent implements OnInit, OnDestroy, AfterViewInit
 
     return this
       .getContactAndForm()
-      .then(([ contact, formDoc ]) => {
+      .then(([ contact, formConfig ]) => {
         this.globalActions.setEnketoEditedStatus(false);
-        this.globalActions.setTitle(this.translateFromService.get(formDoc.title));
+        this.globalActions.setTitle(this.translateFromService.get(formConfig.doc.title));
         this.setCancelCallback();
 
         const formContext = new WebappEnketoFormContext(
           '#contact-report',
-          'report',
-          formDoc,
+          formConfig,
           { source: 'contact', contact }
         );
         formContext.editedListener = this.markFormEdited.bind(this);
@@ -228,7 +228,7 @@ export class ContactsReportComponent implements OnInit, OnDestroy, AfterViewInit
     this.globalActions.setEnketoSavingStatus(true);
     this.resetFormError();
     this.formService
-      .save(this.routeSnapshot.params.formId, this.form, this.geoHandle)
+      .save(this.form!, this.geoHandle)
       .then((docs) => {
         console.debug('saved report and associated docs', docs);
         this.globalActions.setEnketoSavingStatus(false);