Merge 997f433 into 092b000

README.md

@@ -56,6 +56,18 @@ This is an angular library that provides components to view and annotate PDF doc
   ></app-document-viewer>
   ```
 
+  for non document store files:
+    ```
+    <app-document-viewer
+        [baseUrl]="'http://localhost:3000/api'"
+        [annotate]="false"
+        [url]="'http://localhost:3000/assets/non-dm.pdf'"
+        [isDM]="false"
+        [contentType]="'pdf'">
+    </app-document-viewer>
+    ```
+    Note: The file needs to be retrievable.
+
 ### Running development application (only for use with hmcts document store)
 - set environment variable to define if app connects to localhost or aat:
   ```

angular.json

@@ -78,6 +78,11 @@
                 "glob": "favicon.ico",
                 "input": "projects/annotation-ui-app/src",
                 "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "projects/annotation-ui-app/src/assets",
+                "output": "/assets"
               }
             ],
             "styles": [

projects/annotation-ui-app/src/app/annotation-webapp/annotation-webapp.component.html

@@ -3,13 +3,29 @@
   <div class="aui__toolbar" role="toolbar">
     <div class="aui__toolbar-container">
       <button
-        class="aui__toolbar-button aui__toolbar-button--items"
+        class="aui__toolbar-button"
         type="button"
         role="button">
         Annotation UI Demo
       </button>
     </div>
   </div>
+  <div class="aui__toolbar" role="toolbar">
+    <div class="aui__toolbar-container">
+      <button (click)="toggleDocumentSelection()"
+        class="aui__toolbar-button aui__toolbar-button--items"
+        type="button"
+        role="button">
+        Document Store
+      </button>
+      <button (click)="toggleDocumentSelection()"
+        class="aui__toolbar-button aui__toolbar-button--items"
+        type="button"
+        role="button">
+        Non Document Store
+      </button>
+    </div>
+  </div>
 
   <div class="aui__window">
 
@@ -36,10 +52,21 @@
                    role="textbox"
                    aria-multiline="true" data-medium-editor-editor-index="1"
                    medium-editor-index="ca3cfb8f-8b6a-8f73-1ed5-fa7679703446" data-placeholder="Type your text">
-                <app-document-viewer
+                <app-document-viewer *ngIf="dmDocumentSelected"
                   [baseUrl]="'http://localhost:3000/api'"
                   [annotate]="true"
-                  [url]="'https://dm-store-aat.service.core-compute-aat.internal/documents/35f3714e-30e0-45d6-b4fb-08f51c271f8e'">
+                  [url]="'https://dm-store-aat.service.core-compute-aat.internal/documents/35f3714e-30e0-45d6-b4fb-08f51c271f8e'"
+                  [isDM]="true">
+                </app-document-viewer>
+
+
+                <!--non dm app -->
+                <app-document-viewer *ngIf="!dmDocumentSelected"
+                  [baseUrl]="'http://localhost:3000/api'"
+                  [annotate]="false"
+                  [url]="'http://localhost:3000/assets/non-dm.pdf'"
+                  [isDM]="false"
+                  [contentType]="'pdf'">
                 </app-document-viewer>
               </div>
             </div>

projects/annotation-ui-app/src/app/annotation-webapp/annotation-webapp.component.ts

@@ -5,6 +5,13 @@ import {Component} from '@angular/core';
     templateUrl: './annotation-webapp.component.html'
 })
 export class AnnotationWebappComponent {
+
+  dmDocumentSelected: boolean = false;
+
     constructor() {
     }
+
+    toggleDocumentSelection() {
+      this.dmDocumentSelected = !this.dmDocumentSelected;
+    }
 }

projects/annotation-ui-lib/src/lib/document-viewer/document-viewer.component.spec.ts

