@eqproject/eqp-attachments 0.1.16 → 0.1.17
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.
- package/README.md +1 -0
- package/bundles/eqproject-eqp-attachments.umd.js +104 -61
- package/bundles/eqproject-eqp-attachments.umd.js.map +1 -1
- package/bundles/eqproject-eqp-attachments.umd.min.js +1 -1
- package/bundles/eqproject-eqp-attachments.umd.min.js.map +1 -1
- package/eqproject-eqp-attachments.metadata.json +1 -1
- package/esm2015/lib/eqp-attachments.component.js +104 -66
- package/esm5/lib/eqp-attachments.component.js +106 -64
- package/fesm2015/eqproject-eqp-attachments.js +103 -65
- package/fesm2015/eqproject-eqp-attachments.js.map +1 -1
- package/fesm5/eqproject-eqp-attachments.js +105 -63
- package/fesm5/eqproject-eqp-attachments.js.map +1 -1
- package/lib/eqp-attachments.component.d.ts +13 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,6 +87,7 @@ export class AppModule {}
|
|
|
87
87
|
| [isEqpTableMultiLanguage] | `boolean` | `false` | no | It allows you to establish whether the eqp-table containing the list of attachments uses multilanguage or not |
|
|
88
88
|
| [tablePaginatorVisible] | `boolean` | `true` | no | It allows you to establish, in the case of multiple attachments management, whether the table containing the list of attachments must be paged or not (default: true) |
|
|
89
89
|
| [tablePaginatorSize] | `number` | `null` | no | In case of managing multiple attachments, it allows you to establish the default page size for the table containing the list of attachments (default: null) |
|
|
90
|
+
| [allowVideo] | `boolean` | `false` | no | Allow video upload |
|
|
90
91
|
|
|
91
92
|
|
|
92
93
|
### Outputs
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@eqproject/eqp-attachments', ['exports', '@angular/core', '@angular/forms', '
|
|
4
|
-
(global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-attachments'] = {}), global.ng.
|
|
5
|
-
}(this, (function (exports, core, forms,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/platform-browser'), require('@eqproject/eqp-table'), require('browser-image-compression'), require('ngx-image-cropper'), require('sweetalert2'), require('@angular/common'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@eqproject/eqp-attachments', ['exports', '@angular/common/http', '@angular/core', '@angular/forms', '@angular/material/dialog', '@angular/platform-browser', '@eqproject/eqp-table', 'browser-image-compression', 'ngx-image-cropper', 'sweetalert2', '@angular/common', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core'], factory) :
|
|
4
|
+
(global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-attachments'] = {}), global.ng.common.http, global.ng.core, global.ng.forms, global.ng.material.dialog, global.ng.platformBrowser, global.eqpTable, global.imageCompression, global.ngxImageCropper, global.Swal, global.ng.common, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core));
|
|
5
|
+
}(this, (function (exports, http, core, forms, dialog, platformBrowser, eqpTable, imageCompression, ngxImageCropper, Swal, common, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, tooltip, snackBar, table, sort, paginator, core$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
imageCompression = imageCompression && Object.prototype.hasOwnProperty.call(imageCompression, 'default') ? imageCompression['default'] : imageCompression;
|
|
8
8
|
Swal = Swal && Object.prototype.hasOwnProperty.call(Swal, 'default') ? Swal['default'] : Swal;
|
|
@@ -226,11 +226,6 @@
|
|
|
226
226
|
return value;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
(function (AttachmentType) {
|
|
230
|
-
AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
|
|
231
|
-
AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
|
|
232
|
-
})(exports.AttachmentType || (exports.AttachmentType = {}));
|
|
233
|
-
|
|
234
229
|
var AttachmentHelperService = /** @class */ (function () {
|
|
235
230
|
function AttachmentHelperService() {
|
|
236
231
|
}
|
|
@@ -290,6 +285,12 @@
|
|
|
290
285
|
return AttachmentHelperService;
|
|
291
286
|
}());
|
|
292
287
|
|
|
288
|
+
|
|
289
|
+
(function (AttachmentType) {
|
|
290
|
+
AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
|
|
291
|
+
AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
|
|
292
|
+
})(exports.AttachmentType || (exports.AttachmentType = {}));
|
|
293
|
+
|
|
293
294
|
var EqpAttachmentDialogService = /** @class */ (function () {
|
|
294
295
|
function EqpAttachmentDialogService() {
|
|
295
296
|
}
|
|
@@ -398,12 +399,14 @@
|
|
|
398
399
|
return EqpAttachmentDialogService;
|
|
399
400
|
}());
|
|
400
401
|
|
|
401
|
-
var toBase64 = function (file) {
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
402
|
+
var toBase64 = function (file) {
|
|
403
|
+
return new Promise(function (resolve, reject) {
|
|
404
|
+
var reader = new FileReader();
|
|
405
|
+
reader.readAsDataURL(file);
|
|
406
|
+
reader.onload = function () { return resolve(reader.result.toString()); };
|
|
407
|
+
reader.onerror = function (error) { return reject(error); };
|
|
408
|
+
});
|
|
409
|
+
};
|
|
407
410
|
var ɵ0 = toBase64;
|
|
408
411
|
var EqpAttachmentsComponent = /** @class */ (function () {
|
|
409
412
|
function EqpAttachmentsComponent(dialog, formBuilder, sanitizer, http, cd) {
|
|
@@ -482,7 +485,11 @@
|
|
|
482
485
|
/**
|
|
483
486
|
* Opzioni per la compressione delle immagini caricate.
|
|
484
487
|
*/
|
|
485
|
-
this.compressionOptions = {
|
|
488
|
+
this.compressionOptions = {
|
|
489
|
+
maxSizeMB: 0.5,
|
|
490
|
+
maxWidthOrHeight: 1920,
|
|
491
|
+
useWebWorker: true
|
|
492
|
+
};
|
|
486
493
|
/**
|
|
487
494
|
* Array di AttachmentType che si possono aggiungere
|
|
488
495
|
*/
|
|
@@ -502,6 +509,10 @@
|
|
|
502
509
|
* per la tabella contenente l'elenco degli allegati
|
|
503
510
|
*/
|
|
504
511
|
this.tablePaginatorSize = null;
|
|
512
|
+
/**
|
|
513
|
+
* Abilitare caricamento video
|
|
514
|
+
*/
|
|
515
|
+
this.allowVideo = false;
|
|
505
516
|
/**
|
|
506
517
|
* Input per definire le label da usare nel componente
|
|
507
518
|
*/
|
|
@@ -560,8 +571,8 @@
|
|
|
560
571
|
this.showCropImage = false;
|
|
561
572
|
//#endregion
|
|
562
573
|
//#region Proprietà per gestione ridimensionamento file di tipo image
|
|
563
|
-
this.imageChangedEvent =
|
|
564
|
-
this.croppedImage =
|
|
574
|
+
this.imageChangedEvent = "";
|
|
575
|
+
this.croppedImage = "";
|
|
565
576
|
this.transform = {};
|
|
566
577
|
//#endregion
|
|
567
578
|
this.AttachmentType = exports.AttachmentType;
|
|
@@ -577,7 +588,7 @@
|
|
|
577
588
|
if (!this.allowedTypes || this.allowedTypes.length == 0)
|
|
578
589
|
this.allowedTypes = [exports.AttachmentType.FILE, exports.AttachmentType.LINK];
|
|
579
590
|
else if (this.allowedTypes.find(function (t) { return t != exports.AttachmentType.FILE && t != exports.AttachmentType.LINK; })) {
|
|
580
|
-
EqpAttachmentDialogService.Warning(
|
|
591
|
+
EqpAttachmentDialogService.Warning('Almeno uno degli AttachmentType selezionati nel parametro "allowedTypes" non esiste.');
|
|
581
592
|
this.allowedTypes = [exports.AttachmentType.FILE, exports.AttachmentType.LINK];
|
|
582
593
|
}
|
|
583
594
|
//Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
|
|
@@ -609,27 +620,45 @@
|
|
|
609
620
|
this.attachmentsColumns = [];
|
|
610
621
|
if (this.disableAction != true) {
|
|
611
622
|
this.attachmentsColumns.push({
|
|
612
|
-
key: "action",
|
|
613
|
-
|
|
623
|
+
key: "action",
|
|
624
|
+
display: "",
|
|
625
|
+
type: eqpTable.TypeColumn.MenuAction,
|
|
626
|
+
buttonMenuIcon: "more_vert",
|
|
627
|
+
styles: { flex: "0 0 6%" },
|
|
614
628
|
actions: [
|
|
615
|
-
{ name: this.deleteLabel, icon: "delete", fn: function (element, index, col) { return _this.deleteAttachment(element); } }
|
|
616
|
-
]
|
|
629
|
+
{ name: this.deleteLabel, icon: "delete", fn: function (element, index, col) { return _this.deleteAttachment(element); } }
|
|
630
|
+
]
|
|
617
631
|
});
|
|
618
632
|
}
|
|
619
633
|
var downloadColumn = {
|
|
620
|
-
key: "attachment",
|
|
621
|
-
|
|
634
|
+
key: "attachment",
|
|
635
|
+
display: "",
|
|
636
|
+
type: eqpTable.TypeColumn.SimpleAction,
|
|
637
|
+
styles: { flex: "0 0 6%" },
|
|
622
638
|
actions: [
|
|
623
639
|
{
|
|
624
|
-
name:
|
|
625
|
-
|
|
640
|
+
name: "",
|
|
641
|
+
fontawesome: true,
|
|
642
|
+
icon: function (element) {
|
|
643
|
+
return _this.showInlinePreview
|
|
644
|
+
? element.AttachmentType == exports.AttachmentType.FILE
|
|
645
|
+
? "fas fa-cloud-download-alt"
|
|
646
|
+
: "fas fa-external-link-alt"
|
|
647
|
+
: _this.getAttachmentIcon(element);
|
|
648
|
+
},
|
|
626
649
|
fn: function (element, col, elementIndex) { return _this.viewAttachment(element); },
|
|
627
|
-
tooltip: {
|
|
628
|
-
|
|
650
|
+
tooltip: {
|
|
651
|
+
tooltipText: function (element) {
|
|
652
|
+
return element.AttachmentType == exports.AttachmentType.FILE ? _this.downloadLabel : _this.openLinkLabel;
|
|
653
|
+
},
|
|
654
|
+
tooltipPosition: this.downloadTooltipPosition
|
|
655
|
+
}
|
|
656
|
+
}
|
|
629
657
|
]
|
|
630
658
|
};
|
|
631
659
|
var inlinePreviewColumn = {
|
|
632
|
-
key: "InlinePreview",
|
|
660
|
+
key: "InlinePreview",
|
|
661
|
+
display: this.previewLabel,
|
|
633
662
|
type: eqpTable.TypeColumn.ExternalTemplate,
|
|
634
663
|
externalTemplate: this.inlinePreviewTemplate,
|
|
635
664
|
styles: { flex: "0 0 10%" }
|
|
@@ -672,7 +701,7 @@
|
|
|
672
701
|
*/
|
|
673
702
|
EqpAttachmentsComponent.prototype.viewAttachment = function (attachment) {
|
|
674
703
|
if (attachment.AttachmentType == exports.AttachmentType.LINK) {
|
|
675
|
-
window.open(attachment.FilePath,
|
|
704
|
+
window.open(attachment.FilePath, "_blank");
|
|
676
705
|
return;
|
|
677
706
|
}
|
|
678
707
|
if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
|
|
@@ -716,8 +745,8 @@
|
|
|
716
745
|
this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
|
|
717
746
|
disableClose: true,
|
|
718
747
|
hasBackdrop: true,
|
|
719
|
-
width:
|
|
720
|
-
maxHeight:
|
|
748
|
+
width: "60%",
|
|
749
|
+
maxHeight: "80%"
|
|
721
750
|
});
|
|
722
751
|
};
|
|
723
752
|
EqpAttachmentsComponent.prototype.createAttachmentForm = function () {
|
|
@@ -756,7 +785,10 @@
|
|
|
756
785
|
}
|
|
757
786
|
}
|
|
758
787
|
else {
|
|
759
|
-
return this.newMultipleAttachments.filter(function (p) {
|
|
788
|
+
return (this.newMultipleAttachments.filter(function (p) {
|
|
789
|
+
return (p.AttachmentType == exports.AttachmentType.FILE && !p.FileDataBase64) ||
|
|
790
|
+
(p.AttachmentType == exports.AttachmentType.LINK && !p.FilePath);
|
|
791
|
+
}).length > 0);
|
|
760
792
|
}
|
|
761
793
|
};
|
|
762
794
|
EqpAttachmentsComponent.prototype.confirmAddAttachment = function () {
|
|
@@ -803,8 +835,12 @@
|
|
|
803
835
|
}
|
|
804
836
|
if (!(this.getAttachmentEndpoint && this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64)) return [3 /*break*/, 2];
|
|
805
837
|
return [4 /*yield*/, this.getAttachmentByID()
|
|
806
|
-
.then(function (res) {
|
|
807
|
-
.
|
|
838
|
+
.then(function (res) {
|
|
839
|
+
_this.selectedAttachment.FileDataBase64 = res.FileDataBase64;
|
|
840
|
+
})
|
|
841
|
+
.catch(function (err) {
|
|
842
|
+
EqpAttachmentDialogService.Error(err);
|
|
843
|
+
})];
|
|
808
844
|
case 1:
|
|
809
845
|
_a.sent();
|
|
810
846
|
_a.label = 2;
|
|
@@ -812,7 +848,9 @@
|
|
|
812
848
|
if (this.selectedAttachment.AttachmentType == exports.AttachmentType.LINK) {
|
|
813
849
|
this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedAttachment.FilePath);
|
|
814
850
|
}
|
|
815
|
-
else if (this.selectedAttachment.IsImage &&
|
|
851
|
+
else if (this.selectedAttachment.IsImage &&
|
|
852
|
+
!this.selectedAttachment.FileDataBase64 &&
|
|
853
|
+
!this.selectedAttachment.FileThumbnailBase64) {
|
|
816
854
|
EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima dell'allegato, file mancante.");
|
|
817
855
|
return [2 /*return*/];
|
|
818
856
|
}
|
|
@@ -831,7 +869,7 @@
|
|
|
831
869
|
}
|
|
832
870
|
this.dialog.open(this.dialogPreview, {
|
|
833
871
|
disableClose: true,
|
|
834
|
-
hasBackdrop: true
|
|
872
|
+
hasBackdrop: true
|
|
835
873
|
});
|
|
836
874
|
return [2 /*return*/];
|
|
837
875
|
}
|
|
@@ -866,11 +904,11 @@
|
|
|
866
904
|
this.selectedFiles = event.target.files;
|
|
867
905
|
if (!this.selectedFile)
|
|
868
906
|
return [2 /*return*/];
|
|
869
|
-
//Memorizza i dati per l'allegato
|
|
907
|
+
//Memorizza i dati per l'allegato
|
|
870
908
|
_a = this;
|
|
871
909
|
return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFile, false)];
|
|
872
910
|
case 1:
|
|
873
|
-
//Memorizza i dati per l'allegato
|
|
911
|
+
//Memorizza i dati per l'allegato
|
|
874
912
|
_a.newAttachment = _b.sent();
|
|
875
913
|
this.newMultipleAttachments = new Array();
|
|
876
914
|
this.newMultipleAttachments.push(this.newAttachment);
|
|
@@ -938,11 +976,11 @@
|
|
|
938
976
|
switch (_a.label) {
|
|
939
977
|
case 0:
|
|
940
978
|
newAttachment = {};
|
|
941
|
-
//Memorizza i dati per l'allegato
|
|
979
|
+
//Memorizza i dati per l'allegato
|
|
942
980
|
newAttachment.AttachmentType = exports.AttachmentType.FILE;
|
|
943
981
|
newAttachment.FileContentType = currentFile.type;
|
|
944
982
|
newAttachment.FileName = currentFile.name;
|
|
945
|
-
newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(
|
|
983
|
+
newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(".") + 1);
|
|
946
984
|
newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
|
|
947
985
|
if (!(getBase64 == true)) return [3 /*break*/, 2];
|
|
948
986
|
return [4 /*yield*/, this.getBase64FromFile(currentFile)];
|
|
@@ -995,9 +1033,11 @@
|
|
|
995
1033
|
EqpAttachmentsComponent.prototype.checkAcceptedFiles = function () {
|
|
996
1034
|
var e_1, _a;
|
|
997
1035
|
var _this = this;
|
|
998
|
-
if (
|
|
999
|
-
|
|
1000
|
-
|
|
1036
|
+
if (!this.allowVideo) {
|
|
1037
|
+
if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
|
|
1038
|
+
(this.loadMultipleFiles == true && __spread(this.selectedFiles).filter(function (p) { return p.type.startsWith("video"); }).length > 0))
|
|
1039
|
+
return false;
|
|
1040
|
+
}
|
|
1001
1041
|
if (this.acceptedFileTypes == "*")
|
|
1002
1042
|
return true;
|
|
1003
1043
|
//Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
|
|
@@ -1056,15 +1096,15 @@
|
|
|
1056
1096
|
var image = new Image();
|
|
1057
1097
|
image.src = e.target.result;
|
|
1058
1098
|
image.onload = function (rs) {
|
|
1059
|
-
_this.originalHeight = rs.currentTarget[
|
|
1060
|
-
_this.originalWidth = rs.currentTarget[
|
|
1099
|
+
_this.originalHeight = rs.currentTarget["height"];
|
|
1100
|
+
_this.originalWidth = rs.currentTarget["width"];
|
|
1061
1101
|
if (_this.originalWidth > 1280) {
|
|
1062
1102
|
_this.customWidth = 1280;
|
|
1063
1103
|
_this.customHeight = Math.round((1280 * _this.originalHeight) / _this.originalWidth);
|
|
1064
1104
|
}
|
|
1065
1105
|
else {
|
|
1066
|
-
_this.customHeight = rs.currentTarget[
|
|
1067
|
-
_this.customWidth = rs.currentTarget[
|
|
1106
|
+
_this.customHeight = rs.currentTarget["height"];
|
|
1107
|
+
_this.customWidth = rs.currentTarget["width"];
|
|
1068
1108
|
}
|
|
1069
1109
|
};
|
|
1070
1110
|
};
|
|
@@ -1093,18 +1133,18 @@
|
|
|
1093
1133
|
/**
|
|
1094
1134
|
* Comprime l'immagine passando come parametri le options create nell'oggetto sopra, e il file dal reader principale
|
|
1095
1135
|
*/
|
|
1096
|
-
imageCompression(file, options).then(
|
|
1136
|
+
imageCompression(file, options).then(function (fileCompressed) {
|
|
1097
1137
|
var fileReader = new FileReader();
|
|
1098
1138
|
//Faccio la push di ogni file all'interno dell'array di file dell'item da mandare al server
|
|
1099
1139
|
fileReader.onload = function () {
|
|
1100
1140
|
var resultReader = fileReader.result;
|
|
1101
|
-
var marker =
|
|
1141
|
+
var marker = ";base64,";
|
|
1102
1142
|
self.newAttachment.FileDataBase64 = resultReader.substring(resultReader.indexOf(marker) + marker.length);
|
|
1103
1143
|
self.showCropImage = false;
|
|
1104
1144
|
self.newAttachmentForm.enable();
|
|
1105
1145
|
};
|
|
1106
1146
|
fileReader.readAsDataURL(fileCompressed);
|
|
1107
|
-
})
|
|
1147
|
+
});
|
|
1108
1148
|
};
|
|
1109
1149
|
EqpAttachmentsComponent.prototype.confirmCrop = function () {
|
|
1110
1150
|
this.imageCropper.crop();
|
|
@@ -1113,9 +1153,9 @@
|
|
|
1113
1153
|
* Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
|
|
1114
1154
|
*/
|
|
1115
1155
|
EqpAttachmentsComponent.prototype.abortFile = function () {
|
|
1116
|
-
this.imageChangedEvent =
|
|
1156
|
+
this.imageChangedEvent = "";
|
|
1117
1157
|
if (this.imageInput)
|
|
1118
|
-
this.imageInput.nativeElement.value =
|
|
1158
|
+
this.imageInput.nativeElement.value = "";
|
|
1119
1159
|
this.selectedFile = null;
|
|
1120
1160
|
this.selectedFiles = null;
|
|
1121
1161
|
this.showCropImage = false;
|
|
@@ -1197,6 +1237,9 @@
|
|
|
1197
1237
|
__decorate([
|
|
1198
1238
|
core.Input("tablePaginatorSize")
|
|
1199
1239
|
], EqpAttachmentsComponent.prototype, "tablePaginatorSize", void 0);
|
|
1240
|
+
__decorate([
|
|
1241
|
+
core.Input("allowVideo")
|
|
1242
|
+
], EqpAttachmentsComponent.prototype, "allowVideo", void 0);
|
|
1200
1243
|
__decorate([
|
|
1201
1244
|
core.Input("downloadTooltipPosition")
|
|
1202
1245
|
], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
|
|
@@ -1270,29 +1313,29 @@
|
|
|
1270
1313
|
core.Output("onComponentLoaded")
|
|
1271
1314
|
], EqpAttachmentsComponent.prototype, "onComponentLoaded", void 0);
|
|
1272
1315
|
__decorate([
|
|
1273
|
-
core.ViewChild(
|
|
1316
|
+
core.ViewChild("dialogAddAttachment", { static: true })
|
|
1274
1317
|
], EqpAttachmentsComponent.prototype, "dialogAddAttachment", void 0);
|
|
1275
1318
|
__decorate([
|
|
1276
|
-
core.ViewChild(
|
|
1319
|
+
core.ViewChild("dialogAddMultipleAttachment", { static: true })
|
|
1277
1320
|
], EqpAttachmentsComponent.prototype, "dialogAddMultipleAttachment", void 0);
|
|
1278
1321
|
__decorate([
|
|
1279
1322
|
core.ViewChild(ngxImageCropper.ImageCropperComponent)
|
|
1280
1323
|
], EqpAttachmentsComponent.prototype, "imageCropper", void 0);
|
|
1281
1324
|
__decorate([
|
|
1282
|
-
core.ViewChild(
|
|
1325
|
+
core.ViewChild("imageInput")
|
|
1283
1326
|
], EqpAttachmentsComponent.prototype, "imageInput", void 0);
|
|
1284
1327
|
__decorate([
|
|
1285
|
-
core.ViewChild(
|
|
1328
|
+
core.ViewChild("attachmentTable", { static: false })
|
|
1286
1329
|
], EqpAttachmentsComponent.prototype, "attachmentTable", void 0);
|
|
1287
1330
|
__decorate([
|
|
1288
|
-
core.ViewChild(
|
|
1331
|
+
core.ViewChild("inlinePreviewTemplate", { static: true })
|
|
1289
1332
|
], EqpAttachmentsComponent.prototype, "inlinePreviewTemplate", void 0);
|
|
1290
1333
|
__decorate([
|
|
1291
|
-
core.ViewChild(
|
|
1334
|
+
core.ViewChild("dialogPreview", { static: true })
|
|
1292
1335
|
], EqpAttachmentsComponent.prototype, "dialogPreview", void 0);
|
|
1293
1336
|
EqpAttachmentsComponent = __decorate([
|
|
1294
1337
|
core.Component({
|
|
1295
|
-
selector:
|
|
1338
|
+
selector: "eqp-attachments",
|
|
1296
1339
|
template: "<!-- Se richiesta la gestione multipla mostra il pulsante di aggiunta e la tabella con l'elenco allegati -->\r\n<div *ngIf=\"multipleAttachment == true\">\r\n <mat-card [ngStyle]=\"{ 'box-shadow': showMatCard == false ? 'none' : null }\">\r\n <mat-card-header>\r\n <div class=\"col-md-6\">\r\n <div class=\"text-nowrap eqp-attachments-header-title\" *ngIf=\"showHeader == true\">\r\n {{headerTitle}}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 text-right\">\r\n <div class=\"row justify-content-end\">\r\n <!-- Template del button per l'aggiunta di un allegato -->\r\n <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n </div>\r\n </div>\r\n </mat-card-header>\r\n <mat-card-content>\r\n <eqp-table #attachmentTable [createMatCard]=\"false\" #table [columns]=\"attachmentsColumns\"\r\n [isMultiLanguage]=\"isEqpTableMultiLanguage\" [data]=\"attachmentsList\"\r\n [paginatorVisible]=\"tablePaginatorVisible\" [matPaginatorSize]=\"tablePaginatorSize\"\r\n [emptyTableMessage]=\"emptyTableMessage\" [searchText]=\"eqpTableSearchText\">\r\n </eqp-table>\r\n </mat-card-content>\r\n </mat-card>\r\n</div>\r\n\r\n<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n <!-- Template del button per l'aggiunta di un allegato -->\r\n <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n\r\n <button class=\"mb-2 mr-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n <mat-icon *ngIf=\"attachmentsList[0].AttachmentType == AttachmentType.FILE\">download</mat-icon>\r\n <mat-icon *ngIf=\"attachmentsList[0].AttachmentType != AttachmentType.FILE\">open_in_new</mat-icon>\r\n {{attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel}}\r\n </button>\r\n <button class=\"mb-2 mr-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n mat-raised-button color=\"primary\"\r\n *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio')))\">\r\n <mat-icon>visibility</mat-icon> {{previewLabel}}\r\n </button>\r\n <button class=\"mb-2 eqp-attachments-delete-btn\" (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\"\r\n mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n [disabled]=\"isDisabled\">\r\n <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n </button>\r\n\r\n <div class=\"row\" style=\"margin-top: 10px;\"\r\n *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].FileDataBase64 && attachmentsList[0].IsImage == true\">\r\n <div class=\"col-sm-12\">\r\n <div class=\"single-attachment-inline-preview-container\">\r\n <img src=\"data:image/png;base64,{{attachmentsList[0].FileDataBase64}}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].IsImage != true\">\r\n <div class=\"col-sm-12\">\r\n <mat-form-field>\r\n <mat-label>{{fileNameLabel}}</mat-label>\r\n <input readonly matInput [(ngModel)]=\"attachmentsList[0].FileName\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #dialogAddAttachment>\r\n <div class=\"container-fluid eqp-attachments-dialog-add-container\"\r\n style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n <form [formGroup]=\"newAttachmentForm\" (ngSubmit)=\"confirmAddAttachment()\" *ngIf=\"newAttachmentForm\">\r\n <div class=\"row\">\r\n <div class=\"header-title-standard\"> {{addButtonLabel}} {{ newAttachment.AttachmentType ==\r\n attachmentType.FILE ?\r\n 'File' : 'Link'}} </div>\r\n </div>\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == attachmentType.FILE\">\r\n <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileInputChange($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button (click)=\"imageInput.click()\" type=\"button\" style=\"margin-left: 10px;\" id=\"file_attachment\"\r\n mat-raised-button color=\"primary\" [disabled]=\"showCropImage == true\"\r\n class=\"mb-2 btn btn-primary eqp-attachments-upload-btn\" *ngIf=\"(loadMultipleFiles != true && !newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length == 0)\">\r\n <mat-icon>cloud_upload</mat-icon>\r\n {{uploadFileLabel}}\r\n </button>\r\n <button (click)=\"abortFile()\" type=\"button\" style=\"margin-left: 10px;\" mat-raised-button\r\n *ngIf=\"(loadMultipleFiles != true && newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0)\" class=\"mb-2 eqp-attachments-delete-btn\">\r\n <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n </button>\r\n </div>\r\n <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2 || (selectedFile && loadMultipleFiles != true)\">\r\n <mat-form-field style=\"width: 100%;\">\r\n <mat-label> {{fileNameLabel}} </mat-label>\r\n <input formControlName=\"name\" matInput [(ngModel)]=\"newAttachment.FileName\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2\">\r\n <mat-form-field style=\"width: 100%;\">\r\n <mat-label> Link </mat-label>\r\n <input formControlName=\"path\" required matInput [(ngModel)]=\"newAttachment.FilePath\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <!-- Riporta l'elenco dei nomi dei file caricati contemporaneamente (visibile solo se loadMultipleFiles = TRUE e se ci sono realmente pi\u00F9 file senza link) -->\r\n <div class=\"row\" *ngIf=\"loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0 && newMultipleAttachments[0].AttachmentType != attachmentType.LINK\">\r\n <div class=\"col-12\" *ngFor=\"let attach of newMultipleAttachments\">\r\n <mat-form-field style=\"width: 100%\">\r\n <mat-label> {{fileNameLabel}} </mat-label>\r\n <input disabled matInput [(ngModel)]=\"attach.FileName\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento MULTIPLO ma \u00E8 stata selezionata una sola immagine (quindi \u00E8 entrato in gioco anche il croppie) -->\r\n <div class=\"row\" *ngIf=\"loadMultipleFiles == true && showCropImage != true && newMultipleAttachments && newMultipleAttachments.length == 1 && newMultipleAttachments[0].IsImage == true\" style=\"margin-top: 10px;\">\r\n <div class=\"col-4\">\r\n <div class=\"single-attachment-inline-preview-container\">\r\n <img src=\"data:image/png;base64,{{newMultipleAttachments[0].FileDataBase64}}\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento SINGOLO ed \u00E8 stata selezionata un'immagine -->\r\n <div class=\"row\" *ngIf=\"loadMultipleFiles != true && showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\" style=\"margin-top: 10px;\">\r\n <div class=\"col-4\">\r\n <div class=\"single-attachment-inline-preview-container\">\r\n <img src=\"data:image/png;base64,{{newAttachment.FileDataBase64}}\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\r\n\r\n <div class=\"row mt-2\">\r\n <div class=\"col-sm-12 text-right\">\r\n <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n [disabled]=\"showCropImage == true || (loadMultipleFiles != true && newAttachmentForm?.disabled == true) || disableSave()\">\r\n {{saveLabel}}\r\n </button>\r\n <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" (click)=\"close()\"\r\n [disabled]=\"showCropImage == true\" type=\"button\">\r\n {{exitLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n <img src=\"data:image/png;base64,{{row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64}}\">\r\n </div>\r\n <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n <div class=\"container-fluid\" style=\"max-height: 70vh !important;\" *ngIf=\"selectedAttachment\">\r\n <div class=\"row\">\r\n <div class=\"header-title-standard\">\r\n {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mt-2\">\r\n <!-- ANTEPRIMA IMMAGINE -->\r\n <div class=\"col-12 text-center preview-container\" *ngIf=\"selectedAttachment.IsImage\">\r\n <img class=\"image-preview\"\r\n src=\"data:image/png;base64,{{selectedAttachment.FileDataBase64 ? selectedAttachment.FileDataBase64 : selectedAttachment.FileThumbnailBase64}}\">\r\n </div>\r\n\r\n <!-- ANTEPRIMA LINK -->\r\n <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n <iframe class=\"link-preview\" [src]=\"selectedAttachment.TrustedUrl\"\r\n [title]=\"selectedAttachment.FileName\"></iframe>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mt-3\">\r\n <div class=\"col-sm-12 text-right\">\r\n <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n (click)=\"viewAttachment(selectedAttachment)\"\r\n *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n {{downloadLabel}}\r\n </button>\r\n <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" mat-dialog-close type=\"button\"\r\n (click)=\"selectedAttachment = null\">\r\n {{exitLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n\r\n <!-- \r\n Pulsanti per l'aggiunta di un file o un link. Ne viene visualizzato uno se:\r\n - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n e sono nella gestione di pi\u00F9 allegati (multipleAttachment == true)\r\n OPPURE\r\n - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n e sono nella gestione di un singolo allegato (multipleAttachment == true) e non ne \u00E8 ancora stato selezionato uno (ovvero attachmentsList non esiste o non ha elementi)\r\n -->\r\n <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n *ngIf=\"allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\"\r\n (click)=\"openModalAddAttachment(allowedTypes[0])\" [disabled]=\"isDisabled\">\r\n <!-- Per l'aggiunta dei file mostro un'icona diversa dall'aggiunta dei link -->\r\n <mat-icon *ngIf=\"allowedTypes[0] == 1\">cloud_upload</mat-icon>\r\n <i class=\"fas fa-link\" *ngIf=\"allowedTypes[0] == 2\"></i>\r\n <span style=\"margin-left: 10px;\">{{addButtonLabel}} {{allowedTypes[0] == 1 ? \"file\" : \"link\"}}</span>\r\n </button>\r\n\r\n\r\n <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n *ngIf=\"allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n <mat-icon *ngIf=\"multipleAttachment != true\">cloud_upload</mat-icon>\r\n <mat-icon *ngIf=\"multipleAttachment == true\">add</mat-icon>\r\n <span style=\"margin-left: 0px;\"> {{addButtonLabel}} </span>\r\n </button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n <i class=\"fas fa-file\"></i>\r\n <span style=\"margin-left: 10px;\">File</span>\r\n </button>\r\n <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fas fa-link\"></i>\r\n <span style=\"margin-left: 10px;\">Link</span>\r\n </button>\r\n </mat-menu>\r\n</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate let-form=\"form\">\r\n <div class=\"row mt-2 mb-2\" [formGroup]=\"form\">\r\n <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n <span class=\"mr-1\">Max H(px):</span>\r\n <mat-form-field>\r\n <input formControlName=\"customHeight\" type=\"number\" matInput [(ngModel)]=\"customHeight\"\r\n (change)=\"onDimensionsChange('H')\">\r\n </mat-form-field>\r\n\r\n <span class=\"ml-2 mr-1\">Max W(px):</span>\r\n <mat-form-field>\r\n <input formControlName=\"customWidth\" type=\"number\" matInput [(ngModel)]=\"customWidth\"\r\n (change)=\"onDimensionsChange('W')\">\r\n </mat-form-field>\r\n\r\n <button class=\"btn btn-primary mat-raised-button ml-2\" (click)=\"restoreOriginalDimensions()\"\r\n [disabled]=\"customWidth == originalWidth && customHeight == originalHeight\">\r\n <mat-icon style=\"vertical-align: middle;\">replay</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center\">\r\n <div style=\"max-height: 450px; max-width: 450px;\">\r\n <image-cropper [imageChangedEvent]=\"imageChangedEvent\" [maintainAspectRatio]=\"false\"\r\n [autoCrop]=\"false\" [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4/3\"\r\n [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\" [roundCropper]=\"false\" [canvasRotation]=\"0\"\r\n [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\" (imageCropped)=\"imageCropped($event)\"\r\n [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\">\r\n </image-cropper>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center mt-2\">\r\n <div style=\"max-height: 450px; max-width: 450px;\">\r\n <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn mr-2\" type=\"button\"\r\n (click)=\"confirmCrop()\">\r\n {{confirmLabel}}\r\n </button>\r\n <button class=\"btn mat-raised-button eqp-attachments-abort-btn\" type=\"button\" (click)=\"abortFile()\">\r\n {{abortLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>",
|
|
1297
1340
|
styles: [".eqp-attachments-header-title{font-weight:700;font-size:19px;line-height:24px;margin-bottom:auto}.single-attachment-inline-preview-container{max-height:400px;max-width:400px;display:flex;align-items:center}.single-attachment-inline-preview-container img{max-width:100%;max-height:120px}.inline-preview-container{max-height:100px;max-width:100px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer}.inline-preview-container img{max-width:100%;max-height:100px}.inline-preview-container i{font-size:25px;margin:auto}.preview-container{max-height:60vh;max-width:100%}.preview-container .image-preview{max-width:100%;max-height:100%}.preview-container .link-preview{width:70vw;height:55vh}"]
|
|
1298
1341
|
})
|