diff --git a/package-lock.json b/package-lock.json index 3402388..67f5018 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2600,9 +2600,9 @@ "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", diff --git a/package.json b/package.json index 87b1c93..8813b50 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5c8736d..c4f9a44 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,7 +10,7 @@ import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; 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'; @@ -170,6 +170,7 @@ import {SafeUrlPipe} from './pipe/safe.url.pipe'; BrowserAnimationsModule, DialogsModule, ButtonsModule, + FloatingActionButtonModule, GridModule, PDFModule, ExcelModule, diff --git a/src/app/lender-uploads/lender-uploads.component.html b/src/app/lender-uploads/lender-uploads.component.html index fdf3839..1b53e97 100644 --- a/src/app/lender-uploads/lender-uploads.component.html +++ b/src/app/lender-uploads/lender-uploads.component.html @@ -40,4 +40,7 @@ [total]="total" (pageChange)="onPageChange($event)"> + + + diff --git a/src/app/lender-uploads/lender-uploads.component.scss b/src/app/lender-uploads/lender-uploads.component.scss index e898e2d..91f2ddf 100644 --- a/src/app/lender-uploads/lender-uploads.component.scss +++ b/src/app/lender-uploads/lender-uploads.component.scss @@ -2,6 +2,7 @@ div.workarea{ height: calc(100vh - 48px); position:relative; background-color: #46495b; + overflow: scroll; } div.file-manager-bar{ @@ -64,5 +65,6 @@ div.file-manager-bar{ .bottom-pager { position: fixed; bottom: 0px; + z-index: 100; } diff --git a/src/app/models/upload.analysis.model.ts b/src/app/models/upload.analysis.model.ts index 1514f1d..dcce060 100644 --- a/src/app/models/upload.analysis.model.ts +++ b/src/app/models/upload.analysis.model.ts @@ -13,7 +13,7 @@ export class UploadAnalysisModel { public IsDuplicate: boolean; public Uid?: string; // client side unique id when upload - public Upload?: UploadModel; + public Input?: UploadModel; constructor(payload: Partial){ this.Id = payload.Id || 0 ; @@ -44,7 +44,7 @@ export class UploadAnalysisModel { this.IsDuplicate = payload.IsDuplicate || false; this.Uid = payload.Uid || '' ; - this.Upload = new UploadModel(payload.Upload || {}); + this.Input = new UploadModel(payload.Input || {}); } } diff --git a/src/app/upload-cards/upload-cards.component.html b/src/app/upload-cards/upload-cards.component.html index 18ec02e..33ab9bc 100644 --- a/src/app/upload-cards/upload-cards.component.html +++ b/src/app/upload-cards/upload-cards.component.html @@ -1,24 +1,21 @@ -
- +
+
+ + - -
-

card.headerTitle

-

card.headerSubtitle

-
+

some title

-

upload-cards works!

-

this is upload id {{ uploadId }}

+

{{uploadId}}

+ -

footer

+ + + -
-
- → -
-
+ + diff --git a/src/app/upload-cards/upload-cards.component.scss b/src/app/upload-cards/upload-cards.component.scss index 386bcc5..6e1770f 100644 --- a/src/app/upload-cards/upload-cards.component.scss +++ b/src/app/upload-cards/upload-cards.component.scss @@ -1,25 +1,70 @@ +$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; } @@ -27,11 +72,25 @@ div.card-wrapper{ 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 { @@ -44,30 +103,31 @@ div.card-wrapper{ 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; } -} + +} diff --git a/src/app/upload-cards/upload-cards.component.ts b/src/app/upload-cards/upload-cards.component.ts index d74becf..5ea6fd2 100644 --- a/src/app/upload-cards/upload-cards.component.ts +++ b/src/app/upload-cards/upload-cards.component.ts @@ -9,14 +9,21 @@ import {Router} from '@angular/router'; 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]); + } } diff --git a/src/app/upload-detail/upload-detail.component.html b/src/app/upload-detail/upload-detail.component.html index 2da00ce..b51a79d 100644 --- a/src/app/upload-detail/upload-detail.component.html +++ b/src/app/upload-detail/upload-detail.component.html @@ -1,17 +1,62 @@
- - - + + +
- -

No data

+
+ +
+ + + +
+
+ + +
+
+ + + -

pane 2

+
+
+
+ + +
+
+

{{ ua.Input.FileName }}

+

{{ ua.Input.Id }}

+ + + + + +
diff --git a/src/app/upload-detail/upload-detail.component.scss b/src/app/upload-detail/upload-detail.component.scss index ea2009f..f3d957b 100644 --- a/src/app/upload-detail/upload-detail.component.scss +++ b/src/app/upload-detail/upload-detail.component.scss @@ -1,16 +1,16 @@ +: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%; @@ -19,4 +19,91 @@ div.workspace { 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; } diff --git a/src/app/upload-detail/upload-detail.component.ts b/src/app/upload-detail/upload-detail.component.ts index 2a9d517..101a018 100644 --- a/src/app/upload-detail/upload-detail.component.ts +++ b/src/app/upload-detail/upload-detail.component.ts @@ -1,9 +1,10 @@ -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'; @@ -15,12 +16,15 @@ import {range} from '@progress/kendo-angular-dateinputs/dist/es2015/util'; 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 { @@ -30,34 +34,62 @@ export class UploadDetailComponent implements OnInit { } 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(); + } + + } }