resource download multiple

apps/picsa-tools/resources-tool/src/app/components/components.module.ts

@@ -12,18 +12,20 @@ import {
   ResourceItemLinkComponent,
   ResourceItemVideoComponent,
 } from './resource-item';
+import { ResourceDownloadMultipleComponent } from './resource-download-multiple/resource-download-multiple.component';
 
 const components = [
   ResourceDownloadComponent,
   ResourceItemCollectionComponent,
   ResourceItemFileComponent,
   ResourceItemLinkComponent,
   ResourceItemVideoComponent,
+  ResourceDownloadMultipleComponent
 ];
 
 @NgModule({
   imports: [CommonModule, PicsaTranslateModule, PicsaVideoPlayerModule, ResourcesMaterialModule, RouterModule],
-  exports: [...components, ResourcesMaterialModule, PicsaTranslateModule],
+  exports: [...components, ResourcesMaterialModule, PicsaTranslateModule,],
   declarations: components,
   providers: [],
 })

apps/picsa-tools/resources-tool/src/app/components/resource-download-multiple/resource-download-multiple.component.html

@@ -0,0 +1,43 @@
+
+  <button mat-stroked-button color="primary" class="downloads-button" (click)="downloadAllResources()"
+  *ngIf="downloadStatus === 'ready'"
+  [attr.data-style-variant]="styleVariant">
+    <mat-icon>download</mat-icon>
+    {{ 'Download All' | translate }}
+    {{ totalSizeMB }} MB
+  </button>
+
+  <div class="download-progress" *ngIf="downloadStatus === 'pending'">
+    <mat-progress-spinner
+      [class]="'spinner' + styleVariant"
+      color="primary"
+      [mode]="downloadProgress > 0 ? 'determinate' : 'indeterminate'"
+      [value]="downloadProgress"
+      [diameter]="size"
+      [style.width]="sizePx"
+      [attr.data-style-variant]="styleVariant"
+    >
+    </mat-progress-spinner>
+    <button
+      mat-button
+      class="download-cancel"
+      (click)="cancelDownload()"
+      [disabled]="downloadProgress === 100"
+      [style.width]="sizePx"
+      [style.min-width]="sizePx"
+      [style.height]="sizePx"
+      [attr.data-style-variant]="styleVariant"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <button
+    mat-icon-button
+    *ngIf="downloadStatus === 'complete'"
+    [attr.data-style-variant]="styleVariant"
+    [style.visibility]="hideOnComplete ? 'hidden' : 'visible'"
+  >
+    <mat-icon>check</mat-icon>
+  </button>
+
+

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; 
+  }

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<ResourceDownloadMultipleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResourceDownloadMultipleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ResourceDownloadMultipleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<IResourceFile>;
+
+     downloadStatus: IDownloadStatus = 'ready';
+     downloadProgress = 0;
+    totalSize = 0;
+    totalSizeMB = 0;
+
+    private componentDestroyed$ = new Subject();
+    private downloadSubscription?: Subscription;
+
+    @Output() downloadCompleted = new EventEmitter<void>();
+
+    @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;
+    }
+  }
+

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"
->
-  <mat-icon>download</mat-icon>
+> 
+  <mat-icon style="font-size: 30px;">download</mat-icon><span style="font-size: 15px; align-items: center;
+  justify-content: center; display: flex">
+    {{ totalSize }}MB
+    </span>
+
 </button>
+
 <div class="download-progress" *ngIf="downloadStatus === 'pending'">
   <mat-progress-spinner
     [class]="'spinner' + styleVariant"

apps/picsa-tools/resources-tool/src/app/components/resource-download/resource-download.component.ts

@@ -31,11 +31,11 @@ export class ResourceDownloadComponent implements OnDestroy {
   private _dbDoc: RxDocument<IResourceFile>;
   private download$?: Subscription;
   private componentDestroyed$ = new Subject();
+  totalSize = 0;
 
   @Input() styleVariant: 'primary' | 'white' = 'primary';
 
   @Input() size = 48;
-
   @Input() set dbDoc(dbDoc: RxDocument<IResourceFile>) {
     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;

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'] {

apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.html

@@ -8,7 +8,16 @@
     <mat-card-title>{{ collection.title | translate }}</mat-card-title>
     <mat-card-subtitle> {{ collection.description || '' }} </mat-card-subtitle>
     <img mat-card-avatar *ngIf="collection.cover?.image" [src]="collection.cover?.image" />
+    <picsa-resource-download-multiple
+    [size]="48" 
+    [dbDoc] ="files"
+    *ngIf="files"
+    class="total-size"
+    [styleVariant]="styleVariant"
+    [hideOnComplete]="hideOnComplete"
+></picsa-resource-download-multiple>
   </mat-card-header>
+
   <!-- Contents -->
   <mat-card-content>
     <div *ngIf="collection.language" style="margin-top: 2em">

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;
+}

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,

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 {}

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