Merge pull request #522 from ncats/arch_frontend_invitro

Updated impurities and invitro

package.json

@@ -48,16 +48,21 @@
     "@angular/router": "13.2.1",
     "@nguniversal/express-engine": "13.0.2",
     "@types/hammerjs": "2.0.36",
+    "@types/ws": "^8.5.4",
     "classlist.js": "1.1.20150312",
     "compression": "1.7.3",
     "core-js": "2.5.4",
     "cronstrue": "1.94.0",
     "defiant.js": "2.2.6",
+    "dom-to-image": "^2.6.0",
     "file-select": "file:dist/file-select/file-select-0.0.1.tgz",
     "hammerjs": "2.0.8",
     "helmet": "3.21.2",
+    "html-to-image": "^1.11.11",
     "jexl": "2.3.0",
     "jsdraw-wrapper": "file:dist/jsdraw-wrapper/jsdraw-wrapper-0.0.1.tgz",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
     "ketcher-wrapper": "file:dist/ketcher-wrapper/ketcher-wrapper-0.0.1.tgz",
     "lodash": "4.17.21",
     "lucene-query-parser": "1.2.0",

package.real.json

@@ -53,11 +53,15 @@
     "core-js": "2.5.4",
     "cronstrue": "1.94.0",
     "defiant.js": "2.2.6",
+    "dom-to-image": "^2.6.0",
     "file-select": "file:dist/file-select/file-select-0.0.1.tgz",
     "hammerjs": "2.0.8",
     "helmet": "3.21.2",
+    "html-to-image": "^1.11.11",
     "jsdraw-wrapper": "file:dist/jsdraw-wrapper/jsdraw-wrapper-0.0.1.tgz",
     "ketcher-wrapper": "file:dist/ketcher-wrapper/ketcher-wrapper-0.0.1.tgz",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
     "lodash": "4.17.21",
     "lucene-query-parser": "1.2.0",
     "moment": "2.29.2",

src/app/core/substance-form/cv-input/cv-input.component.ts

@@ -84,7 +84,7 @@ export class CvInputComponent implements OnInit, OnDestroy {
   }
 
   //sort dropdown based on config settings
