uploads detail works

package-lock.json

       "integrity": "sha512-0LZJwjcDkbi6GksChpRE6V3tAv2S8BqTA8Tg/6fL8MpZ/zuuRT7ZvdeO3tENXJukK+lmCS6yIIjUOL8P8ixhmA=="
     },
     "@progress/kendo-theme-default": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-4.25.0.tgz",
-      "integrity": "sha512-H7Dhuxi+r0kuhkNgcHg1FseTy+MV1vZuf3TsIP9QEa2LOvWmQnCl892VDpZaJeRIa6EZ30r1CC80YVto+dKX4g=="
+      "version": "4.36.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-4.36.0.tgz",
+      "integrity": "sha512-9an8kfP92erARWIKqOF9iKqWO5OVkED7tXDqYTZnxjYjkF+pduwo27+pIzFKEb515wFO1Mg6BDZ9ttzlZqSvTw=="
     },
     "@progress/pako-esm": {
       "version": "1.0.1",

package.json

     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-licensing": "^1.0.2",
     "@progress/kendo-svg-icons": "^0.1.2",
-    "@progress/kendo-theme-default": "latest",
+    "@progress/kendo-theme-default": "^4.36.0",
     "bootstrap": "^4.6.0",
     "hammerjs": "^2.0.8",
     "rxjs": "^6.6.6",

src/app/app.module.ts

 import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import {ButtonsModule, FloatingActionButtonModule} from '@progress/kendo-angular-buttons';
 import { GridModule, PDFModule, ExcelModule } from '@progress/kendo-angular-grid';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 
     BrowserAnimationsModule,
     DialogsModule,
     ButtonsModule,
+    FloatingActionButtonModule,
     GridModule,
     PDFModule,
     ExcelModule,

src/app/lender-uploads/lender-uploads.component.html

     [total]="total"
     (pageChange)="onPageChange($event)">
   </kendo-datapager>
+
+
+
 </div>

src/app/lender-uploads/lender-uploads.component.scss

   height: calc(100vh - 48px);
   position:relative;
   background-color: #46495b;
+  overflow: scroll;
 }
 
 div.file-manager-bar{
 .bottom-pager {
   position: fixed;
   bottom: 0px;
+  z-index: 100;
 }
 

src/app/models/upload.analysis.model.ts

 
   public IsDuplicate: boolean;
   public Uid?: string;  // client side unique id when upload
-  public Upload?: UploadModel;
+  public Input?: UploadModel;
 
   constructor(payload: Partial<UploadAnalysisModel>){
     this.Id = payload.Id || 0 ;
 
     this.IsDuplicate = payload.IsDuplicate || false;
     this.Uid = payload.Uid || '' ;
-    this.Upload = new UploadModel(payload.Upload || {});
+    this.Input = new UploadModel(payload.Input || {});
   }
 
 }

src/app/upload-cards/upload-cards.component.html

-<div class="card-wrapper" >
-  <kendo-card class="upload-card-content"[width]="'260px'">
+<div class="card-wrapper">
+  <div class="file-type-image" [ngStyle]="{'background-image': 'url(https://via.placeholder.com/32x32)'}"></div>
+  <kendo-card class="upload-card-content upload-thumb" [width]="'200px'"   [ngStyle]="{'background-image' : thumbImage}">
+
     <kendo-card-header class="k-hbox">
-      <kendo-avatar width="40px" height="40px" [shape]="'circle'"></kendo-avatar>
-      <div>
-        <h1 kendoCardTitle> card.headerTitle </h1>
-        <p kendoCardSubtitle> card.headerSubtitle</p>
-      </div>
+      <p> some title </p>
     </kendo-card-header>
     <kendo-card-body>
-      <p>upload-cards works!</p>
-      <p (click)="onNavigateTo(uploadId)">this is upload id {{ uploadId }}</p>
+      <p> {{uploadId}} </p>
+
     </kendo-card-body>
     <kendo-card-footer>
-      <p> footer </p>
+      <button class="action" kendoButton icon="track-changes" (click)="onNavigateTo(uploadId)"></button>
+      <button class="action" kendoButton icon="download" (click)="onDownload(uploadId)"></button>
+      <button class="action" kendoButton icon="search"  (click)="onSearch(uploadId)" ></button>
     </kendo-card-footer>
-    <div class="go-corner" href="#">
-      <div class="go-arrow">
-        →
-      </div>
-    </div>
+
+
   </kendo-card>
 
 

src/app/upload-cards/upload-cards.component.scss

