Merge pull request #3740 from Tangerine-Community/fix/sp1-form-edit-w…

…ith-user-profile-and-tablet-name

Fix issue where userProfileId and tabletUserName are lost during edit on server in SP1

editor/src/app/case/components/event-form/event-form.component.ts

@@ -78,7 +78,7 @@ export class EventFormComponent implements OnInit, OnDestroy {
         eventFormId: this.eventForm.id,
         participantId: this.eventForm.participantId
       }
-      this.formPlayer.render()
+      await this.formPlayer.render()
 
       this.caseService.onChangeLocation$.subscribe(location => {
         this.formPlayer.location = this.caseService.case.location

editor/src/app/case/components/issue-form/issue-form.component.ts

@@ -79,13 +79,11 @@ export class IssueFormComponent implements OnInit {
         this.caseService.setContext(this.issue.eventId, this.issue.eventFormId)
         this.formPlayer.response = baseEvent.data.response
       }
-      this.formPlayer.render()
 
       // After render of the player, it will have created a new form response if one was not assigned.
       // Make sure to save that new form response ID into the EventForm.
-      this.formPlayer.$rendered.subscribe(async () => {
-        if (!params.eventId) this.formPlayer.unlock()
-      })
+      const unlockFormResponse = !params.eventId
+      await this.formPlayer.render(unlockFormResponse)
       this.formPlayer.$afterResubmit.subscribe(async () => {
         const issueSaveProcess = this.pm.start('issue-save', 'Saving proposal...')
         setTimeout(async () => {

editor/src/app/groups/group-device-user/group-device-user.component.ts

@@ -14,14 +14,17 @@ export class GroupDeviceUserComponent implements OnInit {
   title = _TRANSLATE('Device User')
   breadcrumbs:Array<Breadcrumb> = []
   @ViewChild('formPlayer', {static: true}) formPlayer: TangyFormsPlayerComponent
-
+
+  responseId:string
+
   constructor(
     private route:ActivatedRoute,
     private router:Router
   ) { }
 
   ngOnInit() {
     this.route.params.subscribe(params => {
+      this.responseId = params.responseId || ''
       this.breadcrumbs = [
         <Breadcrumb>{
           label: _TRANSLATE('Device Users'),
@@ -32,13 +35,17 @@ export class GroupDeviceUserComponent implements OnInit {
           url: `device-users/${params.responseId}` 
         }
       ]
-      this.formPlayer.formResponseId = params.responseId || ''
-      this.formPlayer.formId = 'user-profile'
-      this.formPlayer.preventSubmit = true
-      this.formPlayer.render()
-      this.formPlayer.$submit.subscribe(async () => {
-        this.router.navigate([`../`], { relativeTo: this.route })
-      })
+      this.ready();
+    })
+  }
+
+  async ready() {
+    this.formPlayer.formResponseId = this.responseId
+    this.formPlayer.formId = 'user-profile'
+    this.formPlayer.preventSubmit = true
+    await this.formPlayer.render()
+    this.formPlayer.$submit.subscribe(async () => {
+      this.router.navigate([`../`], { relativeTo: this.route })
     })
   }
 

editor/src/app/groups/group-uploads-edit/group-uploads-edit.component.ts

@@ -3,6 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Breadcrumb } from 'src/app/shared/_components/breadcrumb/breadcrumb.component';
 import { _TRANSLATE } from 'src/app/shared/translation-marker';
 import { TangyFormsPlayerComponent } from 'src/app/tangy-forms/tangy-forms-player/tangy-forms-player.component';
+import { TangyFormService } from 'src/app/tangy-forms/tangy-form.service';
+import { AppConfigService } from 'src/app/shared/_services/app-config.service';
 
 @Component({
   selector: 'app-group-uploads-edit',
@@ -14,35 +16,98 @@ export class GroupUploadsEditComponent implements OnInit {
   title = _TRANSLATE('Edit Upload')
   breadcrumbs:Array<Breadcrumb> = []
   @ViewChild('formPlayer', {static: true}) formPlayer: TangyFormsPlayerComponent
+
+  groupId:string
+  responseId:string
+  userProfileId:string
+  tabletUserName:string
+  appConfig: any
 
   constructor(
     private route:ActivatedRoute,
-    private router:Router
+    private router:Router,
+    private tangyFormService: TangyFormService,
+    private appConfigService: AppConfigService
   ) { }
 
-  ngOnInit() {
+  async ngOnInit() {
     this.route.params.subscribe(params => {
+      this.groupId = params.groupId
+      this.responseId = params.responseId
       this.breadcrumbs = [
         <Breadcrumb>{
           label: _TRANSLATE('Uploads'),
           url: 'uploads'
         },
         <Breadcrumb>{
           label: _TRANSLATE('View Upload'),
-          url: `uploads/${params.responseId}` 
+          url: `uploads/${this.responseId}` 
         },
         <Breadcrumb>{
           label: this.title,
-          url: `uploads/${params.responseId}/edit` 
+          url: `uploads/${this.responseId}/edit` 
         }
       ]
-      this.formPlayer.formResponseId = params.responseId
-      this.formPlayer.render()
-      this.formPlayer.$submit.subscribe(async () => {
-        this.formPlayer.saveResponse(this.formPlayer.formEl.store.getState())
-        this.router.navigate([`../`], { relativeTo: this.route })
-      })
+
+      this.ready();
+    })
+  }
+
+  async ready() {
+    this.appConfig = await this.appConfigService.getAppConfig()
+    if (this.appConfig.syncProtocol === '1') {
+      await this.getSP1DocumentVariables()
+    }
+
+    this.formPlayer.formResponseId = this.responseId
+    this.formPlayer.$afterResubmit.subscribe(async () => {
+      let response = this.formPlayer.formEl.store.getState()
+
+      if (this.appConfig.syncProtocol === '1') {
+        this.restoreSP1DocumentVariables(response)
+      }
+
+      // at this point the form has been locked by tangy-form
+      // form player will ignore the save unless we force it to save
+      await this.formPlayer.saveResponse(response, true)
+    })
+    this.formPlayer.$saveComplete.subscribe(async () => {
+      this.router.navigate([`../`], { relativeTo: this.route })
     })
+    await this.formPlayer.render(true, {disableComponents:['TANGY-GPS']})
+  }
+
+  async getSP1DocumentVariables() {
+    // In SP1, syncing.service adds userProfileId and tabletUserName in the first item input of the response document.
+    // Editing the form inadvertently removes those values because they are not in the form HTML.
+    // To prevent this, we need to store these values and add them back in when saving the response.
+    try {
+
+      if (this.appConfig.syncProtocol === '1') {
+        this.tangyFormService.initialize(this.groupId);
+        let response = await this.tangyFormService.getResponse(this.responseId)
+        if (response) {
+          var inputs = response.items.reduce(function(acc, item) { return acc.concat(item.inputs)}, [])
+          this.userProfileId = inputs.find(input => input.name === 'userProfileId')?.value
+          this.tabletUserName = inputs.find(input => input.name === 'tabletUserName')?.value
+        }
+      }
+    } catch(e) {
+      console.error(e)
+    }
+  }
+
+  restoreSP1DocumentVariables(response) {
+    // In SP1, restore the userProfileId and tabletUserName to the response.
+    if (this.userProfileId && this.tabletUserName) {
+      var inputs = response.items.reduce(function(acc, item) { return acc.concat(item.inputs)}, [])
+      if (!inputs.find(input => input.name === 'userProfileId')) {
+        response['items'][0]['inputs'].push({ name: 'userProfileId', value: this.userProfileId });
+      }
+      if (!inputs.find(input => input.name === 'tabletUserName')) {
+        response['items'][0]['inputs'].push({ name: 'tabletUserName', value: this.tabletUserName });
+      }
+    }
   }
 
 }

editor/src/app/groups/group-uploads-view/group-uploads-view.component.html

@@ -1,5 +1,5 @@
 <app-breadcrumb [title]="title" [breadcrumbs]="breadcrumbs"></app-breadcrumb>
-<div class="sticky">
+<div class="sticky" *ngIf="formResponse">
     <button *ngIf="!formResponse.verified" mat-raised-button color="accent" (click)="verify()">{{'Verify'|translate}}</button>
     <button *ngIf="formResponse.verified" mat-raised-button color="accent" (click)="unverify()">{{'Unverify'|translate}}</button>
 

editor/src/app/groups/group-uploads-view/group-uploads-view.component.ts

@@ -28,7 +28,7 @@ export class GroupUploadsViewComponent implements OnInit {
   ) { }
 
   async ngOnInit() {
-    this.route.params.subscribe(async params => {
+    this.route.params.subscribe(params => {
       this.responseId = params.responseId
       this.groupId = params.groupId
       this.breadcrumbs = [
@@ -41,16 +41,19 @@ export class GroupUploadsViewComponent implements OnInit {
           url: `uploads/${params.responseId}`
         }
       ]
-      this.formPlayer.formResponseId = params.responseId
-      this.formResponse = await this.tangyFormService.getResponse(params.responseId)
-      this.formPlayer.render()
-      this.formPlayer.$submit.subscribe(async () => {
-        this.formPlayer.saveResponse(this.formPlayer.formEl.store.getState())
-        this.router.navigate([`../`], { relativeTo: this.route })
-      })
+
+      this.ready();
     })
   }
 
+  async ready() {
+    // Load the form response instead of passing the responseId to the form player.
+    // If you pass the responseId, but the form player already has a response, responseId will be ignored
+    this.formResponse = await this.tangyFormService.getResponse(this.responseId)
+    this.formPlayer.response = this.formResponse
+    await this.formPlayer.render()
+  }
+
   async archive(){
     if(confirm('Are you sure you want to archive this form response?')) {
       try {

editor/src/app/tangy-forms/tangy-forms-player/tangy-forms-player.component.ts

@@ -25,8 +25,7 @@ export class TangyFormsPlayerComponent {
   // 2. Use this if you want to attach the form response yourself.
   @Input('response') response:TangyFormResponseModel
   // 3. Use this is you want a new form response.
-  @Input('formId') formId:string 
-  @Input('unlockFormResponses') unlockFormResponses:boolean
+  @Input('formId') formId:string
 
   @Input('templateId') templateId:string
   @Input('location') location:any
@@ -42,6 +41,7 @@ export class TangyFormsPlayerComponent {
   $afterSubmit = new Subject()
   $resubmit = new Subject()
   $afterResubmit = new Subject()
+  $saveComplete = new Subject()
   rendered = false
   groupId: string
 
@@ -88,11 +88,7 @@ export class TangyFormsPlayerComponent {
     }
   }
 
-  unlock() {
-    this.formEl.unlock()
-  }
-
-  async render() {
+  async render(unlock=false, disabledComponents={}) {
     // Get form ingredients.
     const formResponse = this.response
       ? new TangyFormResponseModel(this.response)
@@ -194,7 +190,9 @@ export class TangyFormsPlayerComponent {
         this.$afterResubmit.next(true)
       })
     }
-    this.unlockFormResponses? this.formEl.unlock({disableComponents:['TANGY-GPS']}): null
+    if (unlock) {
+      this.formEl.unlock(disabledComponents)
+    }
     this.$rendered.next(true)
     this.rendered = true
   }
@@ -221,10 +219,14 @@ export class TangyFormsPlayerComponent {
     this.throttledSaveFiring = false
   }
 
-  async saveResponse(state) {
+  /*
+   * Sometimes we want to force save to happen even if the form is complete and the response is complete.
+   * This is useful when we want to save a form response that has already been locked after an edit by tangy-form FORM_RESPONSE_COMPLETE
+   */
+  async saveResponse(state, forceSave=false) {
     let stateDoc = await this.tangyFormService.getResponse(state._id)
-    const archiveStateChange = state.archived === stateDoc['archived']
-    if (stateDoc && stateDoc['complete'] && state.complete && stateDoc['form'] && !stateDoc['form'].hasSummary && archiveStateChange) {
+    const archivedIsTheSame = state.archived === stateDoc['archived']
+    if (!forceSave && stateDoc && stateDoc['complete'] && state.complete && stateDoc['form'] && !stateDoc['form'].hasSummary && archivedIsTheSame) {
       // Since what is in the database is complete, and it's still complete, and it doesn't have 
       // a summary where they might add some input, don't save! They are probably reviewing data.
     } else {
@@ -234,9 +236,11 @@ export class TangyFormsPlayerComponent {
         location: this.location || state.location,
         ...this.metadata
       }   
-      await this.tangyFormService.saveResponse(stateDoc)
+      state = await this.tangyFormService.saveResponse(stateDoc)
     }
     this.response = state
+
+    this.$saveComplete.next(true)
   }
 
   print() {