-  //for example "CVDisplayOrder": {  "DOCUMENT_TYPE": ["IND", "NDA"], 
+  //for example "CVDisplayOrder": {  "DOCUMENT_TYPE": ["IND", "NDA"],
   sortFromConfig(vocab?: any) {
     if (!vocab) {
       vocab = this.vocabulary;

src/app/core/substance-ssg4m/ssg4m-scheme-view/ssg4m-scheme-view.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ViewChild, ElementRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { MatDialog } from '@angular/material/dialog';
@@ -10,6 +10,10 @@ import { SubstanceFormService } from '../../substance-form/substance-form.servic
 import { SubstanceFormSsg4mProcessService } from '../ssg4m-process/substance-form-ssg4m-process.service';
 import { SubstanceDetail, SpecifiedSubstanceG4mProcess, SubstanceAmount } from '@gsrs-core/substance/substance.model';
 import { SubstanceSsg4mService } from '../substance-ssg4m-form.service';
+import * as htmlToImage from 'html-to-image';
+import domToImage from 'dom-to-image';
+import jsPDF from 'jspdf';
+import * as moment from 'moment';
 
 @Component({
   selector: 'app-ssg4m-scheme-view',
@@ -32,6 +36,9 @@ export class Ssg4mSchemeViewComponent implements OnInit, OnDestroy {
   subscriptions: Array<Subscription> = [];
   private overlayContainer: HTMLElement;
 
+  // For HTML TO PDF
+  @ViewChild('dataToExport', { static: false }) public dataToExport: ElementRef;
+
   constructor(
     private configService: ConfigService,
     private substanceFormSsg4mProcessService: SubstanceFormSsg4mProcessService,
@@ -56,6 +63,7 @@ export class Ssg4mSchemeViewComponent implements OnInit, OnDestroy {
 
     // Get GSRS Frontend URL fron config
     this.getHomepageUrl();
+
   }
 
   ngOnDestroy(): void {
@@ -78,6 +86,90 @@ export class Ssg4mSchemeViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  /*
+  generateHtmlToPdf() {
+    var node = document.getElementById('divStepView');
+
+    htmlToImage.toPng(node)
+      .then(function (dataUrl) {
+        var img = new Image();
+        img.src = dataUrl;
+
+        var doc = new jsPDF('p', 'mm', 'a4');
+        const bufferX = 5;
+        const bufferY = 5;
+        const imgProps = (<any>doc).getImageProperties(img);
+        const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
+        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+        doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');
+        doc.save('ssg4m_Print_' + new Date().toDateString());
+      })
+      .catch(function (error) {
+        console.error('oops, something went wrong!', error);
+      });
+
+
+    let pdfName = "ssg4mPdf";
+
+    const width = this.dataToExport.nativeElement.clientWidth;
+    const height = this.dataToExport.nativeElement.clientHeight + 40;
+    let orientation = '';
+    let imageUnit = 'pt';
+    if (width > height) {
+      orientation = 'l';
+    } else {
+      orientation = "p";
+    }
+    domToImage.toPng(this.dataToExport.nativeElement, { width: width, height: height }).then(result => {
+      //let jsPdfOptions = {'p', 'mm',  format: [width + 50, height + 220] };
+      const pdf = new jsPDF('p', 'pt', [width + 50, height + 220] );
+      pdf.setFontSize(48);
+      pdf.setTextColor('#2585fe');
+      pdf.text(pdfName ? pdfName.toUpperCase() : 'Untitled dashboard'.toUpperCase(), 25, 75);
+      pdf.setFontSize(24); pdf.setTextColor('#131523');
+      pdf.text('Report date: ' + moment().format('ll'), 25, 115);
+      pdf.addImage(result, 'PNG', 25, 185, width, height);
+      pdf.save('C:\Users\Archana.Newatia\Downloads\file_name' + '.pdf');
+    }).catch(error => { });
+
+  }
+
+  generateImage() {
+    var node = document.getElementById('divStepView');
+
+    // to Jpeg
+
+    htmlToImage.toJpeg(node, { quality: 0.95 })
+    .then(function (dataUrl) {
+      var img = new Image();
+      img.src = dataUrl;
+      document.body.appendChild(img);
+    })
+    .catch(function (error) {
+      console.error('oops, something went wrong!', error);
+    });
+
+
+    // to Png
+
+    htmlToImage.toPng(node)
+      .then(function (dataUrl) {
+        var img = new Image();
+        img.src = dataUrl;
+        document.body.appendChild(img);
+      })
+      .catch(function (error) {
+        console.error('oops, something went wrong!', error);
+      });
+
+
+    htmlToImage.toCanvas(node)
+      .then(function (canvas) {
+        document.body.appendChild(canvas);
+      });
+  }
+  */
+
   openImageModal(subUuid: string, approvalID: string, displayName: string): void {
     let data: any;
     data = {

src/app/fda/impurities/impurities-details/impurities-details.component.html

@@ -389,7 +389,7 @@
                             Elution Type:
                           </div>
                           <div class="row-property-value">
-                            {{impTest.elutionType}}
+                            <b>{{impTest.elutionType}}</b>
                           </div>
                         </div>
                         <div class="width50percent">
@@ -431,46 +431,101 @@
 
                       <!-- Solution BEGIN -->
                       <div *ngFor="let impuritiesSolution of impTest.impuritiesSolutionList; let solutionIndex = index">
-                      <div class="row">
-                        <div class="row-property-2">
-                          <div class="row-property-key-2">
-                            Solution   {{impuritiesSolution.solutionLetter}}:
-                          </div>
-                          <div class="row-property-value-2">
-                            {{impuritiesSolution.solutionDescription}}
+                        <div class="row">
+                          <div class="row-property-2">
+                            <div class="row-property-key-2">
+                              Solution {{impuritiesSolution.solutionLetter}}:
+                            </div>
+                            <div class="row-property-value-2">
+                              {{impuritiesSolution.solutionDescription}}
+                            </div>
                           </div>
                         </div>
-                      </div>
                       </div> <!-- Solution Loop -->
 
-                      <div class="margintop20px font13px"><b>Mobile Phase</b></div>
-
-                      <div class="row margintop20px">
-                        <table class="blueTable">
-                          <thead>
-                            <tr>
-                              <th>#</th>
-                              <th class="width200px">Time (min)</th>
-                              <th>Solution A (%)</th>
-                              <th>Solution B (%)</th>
-                            </tr>
-                          </thead>
-
-                          <tbody>
-                            <tr *ngFor="let solTable of impTest.impuritiesSolutionTableList; let m = index">
-                              <td class="width40px">{{m + 1}}</td>
-                              <td class="width200px">{{solTable.solutionTime}}</td>
-                              <td class="width200px">{{solTable.solutionAPercent}}</td>
-                              <td class="width200px">{{solTable.solutionBPercent}}</td>
-                            </tr>
-                          </tbody>
-
-                        </table>
-                      </div>
-                      <!-- Solution END -->
 
+                      <!-- Mobile Phase BEGIN -->
+                      <div *ngIf="impTest.impuritiesSolutionTableList">
+                        <div class="marginbottom20px"
+                          *ngIf="(impTest.elutionType && impTest.elutionType.toUpperCase() === ELUTION_TYPE_ISOCRATIC) && impTest.impuritiesSolutionTableList.length > 0">
 
-                      <div class="row margintop20px">
+                          <div class="margintop20px font14px"><b>Mobile Phase</b></div>
+
+                          <table mat-table class="margintop20px bordergray"
+                            [dataSource]="impTest.impuritiesSolutionTableList">
+
+                            <span *ngFor="let columnName of displayedColumns; let colIndex = index">
+                              <ng-container matColumnDef="{{columnName}}">
+                                <th mat-header-cell *matHeaderCellDef>{{columnName}}</th>
+                                <td mat-cell *matCellDef="let row; let indexRow = index;">
+
+                                  <!-- Delete Mobile Phase Row -->
+                                  <div class="divflex width40px" *ngIf="columnName == 'Number'">
+                                    <div class="margintop10px">
+                                      {{(indexRow+1)}}
+                                    </div>
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Time (min)'">
+                                    {{row.solutionTime}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution A (%)'">
+                                    {{row.solutionAPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution B (%)'">
+                                    {{row.solutionBPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution C (%)'">
+                                    {{row.solutionCPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution D (%)'">
+                                    {{row.solutionDPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution E (%)'">
+                                    {{row.solutionEPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution F (%)'">
+                                    {{row.solutionFPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution G (%)'">
+                                    {{row.solutionGPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution H (%)'">
+                                    {{row.solutionHPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution I (%)'">
+                                    {{row.solutionIPercent}}
+                                  </div>
+
+                                  <div *ngIf="columnName == 'Solution J (%)'">
+                                    {{row.solutionJPercent}}
+                                  </div>
+
+                                </td>
+                              </ng-container>
+
+                            </span>
+
+                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+                          </table>
+                          <br>
+                        </div>
+                      </div> <!-- if impuritiesSolutionTableList-->
+                      <!-- Mobile Phase END -->
+
+
+                      <div class="row">
                         <div class="row-property">
                           <div class="row-property-key">
                             Sample Solution:

src/app/fda/impurities/impurities-details/impurities-details.component.scss

@@ -172,6 +172,10 @@
   margin-top: 90px;
 }
 
+.marginbottom20px {
+  margin-bottom: 20px;
+}
+
 .marginbottom30px {
   margin-bottom: 30px;
 }