From 7053cc50d07dd322c1fd4a9926eadffa90436636 Mon Sep 17 00:00:00 2001 From: Pamela Date: Mon, 22 Apr 2024 09:26:31 +0300 Subject: [PATCH 1/8] resource download multiple --- .../src/app/components/components.module.ts | 4 +- .../resource-download-multiple.component.html | 43 +++++++ .../resource-download-multiple.component.scss | 5 + ...source-download-multiple.component.spec.ts | 21 ++++ .../resource-download-multiple.component.ts | 119 ++++++++++++++++++ .../resource-download.component.html | 9 +- .../resource-download.component.ts | 12 +- .../components/resource-item/file/file.scss | 4 +- .../collection/collection.component.html | 9 ++ .../collection/collection.component.scss | 6 + .../pages/collection/collection.component.ts | 9 +- .../app/pages/collection/collection.module.ts | 2 +- yarn.lock | 2 +- 13 files changed, 236 insertions(+), 9 deletions(-) create mode 100644 apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html create mode 100644 apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss create mode 100644 apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.spec.ts create mode 100644 apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts diff --git a/apps/picsa-tools/resources-tool/src/app/components/components.module.ts b/apps/picsa-tools/resources-tool/src/app/components/components.module.ts index 99c01fde4..354122c45 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/components.module.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/components.module.ts @@ -12,6 +12,7 @@ import { ResourceItemLinkComponent, ResourceItemVideoComponent, } from './resource-item'; +import { ResourceDownloadMultipleComponent } from './resource-download-multiple/resource-download-multiple.component'; const components = [ ResourceDownloadComponent, @@ -19,11 +20,12 @@ const components = [ ResourceItemFileComponent, ResourceItemLinkComponent, ResourceItemVideoComponent, + ResourceDownloadMultipleComponent ]; @NgModule({ imports: [CommonModule, PicsaTranslateModule, PicsaVideoPlayerModule, ResourcesMaterialModule, RouterModule], - exports: [...components, ResourcesMaterialModule, PicsaTranslateModule], + exports: [...components, ResourcesMaterialModule, PicsaTranslateModule,], declarations: components, providers: [], }) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html new file mode 100644 index 000000000..af5863fae --- /dev/null +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html @@ -0,0 +1,43 @@ + + + +
+ + + +
+ + + \ No newline at end of file diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss new file mode 100644 index 000000000..02704f0f3 --- /dev/null +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss @@ -0,0 +1,5 @@ +.downloads-button { + display: flex; + align-items: center; + margin-left: auto; + } \ No newline at end of file diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.spec.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.spec.ts new file mode 100644 index 000000000..01e2f2b4d --- /dev/null +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ResourceDownloadMultipleComponent } from './resource-download-multiple.component'; + +describe('ResourceDownloadMultipleComponent', () => { + let component: ResourceDownloadMultipleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ResourceDownloadMultipleComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ResourceDownloadMultipleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts new file mode 100644 index 000000000..959ef171a --- /dev/null +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts @@ -0,0 +1,119 @@ +import { Component, + EventEmitter, + Input, + OnDestroy, + Output, } from '@angular/core'; +import { RxAttachment} from 'rxdb'; +import { IResourceFile } from '../../schemas'; +import { Subject, Subscription, takeUntil } from 'rxjs'; +import { FileService } from '@picsa/shared/services/core/file.service'; + + +type IDownloadStatus = 'ready' | 'pending' | 'complete' | 'error'; + +@Component({ + selector: 'picsa-resource-download-multiple', + templateUrl: './resource-download-multiple.component.html', + styleUrl: './resource-download-multiple.component.scss', +}) + +export class ResourceDownloadMultipleComponent implements OnDestroy { + private _dbDoc: IResourceFile[] =[]; + public attachment?: RxAttachment; + + downloadStatus: IDownloadStatus = 'ready'; + downloadProgress = 0; + totalSize = 0; + totalSizeMB = 0; + + private componentDestroyed$ = new Subject(); + private downloadSubscription?: Subscription; + + @Output() downloadCompleted = new EventEmitter(); + + @Input() styleVariant: 'primary' | 'white' = 'primary'; + + @Input() size = 48; + + @Input() hideOnComplete = false; + + @Input() set dbDoc(dbDoc: IResourceFile[]) { + this._dbDoc = dbDoc; + } + + + constructor( + private fileService: FileService, + ) {} + + public get sizePx() { + return `${this.size}px`; + } + + public get resource() { + return this._dbDoc + ; + } + + ngOnInit(): void { + this.calculateTotalSize(); + } + + ngOnDestroy(): void { + this.componentDestroyed$.next(true); + this.componentDestroyed$.complete(); + } + + public calculateTotalSize(): void { + if (!this._dbDoc || this._dbDoc.length === 0) { + console.log('No resources available'); + return; + } + + this.totalSize = this._dbDoc.reduce((acc, doc) => acc + doc.size_kb, 0); + const totalSizeMB = this.totalSize / 1024; + this.totalSizeMB = +totalSizeMB.toFixed(2); + } + + public downloadAllResources(): void { + this.downloadStatus = 'pending'; + this.downloadProgress = 0; + + const downloadQueue = [...this.resource]; + const downloadNext = () => { + if (downloadQueue.length === 0) { + this.downloadStatus = 'complete'; + this.downloadCompleted.emit(); + return; + } + + const resource = downloadQueue.shift(); + if (resource) { + this.fileService.downloadFile(resource.url, 'blob').subscribe({ + next: ({ progress }) => { + this.downloadProgress = progress; + }, + error: (error) => { + this.downloadStatus = 'error'; + console.error(error); + }, + complete: () => { + downloadNext(); + } + }); + } + }; + + downloadNext(); + } + + public cancelDownload(): void { + if (this.downloadSubscription) { + this.downloadSubscription.unsubscribe(); + this.downloadSubscription = undefined; + } + this.downloadStatus = 'ready'; + this.downloadProgress = 0; + } + } + diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html index 9ea234e97..042a416a5 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html @@ -3,9 +3,14 @@ (click)="downloadResource()" *ngIf="downloadStatus === 'ready'" [attr.data-style-variant]="styleVariant" -> - download +> + download + {{ totalSize }}MB + + +
; private download$?: Subscription; private componentDestroyed$ = new Subject(); + totalSize = 0; @Input() styleVariant: 'primary' | 'white' = 'primary'; @Input() size = 48; - @Input() set dbDoc(dbDoc: RxDocument) { this._dbDoc = dbDoc; if (dbDoc) { @@ -73,11 +73,21 @@ export class ResourceDownloadComponent implements OnDestroy { }); } + ngOnInit(): void { + this.calculateTotalSize(); + } + ngOnDestroy() { this.componentDestroyed$.next(true); this.componentDestroyed$.complete(); } + public calculateTotalSize(): void { + this.totalSize = this.resource.size_kb / 1024; // Convert KB to MB + this.totalSize = +this.totalSize.toFixed(1); + console.log(this.totalSize) + } + public downloadResource() { this.downloadStatus = 'pending'; this.downloadProgress = 0; diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.scss b/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.scss index fe4d0b2cf..5b5a242ea 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.scss +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.scss @@ -21,8 +21,8 @@ background: var(--color-primary); color: white; border-radius: 8px; - width: 48px; - height: 48px; + width: 70px; + height: 70px; align-items: center; justify-content: center; &[data-button-style='inverted'] { diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html index d123ce3e9..eed9ffd31 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html @@ -8,7 +8,16 @@ {{ collection.title | translate }} {{ collection.description || '' }} + +
diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss index 0294f3ed7..f505046b7 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss @@ -11,3 +11,9 @@ padding: 4px; color: white; } +.total-szie{ + font-size: 15px; + align-items: center; + justify-content: center; + display: flex; +} diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts index 6abe0a267..62eeda7d1 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, Input } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { PicsaCommonComponentsService } from '@picsa/components/src'; import { RxDocument } from 'rxdb'; @@ -12,6 +12,7 @@ import { ResourcesToolService } from '../../services/resources-tool.service'; templateUrl: './collection.component.html', styleUrls: ['./collection.component.scss'], }) + export class CollectionComponent implements OnInit, OnDestroy { public collection: IResourceCollection | undefined; public files: IResourceFile[] = []; @@ -22,6 +23,12 @@ export class CollectionComponent implements OnInit, OnDestroy { private componentDestroyed$ = new Subject(); + @Input() styleVariant: 'primary' | 'white' = 'primary'; + + @Input() size = 48; + + @Input() hideOnComplete = false; + constructor( private service: ResourcesToolService, private route: ActivatedRoute, diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.module.ts b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.module.ts index 602dc9f13..f1f832e31 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.module.ts +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.module.ts @@ -16,7 +16,7 @@ import { CollectionRoutingModule } from './collection-routing.module'; PicsaTranslateModule, PicsaCommonComponentsModule, ResourcesComponentsModule, - ResourcesMaterialModule, + ResourcesMaterialModule ], }) export class CollectionModule {} diff --git a/yarn.lock b/yarn.lock index 0d2fe695b..4e9895fc4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16900,7 +16900,7 @@ __metadata: "leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617": version: 1.0.4 resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617" - checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc + checksum: 253998170af27f886d05b245c85429767e272647221daaf8d94ff5b86f75b8cbb96cc76a8a88492243166a214bc3b66b3ae704a81f74c862f09ac6c9495f731e languageName: node linkType: hard From b77d690281fefd4999f6a72a77d2cd373308d76d Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 09:24:25 -0700 Subject: [PATCH 2/8] refactor: resource size layout --- .../src/app/components/components.module.ts | 16 ++++++++++++---- .../resource-download.component.html | 13 +++++++------ .../resource-download.component.scss | 19 +++++++++++++++++++ .../resource-download.component.ts | 15 ++++----------- .../collection/collection.component.html | 19 +++++++++---------- .../collection/collection.component.scss | 6 ------ .../pages/collection/collection.component.ts | 3 +-- libs/shared/src/pipes/sizeMB.ts | 4 +++- 8 files changed, 55 insertions(+), 40 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/components.module.ts b/apps/picsa-tools/resources-tool/src/app/components/components.module.ts index 354122c45..468f2bc27 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/components.module.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/components.module.ts @@ -3,16 +3,17 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { PicsaVideoPlayerModule } from '@picsa/shared/features'; import { PicsaTranslateModule } from '@picsa/shared/modules'; +import { SizeMBPipe } from '@picsa/shared/pipes/sizeMB'; import { ResourcesMaterialModule } from '../material.module'; import { ResourceDownloadComponent } from './resource-download/resource-download.component'; +import { ResourceDownloadMultipleComponent } from './resource-download-multiple/resource-download-multiple.component'; import { ResourceItemCollectionComponent, ResourceItemFileComponent, ResourceItemLinkComponent, ResourceItemVideoComponent, } from './resource-item'; -import { ResourceDownloadMultipleComponent } from './resource-download-multiple/resource-download-multiple.component'; const components = [ ResourceDownloadComponent, @@ -20,12 +21,19 @@ const components = [ ResourceItemFileComponent, ResourceItemLinkComponent, ResourceItemVideoComponent, - ResourceDownloadMultipleComponent + ResourceDownloadMultipleComponent, ]; @NgModule({ - imports: [CommonModule, PicsaTranslateModule, PicsaVideoPlayerModule, ResourcesMaterialModule, RouterModule], - exports: [...components, ResourcesMaterialModule, PicsaTranslateModule,], + imports: [ + CommonModule, + PicsaTranslateModule, + PicsaVideoPlayerModule, + ResourcesMaterialModule, + RouterModule, + SizeMBPipe, + ], + exports: [...components, ResourcesMaterialModule, PicsaTranslateModule, SizeMBPipe], declarations: components, providers: [], }) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html index 042a416a5..8bc5034f4 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html @@ -3,12 +3,13 @@ (click)="downloadResource()" *ngIf="downloadStatus === 'ready'" [attr.data-style-variant]="styleVariant" -> - download - {{ totalSize }}MB - - +> +
+ download + @if(showSize){ + {{ resource.size_kb | sizeMB }} MB + } +
diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.scss b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.scss index bf1fd6b80..6c24024f0 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.scss +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.scss @@ -20,3 +20,22 @@ mat-progress-spinner[data-style-variant='white'] { button[data-style-variant='white'] { color: white; } + +// HACK - allow for custom icon + text placement within button that is 72px x 72px (12px padding) +.download-button-inner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + height: 72px; + width: 72px; + top: -12px; + left: -12px; + overflow: hidden; +} +.resource-size { + font-size: 16px; + margin-top: 8px; + margin-bottom: -4px; +} diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts index 9b75a00ae..11c9223c9 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts @@ -31,11 +31,14 @@ export class ResourceDownloadComponent implements OnDestroy { private _dbDoc: RxDocument; private download$?: Subscription; private componentDestroyed$ = new Subject(); - totalSize = 0; + + /** Show size text */ + @Input() showSize: boolean; @Input() styleVariant: 'primary' | 'white' = 'primary'; @Input() size = 48; + @Input() set dbDoc(dbDoc: RxDocument) { this._dbDoc = dbDoc; if (dbDoc) { @@ -73,21 +76,11 @@ export class ResourceDownloadComponent implements OnDestroy { }); } - ngOnInit(): void { - this.calculateTotalSize(); - } - ngOnDestroy() { this.componentDestroyed$.next(true); this.componentDestroyed$.complete(); } - public calculateTotalSize(): void { - this.totalSize = this.resource.size_kb / 1024; // Convert KB to MB - this.totalSize = +this.totalSize.toFixed(1); - console.log(this.totalSize) - } - public downloadResource() { this.downloadStatus = 'pending'; this.downloadProgress = 0; diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html index eed9ffd31..b26980d54 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html @@ -8,16 +8,7 @@ {{ collection.title | translate }} {{ collection.description || '' }} - -
@@ -34,7 +25,15 @@
- {{ 'Files' | translate }} +
+ {{ 'Files' | translate }} + +
+
diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss index f505046b7..0294f3ed7 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.scss @@ -11,9 +11,3 @@ padding: 4px; color: white; } -.total-szie{ - font-size: 15px; - align-items: center; - justify-content: center; - display: flex; -} diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts index 62eeda7d1..bed657134 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, Input } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { PicsaCommonComponentsService } from '@picsa/components/src'; import { RxDocument } from 'rxdb'; @@ -12,7 +12,6 @@ import { ResourcesToolService } from '../../services/resources-tool.service'; templateUrl: './collection.component.html', styleUrls: ['./collection.component.scss'], }) - export class CollectionComponent implements OnInit, OnDestroy { public collection: IResourceCollection | undefined; public files: IResourceFile[] = []; diff --git a/libs/shared/src/pipes/sizeMB.ts b/libs/shared/src/pipes/sizeMB.ts index fdc8fdbaa..3c7de0c2b 100644 --- a/libs/shared/src/pipes/sizeMB.ts +++ b/libs/shared/src/pipes/sizeMB.ts @@ -8,6 +8,8 @@ import { Pipe, PipeTransform } from '@angular/core'; export class SizeMBPipe implements PipeTransform { transform(value: number, ...args: any[]): any { const mb = value / 1024; - return Math.round(mb * 10) / 10; + // round to 1 decimal place if less than 10MB + const power = mb < 10 ? 10 : 1; + return Math.round(mb * power) / power; } } From 3f3ac5d4d0728a3075ed2a4caef01d48309bda78 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 09:25:38 -0700 Subject: [PATCH 3/8] chore: code formatting --- .../resource-download-multiple.component.html | 72 ++++---- .../resource-download-multiple.component.ts | 165 ++++++++---------- .../components/resource-item/file/file.html | 19 +- 3 files changed, 112 insertions(+), 144 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html index af5863fae..c8df8e6df 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html @@ -1,43 +1,41 @@ - - + [attr.data-style-variant]="styleVariant" +> + download + {{ 'Download All' | translate }} + {{ totalSize | sizeMB }} MB + -
- - - -
+
+ + - - \ No newline at end of file +
+ diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts index 959ef171a..1923e6ed6 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts @@ -1,119 +1,90 @@ -import { Component, - EventEmitter, - Input, - OnDestroy, - Output, } from '@angular/core'; -import { RxAttachment} from 'rxdb'; -import { IResourceFile } from '../../schemas'; -import { Subject, Subscription, takeUntil } from 'rxjs'; +import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; import { FileService } from '@picsa/shared/services/core/file.service'; +import { RxAttachment } from 'rxdb'; +import { Subject, Subscription } from 'rxjs'; +import { IResourceFile } from '../../schemas'; type IDownloadStatus = 'ready' | 'pending' | 'complete' | 'error'; @Component({ - selector: 'picsa-resource-download-multiple', + selector: 'resource-download-multiple', templateUrl: './resource-download-multiple.component.html', styleUrl: './resource-download-multiple.component.scss', }) - export class ResourceDownloadMultipleComponent implements OnDestroy { - private _dbDoc: IResourceFile[] =[]; - public attachment?: RxAttachment; - - downloadStatus: IDownloadStatus = 'ready'; - downloadProgress = 0; - totalSize = 0; - totalSizeMB = 0; - - private componentDestroyed$ = new Subject(); - private downloadSubscription?: Subscription; + private _resources: IResourceFile[]; + public attachment?: RxAttachment; - @Output() downloadCompleted = new EventEmitter(); + downloadStatus: IDownloadStatus = 'ready'; + downloadProgress = 0; + totalSize = 0; - @Input() styleVariant: 'primary' | 'white' = 'primary'; + private componentDestroyed$ = new Subject(); + private downloadSubscription?: Subscription; - @Input() size = 48; + @Output() downloadCompleted = new EventEmitter(); - @Input() hideOnComplete = false; + @Input() styleVariant: 'primary' | 'white' = 'primary'; - @Input() set dbDoc(dbDoc: IResourceFile[]) { - this._dbDoc = dbDoc; - } - - - constructor( - private fileService: FileService, - ) {} - - public get sizePx() { - return `${this.size}px`; - } - - public get resource() { - return this._dbDoc - ; - } + @Input() size = 48; - ngOnInit(): void { - this.calculateTotalSize(); - } + @Input() hideOnComplete = false; - ngOnDestroy(): void { - this.componentDestroyed$.next(true); - this.componentDestroyed$.complete(); - } - - public calculateTotalSize(): void { - if (!this._dbDoc || this._dbDoc.length === 0) { - console.log('No resources available'); + @Input() set resources(resources: IResourceFile[]) { + this._resources = resources; + this.calculateTotalSize(resources); + } + + constructor(private fileService: FileService) {} + + ngOnDestroy(): void { + this.componentDestroyed$.next(true); + this.componentDestroyed$.complete(); + } + + public calculateTotalSize(resources: IResourceFile[]): void { + this.totalSize = resources.reduce((acc, doc) => acc + doc.size_kb, 0); + } + + public downloadAllResources(): void { + this.downloadStatus = 'pending'; + this.downloadProgress = 0; + + const downloadQueue = [...this.resources]; + const downloadNext = () => { + if (downloadQueue.length === 0) { + this.downloadStatus = 'complete'; + this.downloadCompleted.emit(); return; } - - this.totalSize = this._dbDoc.reduce((acc, doc) => acc + doc.size_kb, 0); - const totalSizeMB = this.totalSize / 1024; - this.totalSizeMB = +totalSizeMB.toFixed(2); - } - - public downloadAllResources(): void { - this.downloadStatus = 'pending'; - this.downloadProgress = 0; - - const downloadQueue = [...this.resource]; - const downloadNext = () => { - if (downloadQueue.length === 0) { - this.downloadStatus = 'complete'; - this.downloadCompleted.emit(); - return; - } - - const resource = downloadQueue.shift(); - if (resource) { - this.fileService.downloadFile(resource.url, 'blob').subscribe({ - next: ({ progress }) => { - this.downloadProgress = progress; - }, - error: (error) => { - this.downloadStatus = 'error'; - console.error(error); - }, - complete: () => { - downloadNext(); - } - }); - } - }; - - downloadNext(); - } - - public cancelDownload(): void { - if (this.downloadSubscription) { - this.downloadSubscription.unsubscribe(); - this.downloadSubscription = undefined; + + const resource = downloadQueue.shift(); + if (resource) { + this.fileService.downloadFile(resource.url, 'blob').subscribe({ + next: ({ progress }) => { + this.downloadProgress = progress; + }, + error: (error) => { + this.downloadStatus = 'error'; + console.error(error); + }, + complete: () => { + downloadNext(); + }, + }); } - this.downloadStatus = 'ready'; - this.downloadProgress = 0; - } + }; + + downloadNext(); } + public cancelDownload(): void { + if (this.downloadSubscription) { + this.downloadSubscription.unsubscribe(); + this.downloadSubscription = undefined; + } + this.downloadStatus = 'ready'; + this.downloadProgress = 0; + } +} diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.html b/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.html index da2a6cf0c..09604f8fe 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/file/file.html @@ -16,19 +16,18 @@ styleVariant="white" [size]="36" [hideOnComplete]="true" + [showSize]="true" (attachmentChange)="handleAttachmentChange($event)" >
- - - - - + @switch (resource.subtype) { @case ('video') { + + + } @default { + + + + } }
From 5bba9e39f51f3b7ea6a94003c51251fb069d707a Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 09:38:35 -0700 Subject: [PATCH 4/8] chore: code tidying --- .../resource-download-multiple.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts index 1923e6ed6..6d5bb9044 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts @@ -51,7 +51,7 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { this.downloadStatus = 'pending'; this.downloadProgress = 0; - const downloadQueue = [...this.resources]; + const downloadQueue = [...this._resources]; const downloadNext = () => { if (downloadQueue.length === 0) { this.downloadStatus = 'complete'; From ec3fc1f05828627ffbbf1794b93d2078d5ef5628 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 10:53:41 -0700 Subject: [PATCH 5/8] refactor: resource dl from service --- .../resource-download.component.html | 29 +++++++---- .../resource-download.component.ts | 50 ++++--------------- .../app/services/resources-tool.service.ts | 42 +++++++++++++++- 3 files changed, 70 insertions(+), 51 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html index 8bc5034f4..d3f1cf23f 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.html @@ -1,9 +1,6 @@ - - -
+} + +@if(downloadStatus==='pending'){ +
close
+} + +@if(downloadStatus==='finalizing'){ + +} + + +@if(downloadStatus==='complete'){ +} diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts index 11c9223c9..9a782c36b 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts @@ -7,15 +7,11 @@ import { OnDestroy, Output, } from '@angular/core'; -import { FileService } from '@picsa/shared/services/core/file.service'; -import { _wait } from '@picsa/utils'; import { RxAttachment, RxDocument } from 'rxdb'; import { Subject, Subscription, takeUntil } from 'rxjs'; import { IResourceFile } from '../../schemas'; -import { ResourcesToolService } from '../../services/resources-tool.service'; - -type IDownloadStatus = 'ready' | 'pending' | 'complete' | 'error'; +import { IDownloadStatus, ResourcesToolService } from '../../services/resources-tool.service'; @Component({ selector: 'resource-download', @@ -51,11 +47,7 @@ export class ResourceDownloadComponent implements OnDestroy { /** Emit downloaded file updates */ @Output() attachmentChange = new EventEmitter | undefined>(); - constructor( - private service: ResourcesToolService, - private fileService: FileService, - private cdr: ChangeDetectorRef - ) {} + constructor(private service: ResourcesToolService, private cdr: ChangeDetectorRef) {} public get sizePx() { return `${this.size}px`; @@ -82,36 +74,16 @@ export class ResourceDownloadComponent implements OnDestroy { } public downloadResource() { - this.downloadStatus = 'pending'; - this.downloadProgress = 0; - let downloadData: Blob; - this.download$ = this.fileService.downloadFile(this.resource.url, 'blob').subscribe({ - next: ({ progress, data }) => { - this.downloadProgress = progress; - // NOTE - might be called multiple times before completing so avoid persisting data here - if (progress === 100) { - downloadData = data as Blob; - } - this.cdr.markForCheck(); - }, - error: (error) => { - this.downloadStatus = 'error'; - this.cdr.markForCheck(); - console.error(error); - throw error; - }, - complete: async () => { - // give small timeout to allow UI to update - await _wait(100); - this.persistDownload(downloadData); - }, + const { download$, progress$, status$ } = this.service.triggerResourceDownload(this._dbDoc); + progress$.subscribe((progress) => { + this.downloadProgress = progress; + this.cdr.markForCheck(); }); - } - - private async persistDownload(data: Blob) { - await this.service.putFileAttachment(this._dbDoc, data); - this.downloadStatus = 'complete'; - this.cdr.markForCheck(); + status$.subscribe((status) => { + this.downloadStatus = status; + this.cdr.markForCheck(); + }); + this.download$ = download$; } /** Cancel ongoing download */ diff --git a/apps/picsa-tools/resources-tool/src/app/services/resources-tool.service.ts b/apps/picsa-tools/resources-tool/src/app/services/resources-tool.service.ts index aef6425fd..5fde97d2d 100644 --- a/apps/picsa-tools/resources-tool/src/app/services/resources-tool.service.ts +++ b/apps/picsa-tools/resources-tool/src/app/services/resources-tool.service.ts @@ -8,15 +8,20 @@ import { AnalyticsService } from '@picsa/shared/services/core/analytics.service' import { PicsaDatabase_V2_Service, PicsaDatabaseAttachmentService } from '@picsa/shared/services/core/db_v2'; import { FileService } from '@picsa/shared/services/core/file.service'; import { NativeStorageService } from '@picsa/shared/services/native'; -import { arrayToHashmap } from '@picsa/utils'; +import { _wait, arrayToHashmap } from '@picsa/utils'; import { RxCollection, RxDocument } from 'rxdb'; -import { lastValueFrom } from 'rxjs'; +import { BehaviorSubject, lastValueFrom } from 'rxjs'; import { DB_COLLECTION_ENTRIES, DB_FILE_ENTRIES, DB_LINK_ENTRIES } from '../data'; import * as schemas from '../schemas'; +export type IDownloadStatus = 'ready' | 'pending' | 'finalizing' | 'complete' | 'error'; + @Injectable({ providedIn: 'root' }) export class ResourcesToolService extends PicsaAsyncService { + /** Track active downloadStatus by resource ID */ + public downloads: Record = {}; + constructor( private dbService: PicsaDatabase_V2_Service, private dbAttachmentService: PicsaDatabaseAttachmentService, @@ -110,6 +115,39 @@ export class ResourcesToolService extends PicsaAsyncService { return this.dbAttachmentService.removeAttachment(doc, doc.filename); } + public triggerResourceDownload(doc: RxDocument) { + let downloadData: Blob; + // Create observables that can be subscribed to from component that triggers method + const progress$ = new BehaviorSubject(0); + const status$ = new BehaviorSubject('pending'); + // Handle download, also passing back subscription so that component can cancel if required + const download$ = this.fileService.downloadFile(doc.url, 'blob').subscribe({ + next: ({ progress, data }) => { + progress$.next(progress); + // NOTE - might be called multiple times before completing so avoid persisting data here + if (progress === 100) { + downloadData = data as Blob; + status$.next('finalizing'); + } + }, + error: (error) => { + status$.next('error'); + console.error(error); + throw error; + }, + complete: async () => { + // give small timeout to allow UI to update + await _wait(100); + // persist to document attachment + await this.putFileAttachment(doc, downloadData); + status$.next('complete'); + status$.complete(); + progress$.complete(); + }, + }); + return { progress$, status$, download$ }; + } + private async populateHardcodedResources() { // Remove resources marked for deletion (TODO - find cleaner method to keep in sync) // TODO - process after cache check From f20a6ae8715c6a537d80807bbc45e4043f85cb5e Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 10:54:26 -0700 Subject: [PATCH 6/8] style: download multiple button --- .../resource-download-multiple.component.html | 48 ++++++++----------- .../resource-download-multiple.component.scss | 13 +++-- .../collection/collection.component.html | 6 +-- 3 files changed, 30 insertions(+), 37 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html index c8df8e6df..dad2801e8 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html @@ -1,41 +1,33 @@ - +} @case ('pending') { + + -
+
+ + +} @case ('complete') { + +} } diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss index 02704f0f3..4b0975472 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.scss @@ -1,5 +1,10 @@ .downloads-button { - display: flex; - align-items: center; - margin-left: auto; - } \ No newline at end of file + display: flex; + align-items: center; + margin-left: auto; +} +.download-progress { + display: flex; + align-items: center; + gap: 16px; +} diff --git a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html index b26980d54..755917820 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html +++ b/apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html @@ -27,11 +27,7 @@
{{ 'Files' | translate }} - +
From 95f41492ae51e60c557325b4366c8366322a9bf9 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 11:16:43 -0700 Subject: [PATCH 7/8] refactor: resource download multiple --- .../resource-download-multiple.component.html | 23 ++-- .../resource-download-multiple.component.ts | 112 +++++++++++------- 2 files changed, 81 insertions(+), 54 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html index dad2801e8..b9ef26e60 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html @@ -1,11 +1,16 @@ -@switch (downloadStatus) { @case ('ready') { +@switch (downloadStatus) { + + +@case ('ready') { -} @case ('pending') { +} + +@case ('pending') { +} -} @case ('complete') { - - } } diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts index 6d5bb9044..802302003 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts @@ -1,11 +1,10 @@ -import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; +import { Component, Input, OnDestroy } from '@angular/core'; import { FileService } from '@picsa/shared/services/core/file.service'; -import { RxAttachment } from 'rxdb'; -import { Subject, Subscription } from 'rxjs'; +import { RxDocument } from 'rxdb'; +import { lastValueFrom, Subject, Subscription } from 'rxjs'; import { IResourceFile } from '../../schemas'; - -type IDownloadStatus = 'ready' | 'pending' | 'complete' | 'error'; +import { IDownloadStatus, ResourcesToolService } from '../../services/resources-tool.service'; @Component({ selector: 'resource-download-multiple', @@ -14,76 +13,101 @@ type IDownloadStatus = 'ready' | 'pending' | 'complete' | 'error'; }) export class ResourceDownloadMultipleComponent implements OnDestroy { private _resources: IResourceFile[]; - public attachment?: RxAttachment; + private pendingDocs: RxDocument[] = []; - downloadStatus: IDownloadStatus = 'ready'; + downloadStatus: IDownloadStatus; downloadProgress = 0; + downloadCount = 0; totalSize = 0; + totalCount = 0; private componentDestroyed$ = new Subject(); private downloadSubscription?: Subscription; - @Output() downloadCompleted = new EventEmitter(); - - @Input() styleVariant: 'primary' | 'white' = 'primary'; - - @Input() size = 48; - @Input() hideOnComplete = false; @Input() set resources(resources: IResourceFile[]) { this._resources = resources; - this.calculateTotalSize(resources); + this.totalCount = resources.length; + this.getPendingDownloads(resources); } - constructor(private fileService: FileService) {} + constructor(private service: ResourcesToolService, private fileService: FileService) {} ngOnDestroy(): void { this.componentDestroyed$.next(true); this.componentDestroyed$.complete(); } - public calculateTotalSize(resources: IResourceFile[]): void { - this.totalSize = resources.reduce((acc, doc) => acc + doc.size_kb, 0); + /** + * Iterate over list of input resources, checking which already have attachments downloaded + * and generating summary of pending downloads with total size + */ + public async getPendingDownloads(resources: IResourceFile[]) { + let totalSize = 0; + let totalCount = 0; + let downloadCount = 0; + const pendingDocs: RxDocument[] = []; + for (const resource of resources) { + const dbDoc = await this.service.dbFiles.findOne(resource.id).exec(); + if (dbDoc) { + totalCount++; + // check + const attachment = dbDoc.getAttachment(dbDoc.filename); + if (attachment) { + downloadCount++; + } else { + pendingDocs.push(dbDoc); + totalSize += dbDoc.size_kb; + } + } + } + this.totalCount = totalCount; + this.totalSize = totalSize; + this.downloadCount = downloadCount; + this.pendingDocs = pendingDocs; + this.downloadStatus = totalSize > 0 ? 'ready' : 'complete'; } - public downloadAllResources(): void { + public async downloadAllResources() { + // recalc sizes to ensure pending docs correct (in case of single file download) + await this.getPendingDownloads(this._resources); + + // handle all downloads this.downloadStatus = 'pending'; - this.downloadProgress = 0; - const downloadQueue = [...this._resources]; - const downloadNext = () => { - if (downloadQueue.length === 0) { - this.downloadStatus = 'complete'; - this.downloadCompleted.emit(); - return; - } + for (const doc of this.pendingDocs) { + await this.downloadNextResource(doc); + } + // refresh UI + await this.getPendingDownloads(this._resources); + this.downloadStatus = 'complete'; + return; + } - const resource = downloadQueue.shift(); - if (resource) { - this.fileService.downloadFile(resource.url, 'blob').subscribe({ - next: ({ progress }) => { - this.downloadProgress = progress; - }, - error: (error) => { - this.downloadStatus = 'error'; - console.error(error); - }, - complete: () => { - downloadNext(); - }, - }); + /** + * Trigger next download + * Updates download progress and waits until download complete + */ + private async downloadNextResource(doc: RxDocument) { + // Only download if pending status given (will be set to 'ready' if cancelled) + if (this.downloadStatus === 'pending') { + const { download$, progress$, status$ } = this.service.triggerResourceDownload(doc); + this.downloadSubscription = download$; + progress$.subscribe((progress) => (this.downloadProgress = progress)); + const endStatus = await lastValueFrom(status$); + if (endStatus === 'complete') { + this.downloadCount++; } - }; - - downloadNext(); + } } - public cancelDownload(): void { + // cancel active download if (this.downloadSubscription) { this.downloadSubscription.unsubscribe(); this.downloadSubscription = undefined; } + // change the download status which will prevent nextResourceDownload trigger this.downloadStatus = 'ready'; this.downloadProgress = 0; } From a40315cfcad65b565d2ff4fab1ad02377dba1ef5 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Mon, 22 Apr 2024 11:27:54 -0700 Subject: [PATCH 8/8] feat: add all resource dl to downloads page --- .../resource-download-multiple.component.ts | 17 +++++++++-------- .../src/app/pages/downloads/downloads.page.html | 3 +++ .../src/app/pages/downloads/downloads.page.ts | 3 ++- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts index 802302003..3d3789062 100644 --- a/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts +++ b/apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.ts @@ -1,5 +1,4 @@ import { Component, Input, OnDestroy } from '@angular/core'; -import { FileService } from '@picsa/shared/services/core/file.service'; import { RxDocument } from 'rxdb'; import { lastValueFrom, Subject, Subscription } from 'rxjs'; @@ -29,10 +28,10 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { @Input() set resources(resources: IResourceFile[]) { this._resources = resources; this.totalCount = resources.length; - this.getPendingDownloads(resources); + this.getPendingDownloads(); } - constructor(private service: ResourcesToolService, private fileService: FileService) {} + constructor(private service: ResourcesToolService) {} ngOnDestroy(): void { this.componentDestroyed$.next(true); @@ -43,12 +42,12 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { * Iterate over list of input resources, checking which already have attachments downloaded * and generating summary of pending downloads with total size */ - public async getPendingDownloads(resources: IResourceFile[]) { + public async getPendingDownloads() { let totalSize = 0; let totalCount = 0; let downloadCount = 0; const pendingDocs: RxDocument[] = []; - for (const resource of resources) { + for (const resource of this._resources) { const dbDoc = await this.service.dbFiles.findOne(resource.id).exec(); if (dbDoc) { totalCount++; @@ -67,11 +66,12 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { this.downloadCount = downloadCount; this.pendingDocs = pendingDocs; this.downloadStatus = totalSize > 0 ? 'ready' : 'complete'; + console.log('pending', { totalCount, totalSize, downloadCount, pendingDocs }); } public async downloadAllResources() { // recalc sizes to ensure pending docs correct (in case of single file download) - await this.getPendingDownloads(this._resources); + await this.getPendingDownloads(); // handle all downloads this.downloadStatus = 'pending'; @@ -80,7 +80,7 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { await this.downloadNextResource(doc); } // refresh UI - await this.getPendingDownloads(this._resources); + await this.getPendingDownloads(); this.downloadStatus = 'complete'; return; } @@ -101,7 +101,7 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { } } } - public cancelDownload(): void { + public async cancelDownload() { // cancel active download if (this.downloadSubscription) { this.downloadSubscription.unsubscribe(); @@ -110,5 +110,6 @@ export class ResourceDownloadMultipleComponent implements OnDestroy { // change the download status which will prevent nextResourceDownload trigger this.downloadStatus = 'ready'; this.downloadProgress = 0; + await this.getPendingDownloads(); } } diff --git a/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.html b/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.html index e1f006da7..a13c77125 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.html +++ b/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.html @@ -1,4 +1,7 @@
+
+ +
diff --git a/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.ts b/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.ts index eddced651..e4678f141 100644 --- a/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.ts +++ b/apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.ts @@ -16,7 +16,7 @@ const DISPLAY_COLUMNS: (keyof IResourceFile)[] = ['mimetype', 'title', 'size_kb' }) export class DownloadsPageComponent implements OnInit, OnDestroy { private componentDestroyed$ = new Subject(); - + public fileResources: IResourceFile[] = []; public fileResourceDocs: MatTableDataSource>; public displayedColumns = [...DISPLAY_COLUMNS, 'download_button', 'menu_options']; @@ -31,6 +31,7 @@ export class DownloadsPageComponent implements OnInit, OnDestroy { const filteredDocs = this.service.filterLocalisedResources(resourceFileDocs); this.fileResourceDocs = new MatTableDataSource>(filteredDocs); this.fileResourceDocs.sort = this.sort; + this.fileResources = this.fileResourceDocs.data.map((d) => d._data as IResourceFile); } ngOnDestroy(): void { this.componentDestroyed$.next(true);
{{ 'Type' | translate }}