@rs-pk/asset-management 1.0.24 → 1.0.25
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/bundles/rs-pk-asset-management.umd.js +11 -17
- package/bundles/rs-pk-asset-management.umd.js.map +1 -1
- package/bundles/rs-pk-asset-management.umd.min.js +1 -1
- package/bundles/rs-pk-asset-management.umd.min.js.map +1 -1
- package/esm2015/lib/asset-management.component.js +7 -2
- package/esm2015/lib/components/partial/asset-item/asset-item.component.js +2 -2
- package/esm2015/lib/components/partial/asset-management-dialog/asset-management-dialog.component.js +4 -17
- package/esm2015/lib/models/asset.model.js +3 -1
- package/esm5/lib/asset-management.component.js +7 -2
- package/esm5/lib/components/partial/asset-item/asset-item.component.js +2 -2
- package/esm5/lib/components/partial/asset-management-dialog/asset-management-dialog.component.js +4 -17
- package/esm5/lib/models/asset.model.js +3 -1
- package/fesm2015/rs-pk-asset-management.js +12 -18
- package/fesm2015/rs-pk-asset-management.js.map +1 -1
- package/fesm5/rs-pk-asset-management.js +12 -18
- package/fesm5/rs-pk-asset-management.js.map +1 -1
- package/lib/components/partial/asset-management-dialog/asset-management-dialog.component.d.ts +0 -3
- package/lib/models/asset.model.d.ts +5 -0
- package/package.json +2 -1
- package/rs-pk-asset-management.metadata.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InjectionToken, Injectable, Inject, ɵɵdefineInjectable, Component,
|
|
1
|
+
import { InjectionToken, Injectable, Inject, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, Directive, HostListener, NgModule, ChangeDetectorRef, ViewChild, Pipe, APP_INITIALIZER } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { FormControl, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
4
4
|
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
|
@@ -162,6 +162,8 @@ if (false) {
|
|
|
162
162
|
DialogConfig.prototype.allowedType;
|
|
163
163
|
/** @type {?} */
|
|
164
164
|
DialogConfig.prototype.maxSize;
|
|
165
|
+
/** @type {?} */
|
|
166
|
+
DialogConfig.prototype.permission;
|
|
165
167
|
}
|
|
166
168
|
/** @enum {number} */
|
|
167
169
|
const BackgroudProcessingStatus = {
|
|
@@ -1458,9 +1460,6 @@ class AssetManagementDialogComponent {
|
|
|
1458
1460
|
this.data = data;
|
|
1459
1461
|
this.dialogRef = dialogRef;
|
|
1460
1462
|
this.assetService = assetService;
|
|
1461
|
-
this.hasModifyPermission = true;
|
|
1462
|
-
this.hasAccessPermission = true;
|
|
1463
|
-
this.hasArchivePermission = true;
|
|
1464
1463
|
this.destroy$ = new Subject$1();
|
|
1465
1464
|
this.selectedAssets = [];
|
|
1466
1465
|
}
|
|
@@ -1468,6 +1467,7 @@ class AssetManagementDialogComponent {
|
|
|
1468
1467
|
* @return {?}
|
|
1469
1468
|
*/
|
|
1470
1469
|
ngOnInit() {
|
|
1470
|
+
console.log('Assest Management Dialog', this.data);
|
|
1471
1471
|
this.initDialogConfig(this.data);
|
|
1472
1472
|
select((/**
|
|
1473
1473
|
* @param {?} state
|
|
@@ -1520,7 +1520,7 @@ class AssetManagementDialogComponent {
|
|
|
1520
1520
|
AssetManagementDialogComponent.decorators = [
|
|
1521
1521
|
{ type: Component, args: [{
|
|
1522
1522
|
selector: 'lib-asset-management-dialog',
|
|
1523
|
-
template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\r\n <ng-container subtitle>\r\n <lib-breadcrumb></lib-breadcrumb>\r\n </ng-container>\r\n <ng-container headerActions>\r\n <lib-search-box></lib-search-box>\r\n </ng-container>\r\n <ng-container content>\r\n <lib-asset-wrapper \r\n [header]=\"false\"\r\n [hasModifyPermission]=\"
|
|
1523
|
+
template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\r\n <ng-container subtitle>\r\n <lib-breadcrumb></lib-breadcrumb>\r\n </ng-container>\r\n <ng-container headerActions>\r\n <lib-search-box></lib-search-box>\r\n </ng-container>\r\n <ng-container content>\r\n <lib-asset-wrapper \r\n [header]=\"false\"\r\n [hasModifyPermission]=\"data.permission.modify\"\r\n [hasAccessPermission]=\"data.permission.access\"\r\n [hasArchivePermission]=\"data.permission.archive\"\r\n ></lib-asset-wrapper>\r\n </ng-container>\r\n <ng-container actions>\r\n <div class=\"asset-management-dialog__footer\">\r\n <div class=\"selected-assets\">\r\n <ng-container *ngIf=\"data?.limit\">\r\n <span>Selected{{' '}}</span>\r\n <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\r\n {{selectedAssets?.length}}/{{data?.limit}}\r\n </span>\r\n <span>\r\n {{data?.limit > 1 ? \"assets\": \"asset\"}}\r\n </span>\r\n </ng-container>\r\n\r\n </div>\r\n <div>\r\n <button mat-raised-button mat-dialog-close>Cancel</button>\r\n <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</lib-modal>",
|
|
1524
1524
|
styles: [":host::ng-deep .asset-management-dialog__footer{display:flex;width:100%;align-items:center;justify-content:space-between}:host::ng-deep .asset-management-dialog__footer .selected-assets{font-size:14px;color:#979797}:host::ng-deep .asset-management-dialog__footer .selected-assets .count{color:#000}:host::ng-deep .asset-management-dialog__footer .selected-assets .error{color:#f44336}"]
|
|
1525
1525
|
}] }
|
|
1526
1526
|
];
|
|
@@ -1530,18 +1530,7 @@ AssetManagementDialogComponent.ctorParameters = () => [
|
|
|
1530
1530
|
{ type: MatDialogRef },
|
|
1531
1531
|
{ type: AssetService }
|
|
1532
1532
|
];
|
|
1533
|
-
AssetManagementDialogComponent.propDecorators = {
|
|
1534
|
-
hasModifyPermission: [{ type: Input }],
|
|
1535
|
-
hasAccessPermission: [{ type: Input }],
|
|
1536
|
-
hasArchivePermission: [{ type: Input }]
|
|
1537
|
-
};
|
|
1538
1533
|
if (false) {
|
|
1539
|
-
/** @type {?} */
|
|
1540
|
-
AssetManagementDialogComponent.prototype.hasModifyPermission;
|
|
1541
|
-
/** @type {?} */
|
|
1542
|
-
AssetManagementDialogComponent.prototype.hasAccessPermission;
|
|
1543
|
-
/** @type {?} */
|
|
1544
|
-
AssetManagementDialogComponent.prototype.hasArchivePermission;
|
|
1545
1534
|
/**
|
|
1546
1535
|
* @type {?}
|
|
1547
1536
|
* @private
|
|
@@ -1624,7 +1613,12 @@ class AssetManagementComponent {
|
|
|
1624
1613
|
const config = {
|
|
1625
1614
|
limit: this.limit,
|
|
1626
1615
|
allowedType: this.allowedType,
|
|
1627
|
-
maxSize: this.maxSize
|
|
1616
|
+
maxSize: this.maxSize,
|
|
1617
|
+
permission: {
|
|
1618
|
+
access: this.hasAccessPermission,
|
|
1619
|
+
modify: this.hasModifyPermission,
|
|
1620
|
+
archive: this.hasArchivePermission,
|
|
1621
|
+
}
|
|
1628
1622
|
};
|
|
1629
1623
|
/** @type {?} */
|
|
1630
1624
|
const dialogRef = this.dialog.open(AssetManagementDialogComponent, {
|
|
@@ -3998,7 +3992,7 @@ class AssetItemComponent {
|
|
|
3998
3992
|
AssetItemComponent.decorators = [
|
|
3999
3993
|
{ type: Component, args: [{
|
|
4000
3994
|
selector: 'lib-asset-item',
|
|
4001
|
-
template: "<div class=\"asset-wrapper\">\r\n <div class=\"asset-content\">\r\n <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\">\r\n <button class=\"asset-content__header--button\" mat-raised-button (click)=\"onChange()\"
|
|
3995
|
+
template: "<div class=\"asset-wrapper\">\r\n <div class=\"asset-content\">\r\n <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\">\r\n <button class=\"asset-content__header--button\" mat-raised-button (click)=\"onChange()\">\r\n <mat-checkbox\r\n class=\"checkbox\"\r\n [checked]=\"checkSelectedAsset\"\r\n ></mat-checkbox>\r\n </button>\r\n <button\r\n class=\"asset-content__header--button edit-button\"\r\n mat-raised-button\r\n (click)=\"editAsset()\"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"asset-content__body\">\r\n <ng-container [ngSwitch]=\"asset.FileType\">\r\n <ng-container *ngSwitchCase=\"fileType.IMAGE\">\r\n <img\r\n class=\"image\"\r\n [src]=\"asset.UrlThumbnail\"\r\n [alt]=\"asset.OriginalFileName\"\r\n *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"\r\n />\r\n <!-- In Processing -->\r\n <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\r\n <mat-icon class=\"icon\">cloud_upload</mat-icon>\r\n <span class=\"processing-txt\">Uploading...</span>\r\n </div>\r\n <!-- Failed -->\r\n <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\r\n <mat-icon class=\"icon-img\">error_outline</mat-icon>\r\n <div class=\"failed-group\">\r\n <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\r\n </div>\r\n <div class=\"btn-failed-group\">\r\n <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\r\n <span class=\"failed-txt mx-1\">or</span>\r\n <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\r\n <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\"/>\r\n <!-- In Processing -->\r\n <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\r\n <mat-icon class=\"icon\">cloud_upload</mat-icon>\r\n <span class=\"processing-txt\">Uploading...</span>\r\n </div>\r\n <!-- Failed -->\r\n <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\r\n <mat-icon class=\"icon-doc\">error_outline</mat-icon>\r\n <div class=\"failed-group\">\r\n <span style=\"color: #f44336; font-weight: 300; font-size: 12px;\">Failed to upload the file</span>\r\n </div>\r\n <div class=\"btn-failed-group\">\r\n <button class=\"btn-custom-upload\" (click)=\"onUploadAgain(asset)\">Delete and update again</button>\r\n <span class=\"failed-txt mx-1\">or</span>\r\n <button class=\"btn-custom-failed\" (click)=\"onDelete(asset)\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"asset-content__footer\">\r\n <div\r\n class=\"asset-content__footer--info\"\r\n [ngClass]=\"{\r\n 'file-type__document': asset.FileType === fileType.DOCUMENT\r\n }\"\r\n >\r\n <p\r\n class=\"name\"\r\n [matTooltip]=\"asset.OriginalFileNameWithoutExtension\"\r\n matTooltipClass=\"width-auto\"\r\n >\r\n {{ asset.OriginalFileNameWithoutExtension }}\r\n </p>\r\n <p class=\"info\">\r\n <span class=\"extension\">{{ asset.Extension }}</span>\r\n <span\r\n *ngIf=\"\r\n asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\r\n \"\r\n >\r\n - {{ asset.Width }}x{{ asset.Height }}</span\r\n >\r\n <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\r\n </p>\r\n </div>\r\n <div class=\"asset-content__footer--file-type\">\r\n <span>{{ asset.FileType }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
4002
3996
|
styles: [":host::ng-deep .asset-wrapper{padding:5px}:host::ng-deep .asset-wrapper .asset-content{overflow:hidden;position:relative;border-radius:10px;border:1px solid #d8d8d8;font-size:14px;transition:.3s cubic-bezier(.25,.8,.25,1)}:host::ng-deep .asset-wrapper .asset-content:hover{box-shadow:0 0 8px rgba(0,0,0,.17),0 0 0 rgba(0,0,0,.06)}:host::ng-deep .asset-wrapper .asset-content__header{position:absolute;z-index:1;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:14px}:host::ng-deep .asset-wrapper .asset-content__header--button{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(0,0,0,.65);background:rgba(255,255,255,.6)}:host::ng-deep .asset-wrapper .asset-content__header--button:hover{background:#fff}:host::ng-deep .asset-wrapper .asset-content__header--button.edit-button{transition:.3s cubic-bezier(.25,.8,.25,1);opacity:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-icon{font-size:22px}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox{pointer-events:none;display:flex;align-items:center}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout{display:block;margin:0}:host::ng-deep .asset-wrapper .asset-content__header--button .mat-checkbox .mat-checkbox-layout .mat-checkbox-frame{color:#767676}:host::ng-deep .asset-wrapper .asset-content__body{padding-bottom:66.66%;background:#f1f1f1;position:relative}:host::ng-deep .asset-wrapper .asset-content__body img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host::ng-deep .asset-wrapper .asset-content__body img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .asset-wrapper .asset-content__body img.file{width:75%;height:75%}:host::ng-deep .asset-wrapper .asset-content__body .processing{background-color:#f1f1f1;width:100%;height:100%}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon{position:absolute;top:30%;left:42%;font-size:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-img{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .icon-doc{position:absolute;top:30%;left:42%;font-size:35px;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{position:absolute;top:55%;left:35%}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-image{width:27px;height:27px;-o-object-fit:contain;object-fit:contain}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{position:absolute;top:55%;left:20%}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{position:absolute;top:70%;left:10%;font-size:12px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .failed-txt{color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload{font-size:9px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed{font-size:9px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-custom-upload:hover{opacity:.8}:host::ng-deep .asset-wrapper .asset-content__footer{display:flex;align-items:center;justify-content:space-between;padding:5px 8px}:host::ng-deep .asset-wrapper .asset-content__footer--info{max-width:calc(100% - 50px)}:host::ng-deep .asset-wrapper .asset-content__footer--info p{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .asset-wrapper .asset-content__footer--info .info{font-size:12px;color:#979797}:host::ng-deep .asset-wrapper .asset-content__footer--info .info .extension{text-transform:uppercase}:host::ng-deep .asset-wrapper .asset-content__footer--info.file-type__document{max-width:calc(100% - 70px)}:host::ng-deep .asset-wrapper .asset-content__footer--file-type{border-radius:5px;background-color:#d8d8d8;padding:2px 6px;font-size:12px}:host::ng-deep .asset-wrapper .asset-content:hover .edit-button{opacity:1!important}"]
|
|
4003
3997
|
}] }
|
|
4004
3998
|
];
|