cat-documents-ng 1.0.6 → 1.0.8

package/src/lib/document/components/document-content-viewer/document-content-viewer.component.html

@@ -1,332 +0,0 @@
-<div class="document-content-viewer-container">
-  @if(documentUrl && contentType){
-    <!-- Zoom Controls -->
-    <div class="zoom-controls-wrapper">
-      <document-zoom-controls 
-        [selectedDocument]="selectedDocument" 
-        [contextId]="contextId"
-        [isFormHide]="isFormHide"
-        >
-      </document-zoom-controls>
-    </div>
-    
-    <!-- PDF Viewer -->
-    @if(isPdf){
-      <div class="pdf-container">
-        <pdf-viewer
-          [src]="documentUrl"
-          [rotation]="0"
-          [original-size]="false"
-          [show-all]="true"
-          [fit-to-page]="false"
-          [zoom]="currentZoom / 100"
-          [zoom-scale]="'page-width'"
-          [stick-to-page]="false"
-          [render-text]="true"
-          [external-link-target]="'blank'"
-          [autoresize]="true"
-          [show-borders]="false"
-          style="width: 100%; height: 100%"
-        ></pdf-viewer>
-      </div>
-    }
-
-    <!-- Image Viewer -->
-    @else if(isImage){
-      <div class="image-container">
-        <img
-          [src]="documentUrl"
-          [alt]="documentName || 'Document Image'"
-          class="document-image"
-          [style.transform]="'scale(' + (currentZoom / 100) + ')'"
-          [style.transform-origin]="'center center'"
-        />
-      </div>
-    }
-
-    <!-- Excel Files -->
-    @else if(isExcel){
-      <div class="excel-container">
-        @if(isLoadingExcel){
-          <div class="loading-container">
-            <div class="loading-content">
-              <i class="pi pi-spin pi-spinner" style="font-size: 2rem; color: #3b82f6;"></i>
-              <p>Loading Excel file...</p>
-            </div>
-          </div>
-        }@else if(excelError){
-          <div class="error-container">
-            <div class="error-content">
-              <i class="pi pi-exclamation-triangle" style="font-size: 3rem; color: #ef4444;"></i>
-              <h4>Error Loading Excel File</h4>
-              <p>{{ excelError }}</p>
-              <div class="error-actions">
-                <button 
-                  type="button" 
-                  class="p-button p-button-primary p-button-sm"
-                  (click)="downloadDocument()"
-                >
-                  <i class="pi pi-download"></i>
-                  Download Instead
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-        @else if(excelData){
-          <div class="excel-container">
-            <div class="excel-zoom-wrapper" 
-                 [class.zoomed]="currentZoom !== 100"
-                 (wheel)="onWheel($event)">
-              <ngx-doc-viewer
-                [url]="documentUrl"
-                viewer="office"
-                style="width:100%;height:97%;"
-              ></ngx-doc-viewer>
-              <!-- Invisible overlay to capture wheel events over document content -->
-              <div class="wheel-capture-overlay" 
-                   (wheel)="onWheel($event)"></div>
-            </div>
-          </div>
-        }
-      </div>
-    }
-
-    <!-- Word Files -->
-    @else if(isWord){
-      <div class="docx-container">
-        <div class="doc-viewer-wrapper" 
-             [class.zoomed]="currentZoom !== 100"
-             (wheel)="onWheel($event)">
-          <ngx-doc-viewer
-            [url]="documentUrl"
-            viewer="office"
-            style="width:100%;height:97%;"
-          ></ngx-doc-viewer>
-          <div class="wheel-capture-overlay" 
-               (wheel)="onWheel($event)"></div>
-        </div>
-      </div>
-    }
-
-    <!-- CSV Files -->
-    @else if(isCsv){
-      <div class="csv-container">
-        @if(isLoadingCsv){
-          <div class="loading-container">
-            <div class="loading-content">
-              <i class="pi pi-spin pi-spinner" style="font-size: 2rem; color: #3b82f6;"></i>
-              <p>Loading CSV file...</p>
-            </div>
-          </div>
-        }@else if(csvError){
-          <div class="error-container">
-            <div class="error-content">
-              <i class="pi pi-exclamation-triangle" style="font-size: 3rem; color: #ef4444;"></i>
-              <h4>Error Loading CSV File</h4>
-              <p>{{ csvError }}</p>
-              <div class="error-actions">
-                <button 
-                  type="button" 
-                  class="p-button p-button-primary p-button-sm"
-                  (click)="downloadDocument()"
-                >
-                  <i class="pi pi-download"></i>
-                  Download Instead
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-        @else if(csvData){
-          <div class="csv-content">
-            <div class="csv-header">
-              <div class="csv-info">
-                <p>{{ documentName || 'CSV File' }}</p>
-                <span class="csv-stats">
-                  {{ csvData.totalRows }} rows × {{ csvData.totalColumns }} columns
-                </span>
-              </div>
-              </div>
-            
-            <div class="csv-table-container" 
-                 [style.transform-origin]="'center center'"
-                 (wheel)="onWheel($event)">
-              <p-table 
-                [value]="safeCsvStyledData" 
-                [tableStyle]="{'min-width': '100%'}"
-                [scrollable]="true"
-                scrollHeight="67vh"
-                class="csv-table"
-              >
-                <ng-template pTemplate="body" let-row>
-                  <tr>
-                    <ng-container *ngFor="let cell of row.cells; trackBy: trackByCell">
-                      <td [ngClass]="{'csv-header-cell': cell.isHeader}">
-                        {{ cell.value }}
-                      </td>
-                    </ng-container>
-                  </tr>
-                </ng-template>
-              </p-table>
-            </div>
-          </div>
-        }
-      </div>
-    }
-
-    <!-- Email Files -->
-    @else if(isEmail){
-      <div class="email-container">
-        @if(isLoadingEmail){
-          <div class="loading-container">
-            <i class="pi pi-spin pi-spinner" style="font-size: 2rem;"></i>
-            <p>Loading email...</p>
-          </div>
-        }
-        @else if(emailError){
-          <div class="error-container">
-            <div class="error-content">
-              <i class="pi pi-exclamation-circle" style="font-size: 2rem; color: #ef4444;"></i>
-              <h4>Unable to Preview Email</h4>
-              <p>{{ emailError }}</p>
-              <div class="error-actions">
-                <button 
-                  type="button" 
-                  class="p-button p-button-primary p-button-sm"
-                  (click)="downloadDocument()"
-                >
-                  <i class="pi pi-download"></i>
-                  Download
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-        @else if(emailData){
-          <div class="email-viewer ml-3">
-            <div class="email-header">
-              <h3 class="email-subject">{{ emailData.subject }}</h3>
-              <div class="email-metadata">
-                <div class="email-field">
-                  <span class="field-label">From:</span>
-                  <span class="field-value">{{ emailData.from }}</span>
-                </div>
-                <div class="email-field">
-                  <span class="field-label">To:</span>
-                  <span class="field-value">{{ emailData.to }}</span>
-                </div>
-                @if(emailData.cc){
-                  <div class="email-field">
-                    <span class="field-label">CC:</span>
-                    <span class="field-value">{{ emailData.cc }}</span>
-                  </div>
-                }
-                <div class="email-field">
-                  <span class="field-label">Date:</span>
-                  <span class="field-value">{{ emailData.date }}</span>
-                </div>
-                @if(emailData.attachments && emailData.attachments.length > 0){
-                  <div class="email-field">
-                    <span class="field-label">Attachments:</span>
-                    <span class="field-value">
-                      <i class="pi pi-paperclip"></i>
-                      {{ emailData.attachments.length }} attachment(s)
-                    </span>
-                  </div>
-                }
-              </div>
-            </div>
-            <div class="email-body-container">
-          
-                <div class="email-body email-body-text">
-                  <pre>{{ emailData.body }}</pre>
-                </div>
-            </div>
-            @if(emailData.attachments && emailData.attachments.length > 0){
-              <div class="email-attachments">
-                <h4>Attachments</h4>
-                <div class="attachment-list">
-                  @for(attachment of emailData.attachments; track attachment.filename){
-                    <div class="attachment-item">
-                      <i class="pi pi-file"></i>
-                      <span>{{ attachment.filename }}</span>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-        @else {
-          <div class="no-email-data">
-            <i class="pi pi-envelope" style="font-size: 3rem; color: #6b7280;"></i>
-            <p>No email data available</p>
-          </div>
-        }
-      </div>
-    }
-
-    <!-- OpenDocument Files -->
-    @else if(isOpenDocument){
-      <div class="docx-container">
-        <div class="doc-viewer-wrapper" 
-             [class.zoomed]="currentZoom !== 100"
-             (wheel)="onWheel($event)">
-          <ngx-doc-viewer
-            [url]="documentUrl"
-            viewer="office"
-            style="width:100%;height:800px;"
-          ></ngx-doc-viewer>
-          <!-- Invisible overlay to capture wheel events over document content -->
-          <div class="wheel-capture-overlay" 
-               (wheel)="onWheel($event)"></div>
-        </div>
-      </div>
-    }
-
-    <!-- Unsupported Files -->
-    @else if(isUnsupported){
-      <div class="unsupported-document-container">
-        <div class="document-preview">
-          <div class="document-icon">
-            <i [class]="documentIcon"></i>
-          </div>
-          <div class="document-info">
-            <h4>Unsupported Document Type</h4>
-            <p>{{ documentName || 'Document' }}</p>
-            <p class="document-note">This document type ({{ contentType }}) is not supported for preview. Please download to view.</p>
-          </div>
-          <div class="document-actions">
-            <button 
-              type="button" 
-              class="p-button p-button-primary p-button-sm"
-              (click)="downloadDocument()"
-            >
-              <i class="pi pi-download"></i>
-              Download
-            </button>
-            <button 
-              type="button" 
-              class="p-button p-button-outlined p-button-sm"
-              (click)="openInNewTab()"
-            >
-              <i class="pi pi-external-link"></i>
-              Open
-            </button>
-          </div>
-        </div>
-      </div>
-    }
-  }
-  @else {
-    <div class="no-document-container">
-      <div class="no-document-content">
-        <i class="pi pi-file-o" style="font-size: 3rem; color: #6b7280;"></i>
-        <h4>No Document Uploaded</h4>
-        <p>Please Upload a document to view its content.</p>
-      </div>
-    </div>
-  }
-</div>
-