ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/file/w-image-file-uploader/w-image-file-uploader.component.scss

@@ -0,0 +1,77 @@
+@import './../../../styles/_variables.scss';
+@import 'primeflex/primeflex.scss';
+
+:host ::ng-deep .w-image-file-button .p-fileupload .p-fileupload-buttonbar .p-button{
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    .p-button-icon{
+        margin: $spacingZero;
+        padding-right: $spacingS;
+        @extend .w-button-small-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-image-file-button .p-fileupload .p-fileupload-buttonbar .p-button:focus {
+    @extend .focus;
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-image-file-button .p-fileupload .p-fileupload-buttonbar .p-button:not(.p-disabled):hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+.wapp-file-upload-button-remove{
+    top: -10px; 
+    right: -10px; 
+    display: none;
+}
+
+.wapp-file-upload-button {
+    visibility: hidden;
+}
+
+.img-test{
+    width:auto;
+    min-width: 50px;
+    height: auto;
+}
+
+:host ::ng-deep .w-image-file-button-rounded.p-button.p-button-icon-only.p-button-rounded{
+    height: 32px;
+    padding: calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+
+    .p-button-icon{
+        margin: $spacingZero;
+        @extend .w-button-small-icon-text;
+    }
+
+    .p-button-label{
+        @extend .w-button-small-label-text-typography;
+    }
+}
+
+:host ::ng-deep .w-image-file-button-rounded .p-button:focus{
+    @extend .focus;
+    outline: $borderWidth solid $primary50;
+    background-color: $primary700;
+}
+
+:host ::ng-deep .w-image-file-button-rounded .p-button:hover {
+    background-color: $secondary400;
+    border-color: $secondary400;
+}
+
+:host ::ng-deep .pi .pi-plus .p-button-icon{
+    @include styleclass('p-button-icon-right');
+}

package/src/lib/file/w-image-file-uploader/w-image-file-uploader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WImageFileUploaderComponent } from './w-image-file-uploader.component';
+
+describe('WImageFileUploaderComponent', () => {
+  let component: WImageFileUploaderComponent;
+  let fixture: ComponentFixture<WImageFileUploaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WImageFileUploaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WImageFileUploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/file/w-image-file-uploader/w-image-file-uploader.component.ts

@@ -0,0 +1,388 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { WImageFileUploaderConfig } from '../../shared/models/w-image-file-uploader-config.model';
+import { FileUpload } from 'primeng/fileupload';
+import { ConfirmationService } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ImageB64 } from '../../shared/models/image-b64.model';
+import { WImageCropperComponent } from '../w-image-cropper/w-image-cropper.component';
+import { WImageCropperData } from '../../shared/models/w-image-cropper-data.model';
+import { WFileB64 } from '../../shared/models/w-file-b64.model';
+
+@Component({
+  selector: 'w-image-file-uploader',
+  templateUrl: './w-image-file-uploader.component.html',
+  styleUrls: ['./w-image-file-uploader.component.scss'],
+  providers: [ConfirmationService]
+})
+export class WImageFileUploaderComponent {
+  @Input('allowMultipleImages') allowMultipleImages: boolean = false;
+  @Input('activeImageUpload') activeImageUpload: boolean = false;
+  @Input('imagesAlreadyUploaded') imagesAlreadyUploaded: any[] = [];
+  @Input('imageSingleMode') imageSingleMode: any;
+  @Input('uploadUrl') uploadUrl!: string;
+  @Input('updateUrl') updateUrl!: string;
+  @Input('deleteUrl') deleteUrl!: string;
+  @Input('headers') headers!: HttpHeaders;
+  @Input('activePositionProperty') activePositionProperty: boolean = false;
+  @Input('viewSingleMode') viewSingleMode: boolean = false;
+  @Input('identificatorImageName') identificatorName: string = "id";
+  @Input('identificatorImagesCollectionValue') identificatorValue: any = 0;
+  @Input('imageUploadConfig') imageUploadConfig: WImageFileUploaderConfig = { 
+    imagePropertyNames: [], 
+    maxImageSize: 1000000,
+    allowAuto: false, 
+    uploadButtonLabel: "",
+    chooseButtonLabel: "",
+    cancelButtonLabel: "",
+    contentHeaderLabel: "",
+    contentSubheaderLabel: "",
+    deleteImageButtonLabel: "",
+    croppedDialogTranslations: "",
+    croppedImageConfiguration: {
+      roundedCropper: false,
+      configuredAspectRatio: 4/3,
+      viewPortWidthPx: 400,
+      viewPortHeihtPx: 500
+    },
+    confirmDeleteMessageLabel: "",
+    confirmDeleteButtonLabel: ""
+  }
+
+  @Output('onUploadFinished') onUploadFinished: EventEmitter<any> = new EventEmitter<any>();
+  @Output('onErrorHandler') onErrorHandler: EventEmitter<any> = new EventEmitter<any>();
+  @Output('onReturnImagesB64') onReturnImagesB64: EventEmitter<any> = new EventEmitter<any>();
+  @Output('onDeleteImage') onDeleteImage: EventEmitter<any> = new EventEmitter<any>();
+
+  @ViewChild('fileUpload') fileUpload!: FileUpload;
+  
+  @ViewChildren('buttonRemoveOnlyImage') buttonRemoveOnlyImage!: QueryList<ElementRef>;
+  @ViewChild('fileUploadOnlyImage') fileuploadOnlyImage!: FileUpload;
+  
+  cropperImages: any[] = [];
+  defaultWidth: string = "w-18rem";
+  defaultHeight: string = "h-18rem";
+  disableMoveButtons: boolean = false;
+  isUploadingMultiMode: boolean = false;
+  isDeletingMultiMode: boolean = false;
+  
+  onlyImageSelected: any;
+  onlyCroppedImageSelected: any = null;
+  
+  dimensionsInput!: WImageCropperData;
+  carouselImagesResponsiveOptions: any[] = [
+    {
+      breakpoint: '1024px',
+      numVisible: 4,
+      numScroll: 4
+    },
+    {
+      breakpoint: '850px',
+      numVisible: 2,
+      numScroll: 2
+    },
+    {
+      breakpoint: '560px',
+      numVisible: 1,
+      numScroll: 1
+    }
+  ];
+
+  constructor(
+    private dialogService: DialogService, 
+    private http: HttpClient, 
+    private confirmationService: ConfirmationService
+  ){}
+
+  ngOnInit(): void {
+    this.dimensionsInput = {
+      roundedCropper: this.imageUploadConfig.croppedImageConfiguration.roundedCropper,
+      configuredAspectRatio: this.imageUploadConfig.croppedImageConfiguration.configuredAspectRatio,
+      viewPortWidthPx: this.imageUploadConfig.croppedImageConfiguration.viewPortWidthPx,
+      viewPortHeihtPx: this.imageUploadConfig.croppedImageConfiguration.viewPortHeihtPx,
+      maxFileSize: this.imageUploadConfig.maxImageSize
+    }
+
+    if(this.activeImageUpload == false && this.imagesAlreadyUploaded.length > 0){
+      this.cropperImages.push(...this.imagesAlreadyUploaded);
+    }
+  }
+
+  readProperty(obj: any, prop:string):any {
+    if(typeof obj === 'undefined') {
+      return false;
+    }
+    
+    var _index = prop.indexOf('.')
+    if(_index > -1) {
+        return this.readProperty(obj[prop.substring(0, _index)], prop.substr(_index + 1));
+    }
+    return obj[prop];
+  }
+
+  onCustomUploadSingleMode(event: any){
+    this.onlyImageSelected = event.currentFiles[0];
+    this.openModalCropper(this.onlyImageSelected, event.originalEvent);
+  }
+
+  onCustomizeUploadFunctionSingleMode(event: any){
+    if(this.activeImageUpload == true){
+      if(this.onlyCroppedImageSelected){
+        let base64Images: ImageB64[] = [{base64: this.onlyCroppedImageSelected.base64, name: this.onlyCroppedImageSelected.name}];
+
+        this.http.post(this.uploadUrl, base64Images, { headers: this.headers }).subscribe({
+          next: (imageUploaded: any) => {
+            this.fileuploadOnlyImage.clear();
+            this.onUploadFinished.emit(imageUploaded);
+          },
+          error: (error) => {
+            this.fileuploadOnlyImage.uploading = false;
+            this.onErrorHandler.emit(error);
+          }
+        })
+      }
+    }
+  }
+
+  removeImageSingleMode(event: Event, file: any) {
+    event.stopPropagation();
+    this.fileuploadOnlyImage.clear();
+    this.onlyImageSelected = null;
+    this.onlyCroppedImageSelected = null;
+    this.imageSingleMode = null;
+    this.onReturnImagesB64.emit(null);
+  }
+
+  moveImageToLeft(event: any){
+    let indexToMove = this.findIndex(event);
+    if(indexToMove > 0 && indexToMove < this.imagesAlreadyUploaded.length){
+      const temp = this.imagesAlreadyUploaded[indexToMove];
+      this.imagesAlreadyUploaded[indexToMove] = this.imagesAlreadyUploaded[ indexToMove - 1];
+      this.imagesAlreadyUploaded[indexToMove - 1] = temp;
+
+      this.imagesAlreadyUploaded = (this.activePositionProperty) ? this.addPositionProperty(this.imagesAlreadyUploaded) : this.imagesAlreadyUploaded;
+      
+      if(this.uploadUrl != undefined && this.identificatorValue !== 0){
+        this.disableMoveButtons = true;
+        this.updateImage(this.imagesAlreadyUploaded);
+      }else if(this.activeImageUpload == true && this.uploadUrl != undefined){
+        this.onUploadFinished.emit(this.imagesAlreadyUploaded);
+      }else{
+        this.onReturnImagesB64.emit(this.getArraysToCreateAndToUpdate(this.imagesAlreadyUploaded));
+      }
+    }
+  }
+
+  moveImageToRight(event: any){  
+    let indexToMove = this.findIndex(event);
+    if(indexToMove >= 0 && indexToMove < this.imagesAlreadyUploaded.length -1){
+      const temp = this.imagesAlreadyUploaded[indexToMove];
+      this.imagesAlreadyUploaded[indexToMove] = this.imagesAlreadyUploaded[ indexToMove + 1];
+      this.imagesAlreadyUploaded[indexToMove + 1] = temp;
+
+      this.imagesAlreadyUploaded = (this.activePositionProperty) ? this.addPositionProperty(this.imagesAlreadyUploaded) : this.imagesAlreadyUploaded;
+
+      if(this.uploadUrl!=undefined && this.identificatorValue !== 0){
+        this.disableMoveButtons = true; 
+        this.updateImage(this.imagesAlreadyUploaded);
+      }else{
+        this.onReturnImagesB64.emit(this.getArraysToCreateAndToUpdate(this.imagesAlreadyUploaded));
+      }
+    }
+  }
+
+  onCustomizeUploadFunctionMultiMode(event?: any){
+    if(this.activeImageUpload == true){
+      if(this.cropperImages.length > 0){
+        let base64Images: ImageB64[] = this.mapToObjectB64(this.cropperImages);
+        this.isUploadingMultiMode = true;
+
+        this.http.post(this.uploadUrl, base64Images, { headers: this.headers }).subscribe({
+          next:  (imagesUploaded: any) => {
+            this.imagesAlreadyUploaded.push(...imagesUploaded);
+            this.imagesAlreadyUploaded = [...this.imagesAlreadyUploaded];
+            this.cropperImages = [];
+            this.fileUpload.clear();
+
+            this.imagesAlreadyUploaded = this.activePositionProperty ? this.addPositionProperty(this.imagesAlreadyUploaded) : this.imagesAlreadyUploaded;
+            
+            if(this.uploadUrl!=undefined && this.identificatorValue !== 0){
+              this.updateImage(this.imagesAlreadyUploaded);
+            }else{
+              this.onUploadFinished.emit(this.imagesAlreadyUploaded);
+            }
+
+            this.isUploadingMultiMode = false;
+          },
+          error: (error) => {
+            this.isUploadingMultiMode = false;
+            this.onErrorHandler.emit(error);
+          }
+        })
+      }
+    }
+  }
+
+  onCustomUploadMultiMode(event: any){
+    if(this.allowMultipleImages == true){
+      event.currentFiles.forEach((file: any, index: number) => {
+        let foundIt = this.cropperImages.find(f => f.name == file.name);
+        if(event.currentFiles.length == 0){
+          this.openModalCropper(file, event.originalEvent);
+        }else if(foundIt == undefined){
+          this.openModalCropper(file, event.originalEvent);
+        }
+      });
+    }else{
+      this.openModalCropper(event.currentFiles[0], event.originalEvent);
+    }
+  }
+
+  confirmDeleteImageMultiMode(event: any, image: any){
+    this.confirmationService.confirm({
+      target: event.target as EventTarget, 
+      message: this.imageUploadConfig.confirmDeleteMessageLabel,
+      icon: "pi pi-exclamation-triangle",
+      acceptLabel: this.imageUploadConfig.deleteImageButtonLabel, 
+      accept: () => {
+        this.onDeleteImageMultiMode(image);
+      }
+    })
+  }
+
+  onDeleteFileMultiMode(event: any, file: File, uploader: FileUpload){
+    const index = uploader.files.indexOf(file);
+    uploader.remove(event, index);
+    this.cropperImages = this.cropperImages.filter(s => !file.name.includes(s.name));
+  }
+
+  onDeleteImageMultiMode(image: any){
+    if(this.activeImageUpload){
+      this.isDeletingMultiMode = true;
+      let deleteUrlFinal = this.deleteUrl+"/"+image[this.identificatorName];
+      this.http.delete(deleteUrlFinal, {headers: this.headers}).subscribe({
+        next: () => {
+          this.imagesAlreadyUploaded = this.imagesAlreadyUploaded.filter(img => (img.base64 !== image.base64) || (img[this.identificatorName] !== image[this.identificatorName]));
+          this.isDeletingMultiMode = false;
+          this.onDeleteImage.emit(image);
+        },
+        error: (error) => {
+          this.isDeletingMultiMode = false;
+          this.onErrorHandler.emit(error);
+          this.onDeleteImage.emit(null);
+        }
+      })
+    }else{
+      this.imagesAlreadyUploaded = this.imagesAlreadyUploaded.filter(img => (img.base64 !== image.base64) || (img[this.identificatorName] !== image[this.identificatorName]));
+      this.onDeleteImage.emit(image);
+    }
+  }
+
+  updateImage(imagesToUpdate: any[]): any{
+    let updateUrlFinal = this.updateUrl + "/" + this.identificatorValue;
+    this.http.put(updateUrlFinal, imagesToUpdate, {headers: this.headers}).subscribe({
+      next: (imagesUpdated: any) => {
+        this.disableMoveButtons = false;
+        this.imagesAlreadyUploaded = imagesUpdated;
+        this.onUploadFinished.emit(this.imagesAlreadyUploaded);
+      }
+    });
+  }
+
+  openModalCropper(fileBlob: any, event?: any){
+    const ref: DynamicDialogRef = this.dialogService.open(WImageCropperComponent, {
+      header: this.imageUploadConfig.croppedDialogTranslations?.modal.header,
+      width: '70rem',
+      contentStyle: {"overflow": "auto", "height": "auto", "padding-bottom": "8px"},
+      data: {dataModal: this.dimensionsInput, translations: this.imageUploadConfig.croppedDialogTranslations, blob: fileBlob},
+      resizable: true
+    });
+
+    ref.onClose.subscribe((imageCropped: WFileB64) => {
+      if(imageCropped){
+        if(this.allowMultipleImages == false){
+          this.onlyCroppedImageSelected = imageCropped;
+          this.onReturnImagesB64.emit(this.mapToObjectB64(this.onlyCroppedImageSelected));
+        }else{
+          this.cropperImages.push(imageCropped);
+          
+          this.cropperImages = (this.activePositionProperty && this.activeImageUpload == false ) ? this.addPositionProperty(this.cropperImages) : this.cropperImages;
+
+          if(this.activeImageUpload == false){
+            this.imagesAlreadyUploaded.push(imageCropped);
+            this.imagesAlreadyUploaded = [...this.imagesAlreadyUploaded];
+            this.onReturnImagesB64.emit(this.getArraysToCreateAndToUpdate(this.cropperImages));
+          }else{
+            this.onReturnImagesB64.emit(this.getArraysToCreateAndToUpdate(this.mapToObjectB64(this.cropperImages)));
+          }
+        }
+      }else{
+        if(this.allowMultipleImages){
+          this.fileUpload._files = this.fileUpload._files.filter(f => !f.name.includes(fileBlob.name));
+          let filesAux = this.fileUpload._files;
+          this.fileUpload.clear();
+          this.fileUpload._files = filesAux;
+        }else{
+          this.onlyImageSelected = null;
+          this.fileuploadOnlyImage.clear();
+        }
+      }
+
+      if((this.activeImageUpload == true) && (this.imageUploadConfig.allowAuto == true) && (this.cropperImages.length == this.fileUpload._files.length)){
+        this.onCustomizeUploadFunctionMultiMode();
+      }
+    })
+  }
+
+  mapToObjectB64(images: any): ImageB64[]{
+    if(Array.isArray(images) == false){
+      return  [{
+        base64: images.base64,
+        name: images.name,
+        ...(images.position !== undefined && { position: images.position })
+      }]
+    }
+
+    return images.map((img: any) => {
+      return  {
+        base64: img.base64,
+        name: img.name, 
+        ...(img.position !== undefined && { position: img.position })
+      }
+    });
+  }
+
+  getArraysToCreateAndToUpdate(images: any[]){
+    return {
+      toCreate: 
+        images.filter((img) => img[this.identificatorName] == undefined),
+      toUpdated: 
+        images.filter((img) => img.base64 == undefined)
+    }
+  }
+
+  addPositionProperty(imagesArray: any[]){
+    imagesArray = imagesArray.map((img, index) => ({
+      ...img,
+      position: index
+    }))
+
+    return imagesArray;
+  }
+
+  onImageMouseOver(file: any) {
+    this.buttonRemoveOnlyImage.toArray().forEach(btnRemove => {
+        btnRemove.nativeElement.id === file.name ? btnRemove.nativeElement.style.display = 'flex' : null;
+    })
+  }
+
+  onImageMouseLeave(file: any) {
+    this.buttonRemoveOnlyImage.toArray().forEach(btnRemove => {
+        btnRemove.nativeElement.id === file.name ? btnRemove.nativeElement.style.display = 'none' : null;
+    })
+  }
+
+  findIndex(img: any){
+    return this.imagesAlreadyUploaded.indexOf(img);
+  }
+}

package/src/lib/file/w-preview-image/w-preview-image.component.html

@@ -0,0 +1,5 @@
+<div class="flex align-content-center align-items-center justify-content-center h-full w-full">
+    <p-image *ngIf="imageCropped" 
+        class="flex align-content-center align-items-center"
+        [src]="imageCropped" > </p-image>
+</div>

package/src/lib/file/w-preview-image/w-preview-image.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WPreviewImageComponent } from './w-preview-image.component';
+
+describe('WPreviewImageComponent', () => {
+  let component: WPreviewImageComponent;
+  let fixture: ComponentFixture<WPreviewImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WPreviewImageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WPreviewImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/file/w-preview-image/w-preview-image.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { DynamicDialogConfig } from 'primeng/dynamicdialog';
+
+@Component({
+  selector: 'w-preview-image',
+  templateUrl: './w-preview-image.component.html',
+  styleUrls: ['./w-preview-image.component.css']
+})
+export class WPreviewImageComponent {
+  imageCropped!: any;
+
+  constructor(public dynamicDialogConfig: DynamicDialogConfig){}
+
+  ngOnInit(): void {
+    this.imageCropped = this.dynamicDialogConfig.data.imageEdited;
+  }
+}