+$hoverColor: #01838d;
+$normalHeaderColor: #01838d;
+$normalFooterColor: #10838d;
+$speed: 0.5s;
 div.card-wrapper{
-  width:260px;
-  margin-bottom:20px;
-  width: 100%;
-  height: 100%;
+  width:210px;
+  height: 300px;
+  padding:10px;
+  margin-bottom: 20px;
+
+  min-height:200px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
 
+
+  .upload-thumb{
+    min-height: 100px;
+    overflow: hidden;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  button.action {
+    border-radius:  100%;
+    height:32px;
+    width:32px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .file-type-image{
+    width: 32px;
+    border-radius:100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border:1px white solid;
+    box-shadow: inset 1px 1px 0 #b7b7b7;
+
+    z-index: 2;
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    margin-right: 10px;
+    right : 30px;
+    top: 20px;
+  }
+
+  kendo-card {
+    height: 100%;
+    box-shadow: 1px 1px 2px white;
+    border-radius: 10px;
+  }
   .upload-card-content {
     &:before {
       content: "";
       position: absolute;
 //      z-index: -1;
-      top: -16px;
-      right: -16px;
-      background: #00838d;
+      top: 16px;
+      right: 16px;
+      background: $hoverColor;
+      opacity:1;
       height: 32px;
       width: 32px;
-      border-radius: 32px;
-      transform: scale(1);
+      border-radius: 100%;
+      transform: scale(0.1);
       transform-origin: 50% 50%;
       transition: transform 0.25s ease-out;
     }
     kendo-card-header,
     kendo-card-body,
     kendo-card-footer{
+      opacity:1;
       z-index:2;
+      height: 0px;
+      padding: 0px;
+      transition: all $speed ease-out;
     } ;
 
+    kendo-card-header{
+      background-color: $normalHeaderColor;
+    }
+
+    kendo-card-footer{
+      background-color:$normalFooterColor;
+    }
+
     &:hover:before {
-      transform: scale(21);
+      transform: scale(30);
+      opacity: 0.7;
+      transition: all $speed ease-out;
     }
 
     &:hover {
         transition: all 0.3s ease-out;
         color: #fcfcfc;
       }
-    }
 
-  }
+      kendo-card{
+        opacity:1;
+        transition: all 0s ease-out;
+      }
+      kendo-card-header,
+      kendo-card-body,
+      kendo-card-footer{
+        opacity: 1;
+        height: 48px;
+        padding: 12px 16px;
+      }
 
+      kendo-card-header,
+      kendo-card-footer{
+        background-color: $hoverColor;
 
-  .go-corner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    overflow: hidden;
-    top: 0;
-    right: 0;
-    background-color: #00838d;
-    border-radius: 0 4px 0 32px;
-  }
+        .file-type-image{
+          box-shadow: none;
+        }
+      }
+
+    }
 
-  .go-arrow {
-    margin-top: -4px;
-    margin-right: -4px;
-    color: white;
-    font-family: courier, sans;
   }
-}
 
+
+}

src/app/upload-cards/upload-cards.component.ts

 export class UploadCardsComponent implements OnInit {
   @Input() uploadId: number;
 
-  @Input() public card: any;
+  public thumbImage = 'url(https://svr2021.lawipac.com:8080/api/v1/upload-as-thumbnail/31)';
 
   constructor(private router: Router) { }
 
   ngOnInit(): void {
+    this.thumbImage = 'url(https://svr2021.lawipac.com:8080/api/v1/upload-as-thumbnail/' + this.uploadId + ')';
   }
 
   public onNavigateTo(id: number ): void{
     this.router.navigate(['/upload-details/' + id]);
   }
+  public onDownload(id: number ): void{
+    this.router.navigate(['/upload-details/' + id]);
+  }
+  public onSearch(id: number ): void{
+    this.router.navigate(['/upload-details/' + id]);
+  }
 }

src/app/upload-detail/upload-detail.component.html

 <div class="workspace">
-  <kendo-tabstrip [tabPosition]="'left'" class="fullheight-tab upload-details">
-    <kendo-tabstrip-tab title="Content" [selected]="true" cssClass="uploads-panel">
-      <ng-template kendoTabContent class="dark-panel">
+  <kendo-tabstrip [tabPosition]="'left'" class="fullheight-tab upload-details"
+                  (tabSelect)="onTabSelect($event)"
+                  [animate]="false"
+  >
+    <kendo-tabstrip-tab title="PreView" [selected]="true">
+      <ng-template kendoTabContent>
         <div class="dark-panel text-center" >
