@wavemaker/app-ng-runtime 11.9.1-next.27515 → 11.9.1-next.27516

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -293,7 +293,7 @@
293
293
  i0__namespace.ɵɵadvance(5);
294
294
  i0__namespace.ɵɵtextInterpolate(ft_r7.storageName || ft_r7.name);
295
295
  i0__namespace.ɵɵadvance();
296
- i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success");
296
+ i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
297
297
  i0__namespace.ɵɵadvance(2);
298
298
  i0__namespace.ɵɵproperty("ngIf", ft_r7.fileLength !== 0);
299
299
  i0__namespace.ɵɵadvance();
@@ -309,7 +309,7 @@
309
309
  i0__namespace.ɵɵadvance(2);
310
310
  i0__namespace.ɵɵproperty("ngIf", ctx_r1.cleariconclass !== "" && ft_r7.status !== "onProgress");
311
311
  i0__namespace.ɵɵadvance();
312
- i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success");
312
+ i0__namespace.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
313
313
  } }
314
314
  function FileUploadComponent_ul_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
315
315
  i0__namespace.ɵɵelementContainerStart(0);
@@ -465,6 +465,9 @@
465
465
  * @param $files
466
466
  */
467
467
  onSelectEventCall($event, $files) {
468
+ $files.forEach(file => {
469
+ file.uniqueId = this.idGenerator.nextUid();
470
+ });
468
471
  this.selectedFiles = $files;
469
472
  this.uploadedFiles = this.multiple ? [...this.uploadedFiles, ...$files] : $files;
470
473
  setTimeout(() => {
@@ -520,34 +523,36 @@
520
523
  }
521
524
  // Make call if there are valid files else no call is made
522
525
  if ($files.length) {
523
- this.progressObservable = new rxjs.Subject();
524
526
  // EVENT: ON_BEFORE_SELECT
525
527
  beforeSelectVal = this.invokeEventCallback('beforeselect', {
526
528
  $event: $.extend($event.$files || {}, $files),
527
529
  files: $files
528
530
  });
529
531
  if (this.datasource) {
530
- this.datasource._progressObservable = this.progressObservable;
531
- this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
532
- lodashEs.forEach(this.selectedFiles, (file) => {
533
- if (file.name === progressObj.fileName) {
534
- file.progress = progressObj.progress;
535
- if (file.progress === 100) {
536
- file.status = 'success';
537
- }
538
- else {
539
- file.status = progressObj.status;
540
- if (progressObj.errMsg) {
541
- file.errMsg = progressObj.errMsg;
542
- this.invokeEventCallback('error', {
543
- $event,
544
- files: file
545
- });
532
+ if (!this.uploadProgressSubscription) {
533
+ this.progressObservable = new rxjs.Subject();
534
+ this.datasource._progressObservable = this.progressObservable;
535
+ this.uploadProgressSubscription = this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
536
+ lodashEs.forEach(this.uploadedFiles, (file) => {
537
+ if (file.name === progressObj.fileName && file.uniqueId === progressObj.uniqueId) {
538
+ file.progress = progressObj.progress;
539
+ if (file.progress === 100) {
540
+ file.status = 'success';
541
+ }
542
+ else {
543
+ file.status = progressObj.status;
544
+ if (progressObj.errMsg) {
545
+ file.errMsg = progressObj.errMsg;
546
+ this.invokeEventCallback('error', {
547
+ $event,
548
+ files: file
549
+ });
550
+ }
546
551
  }
547
552
  }
548
- }
553
+ });
549
554
  });
550
- });
555
+ }
551
556
  }
552
557
  else {
553
558
  this.selectedFiles = $files;
@@ -572,17 +577,16 @@
572
577
  onOk: () => {
573
578
  if (this.deletedatasource) {
574
579
  this.deletedatasource.setInput('file', file._response.fileName || file.name);
575
- this.deleteFileObservable = new rxjs.Subject();
576
- this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
577
- this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
578
- if (response.status === "success") {
579
- this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
580
- this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
581
- this.deletedatasource._deleteFileObservable.unsubscribe();
582
- }
583
- }, (error) => {
584
- this.deletedatasource._deleteFileObservable.unsubscribe();
585
- });
580
+ if (!this.deleteProgressSubscription) {
581
+ this.deleteFileObservable = new rxjs.Subject();
582
+ this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
583
+ this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
584
+ if (response.status === "success") {
585
+ this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
586
+ this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
587
+ }
588
+ });
589
+ }
586
590
  }
587
591
  this.invokeEventCallback('delete', { $event: file });
588
592
  this.dialogService.closeAppConfirmDialog();
@@ -705,6 +709,7 @@
705
709
  this.defaultAllowedExtensions = this.allowedFileUploadExtensions.split(',').map(item => item.trim()).map(item => item.endsWith('/*') ? item : `.${item}`);
706
710
  this.chooseFilter = this.defaultAllowedExtensions.includes('*/*') ? '' : this.defaultAllowedExtensions;
707
711
  this.fileUploadMessage = 'Drop your files here or click here to browse';
712
+ this.idGenerator = new i1.IDGenerator('file-');
708
713
  this.uploadUrl = 'services';
709
714
  // styler(this.nativeElement, this);
710
715
  }