@@ -2,12 +2,13 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {DocumentViewerComponent} from './document-viewer.component';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
-import {DebugElement, SimpleChange} from '@angular/core';
+import {DebugElement, Renderer2, SimpleChange, Type} from '@angular/core';
 import {DocumentViewerService} from './document-viewer.service';
 import {of} from 'rxjs';
 import { TransferState } from '@angular/platform-browser';
 import { HmctsEmViewerUiModule } from '../hmcts-em-viewer-ui.module';
 import { EmLoggerService } from '../logging/em-logger.service';
+import {ViewerFactoryService} from "../viewers/viewer-factory.service";
 import {PdfWrapper} from "../data/js-wrapper/pdf-wrapper";
 
 const originalUrl = 'http://api-gateway.dm.com/documents/1234-1234-1234';
@@ -30,18 +31,22 @@ describe('DocumentViewerComponent', () => {
     let fixture: ComponentFixture<DocumentViewerComponent>;
     let element: DebugElement;
     let mockDocuments;
+    let viewerFactoryServiceMock;
 
-    const DocumentViewerServiceMock = {
+  const DocumentViewerServiceMock = {
         fetch: () => {
             return of(mockDocuments);
         }
     };
 
+
     beforeEach(async(() => {
         const testingModule = TestBed.configureTestingModule({
             imports: [HmctsEmViewerUiModule, HttpClientTestingModule],
             providers: [
                 EmLoggerService,
+                Renderer2,
+                ViewerFactoryService,
                 { provide: TransferState, useFactory: () => mockTransferState},
                 { provide: DocumentViewerService, useValue: DocumentViewerServiceMock},
                 { provide: PdfWrapper, useFactory: () => mockPdfWrapper }
@@ -51,31 +56,10 @@ describe('DocumentViewerComponent', () => {
         testingModule.compileComponents();
     }));
 
-    function createComponent() {
-        fixture = TestBed.createComponent(DocumentViewerComponent);
-        component = fixture.componentInstance;
-        component.url = originalUrl;
-        component.baseUrl = '/demproxy/dm';
-        element = fixture.debugElement;
-        fixture.detectChanges();
-        component.ngOnChanges({url: new SimpleChange(null, component.url, true)});
-    }
-
 
     describe('when the mime type is an image', () => {
         beforeEach(() => {
-            mockDocuments = {
-                mimeType: 'image/jpeg',
-                originalDocumentName: 'image.jpeg',
-                _links: {
-                    binary: {
-                        href: `${originalUrl}/binary`
-                    },
-                    self: {
-                        href: `${originalUrl}`
-                    }
-                }
-            };
+            mockDocuments = createMockDocuments('image/jpeg', 'image.jpeg', originalUrl);
             createComponent();
         });
 
@@ -96,19 +80,7 @@ describe('DocumentViewerComponent', () => {
             });
 
             beforeEach(() => {
-                mockDocuments = {
-                    mimeType: 'image/jpeg',
-                    originalDocumentName: 'new-image.jpeg',
-                    _links: {
-                        binary: {
-                            href: `${newUrl}/binary`
-                        },
-                        self: {
-                            href: `${newUrl}`
-                        }
-                    }
-                };
-                createComponent();
+              mockDocuments = createMockDocuments('image/jpeg', 'new-image.jpeg', newUrl);
             });
 
             it('img element should still be visible', () => {
@@ -123,18 +95,7 @@ describe('DocumentViewerComponent', () => {
 
     describe('when the mime type is pdf', () => {
         beforeEach(() => {
-            mockDocuments = {
-                mimeType: 'application/pdf',
-                originalDocumentName: 'cert.pdf',
-                _links: {
-                    binary: {
-                        href: `${originalUrl}/binary`
-                    },
-                    self: {
-                        href: `${originalUrl}`
-                    }
-                }
-            };
+            mockDocuments = createMockDocuments('application/pdf', 'cert.pdf', originalUrl);
             createComponent();
         });
 
@@ -149,4 +110,37 @@ describe('DocumentViewerComponent', () => {
             expect(element.nativeElement.querySelector('app-image-viewer')).not.toBeTruthy();
         });
     });
+
+  const createComponent = () => {
+    fixture = TestBed.createComponent(DocumentViewerComponent);
+    component = fixture.componentInstance;
+    component.isDM = true;
+    component.url = originalUrl;
+    component.baseUrl = '/demproxy/dm';
+    element = fixture.debugElement;
+
+    viewerFactoryServiceMock = fixture.componentRef.injector.get<ViewerFactoryService>(ViewerFactoryService as Type<ViewerFactoryService>);
+    spyOn(viewerFactoryServiceMock, 'getDocumentId').and.callThrough();
+    spyOn(viewerFactoryServiceMock, 'getAnnotationSet').and.callFake(() => of({}));
+    spyOn(viewerFactoryServiceMock, 'buildComponent').and.callThrough();
+
+    fixture.detectChanges();
+    component.ngOnChanges({url: new SimpleChange(null, component.url, true)});
+  }
+
+  const createMockDocuments = (mimeType, documentName, url) => {
+    return {
+      mimeType: mimeType,
+      originalDocumentName: documentName,
+      _links: {
+        binary: {
+          href: `${url}/binary`
+        },
+        self: {
+          href: `${url}`
+        }
+      }
+    }
+  };
+
 });

projects/annotation-ui-lib/src/lib/document-viewer/document-viewer.component.ts

@@ -16,9 +16,9 @@ export class DocumentViewerComponent implements OnChanges, OnInit {
     @Input() url = '';
     @Input() annotate: boolean;
     @Input() baseUrl: string;
+    @Input() isDM: boolean;
+    @Input() contentType: string;
 
-    mimeType: string;
-    docName: string;
     viewerComponent: any;
     error: HttpErrorResponse;
 
@@ -34,27 +34,43 @@ export class DocumentViewerComponent implements OnChanges, OnInit {
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.url || changes.annotate) {
-            this.buildComponent();
+          this.buildViewer();
         }
     }
 
-    buildComponent() {
+    buildViewer() {
         if (!this.url) {
             this.log.error('url is required argument');
             throw new Error('url is required argument');
         }
-        this.documentViewerService.fetch(`${this.urlFixer.fixDm(this.url, this.baseUrl)}`).subscribe(resp => {
+        if (this.isDM) {
+          this.getDocumentMetadata().subscribe(metadata => {
 
-            this.log.info(resp);
-            if (resp && resp._links) {
-                this.docName = resp.originalDocumentName;
+            this.log.info(metadata);
+            if (metadata && metadata._links) {
+              const url = this.urlFixer.fixDm(metadata._links.binary.href, this.baseUrl);
+              this.getAnnotationSet(metadata).subscribe(annotationSet => {
                 this.viewerComponent =
-                    this.viewerFactoryService.buildViewer(resp, this.annotate,
-                        this.viewerAnchor.viewContainerRef, this.baseUrl);
+                  this.viewerFactoryService.buildComponent(this.viewerAnchor.viewContainerRef,
+                    metadata.mimeType, url, this.baseUrl, metadata._links.self.href, this.annotate, annotationSet.body);
+              });
             }
-        }, err => {
+          }, err => {
             this.log.error('An error has occured while fetching document' + err);
             this.error = err;
-        });
+          });
+        } else {
+          this.viewerComponent = this.viewerFactoryService.buildComponent(this.viewerAnchor.viewContainerRef,
+            this.contentType, this.url, this.baseUrl, this.url, this.annotate, null);
+        }
+    }
+
+    getDocumentMetadata() {
+      return this.documentViewerService.fetch(`${this.urlFixer.fixDm(this.url, this.baseUrl)}`);
+    }
+
+    getAnnotationSet(metadata) {
+        const dmDocumentId = this.viewerFactoryService.getDocumentId(metadata);
+        return this.viewerFactoryService.getAnnotationSet(this.baseUrl, dmDocumentId);
     }
 }