-          <iframe class="main-content" [src]="uploadAsPdfUrl | safeUrl" width="100%"></iframe>
-          <H1 *ngIf="uploadAsPdfUrl === ''"> No data </H1>
+          <div class="main-image-content" >
+            <img [src]="uploadAsPicUrl | safeUrl">
+          </div>
         </div>
       </ng-template>
     </kendo-tabstrip-tab>
+
+    <kendo-tabstrip-tab title="Content"  cssClass="uploads-panel">
+      <ng-template kendoTabContent class="dark-panel">
+        <div class="dark-panel text-center">
+          <div  class="main-content" [ngClass]="{'init-pdf': !initAnimation, 'ready-pdf': initAnimation}">
+            <kendo-loader *ngIf="!iframeLoaded || !initAnimation" [size]="'large'"></kendo-loader>
+            <iframe #pdf height="100%"
+                    [ngClass]="{'init-iframe': !iframeLoaded, 'ready-iframe': iframeLoaded}"
+                    [src]="uploadAsPdfUrl | safeUrl"
+                    (loadstart)="finishedLoading('loadstart')"
+                    (load)="finishedLoading('load')" ></iframe>
+          </div>
+        </div>
+      </ng-template>
+    </kendo-tabstrip-tab>
+
     <kendo-tabstrip-tab title="AI Analysis">
       <ng-template kendoTabContent>
-       <p> pane 2</p>
+        <div *ngIf="!scandone" class="dark-panel text-center" >
+          <div *ngIf="scanning" class="overlay" [ngClass]="{'scanning': scanning, 'fade-out': scandone }"></div>
+          <div *ngif="!scandone" class="main-content" [ngClass]="{'init-pdf': !initAnimation, 'ready-pdf': initAnimation, 'fade-out': scandone}">
+            <kendo-loader *ngIf="!iframeLoaded || !initAnimation" [size]="'large'"></kendo-loader>
+            <iframe #pdf height="100%"
+                    [ngClass]="{'init-iframe': !iframeLoaded, 'ready-iframe': iframeLoaded}"
+                    [src]="uploadAsPdfUrl | safeUrl"
+                    (loadstart)="finishedLoading('loadstart')"
+                    (load)="finishedLoading('load')" ></iframe>
+          </div>
+        </div>
+        <p> {{ ua.Input.FileName }}</p>
+        <p> {{ ua.Input.Id }}</p>
+
       </ng-template>
     </kendo-tabstrip-tab>
+
   </kendo-tabstrip>
+
+
+  <kendo-floatingactionbutton #fab class="init-fab" [ngClass]="{'init-fab': !initAnimation, 'ready-fab': initAnimation}"
+                              [icon]="'table'"
+                              [align]="{ horizontal: 'start', vertical: 'bottom' }"
+                              (click)="onClickFloatActionButton($event)"
+                              [title]="'List all Uploads'"
+                              [themeColor]="'light'"
+    positionMode="absolute"
+  >
+  </kendo-floatingactionbutton>
 </div>

src/app/upload-detail/upload-detail.component.scss

+:host {
+  overscroll-behavior: none;
+}
+
 div.workspace {
   height: calc(100vh - 48px);
+  overflow: hidden;
 }
 
 .fullheight-tab{
   height:100%;
 }
 
-.main-content{
-  min-height:100%;
-  margin:0;
-  box-shadow: 1px 1px 10px black;
-}
 
 .dark-panel {
   width:100%;
   padding: 10px 10px 10px 10px;
   scroll-behavior: auto;
   overflow: hidden;
+  position:relative;
+
+  .main-content,
+  .main-image-content{
+    position:relative;
+    min-height:100%;
+    width:100%;
+    display: inline-grid;
+    margin:0;
+    box-shadow: 1px 1px 10px black;
+  }
+
+  .main-image-content{
+    display:block;
+    text-align: center;
+    overflow: scroll;
+    img {
+      width:100%;
+    }
+  }
+
+  kendo-loader{
+    z-index:10;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+  }
+
+  .init-pdf{
+    top: -100vh; //invisible
+    transition: all 0.1s ease-in;
+  }
+
+  .ready-pdf{
+    top:0;
+    transition: all 0.7s ease-in;
+  }
+
+  .init-iframe {
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    transform: rotateY(90deg);
+  }
+  .ready-iframe{
+    width:100%;
+    height:100%;
+    visibility: visible;
+    transform: rotateY(0deg);
+    transition: all 0.1s ease-in-out;
+  }
+
+
+}
+
+.init-fab{
+  top : -10px !important;
+  transition: all 1s ease-in-out;
+}
+
+.ready-fab {
+  top : calc(100vh - 62px);
+  transition: all 1s ease-in-out;
+}
+
+div.overlay {
+  height: 10%;
+  background-color: black;
+  opacity: 0.5;
+  z-index: 10;
+  position: absolute;
+  width: 100%;
+}
+.scanning{
+  animation: scanning 1s infinite;
+}
+
+@keyframes scanning {
+  50% {
+    transform: translateY(80vh);
+  }
+}
+
+.fade-out {
+  opacity: 0;
+  transition: all 0.5s ease-out;
 }