@@ -724,6 +729,12 @@
724
729
  document.removeEventListener('drop', this.dropCb);
725
730
  document.removeEventListener('mouseleave', this.dropCb);
726
731
  super.ngOnDestroy();
732
+ const subscriptions = [this.uploadProgressSubscription, this.deleteProgressSubscription];
733
+ subscriptions.forEach(subscription => {
734
+ if (subscription) {
735
+ subscription.unsubscribe();
736
+ }
737
+ });
727
738
  }
728
739
  static { this.ɵfac = function FileUploadComponent_Factory(t) { return new (t || FileUploadComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵinjectAttribute('select.event'), i0__namespace.ɵɵdirectiveInject(i1__namespace.AbstractDialogService), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
729
740
  static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["", "wmFileUpload", ""]], features: [i0__namespace.ɵɵProvidersFeature([
@@ -749,7 +760,7 @@
749
760
  type: i0.Component,
750
761
  args: [{ selector: '[wmFileUpload]', providers: [
751
762
  i3.provideAsWidgetRef(FileUploadComponent)
752
- ], template: "<div class=\"app-fileupload\" init-widget>\n <!-- drag and drop files UI in web -->\n <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n <i class=\"{{iconclass}}\"></i>\n <div class=\"message\">\n <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n <form class=\"form-horizontal\" name=\"{{formName}}\">\n <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n </form>\n <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n </div>\n </div>\n </div>\n <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n <div class=\"app-button-wrapper\">\n <form class=\"form-horizontal\" name=\"{{formName}}\">\n <!-- support for file upload in Mobileapp in its runmode (Web) -->\n <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n multiple name=\"files\" type=\"file\">\n <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n name=\"files\" type=\"file\">\n <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n <span class=\"caption\" [innerHTML]=\"caption\"></span>\n </button>\n </form>\n </div>\n <div class=\"app-files-upload-status single\"></div>\n </div>\n <!-- support for file upload in Mobile Application (device) -->\n <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n <i class=\"{{iconclass}}\"></i>\n <span class=\"caption\" [innerHTML]=\"caption\"></span>\n </button>\n <!-- list of selectedfiles UI -->\n <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n *ngIf=\"uploadedFiles.length > 0\" tabindex=\"0\">\n <ng-container *ngFor=\"let ft of uploadedFiles\">\n <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\" tabindex=\"0\">\n <div class=\"media upload-file-list\">\n <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n <div class=\"media-body media-middle file-details\">\n <p class=\"uploaddetails col-md-3\">\n <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n <span *ngIf=\"ft.status === 'success'\"\n class=\"status-icon {{ft.status | stateClass }}\"></span>\n <br/>\n <span class=\"filesize\" *ngIf=\"ft.fileLength !== 0\">{{ft.size | filesize:0}}</span>\n <span *ngIf=\"ft.status === 'error'\"\n class=\"status-icon {{ft.status | stateClass }}\"\n title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n </p>\n <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n class=\"progress col-md-7 upload-progress\">\n <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n [ngStyle]=\"{width: (ft.progress +'%')}\"\n class=\"progress-bar progress-bar-striped\"></div>\n </div>\n <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n </div>\n </div>\n <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n <a href=\"javascript:void(0)\" class=\"btn btn-transparent file-upload-stop\" type=\"button\"\n (click)=\"abortFileUpload(ft)\">\n <i class=\"wi wi-close\"></i>\n </a>\n </div>\n <div class=\"media-right media-middle\">\n <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n <i class=\"{{cleariconclass}}\"></i>\n </a>\n </div>\n <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success'\">\n <a href=\"javascript:void(0)\" (click)=\"onFileDelete($event, ft)\"\n class=\"btn btn-transparent btn-default status-icon\" title=\"{{deleteiconhint}}\" type=\"button\">\n <i class=\"wi wi-delete\"></i>\n </a>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n <!-- list of selectedfolders UI to show the error in title -->\n <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n <div class=\"media upload-file-list\">\n <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n <div class=\"media-body media-middle file-details\">\n <p class=\"uploaddetails\">\n <label class=\"upload-title\">{{ft.name}}</label><br/>\n </p>\n </div>\n <div class=\"media-right media-middle\" >\n <span class=\"status-icon wi wi-cancel text-danger\"></span>\n </div>\n </div>\n </li>\n </ul>\n</div>\n" }]
763
+ ], template: "<div class=\"app-fileupload\" init-widget>\n <!-- drag and drop files UI in web -->\n <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n <i class=\"{{iconclass}}\"></i>\n <div class=\"message\">\n <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n <form class=\"form-horizontal\" name=\"{{formName}}\">\n <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n </form>\n <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n </div>\n </div>\n </div>\n <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n <div class=\"app-button-wrapper\">\n <form class=\"form-horizontal\" name=\"{{formName}}\">\n <!-- support for file upload in Mobileapp in its runmode (Web) -->\n <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n multiple name=\"files\" type=\"file\">\n <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n name=\"files\" type=\"file\">\n <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n <span class=\"caption\" [innerHTML]=\"caption\"></span>\n </button>\n </form>\n </div>\n <div class=\"app-files-upload-status single\"></div>\n </div>\n <!-- support for file upload in Mobile Application (device) -->\n <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n <i class=\"{{iconclass}}\"></i>\n <span class=\"caption\" [innerHTML]=\"caption\"></span>\n </button>\n <!-- list of selectedfiles UI -->\n <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n *ngIf=\"uploadedFiles.length > 0\" tabindex=\"0\">\n <ng-container *ngFor=\"let ft of uploadedFiles\">\n <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\" tabindex=\"0\">\n <div class=\"media upload-file-list\">\n <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n <div class=\"media-body media-middle file-details\">\n <p class=\"uploaddetails col-md-3\">\n <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n <span *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\"\n class=\"status-icon {{ft.status | stateClass }}\"></span>\n <br/>\n <span class=\"filesize\" *ngIf=\"ft.fileLength !== 0\">{{ft.size | filesize:0}}</span>\n <span *ngIf=\"ft.status === 'error'\"\n class=\"status-icon {{ft.status | stateClass }}\"\n title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n </p>\n <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n class=\"progress col-md-7 upload-progress\">\n <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n [ngStyle]=\"{width: (ft.progress +'%')}\"\n class=\"progress-bar progress-bar-striped\"></div>\n </div>\n <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n </div>\n </div>\n <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n <a href=\"javascript:void(0)\" class=\"btn btn-transparent file-upload-stop\" type=\"button\"\n (click)=\"abortFileUpload(ft)\">\n <i class=\"wi wi-close\"></i>\n </a>\n </div>\n <div class=\"media-right media-middle\">\n <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n <i class=\"{{cleariconclass}}\"></i>\n </a>\n </div>\n <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\">\n <a href=\"javascript:void(0)\" (click)=\"onFileDelete($event, ft)\"\n class=\"btn btn-transparent btn-default status-icon\" title=\"{{deleteiconhint}}\" type=\"button\">\n <i class=\"wi wi-delete\"></i>\n </a>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n <!-- list of selectedfolders UI to show the error in title -->\n <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n <div class=\"media upload-file-list\">\n <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n <div class=\"media-body media-middle file-details\">\n <p class=\"uploaddetails\">\n <label class=\"upload-title\">{{ft.name}}</label><br/>\n </p>\n </div>\n <div class=\"media-right media-middle\" >\n <span class=\"status-icon wi wi-cancel text-danger\"></span>\n </div>\n </div>\n </li>\n </ul>\n</div>\n" }]
753
764
  }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
754
765
  type: i0.Attribute,
755
766
  args: ['select.event']
@@ -759,7 +770,7 @@
759
770
  }, {
760
771
  type: i0.Optional
761
772
  }] }], null); })();
762
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(FileUploadComponent, { className: "FileUploadComponent", filePath: "file-upload.component.ts", lineNumber: 35 }); })();
773
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(FileUploadComponent, { className: "FileUploadComponent", filePath: "file-upload.component.ts", lineNumber: 27 }); })();
763
774
 
764
775
  const components = [
765
776
  FileUploadComponent