fix: prototype duplicate prevention

Author: ChinHairSaintClair

webapp/package-lock.json

@@ -48,6 +48,8 @@
     "eurodigit": "^3.1.3",
     "font-awesome": "^4.7.0",
     "jquery": "3.5.1",
+    "levenshtein": "1.0.5",
+    "@types/levenshtein": "1.0.4",
     "lodash-es": "^4.17.21",
     "moment-locales-webpack-plugin": "^1.2.0",
     "ngrx-store-logger": "^0.2.4",

webapp/package.json

@@ -1,5 +1,10 @@
 <div [attr.id]="formId" class="enketo" [attr.data-editing]="editing">
   <div class="container pages"></div>
+  <!-- Do not use inline styling -->
+  <div 
+    id="duplicate_info"
+    style="display: none; width: 100%; min-height: 20px; padding-left: 20px; padding-right: 20px; background-color: #ffe7e8; color: #e33030;">
+  </div> 
   <div class="form-footer">
     <button (click)="onCancel.emit()" class="btn btn-link cancel" [disabled]="status?.saving">{{'Cancel' | translate}}</button>
     <div class="loader inline small" *ngIf="status?.saving"></div>

webapp/src/ts/components/enketo/enketo.component.html

@@ -7,6 +7,22 @@ window.startupTimes.firstCodeExecution = performance.now();
 
 window.PouchDB = require('pouchdb-browser').default;
 window.$ = window.jQuery = require('jquery');
+window._phdcChanges = {
+  hierarchyDuplicatePrevention: {
+    health_center: {
+      ...Levenshtein,
+      props: [
+        {form_prop_path: `/data/health_center/name`, db_doc_ref: 'name'},
+        {form_prop_path: '/data/health_center/external_id', db_doc_ref: 'external_id'}
+      ],
+      queryParams: {
+        valuePaths: ['/data/health_center/is_user_flagged_duplicate', '/data/health_center/duplicate/action'],
+        // eslint-disable-next-line eqeqeq
+        query: (duplicate, action) => duplicate === 'yes' && action != null
+      }
+    }
+  }
+};
 
 import { enableProdMode } from '@angular/core';
 import '@angular/compiler';
@@ -19,6 +35,7 @@ import { environment } from '@mm-environments/environment';
 import { POUCHDB_OPTIONS } from './constants';
 
 import * as bootstrapper from '../js/bootstrapper';
+import { Levenshtein } from './polyfills';
 
 // Moment additional locales
 require('../js/moment-locales/tl');