src/app/upload-detail/upload-detail.component.ts

-import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {UploadAttachService} from '../service/upload.attach.service';
 import {UploadAnalysisModel} from '../models/upload.analysis.model';
 import {UploadModel} from '../models/upload.model';
-import {range} from '@progress/kendo-angular-dateinputs/dist/es2015/util';
+import {FloatingActionButtonComponent} from '@progress/kendo-angular-buttons';
+import {DrawerSelectEvent} from '@progress/kendo-angular-layout';
 
 
 
 export class UploadDetailComponent implements OnInit {
   @Input() uploadId: number;
   @Input() ua: UploadAnalysisModel = new UploadAnalysisModel({});
+  @ViewChild('fab', {static: true}) fab: FloatingActionButtonComponent;
+  @ViewChild('pdf', {static: false}) pdf: ElementRef;
   // 'http://africau.edu/images/default/sample.pdf';
   public uploadAsPicUrl =  'https://svr2021.lawipac.com:8080/api/v1/upload-as-pdf/default';
   public uploadAsPdfUrl = '';
-
-
-
+  public initAnimation = false;
+  public iframeLoaded = false;
+  public scanning = false;
+  public scandone = false;
   constructor(private us: UploadAttachService, private actRoute: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void {
     }
 
     this.ua.Id = this.uploadId;
-    this.uploadAsPicUrl = this.us.getUploadAsJpgUrl(this.ua.Id);
-    this.uploadAsPdfUrl = this.us.getUploadAsPdfUrl(this.ua.Id);
+    if ( this.uploadId > 0 ) {
+      this.uploadAsPicUrl = this.us.getUploadAsJpgUrl(this.ua.Id);
+      this.uploadAsPdfUrl = this.us.getUploadAsPdfUrl(this.ua.Id);
+    }
 
     this.loadUploadMeta();
     // this.loadUploadAnalysis();
+    // this.fabOffset  = { y : '-1px' };
+    this.fabSlideIn();
   }
 
   private loadUploadAnalysis(): void  {
     this.us.getUploadAnalysis(this.uploadId).subscribe(
       resp => {
+          this.scandone = true;
+          this.scanning = false;
           this.ua = new UploadAnalysisModel(resp);
           this.uploadId = this.ua.Id;
-          this.uploadAsPicUrl = this.us.getUploadAsJpgUrl(this.ua.Id);
-          this.uploadAsPdfUrl = this.us.getUploadAsPdfUrl(this.ua.Id);
-          console.log(this);
       }
     );
   }
   private loadUploadMeta(): void {
     this.us.getUploadMeta(this.uploadId).subscribe(
       resp => {
-        this.ua.Upload = new UploadModel(resp);
-        console.log(resp, this);
-        // this.ua.Upload = new UploadModel(resp);
-        // this.loadUploadAnalysis();
+        this.ua.Input = new UploadModel(resp);
       }
     );
   }
 
+  private fabSlideIn(): void {
+    setTimeout(() => {this.initAnimation = true; }, 1000);
+  }
+
+  public onClickFloatActionButton(e: any): void{
+    this.router.navigate(['/lender-uploads']);
+  }
 
+  public finishedLoading(status: string ): void{
+    if ( this.pdf === undefined )  {
+      return;
+    }
+     const el = this.pdf.nativeElement;
+     if ( el !== undefined && el.src === this.uploadAsPdfUrl) {
+       console.log('yes true',this);
+       this.iframeLoaded = true;
+     }
+  }
+  public onTabSelect( select: DrawerSelectEvent): void {
+    if ( select.index === 2 && ! this.iframeLoaded ) {
+      select.preventDefault();
+      return;
+    }
+    if ( ! this.scandone ) {
+      this.scanning = true;
+      this.loadUploadAnalysis();
+    }
+
+  }
 }