(feat)O3-2368 Add Support for embedding (annotated)images in AMPATH Forms

package.json

@@ -31,6 +31,7 @@
     "@carbon/styles": "1.x",
     "@ng-select/ng-select": "^7.4.0",
     "@ngx-translate/core": "^13.0.0",
+    "@openmrs/ngx-formentry": "/home/thembo/openmrs3/openmrs-ngx-formentry/dist/ngx-formentry",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",

projects/ngx-formentry/src/components/diagram-embed/diagram-embed.component.html

@@ -0,0 +1,9 @@
+<div>
+  <!-- Include the FileUploadComponent for uploading diagrams -->
+  <app-file-upload (uploadData)="onFileChange($event)"></app-file-upload>
+</div>
+
+<div>
+  <!-- Display the embedded diagram using the DiagramEmbedComponent -->
+  <app-diagram-embed [diagramUrl]="diagramUrl"></app-diagram-embed>
+</div>

projects/ngx-formentry/src/components/diagram-embed/diagram-embed.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { FileUploadService } from './file-upload.service'; // Import the FileUploadService
+
+@Component({
+  selector: 'app-diagram-embed',
+  templateUrl: './diagram-embed.component.html',
+  styleUrls: ['./diagram-embed.component.css']
+})
+export class DiagramEmbedComponent {
+  diagramUrl: string;
+
+  constructor(private fileUploadService: FileUploadService) {}
+
+  // This method is called when a diagram file is uploaded
+  onDiagramUpload(event: any) {
+    const file = event.target.files[0]; // Get the uploaded file
+    if (file) {
+      // Upload the file and get the URL
+      this.fileUploadService.uploadDiagram(file).subscribe((url: string) => {
+        this.diagramUrl = url; // Set the diagramUrl property
+      });
+    }
+  }
+}

projects/ngx-formentry/src/components/diagram-embed/file-upload.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FileUploadService {
+  constructor(private http: HttpClient) {}
+
+  //TODO: Define the server URL where you will handle file uploads
+  private uploadUrl = 'server-api';
+
+  // Implement a method to upload the diagram file
+  uploadDiagram(file: File): Observable<any> {
+    // Create a FormData object to send the file
+    const formData = new FormData();
+    formData.append('diagramFile', file);
+
+    // Define HTTP headers for the request (you can adjust them as needed)
+    const headers = new HttpHeaders({
+      //TODO: provide auth if required
+      Authorization: 'Bearer YourAuthToken', // Include any authentication headers if required
+    });
+
+    // Make an HTTP POST request to upload the file
+    return this.http.post(this.uploadUrl, formData, { headers });
+  }
+}

src/app/app.component.html

@@ -4,6 +4,9 @@
       [node]="form.rootNode"
       [labelMap]="labelMap"
     ></ofe-form-renderer>
+    <app-diagram-embed [diagramUrl]="diagramUrl"></app-diagram-embed>
+
+    <input type="file" (change)="onDiagramUpload($event.target.files[0])">
   </form>
 
   <div class="cds--offset-md-2">

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { FormGroup } from '@angular/forms';
 
 import { Subscriber, Observable, Subject, of, Observer } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
+import { FileUploadService } from '../../projects/ngx-formentry/src/components/diagram-embed/file-upload.service';
 
 import {
   QuestionFactory,
@@ -41,6 +42,8 @@ export class AppComponent implements OnInit {
   public header = 'UMD Demo';
   currentLanguage = 'en';
   labelMap = {};
+  diagramUrl: string = ''; // Variable to store the diagram URL
+  selectedDiagramFile: File | null = null;
 
   constructor(
     private questionFactory: QuestionFactory,
@@ -53,11 +56,35 @@ export class AppComponent implements OnInit {
     private http: HttpClient,
     private translate: TranslateService,
     private personAttributeAdapter: PersonAttribuAdapter,
+    private fileUploadService: FileUploadService,
     private patientIdenfierAdapter: PatientIdentifierAdapter
   ) {
     this.schema = adultForm;
   }
 
+  // Add a method to handle diagram file upload
+  onDiagramUpload(file: File) {
+    // Set the selected diagram file
+    this.selectedDiagramFile = file;
+    //TODOD: Handle the uploaded diagram file and send it to the server for processing
+    // Upon successful upload and processing, set the diagramUrl with the URL of the diagram
+    // Example
+    this.uploadDiagramToServer(file);
+}
+
+// Add a method to upload the diagram file to the server
+private uploadDiagramToServer(file: File) {
+    // TODO: Implement logic to upload the diagram file to your server
+    // Upon successful upload, set this.diagramUrl with the URL of the uploaded diagram
+    // For example:
+    const formData = new FormData();
+    formData.append('file', file);
+    //TODO:Api
+    this.http.post('api', formData).subscribe((response: any) => {
+        this.diagramUrl = response.diagramUrl;
+    });
+}
+
   ngOnInit() {
     this.dataSources.registerDataSource('drug', {
       searchOptions: this.sampleSearch,

yarn.lock

@@ -2189,6 +2189,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@openmrs/ngx-formentry@file:/home/thembo/openmrs3/openmrs-ngx-formentry/dist/ngx-formentry::locator=%40openmrs%2Fngx-formentry%40workspace%3A.":
+  version: 3.1.1
+  resolution: "@openmrs/ngx-formentry@file:/home/thembo/openmrs3/openmrs-ngx-formentry/dist/ngx-formentry#/home/thembo/openmrs3/openmrs-ngx-formentry/dist/ngx-formentry::hash=aea385&locator=%40openmrs%2Fngx-formentry%40workspace%3A."
+  dependencies:
+    tslib: ^2.2.0
+  peerDependencies:
+    "@angular-extensions/elements": ^12.6.0
+    "@angular/animations": ">=11.2.14 <=12.0.4"
+    "@angular/cdk": ">=11.2.13 <=12.0.4"
+    "@angular/common": ">=11.2.14 <=12.0.4"
+    "@angular/compiler": ">=11.2.14 <=12.0.4"
+    "@angular/core": ">=11.2.14 <=12.0.4"
+    "@angular/forms": ">=11.2.14 <=12.0.4"
+    "@carbon/styles": ^1.11.0
+    "@ng-select/ng-select": ^6.1.0
+    "@ngx-translate/core": ^13.0.0
+    hammerjs: ^2.0.8
+    lodash: ^4.17.4
+    moment: ^2.17.1
+    ngx-file-uploader: ^0.0.18
+    ngx-webcam: ^0.2.2
+    reflect-metadata: ^0.1.9
+    shelljs: ^0.7.0
+    slick-carousel: ^1.6.0
+    tree-model: ^1.0.5
+  checksum: d5aae712c896aad78502002e82e5726689c46cc65b8c5f3b84a9f1f5db3948acef6aa58f5c7e63d857a136577280202f890d2cbd8ab0c535b0f08724c8b414cd
+  languageName: node
+  linkType: hard
+
 "@openmrs/ngx-formentry@workspace:.":
   version: 0.0.0-use.local
   resolution: "@openmrs/ngx-formentry@workspace:."
@@ -2216,6 +2245,7 @@ __metadata:
     "@carbon/styles": 1.x
     "@ng-select/ng-select": ^7.4.0
     "@ngx-translate/core": ^13.0.0
+    "@openmrs/ngx-formentry": /home/thembo/openmrs3/openmrs-ngx-formentry/dist/ngx-formentry
     "@types/jasmine": ~3.6.0
     "@types/jasminewd2": ~2.0.3
     "@types/node": ^12.11.1