tango-app-api-trax 3.8.14 → 3.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tango-app-api-trax",
-    "version": "3.8.14",
+    "version": "3.8.15",
     "description": "Trax",
     "main": "index.js",
     "type": "module",

package/src/hbs/template.hbs

@@ -96,6 +96,7 @@
             font-size: 10px !important;
             font-weight: 400;
             line-height: 28px;
+            white-space: pre-line;
         }
 
         .text-center {

package/src/hbs/visit-checklist.hbs

@@ -69,10 +69,10 @@
   .q-answer-text{font-size:12px;color:#1a1a1a;line-height:1.5}
   .q-answer-text.flagged{color:#a32d2d}
   .q-answer-media{margin-top:8px}
-  .q-answer-media img,.q-answer-media video{display:block;max-width:220px;max-height:180px;border-radius:6px}
+  .q-answer-media img,.q-answer-media video,.q-answer-item td img{display:block;width:200px;height:180px;object-fit:cover;border-radius:6px;margin-bottom:6px}
   .q-answer-link{font-size:12px;color:#0085D2;text-decoration:underline;word-break:break-all}
   .q-answer-caption{font-size:11px;color:#666;margin-bottom:4px}
-  .q-answer-remarks{font-size:11px;color:#666;margin-top:6px}
+  .q-answer-remarks{font-size:11px;color:#666;margin-top:6px;white-space:pre-line}
   /* Footer */
   .page-footer{position:absolute;bottom:20px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#999;border-top:1px solid #d9d9d9;padding-top:10px}
   .footer-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:#0066CC;font-size:11px}
@@ -179,60 +179,99 @@
   <div>Score:{{this.score}}</div>
   {{/if}}
 </div>
+{{#if this.questionReferenceImage}}
+<div class="q-answer-media">
+  <div class="q-answer-caption">Reference Image</div>
+  <img src="{{this.questionReferenceImage}}" alt="Reference Image" />
+</div>
+{{/if}}
+{{#if this.multiQuestionReferenceImage.length}}
+<div class="q-answer-media">
+  <div class="q-answer-caption">Reference Images</div>
+  {{#each this.multiQuestionReferenceImage}}
+  <img src="{{this}}" alt="Reference Image" />
+  {{/each}}
+</div>
+{{/if}}
 {{!-- <span class="q-ans {{#if this.isYes}}ans-yes{{else}}{{#if this.isNo}}ans-no{{/if}}{{/if}}">{{#if this.isYes}}✓ Yes{{else}}{{#if this.isNo}}✗ No{{else}}{{this.answerDisplay}}{{/if}}{{/if}}</span> --}}
 {{#if this.userAnswer.length}}
 <div class="q-answer-list">
 {{#each this.userAnswer}}
 <div class="q-answer-item">
-  {{#if this.answer}}
-    {{#eq this.answerType 'image'}}
-    <div class="q-answer-media">
-      {{#if this.referenceImage}}
-      <div class="q-answer-caption">Reference Image</div>
-      <img src="{{this.referenceImage}}" alt="Reference Image" />
-      {{/if}}
-      <div class="q-answer-caption">Uploaded Image</div>
-      <img src="{{this.answer}}" alt="Uploaded Image" />
-    </div>
-    {{/eq}}
-    {{#eq this.answerType 'video'}}
+  {{#eq this.answerType 'text'}}
+    {{#if this.answer}}
+    <div class="q-answer-text {{#if this.sopFlag}}flagged{{/if}}">{{this.answer}}</div>
+    {{/if}}
+  {{/eq}}
+  {{#eq this.answerType 'video'}}
+    {{#if this.answer}}
     <div class="q-answer-media">
       <div class="q-answer-caption">Uploaded Video</div>
       <a class="q-answer-link" href="{{this.answer}}" target="_blank">{{this.answer}}</a>
     </div>
-    {{/eq}}
-    {{#eq this.answerType 'text'}}
-    <div class="q-answer-text {{#if this.sopFlag}}flagged{{/if}}">{{this.answer}}</div>
-    {{/eq}}
-  {{/if}}
-
-  {{#if this.validation}}
-    {{#if this.validationAnswer}}
-      {{#eq this.validationDisplayType 'image'}}
-      <div class="q-answer-media">
-        <div class="q-answer-caption">Validation Image</div>
-        <img src="{{this.validationAnswer}}" alt="Validation Image" />
-      </div>
-      {{/eq}}
-      {{#eq this.validationDisplayType 'video'}}
-      <div class="q-answer-media">
-        <div class="q-answer-caption">Validation Video</div>
-        <a class="q-answer-link" href="{{this.validationAnswer}}" target="_blank">{{this.validationAnswer}}</a>
-      </div>
-      {{/eq}}
-      {{#eq this.validationDisplayType 'text'}}
-      <div class="q-answer-text">{{this.validationAnswer}}</div>
-      {{/eq}}
     {{/if}}
-  {{/if}}
+  {{/eq}}
 
-  {{#if this.remarks}}
-  <div class="q-answer-remarks">Remarks: {{this.remarks}}</div>
-  {{/if}}
+  <table style="width:100%;margin-top:8px"><tr>
+    {{#if this.multiReferenceImage.length}}
+    <td style="width:50%;vertical-align:top;padding-right:8px">
+      <div class="q-answer-caption">Reference Image</div>
+      {{#each this.multiReferenceImage}}
+      <img src="{{this}}" alt="Reference Image" />
+      {{/each}}
+    </td>
+    {{/if}}
+    {{#unless this.multiReferenceImage.length}}
+    {{#if this.referenceImage}}
+    <td style="width:50%;vertical-align:top;padding-right:8px">
+      <div class="q-answer-caption">Reference Image</div>
+      <img src="{{this.referenceImage}}" alt="Reference Image" />
+    </td>
+    {{/if}}
+    {{/unless}}
+    <td style="vertical-align:top">
+      {{#eq this.answerType 'image'}}
+        {{#if this.answer}}
+        <div class="q-answer-caption">Uploaded Image</div>
+        <img src="{{this.answer}}" alt="Uploaded Image" />
+        {{/if}}
+      {{/eq}}
+      {{#if this.validation}}
+        {{#eq this.validationDisplayType 'image'}}
+          {{#if this.validationAnswer}}
+          <div class="q-answer-caption">Validation Image</div>
+          <img src="{{this.validationAnswer}}" alt="Validation Image" />
+          {{/if}}
+        {{/eq}}
+        {{#eq this.validationDisplayType 'video'}}
+          {{#if this.validationAnswer}}
+          <div class="q-answer-caption">Validation Video</div>
+          <a class="q-answer-link" href="{{this.validationAnswer}}" target="_blank">{{this.validationAnswer}}</a>
+          {{/if}}
+        {{/eq}}
+        {{#eq this.validationDisplayType 'text'}}
+          {{#if this.validationAnswer}}
+          <div class="q-answer-text">{{this.validationAnswer}}</div>
+          {{/if}}
+        {{/eq}}
+        {{#eq this.validationDisplayType 'multiImage'}}
+          {{#if this.validationImage.length}}
+          <div class="q-answer-caption">Validation Image</div>
+          {{#each this.validationImage}}
+          <img src="{{this}}" alt="Validation Image" />
+          {{/each}}
+          {{/if}}
+        {{/eq}}
+      {{/if}}
+    </td>
+  </tr></table>
 </div>
 {{/each}}
 </div>
 {{/if}}
+{{#if this.remarks}}
+<div class="q-answer-remarks">Remarks: {{this.remarks}}</div>
+{{/if}}
 </div>
 </div>
 {{/each}}

package/src/utils/visitChecklistPdf.utils.js

@@ -129,9 +129,23 @@ function getMediaDisplayType( questionAnswerType, userAnswer = {} ) {
 function getValidationDisplayType( validationType ) {
   if ( validationType === 'Capture Image' ) return 'image';
   if ( validationType === 'Capture Video' ) return 'video';
+  if ( validationType === 'Capture Multiple Image with description' ) return 'multiImage';
   return 'text';
 }
 
+function flattenImageRefs( arr ) {
+  if ( !Array.isArray( arr ) ) return [];
+  return arr
+      .map( ( ele ) => {
+        if ( typeof ele === 'string' ) return ele;
+        if ( ele && typeof ele === 'object' ) {
+          return ele.imageURL || ele.imageUrl || ele.url || ele.image || ele.path || '';
+        }
+        return '';
+      } )
+      .filter( Boolean );
+}
+
 function buildQuestionAnswerEntries( question ) {
   const rawUserAnswers = getSourceUserAnswers( question );
   const uniqueUserAnswers = [];
@@ -153,15 +167,29 @@ function buildQuestionAnswerEntries( question ) {
     const validationType = matchedAnswer?.validationType || userAnswer?.validationType || '';
     const validationAnswer = matchedAnswer?.validationAnswer || userAnswer?.validationAnswer || '';
 
+    const rawMultiRefSources = [
+      userAnswer?.multiReferenceImage,
+      matchedAnswer?.multiReferenceImage,
+      question?.answers?.[0]?.multiReferenceImage,
+    ];
+    let multiReferenceImage = [];
+    for ( const src of rawMultiRefSources ) {
+      const flat = flattenImageRefs( src );
+      if ( flat.length ) { multiReferenceImage = flat; break; }
+    }
+    const validationImage = flattenImageRefs( userAnswer?.validationImage );
+
     return {
       answer: userAnswer?.answer || '',
       answerType: getMediaDisplayType( question?.answerType, userAnswer ),
       referenceImage: userAnswer?.referenceImage || matchedAnswer?.referenceImage || '',
+      multiReferenceImage,
       remarks: userAnswer?.remarks || '',
       sopFlag: userAnswer?.sopFlag ?? matchedAnswer?.sopFlag ?? false,
       validation,
       validationType,
       validationAnswer,
+      validationImage,
       validationDisplayType: getValidationDisplayType( validationType ),
     };
   } );
@@ -276,6 +304,10 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
         compliance: Boolean( q.compliance ),
 
+        questionReferenceImage: q.questionReferenceImage || '',
+
+        multiQuestionReferenceImage: flattenImageRefs( q.multiQuestionReferenceImage ),
+
         isYes: isYes || ( !isNo && score >= 10 ),
 
         isNo,
@@ -750,14 +782,27 @@ export function createImageCache() {
 
     const collectFromSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
+        if ( q.questionReferenceImage && q.questionReferenceImage.startsWith( 'http' ) ) urls.add( q.questionReferenceImage );
+        q.multiQuestionReferenceImage?.forEach( ( u ) => {
+          if ( typeof u === 'string' && u.startsWith( 'http' ) ) urls.add( u );
+        } );
         q.userAnswer?.forEach( ( ua ) => {
           if ( ua.referenceImage && ua.referenceImage.startsWith( 'http' ) ) urls.add( ua.referenceImage );
 
+          ua.multiReferenceImage?.forEach( ( u ) => {
+            if ( typeof u === 'string' && u.startsWith( 'http' ) ) urls.add( u );
+          } );
 
           if ( ua.answer && ua.answerType === 'image' && ua.answer.startsWith( 'http' ) ) urls.add( ua.answer );
 
 
           if ( ua.validationAnswer && ua.validationDisplayType === 'image' && ua.validationAnswer.startsWith( 'http' ) ) urls.add( ua.validationAnswer );
+
+          if ( ua.validationDisplayType === 'multiImage' ) {
+            ua.validationImage?.forEach( ( u ) => {
+              if ( typeof u === 'string' && u.startsWith( 'http' ) ) urls.add( u );
+            } );
+          }
         } );
       } );
     };
@@ -797,14 +842,25 @@ export function createImageCache() {
 
     const replaceInSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
+        if ( q.questionReferenceImage && cache.has( q.questionReferenceImage ) ) q.questionReferenceImage = cache.get( q.questionReferenceImage );
+        if ( q.multiQuestionReferenceImage?.length ) {
+          q.multiQuestionReferenceImage = q.multiQuestionReferenceImage.map( ( u ) => ( cache.has( u ) ? cache.get( u ) : u ) );
+        }
         q.userAnswer?.forEach( ( ua ) => {
           if ( ua.referenceImage && cache.has( ua.referenceImage ) ) ua.referenceImage = cache.get( ua.referenceImage );
 
+          if ( ua.multiReferenceImage?.length ) {
+            ua.multiReferenceImage = ua.multiReferenceImage.map( ( u ) => ( cache.has( u ) ? cache.get( u ) : u ) );
+          }
 
           if ( ua.answer && ua.answerType === 'image' && cache.has( ua.answer ) ) ua.answer = cache.get( ua.answer );
 
 
           if ( ua.validationAnswer && ua.validationDisplayType === 'image' && cache.has( ua.validationAnswer ) ) ua.validationAnswer = cache.get( ua.validationAnswer );
+
+          if ( ua.validationDisplayType === 'multiImage' && ua.validationImage?.length ) {
+            ua.validationImage = ua.validationImage.map( ( u ) => ( cache.has( u ) ? cache.get( u ) : u ) );
+          }
         } );
       } );
     };
@@ -859,7 +915,15 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
 
   const resolveQuestionMedia = ( section ) => {
     section.questions?.forEach( ( q ) => {
+      if ( q.questionReferenceImage ) q.questionReferenceImage = resolveUrl( q.questionReferenceImage );
+      if ( q.multiQuestionReferenceImage?.length ) {
+        q.multiQuestionReferenceImage = q.multiQuestionReferenceImage.map( ( ele ) => resolveUrl( ele ) );
+      }
       q.userAnswer?.forEach( ( ua ) => {
+
+        if ( ua.multiReferenceImage?.length ) {
+          ua.multiReferenceImage = ua.multiReferenceImage.map( ( ele ) => resolveUrl( ele ) );
+        }
         if ( ua.referenceImage ) ua.referenceImage = resolveUrl( ua.referenceImage );
 
 
@@ -867,6 +931,10 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
           ua.validationAnswer = resolveUrl( ua.validationAnswer );
         }
 
+        if ( ua?.validationImage?.length ) {
+          ua.validationImage = ua.validationImage.map( ( ele ) => resolveUrl( ele ) );
+        }
+
 
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
@@ -982,13 +1050,25 @@ export async function generateVisitChecklistPDF( templateData, baseUrl = 'https:
 
   const resolveQuestionMedia = ( section ) => {
     section.questions?.forEach( ( q ) => {
+      if ( q.questionReferenceImage ) q.questionReferenceImage = resolveUrl( q.questionReferenceImage );
+      if ( q.multiQuestionReferenceImage?.length ) {
+        q.multiQuestionReferenceImage = q.multiQuestionReferenceImage.map( ( ele ) => resolveUrl( ele ) );
+      }
       q.userAnswer?.forEach( ( ua ) => {
         if ( ua.referenceImage ) ua.referenceImage = resolveUrl( ua.referenceImage );
 
+        if ( ua.multiReferenceImage?.length ) {
+          ua.multiReferenceImage = ua.multiReferenceImage.map( ( ele ) => resolveUrl( ele ) );
+        }
+
         if ( ua.validationAnswer && ua.validationDisplayType !== 'text' ) {
           ua.validationAnswer = resolveUrl( ua.validationAnswer );
         }
 
+        if ( ua.validationImage?.length ) {
+          ua.validationImage = ua.validationImage.map( ( ele ) => resolveUrl( ele ) );
+        }
+
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
         }