wlpacks-ontimize-web-ngx-filemanager
Version:
An implementation of file management system for Ontimize Web
866 lines (853 loc) • 258 kB
JavaScript
import { Pipe, Injector, NgModule, Component, forwardRef, ViewEncapsulation, ApplicationRef, ComponentFactoryResolver, Injectable, ViewChild, ChangeDetectionStrategy, Inject, Optional, TemplateRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { OTranslateService, OFileUploader, DEFAULT_INPUTS_O_FILE_INPUT, DEFAULT_OUTPUTS_O_FILE_INPUT, OFileInputComponent, OFileItem, OSharedModule, DEFAULT_INPUTS_O_TABLE, DEFAULT_OUTPUTS_O_TABLE, ObservableWrapper, OntimizeServiceProvider, OntimizeWebModule, OTableComponent, OTableDataSourceService, Util, DialogService, InputConverter, OFormComponent, OBaseTableCellRenderer, OntimizeEEService } from 'wlpacks-ontimize-web-ngx';
import { __extends, __spread, __decorate, __metadata } from 'tslib';
import { CommonModule } from '@angular/common';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Subject, Observable } from 'rxjs';
import { FormControl, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material';
import { HttpEventType, HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { filter, share } from 'rxjs/operators';
var MAP = {
// English
'en': {
'name': 'Name',
'newName': 'New name',
'size': 'Size',
'creationDate': 'Creation date',
'CONTEXT_MENU.OPEN_FOLDER': 'Open',
'CONTEXT_MENU.DOWNLOAD_FILE': 'Download',
'CONTEXT_MENU.CHANGE_NAME': 'Rename',
'MESSAGES.ERROR_DOWNLOAD': 'Failed to download file from the server.',
'BUTTONS.UPLOAD': 'Upload',
'BUTTONS.NEW_FOLDER': 'New folder',
'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'New folder',
'CHANGE_NAME_TITLE': 'Change name',
'MESSAGES.UPLOADING_SINGLE_FILE': 'Uploading 1 element',
'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Uploading elements',
'MESSAGES.UPLOADING_COMPLETED': 'Uploading completed',
'MESSAGES.UPLOADING_ERROR': 'An error has occurred',
'MESSAGES.UPLOADING_CANCELLED': 'Uploading cancelled',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': 'Are you sure you want to discard the upload?',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'Uploading is not completed',
'MESSAGES.PREPARE_DOWNLOAD': 'Preparing download',
'MESSAGES.DOWNLOADING': 'Downloading elements',
'MESSAGES.DOWNLOAD_COMPLETED': 'Download completed',
'MESSAGES.DOWNLOAD_CANCELLED': 'Download cancelled',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': 'Are you sure you want to discard the download?',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'Downloading is not completed',
'MESSAGES.COMPRESSING_FILES': 'Compressing files',
// 'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \\ / : * ? \" < > |'
'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_'
},
// Spanish
'es': {
'name': 'Nombre',
'newName': 'Nuevo nombre',
'size': 'Tamaño',
'creationDate': 'Fecha de creación',
'CONTEXT_MENU.OPEN_FOLDER': 'Abrir',
'CONTEXT_MENU.DOWNLOAD_FILE': 'Descargar',
'CONTEXT_MENU.CHANGE_NAME': 'Cambiar nombre',
'MESSAGES.ERROR_DOWNLOAD': 'Error al descargar el fichero del servidor.',
'BUTTONS.UPLOAD': 'Subir',
'BUTTONS.NEW_FOLDER': 'Crear carpeta',
'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'Nueva carpeta',
'CHANGE_NAME_TITLE': 'Cambiar nombre',
'MESSAGES.UPLOADING_SINGLE_FILE': 'Subiendo 1 elemento',
'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Subiendo elementos',
'MESSAGES.UPLOADING_COMPLETED': 'Subida completada',
'MESSAGES.UPLOADING_ERROR': 'Ha ocurrido un error',
'MESSAGES.UPLOADING_CANCELLED': 'Subida cancelada',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': '¿Está seguro de que quiere cancelar la subida?',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'La subida no se ha completado',
'MESSAGES.PREPARE_DOWNLOAD': 'Preparando descarga',
'MESSAGES.DOWNLOADING': 'Descargando elementos',
'MESSAGES.DOWNLOAD_COMPLETED': 'Descarga completada',
'MESSAGES.DOWNLOAD_CANCELLED': 'Descarga cancelada',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': '¿Está seguro de que quiere cancelar la descarga?',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'La descarga no se ha completado',
'MESSAGES.COMPRESSING_FILES': 'Comprimiendo elementos',
// 'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \\ / : * ? \" < > |'
'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_'
}
};
var OFileManagerTranslatePipe = /** @class */ (function () {
function OFileManagerTranslatePipe(injector) {
this.injector = injector;
this.translateService = this.injector.get(OTranslateService);
}
OFileManagerTranslatePipe.prototype.transform = function (text) {
var textTranslated = undefined;
var bundle = MAP[this.translateService.getCurrentLang()];
if (bundle && bundle[text]) {
textTranslated = bundle[text];
}
else {
textTranslated = this.translateService.get(text);
}
return textTranslated;
};
OFileManagerTranslatePipe.decorators = [
{ type: Pipe, args: [{
name: 'oFileManagerTranslate',
pure: false
},] }
];
/** @nocollapse */
OFileManagerTranslatePipe.ctorParameters = function () { return [
{ type: Injector }
]; };
return OFileManagerTranslatePipe;
}());
var OFileManagerTranslateModule = /** @class */ (function () {
function OFileManagerTranslateModule() {
}
OFileManagerTranslateModule.forRoot = function () {
return {
ngModule: OFileManagerTranslateModule,
providers: []
};
};
OFileManagerTranslateModule.decorators = [
{ type: NgModule, args: [{
declarations: [OFileManagerTranslatePipe],
imports: [],
exports: [OFileManagerTranslatePipe]
},] }
];
return OFileManagerTranslateModule;
}());
var OFileUploaderExtended = /** @class */ (function (_super) {
__extends(OFileUploaderExtended, _super);
function OFileUploaderExtended(service, entity, form, workspaceKey, parentKey, filemanagerService) {
var _this = _super.call(this, service, entity) || this;
_this.form = form;
_this.workspaceKey = workspaceKey;
_this.parentKey = parentKey;
_this.filemanagerService = filemanagerService;
return _this;
}
OFileUploaderExtended.prototype.setParentItem = function (val) {
this.parentItem = val;
};
OFileUploaderExtended.prototype.getParentItem = function () {
return this.parentItem;
};
/**
* Uploads a single file on a single request.
* @param item the file to upload
*/
OFileUploaderExtended.prototype.uploadItem = function (item) {
item.prepareToUpload();
if (this.isUploading || item.isUploading) {
return;
}
this.isUploading = true;
item.isUploading = true;
this._onBeforeUploadItem(item);
if (this.service === undefined) {
console.warn('No service configured! aborting upload');
return;
}
if (this._uploadSuscription) {
this._uploadSuscription.unsubscribe();
}
var workspaceId = this.form.getDataValue(this.workspaceKey).value;
var folderId;
if (this.parentKey && this.parentItem.hasOwnProperty(this.parentKey)) {
folderId = this.parentItem[this.parentKey];
}
var self = this;
this._uploadSuscription =
this.filemanagerService.upload(workspaceId, folderId, [item]).subscribe(function (resp) {
if (resp.loaded && resp.total) {
var progress = Math.round(resp.loaded * 100 / resp.total);
self._onProgressItem(item, progress);
}
else if (resp.documentId && resp.fileId && resp.versionId) {
self._onSuccessItem(item, resp);
}
else {
console.log('error');
self._onErrorItem(item, 'Unknow error');
}
}, function (err) { return self._onErrorItem(item, err); }, function () { return self._onCompleteItem(item); });
};
return OFileUploaderExtended;
}(OFileUploader));
var OFileInputExtendedComponent = /** @class */ (function (_super) {
__extends(OFileInputExtendedComponent, _super);
function OFileInputExtendedComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
OFileInputExtendedComponent.prototype.initialize = function () {
_super.prototype.initialize.call(this);
this.uploader = new OFileUploaderExtended(this.fileService, this.entity, this.form, this.workspaceKey, this.parentKey, this.fileService);
this.uploader.splitUpload = this.splitUpload;
};
OFileInputExtendedComponent.prototype.fileSelected = function (event) {
var _this = this;
var value = '';
if (event) {
var files = event.target['files'];
// if (!this.multiple) {
// this.uploader.clear();
// }
for (var i = 0, f = void 0; f = files[i]; i++) {
var fileItem = new OFileItem(f, this.uploader);
this.uploader.addFile(fileItem);
}
value = this.uploader.files.map(function (file) { return file.name; }).join(', ');
}
window.setTimeout(function () {
_this.setValue(value !== '' ? value : undefined);
_this.inputFile.nativeElement.value = '';
if (_this._fControl) {
_this._fControl.markAsTouched();
}
}, 0);
};
OFileInputExtendedComponent.decorators = [
{ type: Component, args: [{
selector: 'o-file-input-extended',
template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\">\n <mat-form-field #innerInputContainer (click)=\"!enabled || isReadOnly ? null : inputFile.click()\" fxFill>\n <div fxLayout=\"row\">\n <input #inputShowValue matInput type=\"text\" [attr.id]=\"getAttribute()\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\"\n [placeholder]=\"placeHolder\" [ngModel]=\"getValue()\" (ngModelChange)=\"innerOnChange($event)\" readonly>\n <div matSuffix *ngIf=\"getValue()\" (click)=\"$event.stopPropagation()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\"\n class=\"o-file-input-buttons\">\n <button type=\"button\" mat-icon-button (click)=\"onClickClearValue($event)\">\n <mat-icon aria-label=\"Clear\">clear</mat-icon>\n </button>\n <button type=\"button\" mat-icon-button [disabled]=\"!isValid || uploader.isUploading\" (click)=\"onClickUpload($event)\">\n <mat-icon aria-label=\"Upload\">file_upload</mat-icon>\n </button>\n </div>\n </div>\n <mat-error *ngIf=\"hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n <mat-error *ngIf=\"hasError('fileType')\">{{ 'FORM_VALIDATION.FILE_TYPE' | oTranslate}} ({{ getErrorValue('fileType', 'allowedFileTypes') }})</mat-error>\n <mat-error *ngIf=\"hasError('fileSize')\">{{ 'FORM_VALIDATION.FILE_MAXSIZE' | oTranslate }}: {{ getErrorValue('fileSize', 'maxFileSize') }} bytes</mat-error>\n <mat-error *ngIf=\"hasError('numFile')\">{{ 'FORM_VALIDATION.FILE_MAXNUM' | oTranslate }}: {{ getErrorValue('numFile', 'maxFiles') }}</mat-error>\n </mat-form-field>\n <input #inputFile type=\"file\" id=\"{{getAttribute()+'-file-input'}}\" [attr.accept]=\"acceptFileType ? acceptFileType.replace(';',',') : null\"\n (change)=\"fileSelected($event)\" hidden=\"true\" [attr.multiple]=\"multiple ? '' : null\">\n <div *ngIf=\"showInfo && files\">\n <mat-progress-bar *ngIf=\"!splitUpload && uploader.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"uploader.progress\"></mat-progress-bar>\n <mat-list>\n <mat-list-item *ngFor=\"let file of files\">\n <mat-icon mat-list-icon>insert_drive_file</mat-icon>\n <span mat-line>{{ file.name }}</span>\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n <mat-progress-spinner *ngIf=\"splitUpload && file.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"file.progress\" class=\"uploading\"></mat-progress-spinner>\n <mat-icon *ngIf=\"splitUpload && file.isUploaded && file.isSuccess\" class=\"uploaded\">check_circle</mat-icon>\n <mat-icon *ngIf=\"splitUpload && file.isUploaded && file.isError\" class=\"error\">error</mat-icon>\n </div>\n </mat-list-item>\n </mat-list>\n </div>\n</div>\n",
inputs: __spread(DEFAULT_INPUTS_O_FILE_INPUT, [
'workspaceKey: workspace-key',
'parentKey: parent-key'
]),
outputs: DEFAULT_OUTPUTS_O_FILE_INPUT,
providers: [
{
provide: OFileInputComponent,
useExisting: forwardRef(function () { return OFileInputExtendedComponent; })
}
],
styles: [".o-file-input-buttons{position:absolute;top:0;bottom:0;right:0;margin:auto}mat-progress-spinner.uploading{width:24px;height:24px}mat-icon.uploaded{color:#0f9d58}mat-icon.error{color:#d50000}"]
}] }
];
return OFileInputExtendedComponent;
}(OFileInputComponent));
var OFileInputExtendedModule = /** @class */ (function () {
function OFileInputExtendedModule() {
}
OFileInputExtendedModule.decorators = [
{ type: NgModule, args: [{
declarations: [OFileInputExtendedComponent],
imports: [OSharedModule, CommonModule],
exports: [OFileInputExtendedComponent]
},] }
];
return OFileInputExtendedModule;
}());
var DEFAULT_INPUTS_DOWNLOAD_PROGRESS = [
'title',
'files'
];
var DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS = [];
var EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
var DownloadProgressComponent = /** @class */ (function () {
function DownloadProgressComponent() {
this._files = [];
this.isOpened = false;
this.collapsed = false;
}
DownloadProgressComponent.prototype.ngAfterViewInit = function () {
this.isOpened = true;
};
DownloadProgressComponent.prototype.onClose = function () {
if (this.onCloseFunction) {
this.isOpened = false;
this.onCloseFunction();
}
};
DownloadProgressComponent.prototype.onToggleCollapse = function () {
this.collapsed = !this.collapsed;
};
DownloadProgressComponent.prototype._getExpandedState = function () {
return this.collapsed ? 'collapsed' : 'expanded';
};
DownloadProgressComponent.prototype._getContainerState = function () {
return this.isOpened ? 'opened' : 'closed';
};
DownloadProgressComponent.prototype.onCancelFileDownload = function (file) {
if (file.subscription) {
file.subscription.unsubscribe();
file.cancelled = true;
}
};
DownloadProgressComponent.prototype.getText = function (file) {
if (file && file.name) {
return file.name;
}
var quantityStr = file && file.filesQuantity ? ' (' + file.filesQuantity + ')' : '';
return this.translatePipe.transform('MESSAGES.COMPRESSING_FILES') + quantityStr;
};
Object.defineProperty(DownloadProgressComponent.prototype, "cancelledDownloadText", {
get: function () {
return this.translatePipe.transform('MESSAGES.DOWNLOAD_CANCELLED');
},
enumerable: true,
configurable: true
});
Object.defineProperty(DownloadProgressComponent.prototype, "files", {
get: function () {
return this._files;
},
set: function (arg) {
this._files = arg;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DownloadProgressComponent.prototype, "title", {
get: function () {
return this._title;
},
set: function (arg) {
this._title = arg;
},
enumerable: true,
configurable: true
});
DownloadProgressComponent.decorators = [
{ type: Component, args: [{
selector: 'download-progress',
template: "<div [@containerPosition]=\"_getContainerState()\" [class.opened]=\"isOpened\" class=\"download-progress-container mat-elevation-z4\"\n fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"30\">\n\n <mat-toolbar color=\"primary\" class=\"download-progress-toolbar\">\n <div class=\"mat-toolbar-tools\" fxLayout=\"row\" fxFill fxLayoutAlign=\"start center\">\n\n <div *ngIf=\"title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n <span>{{ title }}</span>\n </div>\n <span class=\"fill-remaining\"></span>\n\n <button type=\"button\" mat-icon-button (click)=\"onToggleCollapse()\">\n <mat-icon *ngIf=\"!collapsed\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"collapsed\">keyboard_arrow_up</mat-icon>\n </button>\n\n <button type=\"button\" mat-icon-button (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-toolbar>\n\n <div [class.collapsed]=\"collapsed\" class=\"download-progress-content\" [@contentExpansion]=\"_getExpandedState()\">\n <mat-list fxFlex>\n <mat-list-item *ngFor=\"let file of files\">\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"file-data\">\n <span class=\"file-name\" [class.downloading]=\"!file.downloaded\" *ngIf=\"!file.cancelled\"> {{ getText(file) }} </span>\n <span class=\"file-cancelled-text\" *ngIf=\"file.cancelled\"> {{ cancelledDownloadText }} </span>\n\n <span class=\"fill-remaining\"></span>\n <mat-progress-spinner *ngIf=\"!file.downloaded && !file.cancelled\" color=\"accent\" [style.opacity]=\"file.name !== undefined ? 1 : 0.5\"\n mode=\"indeterminate\" class=\"uploading\" strokeWidth=\"3\" diameter=\"24\">\n </mat-progress-spinner>\n\n <button type=\"button\" mat-icon-button *ngIf=\"!file.downloaded && !file.cancelled\" (click)=\"onCancelFileDownload(file)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-icon *ngIf=\"file.downloaded\" class=\"downloaded\">check_circle</mat-icon>\n <!-- <mat-icon *ngIf=\"file.isUploaded && file.isError\" class=\"error\">error</mat-icon> -->\n <mat-icon *ngIf=\"file.cancelled\" class=\"cancelled\">warning</mat-icon>\n </div>\n </mat-list-item>\n </mat-list>\n </div>\n\n</div>",
inputs: DEFAULT_INPUTS_DOWNLOAD_PROGRESS,
outputs: DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS,
encapsulation: ViewEncapsulation.None,
host: {
'[class.download-progress]': 'true'
},
animations: [
trigger('contentExpansion', [
state('collapsed', style({ height: '0px' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING))
]),
trigger('containerPosition', [
state('opened', style({ opacity: '1' })),
state('closed', style({ opacity: '0.01', bottom: '0px' })),
transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING))
])
],
styles: [".download-progress{z-index:10;position:absolute}.download-progress .download-progress-container{position:fixed;bottom:24px;right:24px;width:362px;max-width:30%}.download-progress .download-progress-container:not(.opened) .download-progress-content{overflow:hidden}.download-progress .download-progress-container .mat-toolbar{font-size:14px;min-height:52px;cursor:default}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row{height:52px}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row .mat-icon-button:not(:hover){opacity:.7}.download-progress .download-progress-container .fill-remaining{flex:1 1 auto}.download-progress .download-progress-container .download-progress-content{max-height:240px;overflow:auto;padding:0 2px;box-sizing:border-box;width:100%}.download-progress .download-progress-container .download-progress-content .mat-list{padding:0}.download-progress .download-progress-container .download-progress-content .mat-list .mat-list-item{border-bottom:1px solid #eee;padding:0 14px}.download-progress .download-progress-container .download-progress-content .mat-list .mat-list-item-content{padding:0;font-size:13px}.download-progress .download-progress-container .download-progress-content .mat-list .mat-list-item-content .file-data{width:100%;cursor:default}.download-progress .download-progress-container .download-progress-content .mat-list .mat-list-item-content .file-data .mat-icon{width:40px;text-align:center}.download-progress .download-progress-container .download-progress-content .mat-list .file-cancelled-text,.download-progress .download-progress-container .download-progress-content .mat-list .file-name.downloading{opacity:.35}.download-progress .download-progress-container .download-progress-content .mat-list .cancelled{opacity:.5}.download-progress .download-progress-container .download-progress-content .mat-list .downloaded{color:#0f9d58}.download-progress .download-progress-container .download-progress-content .mat-list .error{color:#db4437}"]
}] }
];
return DownloadProgressComponent;
}());
var DEFAULT_INPUTS_UPLOAD_PROGRESS = [
'title',
'uploaderFiles : files'
];
var DEFAULT_OUTPUTS_UPLOAD_PROGRESS = [];
var EXPANSION_PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
var UploadProgressComponent = /** @class */ (function () {
function UploadProgressComponent() {
this._uploaderFiles = [];
this.isOpened = false;
this.collapsed = false;
}
UploadProgressComponent.prototype.ngAfterViewInit = function () {
this.isOpened = true;
};
UploadProgressComponent.prototype.onClose = function () {
if (this.onCloseFunction) {
this.isOpened = false;
this.onCloseFunction();
}
};
UploadProgressComponent.prototype.onToggleCollapse = function () {
this.collapsed = !this.collapsed;
};
UploadProgressComponent.prototype._getExpandedState = function () {
return this.collapsed ? 'collapsed' : 'expanded';
};
UploadProgressComponent.prototype._getContainerState = function () {
return this.isOpened ? 'opened' : 'closed';
};
UploadProgressComponent.prototype.onCancelFileUpload = function (file) {
if (this.onCancelItemUpload) {
this.onCancelItemUpload(file);
}
};
Object.defineProperty(UploadProgressComponent.prototype, "cancelledUploadText", {
get: function () {
return this.translatePipe.transform('MESSAGES.UPLOADING_CANCELLED');
},
enumerable: true,
configurable: true
});
Object.defineProperty(UploadProgressComponent.prototype, "uploaderFiles", {
get: function () {
return this._uploaderFiles;
},
set: function (arg) {
this._uploaderFiles = arg;
},
enumerable: true,
configurable: true
});
Object.defineProperty(UploadProgressComponent.prototype, "title", {
get: function () {
return this._title;
},
set: function (arg) {
this._title = arg;
},
enumerable: true,
configurable: true
});
UploadProgressComponent.decorators = [
{ type: Component, args: [{
selector: 'upload-progress',
template: "<div [@containerPosition]=\"_getContainerState()\" [class.opened]=\"isOpened\" class=\"upload-progress-container mat-elevation-z4\"\n fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"30\">\n\n <mat-toolbar color=\"primary\" class=\"upload-progress-toolbar\">\n <div class=\"mat-toolbar-tools\" fxLayout=\"row\" fxFill fxLayoutAlign=\"start center\">\n\n <div *ngIf=\"title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n <span>{{ title }}</span>\n </div>\n <span class=\"fill-remaining\"></span>\n\n <button type=\"button\" mat-icon-button (click)=\"onToggleCollapse()\">\n <mat-icon *ngIf=\"!collapsed\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"collapsed\">keyboard_arrow_up</mat-icon>\n </button>\n\n <button type=\"button\" mat-icon-button (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-toolbar>\n\n <!-- mat-expansion-panel-content -->\n <div [class.collapsed]=\"collapsed\" class=\"upload-progress-content\" [@contentExpansion]=\"_getExpandedState()\">\n <mat-list fxFlex>\n <mat-list-item *ngFor=\"let file of uploaderFiles\">\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"file-data\">\n <span class=\"file-name\" [class.uploading]=\"file.isUploading\"> {{ file.name }} </span>\n <span class=\"file-cancelled-text\" *ngIf=\"!file.isUploaded && file.isCancel\"> {{ cancelledUploadText }} </span>\n\n <span class=\"fill-remaining\"></span>\n <mat-progress-spinner *ngIf=\"file.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"file.progress\" class=\"uploading\"\n strokeWidth=\"3\" diameter=\"24\">\n </mat-progress-spinner>\n\n <button type=\"button\" mat-icon-button *ngIf=\"file.isUploading\" (click)=\"onCancelFileUpload(file)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-icon *ngIf=\"file.isUploaded && file.isSuccess\" class=\"uploaded\">check_circle</mat-icon>\n <mat-icon *ngIf=\"file.isUploaded && file.isError\" class=\"error\">error</mat-icon>\n <mat-icon *ngIf=\"!file.isUploaded && file.isCancel\" class=\"cancelled\">warning</mat-icon>\n </div>\n </mat-list-item>\n </mat-list>\n </div>\n\n</div>",
inputs: DEFAULT_INPUTS_UPLOAD_PROGRESS,
outputs: DEFAULT_OUTPUTS_UPLOAD_PROGRESS,
encapsulation: ViewEncapsulation.None,
host: {
'[class.upload-progress]': 'true'
},
animations: [
trigger('contentExpansion', [
state('collapsed', style({ height: '0px' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
]),
trigger('containerPosition', [
state('opened', style({ opacity: '1' })),
state('closed', style({ opacity: '0.01', bottom: '0px' })),
transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
])
],
styles: [".upload-progress{z-index:10;position:absolute}.upload-progress .upload-progress-container{position:fixed;bottom:24px;right:24px;width:362px;max-width:30%}.upload-progress .upload-progress-container:not(.opened) .upload-progress-content{overflow:hidden}.upload-progress .upload-progress-container .mat-toolbar{font-size:14px;min-height:52px;cursor:default}.upload-progress .upload-progress-container .mat-toolbar .mat-toolbar-row{height:52px}.upload-progress .upload-progress-container .mat-toolbar .mat-toolbar-row .mat-icon-button:not(:hover){opacity:.7}.upload-progress .upload-progress-container .fill-remaining{flex:1 1 auto}.upload-progress .upload-progress-container .upload-progress-content{max-height:240px;overflow:auto;padding:0 2px;box-sizing:border-box;width:100%}.upload-progress .upload-progress-container .upload-progress-content .mat-list{padding:0}.upload-progress .upload-progress-container .upload-progress-content .mat-list .mat-list-item{border-bottom:1px solid #eee;padding:0 14px;width:auto}.upload-progress .upload-progress-container .upload-progress-content .mat-list .mat-list-item-content{padding:0;font-size:13px}.upload-progress .upload-progress-container .upload-progress-content .mat-list .mat-list-item-content .file-data{width:100%;cursor:default}.upload-progress .upload-progress-container .upload-progress-content .mat-list .mat-list-item-content .file-data .mat-icon{width:40px;text-align:center}.upload-progress .upload-progress-container .upload-progress-content .mat-list .file-name.uploading{opacity:.35}.upload-progress .upload-progress-container .upload-progress-content .mat-list .file-cancelled-text{opacity:.35;margin-left:24px}.upload-progress .upload-progress-container .upload-progress-content .mat-list .cancelled{opacity:.5}.upload-progress .upload-progress-container .upload-progress-content .mat-list .uploaded{color:#0f9d58}.upload-progress .upload-progress-container .upload-progress-content .mat-list .error{color:#db4437}"]
}] }
];
return UploadProgressComponent;
}());
var DomService = /** @class */ (function () {
function DomService(componentFactoryResolver, appRef, injector) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.injector = injector;
}
DomService.prototype.appendComponentToBody = function (component) {
// 1. Create a component reference from the component
var componentRef = this.componentFactoryResolver
.resolveComponentFactory(component)
.create(this.injector);
// 2. Attach component to the appRef so that it's inside the ng component tree
this.appRef.attachView(componentRef.hostView);
// 3. Get DOM element from component
var domElem = componentRef.hostView
.rootNodes[0];
// 4. Append DOM element to the body
document.body.appendChild(domElem);
return componentRef;
};
DomService.prototype.removeComponentFromBody = function (componentRef, timeout) {
var _this = this;
if (timeout === void 0) { timeout = 0; }
setTimeout(function () {
if (componentRef && componentRef.hostView) {
_this.appRef.detachView(componentRef.hostView);
componentRef.destroy();
}
}, timeout);
};
DomService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DomService.ctorParameters = function () { return [
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector }
]; };
return DomService;
}());
var FileManagerStateService = /** @class */ (function () {
function FileManagerStateService(injector) {
this.injector = injector;
this.subject = new Subject();
}
FileManagerStateService.prototype.setFormParentItem = function (parentItem) {
this.formParentItem = parentItem;
this.stateArray = [];
};
FileManagerStateService.prototype.restart = function (index) {
var state$$1 = [];
if (index !== undefined) {
state$$1 = this._stateArray.slice(0, index + 1);
}
this.stateArray = state$$1;
};
FileManagerStateService.prototype.getFormParentItem = function () {
return this.formParentItem;
};
FileManagerStateService.prototype.getAndStoreQueryFilter = function (queryFilter, item) {
var filter$$1 = Object.assign({}, queryFilter);
var state$$1 = this.stateArray;
state$$1.push({ filter: filter$$1, item: item });
this.stateArray = state$$1;
return filter$$1;
};
FileManagerStateService.prototype.getCurrentQueryFilter = function () {
var result = {};
if (this.stateArray.length > 0) {
result = this.stateArray[this.stateArray.length - 1].filter;
}
return result;
};
FileManagerStateService.prototype.getStateObservable = function () {
return this.subject.asObservable();
};
Object.defineProperty(FileManagerStateService.prototype, "stateArray", {
get: function () {
return this._stateArray;
},
set: function (array) {
this._stateArray = array;
this.subject.next(this._stateArray);
},
enumerable: true,
configurable: true
});
FileManagerStateService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
FileManagerStateService.ctorParameters = function () { return [
{ type: Injector }
]; };
return FileManagerStateService;
}());
var FILENAME_REGEXP = /^[0-9a-zA-Z\u00C0-\u00FF\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_\¡\¿\º\ª\·\¬\;\€\`\´\¨ ]*$/;
function fileNameValidator(control) {
if ((void 0 !== control.value) && FILENAME_REGEXP.test(control.value)) {
return {};
}
return { 'invalidFileName': true };
}
var ChangeNameDialogData = /** @class */ (function () {
function ChangeNameDialogData() {
}
return ChangeNameDialogData;
}());
var ChangeNameDialogComponent = /** @class */ (function () {
function ChangeNameDialogComponent(injector, dialogRef) {
this.injector = injector;
this.dialogRef = dialogRef;
this.filenameFormControl = new FormControl('', [
Validators.required,
fileNameValidator
]);
this.translatePipe = new OFileManagerTranslatePipe(this.injector);
this.data = this.injector.get(MAT_DIALOG_DATA);
this.filename = this.defaultValue;
}
ChangeNameDialogComponent.prototype.ngAfterViewInit = function () {
var lastIndex = this.inputRef.nativeElement.value.lastIndexOf('.');
if (this.data.fileData && this.data.fileData.directory) {
lastIndex = this.inputRef.nativeElement.value.length;
}
this.inputRef.nativeElement.setSelectionRange(0, lastIndex);
};
Object.defineProperty(ChangeNameDialogComponent.prototype, "title", {
get: function () {
return this.translatePipe.transform(this.data.title);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ChangeNameDialogComponent.prototype, "placeholder", {
get: function () {
return this.translatePipe.transform(this.data.placeholder);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ChangeNameDialogComponent.prototype, "defaultValue", {
get: function () {
return this.data.defaultValue;
},
enumerable: true,
configurable: true
});
ChangeNameDialogComponent.prototype.onKeyDown = function (e) {
if (e['keyCode'] === 13) {
this.submit();
}
};
ChangeNameDialogComponent.prototype.submit = function () {
if (!this.filenameFormControl.invalid) {
this.dialogRef.close(this.inputRef.nativeElement.value);
}
};
ChangeNameDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'change-name-dialog',
template: "<span mat-dialog-title>{{ title }}</span>\n<mat-dialog-content>\n <mat-form-field class=\"filename-form-field\">\n <input matInput #inputRef [formControl]=\"filenameFormControl\" [(ngModel)]=\"filename\" placeholder=\"{{ placeholder }}\" (keydown)=\"onKeyDown($event)\"\n required>\n <mat-error *ngIf=\"filenameFormControl.hasError('invalidFileName')\">{{ 'VALIDATE.FILENAME.INVALID' | oFileManagerTranslate }}</mat-error>\n <mat-error *ngIf=\"filenameFormControl.hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n <button type=\"button\" mat-button [mat-dialog-close]=\"false\">{{ 'CANCEL' | oTranslate }}</button>\n <button type=\"button\" mat-button [disabled]=\"inputRef.value.length === 0\" (click)=\"submit()\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n",
host: {
'[class.change-name-dialog]': 'true'
},
styles: [".change-name-dialog .filename-form-field{padding-bottom:16px;min-width:250px}"]
}] }
];
/** @nocollapse */
ChangeNameDialogComponent.ctorParameters = function () { return [
{ type: Injector },
{ type: MatDialogRef }
]; };
ChangeNameDialogComponent.propDecorators = {
inputRef: [{ type: ViewChild, args: ['inputRef', { static: false },] }]
};
return ChangeNameDialogComponent;
}());
var FileClass = /** @class */ (function () {
// public path;
// public type;
// public modified;
// public stats;
// public isFile;
// public isLink;
// public mime;
function FileClass(obj) {
this.id = obj && obj.id ? obj.id : null;
this.name = obj && obj.name ? obj.name : null;
this.size = obj && obj.size ? obj.size : null;
this.creationDate = obj && obj.creationDate ? obj.creationDate : null;
this.directory = obj && obj.directory ? obj.directory : null;
// this.path = obj && obj.path ? obj.path : null;
// this.type = obj && obj.type ? obj.type : null;
// this.modified = obj && obj.modified ? obj.modified : null;
// this.stats = obj && obj.stats ? obj.stats : {};
// this.isFile = obj && obj.isFile ? obj.isFile : null;
// this.isLink = obj && obj.isLink ? obj.isLink : null;
// this.mime = obj && obj.mime ? obj.mime : null;
}
return FileClass;
}());
var FolderNameDialogComponent = /** @class */ (function () {
function FolderNameDialogComponent(injector, dialogRef) {
this.injector = injector;
this.dialogRef = dialogRef;
this.foldernameFormControl = new FormControl('', [
Validators.required,
fileNameValidator
]);
this.translatePipe = new OFileManagerTranslatePipe(this.injector);
}
Object.defineProperty(FolderNameDialogComponent.prototype, "title", {
get: function () {
return this.translatePipe.transform('EXTENDED_TABLE.NEW_FOLDER_TITLE');
},
enumerable: true,
configurable: true
});
Object.defineProperty(FolderNameDialogComponent.prototype, "folderName", {
get: function () {
return this.translatePipe.transform('name');
},
enumerable: true,
configurable: true
});
FolderNameDialogComponent.prototype.onKeyDown = function (e) {
if (e['keyCode'] === 13) {
this.submit();
}
};
FolderNameDialogComponent.prototype.submit = function () {
if (!this.foldernameFormControl.invalid) {
this.dialogRef.close(this.inputRef.nativeElement.value);
}
};
FolderNameDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'folder-name-dialog',
template: "<span mat-dialog-title>{{ title }}</span>\n<mat-dialog-content>\n <mat-form-field>\n <input matInput #folderNameRef placeholder=\"{{ folderName }}\" [formControl]=\"foldernameFormControl\" [(ngModel)]=\"foldername\"\n (keydown)=\"onKeyDown($event)\" required>\n <mat-error *ngIf=\"foldernameFormControl.hasError('invalidFileName')\">{{ 'VALIDATE.FILENAME.INVALID' | oFileManagerTranslate }}</mat-error>\n <mat-error *ngIf=\"foldernameFormControl.hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n <button type=\"button\" mat-button [mat-dialog-close]=\"false\">{{ 'CANCEL' | oTranslate }}</button>\n <button type=\"button\" mat-button [disabled]=\"folderNameRef.value.length === 0\" (click)=\"submit()\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n",
encapsulation: ViewEncapsulation.None,
host: {
'[class.folder-name-dialog]': 'true'
},
styles: [""]
}] }
];
/** @nocollapse */
FolderNameDialogComponent.ctorParameters = function () { return [
{ type: Injector },
{ type: MatDialogRef }
]; };
FolderNameDialogComponent.propDecorators = {
inputRef: [{ type: ViewChild, args: ['folderNameRef', { static: false },] }]
};
return FolderNameDialogComponent;
}());
var OTableExtendedComponent = /** @class */ (function (_super) {
__extends(OTableExtendedComponent, _super);
function OTableExtendedComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._breadcrumbs = [];
return _this;
}
OTableExtendedComponent.prototype.ngOnInit = function () {
// setting fake value for avoid entity is undefined checking
this.entity = 'fakeEntity';
_super.prototype.ngOnInit.call(this);
this.paginationControls = false;
};
OTableExtendedComponent.prototype.ngAfterViewInit = function () {
_super.prototype.ngAfterViewInit.call(this);
this.registerHeaderMutationObserver();
};
OTableExtendedComponent.prototype.ngOnDestroy = function () {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
};
OTableExtendedComponent.prototype.getDataService = function () {
return this.dataService;
};
/**
* This method manages the call to the service
* @param filter the query filter
* @param ovrrArgs override arguments
*/
OTableExtendedComponent.prototype.queryData = function (filter$$1, ovrrArgs) {
this.workspaceId = this.form.formData[this.workspaceKey] ? this.form.formData[this.workspaceKey].value : undefined;
if (!Util.isDefined(this.workspaceId)) {
this.setData([], []);
return;
}
_super.prototype.queryData.call(this, filter$$1, ovrrArgs);
};
OTableExtendedComponent.prototype.getQueryArguments = function (filter$$1, ovrrArgs) {
var queryArguments = _super.prototype.getQueryArguments.call(this, filter$$1, ovrrArgs);
queryArguments.unshift(this.workspaceId);
return queryArguments;
};
OTableExtendedComponent.prototype.remove = function (clearSelectedItems) {
var _this = this;
if (clearSelectedItems === void 0) { clearSelectedItems = false; }
if ((this.keysArray.length === 0) || this.selection.isEmpty()) {
return;
}
this.dialogService.confirm('CONFIRM', 'MESSAGES.CONFIRM_DELETE').then(function (res) {
if (res === true) {
if (_this.dataService && (_this.deleteMethod in _this.dataService) && (_this.keysArray.length > 0)) {
var workspaceId = _this.form.getDataValue(_this.workspaceKey).value;
_this.dataService[_this.deleteMethod](workspaceId, _this.selection.selected).subscribe(function () {
_this.clearSelection();
ObservableWrapper.callEmit(_this.onRowDeleted, _this.selection.selected);
}, function (error) {
_this.showDialogError(error, 'MESSAGES.ERROR_DELETE');
}, function () {
_this.reloadCurrentFolder();
});
}
else {
// remove local
_this.deleteLocalItems();
}
}
else if (clearSelectedItems) {
_this.clearSelection();
}
});
};
OTableExtendedComponent.prototype.onAddFolder = function () {
var cfg = {
role: 'dialog',
disableClose: false
};
var dialogRef = this.dialog.open(FolderNameDialogComponent, cfg);
var self = this;
dialogRef.afterClosed().subscribe(function (result) {
if (result) {
self.insertFolder(result);
}
});
};
OTableExtendedComponent.prototype.insertFolder = function (folderName) {
var _this = this;
var tableService = this.dataService;
if (!tableService || !(this.addFolderMethod in tableService)) {
return;
}
var workspaceId = this.form.getDataValue(this.workspaceKey).value;
var kv = {};
var currentFilter = this.stateService.getCurrentQueryFilter();
if (currentFilter.hasOwnProperty(OTableExtendedComponent.FM_FOLDER_PARENT_KEY)) {
kv[OTableExtendedComponent.FM_FOLDER_PARENT_KEY] = currentFilter[OTableExtendedComponent.FM_FOLDER_PARENT_KEY];
}
tableService[this.addFolderMethod](workspaceId, folderName, kv).subscribe(function () {
// do nothing
}, function (err) {
if (err && typeof err !== 'object') {
_this.dialogService.alert('ERROR', err);
}
}, function () {
_this.queryData(kv);
});
};
OTableExtendedComponent.prototype.setStateService = function (service) {
this.stateService = service;
};
Object.defineProperty(OTableExtendedComponent.prototype, "breadcrumbs", {
get: function () {
return this._breadcrumbs;
},
set: function (arg) {
this._breadcrumbs = arg;
},
enumerable: true,
configurable: true
});
OTableExtendedComponent.prototype.onGoToRootFolderClick = function () {
this.stateService.restart();
var filter$$1 = this.stateService.getFormParentItem();
this.queryData(filter$$1);
};
OTableExtendedComponent.prototype.onBreadcrumbItemClick = function (filter$$1, index) {
this.stateService.restart(index);
this.queryData(filter$$1);
};
OTableExtendedComponent.prototype.reloadCurrentFolder = function () {
var kv = {};
var currentFilter = this.stateService.getCurrentQueryFilter();
if (currentFilter.hasOwnProperty(OTableExtendedComponent.FM_FOLDER_PARENT_KEY)) {
kv[OTableExtendedComponent.FM_FOLDER_PARENT_KEY] = currentFilter[OTableExtendedComponent.FM_FOLDER_PARENT_KEY];
}
this.queryData(kv);
};
OTableExtendedComponent.prototype.registerHeaderMutationObserver = function () {
var self = this;
this.mutationObserver = new MutationObserver(function () {
if (self.tableHeaderEl.nativeElement.children.length > 0) {
self.initializeColumnsDOMWidth();
self.mutationObserver.disconnect();
}
});
this.mutationObserver.observe(this.tableHeaderEl.nativeElement, {
attributes: true
});
};
OTableExtendedComponent.prototype.initializeColumnsDOMWidth = function () {
var self = this;
if (Util.isDefined(this.tableHeaderEl)) {
[].slice.call(this.tableHeaderEl.nativeElement.children).forEach(function (thEl) {
var oCol = self.getOColumnFromTh(thEl);
if (Util.isDefined(oCol)) {
if (!Util.isDefined(oCol.DOMWidth) && thEl.clientWidth > 0) {
oCol.DOMWidth = thEl.clientWidth;
}
}
});
}
};
OTableExtendedComponent.FM_FOLDER_PARENT_KEY = 'FM_FOLDER_PARENT_KEY';
OTableExtendedComponent.decorators = [
{ type: Component, args: [{
selector: 'o-table-extended',
template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n (scroll)=\"onTableScroll($event)\" [class.block-events]=\"showLoading | async\" [class.o-scrollable-container]=\"hasScrollableContainer()\">\n <div #tableToolbar *ngIf=\"hasControls()\" class=\"toolbar\">\n <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n <ng-content select=\"o-table-button\"></ng-content>\n </o-table-buttons>\n\n <ng-content select=\"[o-table-custom-toolbar]\"></ng-content>\n\n <div fxLayout fxFlex>\n <span *ngIf=\"showTitle\" class=\"table-title\" fxFlex>{{ title | oTranslate }}</span>\n </div>\n\n <ng-container *ngIf=\"quickfilterCont