@rs-pk/asset-management 1.0.28 → 1.0.29
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 +106 -55
- package/bundles/rs-pk-asset-management.umd.js.map +1 -1
- package/bundles/rs-pk-asset-management.umd.min.js +2 -2
- package/bundles/rs-pk-asset-management.umd.min.js.map +1 -1
- package/esm2015/lib/components/partial/asset-item/asset-item.component.js +6 -3
- package/esm2015/lib/components/partial/asset-list/asset-list.component.js +14 -6
- package/esm2015/lib/components/partial/asset-management-dialog/asset-management-dialog.component.js +2 -2
- package/esm2015/lib/components/partial/asset-wrapper/asset-wrapper.component.js +5 -2
- package/esm2015/lib/components/partial/file-list/file-list.component.js +1 -1
- package/esm2015/lib/components/partial/node-details/node-details.component.js +13 -4
- package/esm2015/lib/components/partial/node-tree/node-tree.component.js +36 -34
- package/esm2015/lib/components/partial/search-box/search-box.component.js +10 -5
- package/esm2015/lib/components/ui/modal/modal.component.js +1 -1
- package/esm2015/lib/datasources/node-tree.datasource.js +4 -3
- package/esm2015/lib/services/asset.service.js +7 -5
- package/esm2015/lib/services/node-tree.service.js +16 -12
- package/esm5/lib/components/partial/asset-item/asset-item.component.js +6 -3
- package/esm5/lib/components/partial/asset-list/asset-list.component.js +14 -6
- package/esm5/lib/components/partial/asset-management-dialog/asset-management-dialog.component.js +2 -2
- package/esm5/lib/components/partial/asset-wrapper/asset-wrapper.component.js +5 -2
- package/esm5/lib/components/partial/file-list/file-list.component.js +1 -1
- package/esm5/lib/components/partial/node-details/node-details.component.js +13 -4
- package/esm5/lib/components/partial/node-tree/node-tree.component.js +48 -37
- package/esm5/lib/components/partial/search-box/search-box.component.js +10 -5
- package/esm5/lib/components/ui/modal/modal.component.js +1 -1
- package/esm5/lib/datasources/node-tree.datasource.js +5 -3
- package/esm5/lib/services/asset.service.js +9 -5
- package/esm5/lib/services/node-tree.service.js +17 -11
- package/fesm2015/rs-pk-asset-management.js +89 -52
- package/fesm2015/rs-pk-asset-management.js.map +1 -1
- package/fesm5/rs-pk-asset-management.js +105 -54
- package/fesm5/rs-pk-asset-management.js.map +1 -1
- package/lib/components/partial/asset-item/asset-item.component.d.ts +1 -0
- package/lib/components/partial/asset-list/asset-list.component.d.ts +1 -0
- package/lib/components/partial/asset-wrapper/asset-wrapper.component.d.ts +1 -0
- package/lib/components/partial/node-details/node-details.component.d.ts +1 -0
- package/lib/components/partial/node-tree/node-tree.component.d.ts +7 -7
- package/lib/datasources/node-tree.datasource.d.ts +1 -1
- package/lib/services/asset.service.d.ts +1 -1
- package/lib/services/node-tree.service.d.ts +6 -6
- package/package.json +3 -4
- package/rs-pk-asset-management.metadata.json +1 -1
|
@@ -613,15 +613,17 @@ var AssetService = /** @class */ (function () {
|
|
|
613
613
|
/**
|
|
614
614
|
* @param {?} assets
|
|
615
615
|
* @param {?=} pagination
|
|
616
|
+
* @param {?=} totalFile
|
|
616
617
|
* @return {?}
|
|
617
618
|
*/
|
|
618
619
|
AssetService.prototype.setAssetList = /**
|
|
619
620
|
* @param {?} assets
|
|
620
621
|
* @param {?=} pagination
|
|
622
|
+
* @param {?=} totalFile
|
|
621
623
|
* @return {?}
|
|
622
624
|
*/
|
|
623
|
-
function (assets, pagination) {
|
|
624
|
-
this.setPagination(pagination);
|
|
625
|
+
function (assets, pagination, totalFile) {
|
|
626
|
+
this.setPagination(pagination, totalFile);
|
|
625
627
|
this.assetList$.next(assets);
|
|
626
628
|
};
|
|
627
629
|
/**
|
|
@@ -647,16 +649,18 @@ var AssetService = /** @class */ (function () {
|
|
|
647
649
|
/**
|
|
648
650
|
* @private
|
|
649
651
|
* @param {?} pagination
|
|
652
|
+
* @param {?} totalFile
|
|
650
653
|
* @return {?}
|
|
651
654
|
*/
|
|
652
655
|
AssetService.prototype.setPagination = /**
|
|
653
656
|
* @private
|
|
654
657
|
* @param {?} pagination
|
|
658
|
+
* @param {?} totalFile
|
|
655
659
|
* @return {?}
|
|
656
660
|
*/
|
|
657
|
-
function (pagination) {
|
|
661
|
+
function (pagination, totalFile) {
|
|
658
662
|
if (pagination) {
|
|
659
|
-
this.fileTotal =
|
|
663
|
+
this.fileTotal = totalFile || 0;
|
|
660
664
|
this.pageIndex = pagination.PageIndex;
|
|
661
665
|
this.pageSize = pagination.PageSize;
|
|
662
666
|
}
|
|
@@ -1164,21 +1168,25 @@ var NodeTreeService = /** @class */ (function () {
|
|
|
1164
1168
|
/**
|
|
1165
1169
|
* @private
|
|
1166
1170
|
* @param {?} id
|
|
1171
|
+
* @param {?=} pageSize
|
|
1167
1172
|
* @return {?}
|
|
1168
1173
|
*/
|
|
1169
1174
|
NodeTreeService.prototype.fetchChildrenFolder = /**
|
|
1170
1175
|
* @private
|
|
1171
1176
|
* @param {?} id
|
|
1177
|
+
* @param {?=} pageSize
|
|
1172
1178
|
* @return {?}
|
|
1173
1179
|
*/
|
|
1174
|
-
function (id) {
|
|
1180
|
+
function (id, pageSize) {
|
|
1175
1181
|
return __awaiter(this, void 0, void 0, function () {
|
|
1176
1182
|
var result, err_1;
|
|
1177
1183
|
return __generator(this, function (_a) {
|
|
1178
1184
|
switch (_a.label) {
|
|
1179
1185
|
case 0:
|
|
1180
1186
|
_a.trys.push([0, 2, , 3]);
|
|
1181
|
-
return [4 /*yield*/, this.assetService
|
|
1187
|
+
return [4 /*yield*/, this.assetService
|
|
1188
|
+
.getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
|
|
1189
|
+
.toPromise()];
|
|
1182
1190
|
case 1:
|
|
1183
1191
|
result = _a.sent();
|
|
1184
1192
|
if (result) {
|
|
@@ -1262,17 +1270,19 @@ var NodeTreeService = /** @class */ (function () {
|
|
|
1262
1270
|
};
|
|
1263
1271
|
/**
|
|
1264
1272
|
* @param {?} node
|
|
1273
|
+
* @param {?=} pageSize
|
|
1265
1274
|
* @return {?}
|
|
1266
1275
|
*/
|
|
1267
1276
|
NodeTreeService.prototype.getChildren = /**
|
|
1268
1277
|
* @param {?} node
|
|
1278
|
+
* @param {?=} pageSize
|
|
1269
1279
|
* @return {?}
|
|
1270
1280
|
*/
|
|
1271
|
-
function (node) {
|
|
1281
|
+
function (node, pageSize) {
|
|
1272
1282
|
return __awaiter(this, void 0, void 0, function () {
|
|
1273
1283
|
return __generator(this, function (_a) {
|
|
1274
1284
|
switch (_a.label) {
|
|
1275
|
-
case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId)];
|
|
1285
|
+
case 0: return [4 /*yield*/, this.fetchChildrenFolder(node.AssetId, pageSize)];
|
|
1276
1286
|
case 1: return [2 /*return*/, _a.sent()];
|
|
1277
1287
|
}
|
|
1278
1288
|
});
|
|
@@ -1828,7 +1838,7 @@ var AssetManagementDialogComponent = /** @class */ (function () {
|
|
|
1828
1838
|
AssetManagementDialogComponent.decorators = [
|
|
1829
1839
|
{ type: Component, args: [{
|
|
1830
1840
|
selector: 'lib-asset-management-dialog',
|
|
1831
|
-
template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n <ng-container subtitle>\n <lib-breadcrumb></lib-breadcrumb>\n </ng-container>\n <ng-container headerActions>\n <lib-search-box></lib-search-box>\n </ng-container>\n <ng-container content>\n <lib-asset-wrapper
|
|
1841
|
+
template: "<lib-modal heading=\"Asset management\" [customHeader]=\"true\">\n <ng-container subtitle>\n <lib-breadcrumb></lib-breadcrumb>\n </ng-container>\n <ng-container headerActions>\n <lib-search-box></lib-search-box>\n </ng-container>\n <ng-container content>\n <lib-asset-wrapper\n [header]=\"false\"\n [isDialog]=\"true\"\n [hasModifyPermission]=\"data.permission.modify\"\n [hasAccessPermission]=\"data.permission.access\"\n [hasArchivePermission]=\"data.permission.archive\"\n ></lib-asset-wrapper>\n </ng-container>\n <ng-container actions>\n <div class=\"asset-management-dialog__footer\">\n <div class=\"selected-assets\">\n <ng-container *ngIf=\"data?.limit\">\n <span>Selected{{' '}}</span>\n <span class=\"count\" [ngClass]=\"{'error': selectedAssets?.length && disabled}\">\n {{selectedAssets?.length}}/{{data?.limit}}\n </span>\n <span>\n {{data?.limit > 1 ? \"assets\": \"asset\"}}\n </span>\n </ng-container>\n </div>\n <div>\n <button mat-raised-button mat-dialog-close>Cancel</button>\n <button mat-raised-button color=\"primary\" (click)=\"selectAssets()\" [disabled]=\"disabled\">Done</button>\n </div>\n </div>\n </ng-container>\n</lib-modal>",
|
|
1832
1842
|
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}"]
|
|
1833
1843
|
}] }
|
|
1834
1844
|
];
|
|
@@ -2253,7 +2263,7 @@ var ModalComponent = /** @class */ (function () {
|
|
|
2253
2263
|
{ type: Component, args: [{
|
|
2254
2264
|
selector: 'lib-modal',
|
|
2255
2265
|
template: "<h4 mat-dialog-title *ngIf=\"!customHeader; else customHeaderTemplate\">\n <div class=\"lib-modal--title\" [title]=\"heading\">\n {{ heading }}\n </div>\n <div class=\"lib-modal--close\">\n <mat-icon mat-dialog-close>close</mat-icon>\n </div>\n</h4>\n<ng-template #customHeaderTemplate>\n <h4 mat-dialog-title>\n <div class=\"lib-modal--custom-title\">\n <span>\n {{ heading }}\n </span>\n <div class=\"lib-modal--custom-subtitle\">\n <ng-content select=\"[subtitle]\"></ng-content>\n </div>\n </div>\n <div class=\"lib-modal--header-actions\">\n <ng-content select=\"[headerActions]\"></ng-content>\n </div>\n <mat-icon mat-dialog-close class=\"mat-dialog-close\">close</mat-icon>\n </h4>\n</ng-template>\n<mat-dialog-content class=\"custom-scrollbar\">\n <ng-content select=\"[content]\"></ng-content>\n</mat-dialog-content>\n<mat-dialog-actions>\n <ng-content select=\"[actions]\"></ng-content>\n</mat-dialog-actions>\n",
|
|
2256
|
-
styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-
|
|
2266
|
+
styles: [":host::ng-deep{display:flex;flex-direction:column;min-height:150px;position:relative}:host::ng-deep .mat-dialog-title{padding-bottom:24px;margin:0;display:flex;justify-content:space-between;font-size:24px;line-height:1;gap:10px}:host::ng-deep .mat-dialog-title mat-icon{cursor:pointer}:host::ng-deep .lib-modal--custom-title,:host::ng-deep .lib-modal--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .lib-modal--custom-subtitle{margin-top:5px}:host::ng-deep .lib-modal--header-actions{display:flex;align-items:center;gap:10px}:host::ng-deep mat-dialog-content{flex:1;padding:0 24px}:host::ng-deep mat-dialog-actions{padding-top:24px;padding-bottom:0;display:flex;justify-content:flex-end;min-height:auto;margin-bottom:0}:host::ng-deep mat-dialog-actions .mat-button-base+.mat-button-base{margin-left:20px}:host::ng-deep .mat-error{margin-top:5px;font-size:14px}:host::ng-deep .no-wrap{white-space:nowrap}:host::ng-deep input,:host::ng-deep textarea{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px;color:#000;margin-top:0;resize:none}::ng-deep .lib-dialog--small{width:400px!important}::ng-deep .lib-dialog--small .file__name{word-break:break-word}::ng-deep .lib-dialog--small .mat-button-base{min-width:70px}::ng-deep .lib-dialog--small .loading{padding:0 5px}::ng-deep .lib-dialog--small .loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .lib-dialog--small .loading .mat-spinner{margin-right:10px}::ng-deep .lib-dialog--medium{max-width:1200px!important;width:90%!important}::ng-deep .lib-dialog--medium .mat-dialog-content{border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;overflow-x:hidden}::ng-deep .lib-dialog--large{max-width:1200px!important;width:90vw!important}::ng-deep .lib-dialog--large .mat-dialog-title{padding-bottom:12px;position:relative}::ng-deep .lib-dialog--large .mat-dialog-title .mat-dialog-close{position:absolute;right:-22px;top:-22px}::ng-deep .lib-dialog--large .mat-dialog-content{min-height:70vh;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;padding:0}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:calc(70vh - 2px)!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .asset-list__item{min-width:25%!important}@media only screen and (max-width:768px){::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body{max-height:none!important}::ng-deep .lib-dialog--large .mat-dialog-content .asset-wrapper .asset-body .node-tree{height:-moz-max-content!important;height:max-content!important}}::ng-deep .lib-dialog--large .mat-dialog-actions{padding:12px 0;margin-bottom:-24px!important}"]
|
|
2257
2267
|
}] }
|
|
2258
2268
|
];
|
|
2259
2269
|
/** @nocollapse */
|
|
@@ -2606,7 +2616,7 @@ var FileListComponent = /** @class */ (function () {
|
|
|
2606
2616
|
{ type: Component, args: [{
|
|
2607
2617
|
selector: 'lib-file-list',
|
|
2608
2618
|
template: "<div class=\"file-list__heading\">\n <div class=\"file-list__info\">\n <h4 class=\"file-list__info--title\">\n <span *ngIf=\"!uploadAssetsService.errorLength\">\n {{\n uploadAssetsService?.getFiles?.length -\n uploadAssetsService.errorLength\n }}\n {{ uploadAssetsService?.getFiles?.length > 1 ? 'assets' : 'asset' }}\n ready to upload\n </span>\n <span *ngIf=\"uploadAssetsService.errorLength\">\n {{ uploadAssetsService.errorLength }}\n {{ uploadAssetsService.errorLength > 1 ? 'assets' : 'asset' }}\n invalid, please remove it before upload</span\n >\n </h4>\n <div class=\"file-list__info--desc\">\n Manage the assets before adding them to the Media Library\n </div>\n </div>\n <lib-input-file\n [acceptTypes]=\"uploadAssetsService?.supportedTypes?.join(', ')\"\n (onFileChange)=\"onFileChange($event)\"\n color=\"primary\"\n >\n <span>Add new assets</span>\n </lib-input-file>\n</div>\n<div class=\"file-list\">\n <lib-file-item\n *ngFor=\"let file of uploadAssetsService?.getFiles; let i = index\"\n [file]=\"file\"\n (checkError)=\"onEmitError()\"\n (fileRemove)=\"onDelFile(i)\"\n (fileChange)=\"onChangeName($event, i)\"\n ></lib-file-item>\n</div>\n",
|
|
2609
|
-
styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position
|
|
2619
|
+
styles: [":host::ng-deep .file-list{padding-top:15px}:host::ng-deep .file-list__heading{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px;position:sticky;top:0;background-color:#fff}:host::ng-deep .file-list__info--title{font-size:16px;margin-bottom:5px;color:#000}:host::ng-deep lib-file-item{margin-bottom:20px}"]
|
|
2610
2620
|
}] }
|
|
2611
2621
|
];
|
|
2612
2622
|
/** @nocollapse */
|
|
@@ -3785,9 +3795,14 @@ var AssetListComponent = /** @class */ (function () {
|
|
|
3785
3795
|
* @return {?}
|
|
3786
3796
|
*/
|
|
3787
3797
|
function (res) {
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3798
|
+
/** @type {?} */
|
|
3799
|
+
var pagination = res && res.Meta || {};
|
|
3800
|
+
/** @type {?} */
|
|
3801
|
+
var assets = res && res.Data && res.Data.Children || [];
|
|
3802
|
+
/** @type {?} */
|
|
3803
|
+
var totalFile = res && res.Data && res.Data.TotalFile || 0;
|
|
3804
|
+
_this.assetService.setAssetList(assets, pagination, totalFile);
|
|
3805
|
+
})).add((/**
|
|
3791
3806
|
* @return {?}
|
|
3792
3807
|
*/
|
|
3793
3808
|
function () {
|
|
@@ -3836,8 +3851,8 @@ var AssetListComponent = /** @class */ (function () {
|
|
|
3836
3851
|
AssetListComponent.decorators = [
|
|
3837
3852
|
{ type: Component, args: [{
|
|
3838
3853
|
selector: 'lib-asset-list',
|
|
3839
|
-
template: "<div class=\"asset-container\">\n <div class=\"asset-heading\">\n <h6 class=\"asset-heading__title\">Files</h6>\n <lib-sort-items\n [hidden]=\"!assets?.length\"\n class=\"asset-heading__sort\"\n ></lib-sort-items>\n </div>\n <ng-container *ngIf=\"assets && !assets.length; else assetsTemplate\">\n <div class=\"asset-empty\">\n <span>This asset is empty.</span>\n </div>\n </ng-container>\n <ng-template #assetsTemplate>\n <div class=\"asset-list\">\n <lib-asset-item\n class=\"asset-list__item\"\n *ngFor=\"let asset of assets\"\n [asset]=\"asset\"\n (selectAsset)=\"onSelectAsset($event)\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n >\n </lib-asset-item>\n </div>\n </ng-template>\n <div [hidden]=\"!assets?.length\">\n <mat-paginator\n #paginator\n [pageSizeOptions]=\"[12, 24, 60, 120]\"\n (page)=\"pageChange($event)\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n</div>\n",
|
|
3840
|
-
styles: [":host::ng-deep .asset-container .asset-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}:host::ng-deep .asset-container .asset-heading__title{margin-bottom:0;color:#979797}:host::ng-deep .asset-container .asset-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;margin:0 -5px}:host::ng-deep .asset-container .asset-list__item{width:25%}@media only screen and (max-width:1200px){:host::ng-deep .asset-container .asset-list__item{width:
|
|
3854
|
+
template: "<div class=\"asset-container\">\n <div class=\"asset-heading\">\n <h6 class=\"asset-heading__title\">Files</h6>\n <lib-sort-items\n [hidden]=\"!assets?.length\"\n class=\"asset-heading__sort\"\n ></lib-sort-items>\n </div>\n <ng-container *ngIf=\"assets && !assets.length; else assetsTemplate\">\n <div class=\"asset-empty\">\n <span>This asset is empty.</span>\n </div>\n </ng-container>\n <ng-template #assetsTemplate>\n <div class=\"asset-list\">\n <lib-asset-item\n class=\"asset-list__item\"\n *ngFor=\"let asset of assets\"\n [asset]=\"asset\"\n [isDialog]=\"isDialog\"\n (selectAsset)=\"onSelectAsset($event)\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n >\n </lib-asset-item>\n </div>\n </ng-template>\n <div [hidden]=\"!assets?.length\">\n <mat-paginator\n #paginator\n [pageSizeOptions]=\"[12, 24, 60, 120]\"\n (page)=\"pageChange($event)\"\n [showFirstLastButtons]=\"true\"\n >\n </mat-paginator>\n </div>\n</div>\n",
|
|
3855
|
+
styles: [":host::ng-deep .asset-container .asset-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}:host::ng-deep .asset-container .asset-heading__title{margin-bottom:0;color:#979797}:host::ng-deep .asset-container .asset-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;margin:0 -5px}:host::ng-deep .asset-container .asset-list__item{width:25%}@media only screen and (max-width:1200px){:host::ng-deep .asset-container .asset-list__item{width:33.3333333333%}}@media only screen and (max-width:960px){:host::ng-deep .asset-container .asset-list__item{width:50%}}:host::ng-deep .asset-container .asset-empty{text-align:center;color:#979797;font-size:14px}"]
|
|
3841
3856
|
}] }
|
|
3842
3857
|
];
|
|
3843
3858
|
/** @nocollapse */
|
|
@@ -3846,6 +3861,7 @@ var AssetListComponent = /** @class */ (function () {
|
|
|
3846
3861
|
{ type: AssetManagementService }
|
|
3847
3862
|
]; };
|
|
3848
3863
|
AssetListComponent.propDecorators = {
|
|
3864
|
+
isDialog: [{ type: Input }],
|
|
3849
3865
|
hasModifyPermission: [{ type: Input }],
|
|
3850
3866
|
hasAccessPermission: [{ type: Input }],
|
|
3851
3867
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -3855,6 +3871,8 @@ var AssetListComponent = /** @class */ (function () {
|
|
|
3855
3871
|
return AssetListComponent;
|
|
3856
3872
|
}());
|
|
3857
3873
|
if (false) {
|
|
3874
|
+
/** @type {?} */
|
|
3875
|
+
AssetListComponent.prototype.isDialog;
|
|
3858
3876
|
/** @type {?} */
|
|
3859
3877
|
AssetListComponent.prototype.hasModifyPermission;
|
|
3860
3878
|
/** @type {?} */
|
|
@@ -4641,8 +4659,8 @@ var AssetItemComponent = /** @class */ (function () {
|
|
|
4641
4659
|
AssetItemComponent.decorators = [
|
|
4642
4660
|
{ type: Component, args: [{
|
|
4643
4661
|
selector: 'lib-asset-item',
|
|
4644
|
-
template: "<div class=\"asset-wrapper\">\n <div class=\"asset-content\">\n <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed
|
|
4645
|
-
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{
|
|
4662
|
+
template: "<div class=\"asset-wrapper\">\n <div class=\"asset-content\">\n <div class=\"asset-content__header\">\n <button class=\"asset-content__header--button\"\n *ngIf=\"(asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed) || (asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing)\"\n mat-raised-button (click)=\"onChange()\">\n <mat-checkbox class=\"checkbox\" [checked]=\"checkSelectedAsset\"></mat-checkbox>\n </button>\n <button class=\"asset-content__header--button edit-button\"\n *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" mat-raised-button\n (click)=\"editAsset()\">\n <mat-icon>edit</mat-icon>\n </button>\n </div>\n <div class=\"asset-content__body\">\n <ng-container [ngSwitch]=\"asset.FileType\">\n <ng-container *ngSwitchCase=\"fileType.IMAGE\">\n <img class=\"image\" [src]=\"asset.UrlThumbnail\" [alt]=\"asset.OriginalFileName\"\n *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n <!-- In Processing -->\n <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n <div class=\"upload-group\">\n <div>\n <mat-icon class=\"processing-icon\"\n [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n </div>\n <div>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n </div>\n </div>\n </div>\n\n <!-- Failed -->\n <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n <div class=\"failed-group\">\n <div>\n <mat-icon class=\"processing-icon\"\n [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n </div>\n <div>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n file</span>\n </div>\n <div class=\"btn-failed-group\">\n <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n (click)=\"onDelete(asset)\">Delete</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"fileType.DOCUMENT\">\n <img [src]=\"base64PNG[asset.Extension] || base64PNG.default\" [alt]=\"asset.OriginalFileName\" class=\"file\"\n *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Processed\" />\n <!-- In Processing -->\n <div class=\"processing\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.InProcessing\">\n <div class=\"upload-group\">\n <div>\n <mat-icon class=\"processing-icon\"\n [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">cloud_upload</mat-icon>\n </div>\n <div>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Uploading...</span>\n </div>\n </div>\n </div>\n\n <!-- Failed -->\n <div class=\"processing\" *ngIf=\"asset.BackgroudProcessingStatus === backgroundProcessingNum.Failed\">\n <div class=\"failed-group\">\n <mat-icon class=\"processing-icon\"\n [ngClass]=\"{ 'processing-icon-dialog': isDialog }\">error_outline</mat-icon>\n <div>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }}\">Failed to upload the\n file</span>\n </div>\n <div class=\"btn-failed-group\">\n <button class=\"{{ isDialog ? 'btn-upload-dialog' : 'btn-upload' }}\"\n (click)=\"onUploadAgain(asset)\">Delete and update again</button>\n <span class=\"{{ isDialog ? 'processing-txt-dialog' : 'processing-txt' }} mx-1\">or</span>\n <button class=\"{{ isDialog ? 'btn-failed-dialog' : 'btn-failed' }}\"\n (click)=\"onDelete(asset)\">Delete</button>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"asset-content__footer\">\n <div class=\"asset-content__footer--info\" [ngClass]=\"{\n 'file-type__document': asset.FileType === fileType.DOCUMENT\n }\">\n <p class=\"name\" [matTooltip]=\"asset.OriginalFileNameWithoutExtension\" matTooltipClass=\"width-auto\">\n {{ asset.OriginalFileNameWithoutExtension }}\n </p>\n <p class=\"info\">\n <span class=\"extension\">{{ asset.Extension }}</span>\n <span *ngIf=\"\n asset.FileType === fileType.IMAGE && asset?.Extension !== 'svg'\n \">\n - {{ asset.Width }}x{{ asset.Height }}</span>\n <span *ngIf=\"asset.Size\"> - {{ asset.Size }}</span>\n </p>\n </div>\n <div class=\"asset-content__footer--file-type\">\n <span>{{ asset.FileType }}</span>\n </div>\n </div>\n </div>\n</div>",
|
|
4663
|
+
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%;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 .processing .processing-icon{font-size:35px;height:35px;width:35px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt{font-size:17px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-icon-dialog{font-size:24px;height:24px;width:24px}:host::ng-deep .asset-wrapper .asset-content__body .processing .processing-txt-dialog{font-size:13px}:host::ng-deep .asset-wrapper .asset-content__body .processing .upload-group{text-align:center}:host::ng-deep .asset-wrapper .asset-content__body .processing .failed-group{text-align:center;color:#f44336}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group{margin-top:7px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload{font-size:13px;padding:5px;border:0;color:#fff;background-color:#ffc107;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed{font-size:13px;padding:5px;border:0;color:#fff;background-color:#f44336;border-radius:3px}:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog{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-failed-dialog{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-failed-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-failed:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-upload-dialog:hover,:host::ng-deep .asset-wrapper .asset-content__body .processing .btn-failed-group .btn-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}"]
|
|
4646
4664
|
}] }
|
|
4647
4665
|
];
|
|
4648
4666
|
/** @nocollapse */
|
|
@@ -4654,6 +4672,7 @@ var AssetItemComponent = /** @class */ (function () {
|
|
|
4654
4672
|
{ type: ChangeDetectorRef }
|
|
4655
4673
|
]; };
|
|
4656
4674
|
AssetItemComponent.propDecorators = {
|
|
4675
|
+
isDialog: [{ type: Input }],
|
|
4657
4676
|
hasModifyPermission: [{ type: Input }],
|
|
4658
4677
|
hasAccessPermission: [{ type: Input }],
|
|
4659
4678
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -4663,6 +4682,8 @@ var AssetItemComponent = /** @class */ (function () {
|
|
|
4663
4682
|
return AssetItemComponent;
|
|
4664
4683
|
}());
|
|
4665
4684
|
if (false) {
|
|
4685
|
+
/** @type {?} */
|
|
4686
|
+
AssetItemComponent.prototype.isDialog;
|
|
4666
4687
|
/** @type {?} */
|
|
4667
4688
|
AssetItemComponent.prototype.hasModifyPermission;
|
|
4668
4689
|
/** @type {?} */
|
|
@@ -4886,14 +4907,16 @@ var NodeTreeDataSource = /** @class */ (function () {
|
|
|
4886
4907
|
/**
|
|
4887
4908
|
* Reload the node, remove from display list
|
|
4888
4909
|
* @param {?} node
|
|
4910
|
+
* @param {?=} pageSize
|
|
4889
4911
|
* @return {?}
|
|
4890
4912
|
*/
|
|
4891
4913
|
NodeTreeDataSource.prototype.reloadNode = /**
|
|
4892
4914
|
* Reload the node, remove from display list
|
|
4893
4915
|
* @param {?} node
|
|
4916
|
+
* @param {?=} pageSize
|
|
4894
4917
|
* @return {?}
|
|
4895
4918
|
*/
|
|
4896
|
-
function (node) {
|
|
4919
|
+
function (node, pageSize) {
|
|
4897
4920
|
return __awaiter(this, void 0, void 0, function () {
|
|
4898
4921
|
var _a, newNode, index, count, i, nodes;
|
|
4899
4922
|
var _this = this;
|
|
@@ -4903,7 +4926,7 @@ var NodeTreeDataSource = /** @class */ (function () {
|
|
|
4903
4926
|
if (!node) {
|
|
4904
4927
|
return [2 /*return*/];
|
|
4905
4928
|
}
|
|
4906
|
-
return [4 /*yield*/, this._database.getChildren(node.item)];
|
|
4929
|
+
return [4 /*yield*/, this._database.getChildren(node.item, pageSize)];
|
|
4907
4930
|
case 1:
|
|
4908
4931
|
newNode = _b.sent();
|
|
4909
4932
|
index = this.data.indexOf(node);
|
|
@@ -4998,7 +5021,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
4998
5021
|
var rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
|
|
4999
5022
|
return {
|
|
5000
5023
|
length: rootFolder ? rootFolder.size : 0,
|
|
5001
|
-
total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder ||
|
|
5024
|
+
total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || "0" : 0,
|
|
5002
5025
|
};
|
|
5003
5026
|
},
|
|
5004
5027
|
enumerable: true,
|
|
@@ -5071,9 +5094,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5071
5094
|
*/
|
|
5072
5095
|
function () {
|
|
5073
5096
|
var _this = this;
|
|
5074
|
-
this.nodeTreeService.loading$
|
|
5075
|
-
.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
|
|
5076
|
-
.subscribe((/**
|
|
5097
|
+
this.nodeTreeService.loading$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
|
|
5077
5098
|
* @param {?} loading
|
|
5078
5099
|
* @return {?}
|
|
5079
5100
|
*/
|
|
@@ -5081,9 +5102,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5081
5102
|
_this.homeLoading = loading;
|
|
5082
5103
|
_this.changeDetectorRef.detectChanges();
|
|
5083
5104
|
}));
|
|
5084
|
-
this.nodeTreeService.initialData$
|
|
5085
|
-
.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
|
|
5086
|
-
.subscribe((/**
|
|
5105
|
+
this.nodeTreeService.initialData$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
|
|
5087
5106
|
* @param {?} data
|
|
5088
5107
|
* @return {?}
|
|
5089
5108
|
*/
|
|
@@ -5098,9 +5117,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5098
5117
|
function (node) { return _this.nodeTreeService.addNode(node.item, null); }));
|
|
5099
5118
|
_this.changeDetectorRef.detectChanges();
|
|
5100
5119
|
}));
|
|
5101
|
-
this.dataSource.dataChange
|
|
5102
|
-
.pipe(takeUntil(this.unsubscribe$))
|
|
5103
|
-
.subscribe((/**
|
|
5120
|
+
this.dataSource.dataChange.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
|
|
5104
5121
|
* @param {?} data
|
|
5105
5122
|
* @return {?}
|
|
5106
5123
|
*/
|
|
@@ -5271,11 +5288,13 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5271
5288
|
this.setLoadingMore(id, true);
|
|
5272
5289
|
children = this.folderChildrenMap.get(id);
|
|
5273
5290
|
itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
|
|
5274
|
-
return [4 /*yield*/, this.assetService
|
|
5291
|
+
return [4 /*yield*/, this.assetService
|
|
5292
|
+
.getChildrenFolders({
|
|
5275
5293
|
assetId: id === ROOT_ASSET_ID ? null : id,
|
|
5276
5294
|
isFilter: false,
|
|
5277
|
-
pageIndex: Math.round((children ? children.size : 0) / itemsPerPage)
|
|
5278
|
-
})
|
|
5295
|
+
pageIndex: Math.round((children ? children.size : 0) / itemsPerPage),
|
|
5296
|
+
})
|
|
5297
|
+
.toPromise()];
|
|
5279
5298
|
case 2:
|
|
5280
5299
|
result = _a.sent();
|
|
5281
5300
|
assetChildren = result.Data.Children || [];
|
|
@@ -5302,7 +5321,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5302
5321
|
return [3 /*break*/, 4];
|
|
5303
5322
|
case 3:
|
|
5304
5323
|
error_1 = _a.sent();
|
|
5305
|
-
console.log(
|
|
5324
|
+
console.log("Load more folder error", error_1);
|
|
5306
5325
|
this.setLoadingMore(id, false);
|
|
5307
5326
|
return [3 /*break*/, 4];
|
|
5308
5327
|
case 4: return [2 /*return*/];
|
|
@@ -5383,7 +5402,7 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5383
5402
|
*/
|
|
5384
5403
|
function (id) {
|
|
5385
5404
|
return __awaiter(this, void 0, void 0, function () {
|
|
5386
|
-
var node, parent_1, updatedNode;
|
|
5405
|
+
var node, parent_1, children, updatedNode, rootFolder, updatedNode;
|
|
5387
5406
|
return __generator(this, function (_a) {
|
|
5388
5407
|
switch (_a.label) {
|
|
5389
5408
|
case 0:
|
|
@@ -5392,30 +5411,45 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5392
5411
|
}
|
|
5393
5412
|
this.loading = true;
|
|
5394
5413
|
node = this.getNodeById(id);
|
|
5395
|
-
if (!node) return [3 /*break*/,
|
|
5414
|
+
if (!node) return [3 /*break*/, 8];
|
|
5396
5415
|
parent_1 = this.getParent(node);
|
|
5397
5416
|
if (!parent_1) return [3 /*break*/, 4];
|
|
5398
5417
|
// Reload parent folder (get children and expand it again)
|
|
5399
|
-
|
|
5418
|
+
children = this.folderChildrenMap.get(parent_1.item.AssetId);
|
|
5419
|
+
return [4 /*yield*/, this.dataSource.reloadNode(parent_1, children.size)];
|
|
5400
5420
|
case 1:
|
|
5401
|
-
// Reload parent folder (get children and expand it again)
|
|
5402
5421
|
_a.sent();
|
|
5403
5422
|
updatedNode = this.getNodeById(id);
|
|
5404
5423
|
if (!updatedNode) return [3 /*break*/, 3];
|
|
5424
|
+
// TODO
|
|
5405
5425
|
return [4 /*yield*/, this.treeControl.expand(updatedNode)];
|
|
5406
5426
|
case 2:
|
|
5427
|
+
// TODO
|
|
5407
5428
|
_a.sent();
|
|
5408
5429
|
_a.label = 3;
|
|
5409
|
-
case 3: return [3 /*break*/,
|
|
5410
|
-
case 4:
|
|
5411
|
-
|
|
5430
|
+
case 3: return [3 /*break*/, 7];
|
|
5431
|
+
case 4:
|
|
5432
|
+
rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
|
|
5433
|
+
return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false, pageSize: rootFolder.size })];
|
|
5434
|
+
case 5:
|
|
5435
|
+
_a.sent();
|
|
5436
|
+
updatedNode = this.getNodeById(id);
|
|
5437
|
+
if (!updatedNode) return [3 /*break*/, 7];
|
|
5438
|
+
// TODO
|
|
5439
|
+
return [4 /*yield*/, this.treeControl.expand(updatedNode)];
|
|
5440
|
+
case 6:
|
|
5441
|
+
// TODO
|
|
5442
|
+
_a.sent();
|
|
5443
|
+
_a.label = 7;
|
|
5444
|
+
case 7: return [3 /*break*/, 10];
|
|
5445
|
+
case 8:
|
|
5412
5446
|
// Reload root folder
|
|
5413
5447
|
return [4 /*yield*/, this.nodeTreeService.initialData({ dispatchRootId: false })];
|
|
5414
|
-
case
|
|
5448
|
+
case 9:
|
|
5415
5449
|
// Reload root folder
|
|
5416
5450
|
_a.sent();
|
|
5417
|
-
_a.label =
|
|
5418
|
-
case
|
|
5451
|
+
_a.label = 10;
|
|
5452
|
+
case 10:
|
|
5419
5453
|
this.loading = false;
|
|
5420
5454
|
return [2 /*return*/];
|
|
5421
5455
|
}
|
|
@@ -5451,9 +5485,9 @@ var NodeTreeComponent = /** @class */ (function () {
|
|
|
5451
5485
|
};
|
|
5452
5486
|
NodeTreeComponent.decorators = [
|
|
5453
5487
|
{ type: Component, args: [{
|
|
5454
|
-
selector:
|
|
5488
|
+
selector: "lib-node-tree",
|
|
5455
5489
|
template: "<div class=\"node custom-scrollbar node-tree\">\n <div class=\"node__home\" (click)=\"backToHome()\" [ngClass]=\"{ active: isRoot,\n disabled: loading || homeLoading}\">\n <mat-icon *ngIf=\"!homeLoading\">home</mat-icon>\n <mat-spinner *ngIf=\"homeLoading\" [diameter]=\"20\"\n class=\"node__home--loading\"></mat-spinner>\n <span>Home</span>\n </div>\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"\n class=\"node__item\">\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding\n [ngClass]=\"{ active: checked(node),disabled: loading || node.isLoading }\"\n (click)=\"selectNode(node)\">\n <button mat-icon-button disabled class=\"node__item--pading\"></button>\n <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n <mat-icon class=\"folder-icon\">folder</mat-icon>\n <div class=\"node-name\">\n <span>\n {{ node.item.OriginalFileName }}\n </span>\n <span class=\"node-summary\" *ngIf=\"node.item?.TotalFolder ||\n node.item?.TotalFile\">\n <small *ngIf=\"node.item?.TotalFolder\">{{ node.item?.TotalFolder}}\n {{node.item?.TotalFolder> 1 ?\n 'folders':'folder'}}</small>\n <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n </small>\n <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n {{node.item?.TotalFile> 1 ?\n 'files':'file'}}</small>\n </span>\n </div>\n </div>\n </mat-tree-node>\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding \n [ngClass]=\"{ active: checked(node), disabled: loading || node.isLoading\n }\">\n <div class=\"d-flex align-items-center\" (click)=\"selectNode(node)\">\n <button mat-icon-button [attr.aria-label]=\"'Toggle ' +\n node.item.OriginalFileName\" matTreeNodeToggle\n [disabled]=\"node.isLoading\">\n <mat-icon *ngIf=\"!node.isLoading\" class=\"mat-icon-rtl-mirror\">\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n <mat-spinner *ngIf=\"node.isLoading\" [diameter]=\"20\"\n class=\"node__item--loading\"></mat-spinner>\n </button>\n <div class=\"node__item--info\" [style.maxWidth.px]=\"width -50\">\n <mat-icon class=\"folder-icon\">folder</mat-icon>\n <div class=\"node-name\">\n <span>\n {{ node.item.OriginalFileName }}\n </span>\n <span class=\"node-summary\">\n <small *ngIf=\"node.item?.TotalFolder\"><ng-container *ngIf=\"treeControl.isExpanded(node)\"><b>{{getFolderChildrenSize(node.item.AssetId)}}</b>/</ng-container>{{ node.item?.TotalFolder}}\n {{node.item?.TotalFolder> 1 ?\n 'folders':'folder'}}</small>\n <small *ngIf=\"node.item?.TotalFolder && node.item?.TotalFile\">,\n </small>\n <small *ngIf=\"node.item?.TotalFile\">{{ node.item?.TotalFile}}\n {{node.item?.TotalFile> 1 ?\n 'files':'file'}}</small>\n </span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"treeControl.isExpanded(node)\"> \n <div *ngIf=\"!!loadingMoreList[node.item.AssetId]\" class=\"mx-2\" [style.minWidth.px]=\"40\">\n <mat-spinner [diameter]=\"20\"\n class=\"node__item--loading\"></mat-spinner>\n </div>\n <button *ngIf=\"!loadingMoreList[node.item.AssetId] && canLoadMore(node)\" matTooltip=\"Load More\" class=\"mx-2\" mat-icon-button (click)=\"loadMoreFolder(node)\" [disabled]=\"loadingMoreList[node.item.AssetId] || homeLoading || loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\"><path d=\"m482-200 114-113-114-113-42 42 43 43q-28 1-54.5-9T381-381q-20-20-30.5-46T340-479q0-17 4.5-34t12.5-33l-44-44q-17 25-25 53t-8 57q0 38 15 75t44 66q29 29 65 43.5t74 15.5l-38 38 42 42Zm165-170q17-25 25-53t8-57q0-38-14.5-75.5T622-622q-29-29-65.5-43T482-679l38-39-42-42-114 113 114 113 42-42-44-44q27 0 55 10.5t48 30.5q20 20 30.5 46t10.5 52q0 17-4.5 34T603-414l44 44ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n </button>\n </ng-container>\n </mat-tree-node>\n </mat-tree>\n <div class=\"p-2 d-flex flex-column align-items-center justify-content-center\" *ngIf=\"folderTreeMeta.length\">\n <button mat-raised-button *ngIf=\"folderTreeMeta.length !== folderTreeMeta.total\" (click)=\"loadMoreFolder()\" [disabled]=\"loadingMoreList[ROOT_ASSET_ID] || loading || homeLoading\">\n <div class=\"d-flex align-items-center\">\n <mat-spinner [diameter]=\"20\" *ngIf=\"loadingMoreList[ROOT_ASSET_ID]\"></mat-spinner>\n <mat-icon *ngIf=\"!loadingMoreList[ROOT_ASSET_ID]\">expand_more</mat-icon>\n <div class=\"ml-2\">Load More</div>\n </div>\n </button>\n <div class=\"mt-2\" [style.fontSize.px]=\"13\"><b>{{ folderTreeMeta.length }}</b> of <b>{{ folderTreeMeta.total }} folders</b></div>\n </div>\n</div>",
|
|
5456
|
-
styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display
|
|
5490
|
+
styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display:grid;grid-auto-rows:max-content}:host::ng-deep .node-tree{max-height:max(800px,90vh);overflow-y:auto}:host::ng-deep .node__home{padding:8px 10px;display:flex;align-items:center;height:44px}:host::ng-deep .node__home .mat-icon{color:#979797;margin-right:15px;margin-bottom:10px;font-size:32px}:host::ng-deep .node__home .node__home--loading{margin-right:19px}:host::ng-deep .node__item--loading{margin-left:10px}:host::ng-deep .node__item--info{display:flex;align-items:center}:host::ng-deep .node__item--info .folder-icon{display:flex;align-items:center;color:#6fc0ff;font-size:32px;margin-right:20px}:host::ng-deep .node__item--info .node-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .node__item--info .node-name .node-summary{margin-top:-5px;color:#979797}:host::ng-deep .node .mat-tree{width:-moz-max-content!important;width:max-content!important;min-width:100%}:host::ng-deep .node .mat-tree .mat-tree-node{padding:5px 0;min-height:44px}:host::ng-deep .node .mat-tree .mat-tree-node .node__item--pading{height:20px}:host::ng-deep .node .mat-tree-node:hover,:host::ng-deep .node .node__home{transition:.3s;cursor:pointer}:host::ng-deep .node .mat-tree-node:hover:hover,:host::ng-deep .node .node__home:hover{background-color:#e8e8e8}:host::ng-deep .node .active{background-color:#f0f0f0}:host::ng-deep .node .disabled{pointer-events:none}"]
|
|
5457
5491
|
}] }
|
|
5458
5492
|
];
|
|
5459
5493
|
/** @nocollapse */
|
|
@@ -5767,11 +5801,16 @@ var SearchBoxComponent = /** @class */ (function () {
|
|
|
5767
5801
|
* @return {?}
|
|
5768
5802
|
*/
|
|
5769
5803
|
function (_a) {
|
|
5770
|
-
var _b = __read(_a, 2), folders = _b[0],
|
|
5804
|
+
var _b = __read(_a, 2), folders = _b[0], assetsRes = _b[1];
|
|
5805
|
+
/** @type {?} */
|
|
5806
|
+
var pagination = assetsRes && assetsRes.Meta || {};
|
|
5807
|
+
/** @type {?} */
|
|
5808
|
+
var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
|
|
5809
|
+
/** @type {?} */
|
|
5810
|
+
var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
|
|
5771
5811
|
_this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
|
|
5772
|
-
_this.assetService.setAssetList(assets
|
|
5773
|
-
}))
|
|
5774
|
-
.add((/**
|
|
5812
|
+
_this.assetService.setAssetList(assets, pagination, totalFile);
|
|
5813
|
+
})).add((/**
|
|
5775
5814
|
* @return {?}
|
|
5776
5815
|
*/
|
|
5777
5816
|
function () {
|
|
@@ -6003,7 +6042,7 @@ var AssetWrapperComponent = /** @class */ (function () {
|
|
|
6003
6042
|
AssetWrapperComponent.decorators = [
|
|
6004
6043
|
{ type: Component, args: [{
|
|
6005
6044
|
selector: 'lib-asset-wrapper',
|
|
6006
|
-
template: "<div class=\"asset-wrapper\">\n <div class=\"asset-header\" *ngIf=\"header\">\n <div class=\"asset-header__left asset-header__title\" #title>\n <lib-breadcrumb></lib-breadcrumb>\n </div>\n <div class=\"asset-header__right asset-header__actions\" #actions>\n <lib-search-box></lib-search-box>\n </div>\n </div>\n <div class=\"asset-body\">\n <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n </lib-drag-to-resize>\n <lib-node-details \n class=\"asset-body__node-details\"
|
|
6045
|
+
template: "<div class=\"asset-wrapper\">\n <div class=\"asset-header\" *ngIf=\"header\">\n <div class=\"asset-header__left asset-header__title\" #title>\n <lib-breadcrumb></lib-breadcrumb>\n </div>\n <div class=\"asset-header__right asset-header__actions\" #actions>\n <lib-search-box></lib-search-box>\n </div>\n </div>\n <div class=\"asset-body\">\n <lib-drag-to-resize (resizeCompleted)=\"onResize($event)\" class=\"asset-body__node-tree\" [minWidth]=\"nodeTreeMinWidth\" [maxWidth]=\"nodeTreeMaxWidth\">\n <lib-node-tree [width]=\"nodeTreeWidth\"></lib-node-tree>\n </lib-drag-to-resize>\n <lib-node-details \n class=\"asset-body__node-details\"\n [isDialog]=\"isDialog\"\n [style.maxWidth]=\"nodeDetailsWidth\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n ></lib-node-details>\n </div>\n</div>",
|
|
6007
6046
|
styles: [":host::ng-deep .mat-dialog-title{padding:24px}:host::ng-deep .mat-dialog-title .lib-modal--close{padding:10px;position:absolute;top:10px;right:10px;z-index:1}:host::ng-deep .mat-dialog-actions{padding-left:24px;padding-right:24px}:host::ng-deep .asset-wrapper{display:flex;flex-direction:column;height:100%;width:100%;overflow-x:hidden}:host::ng-deep .asset-wrapper .asset-header{display:flex;padding:20px 15px;border-bottom:1px solid #d8d8d8;justify-content:space-between;align-items:center}:host::ng-deep .asset-wrapper .asset-body{display:flex;align-items:stretch}:host::ng-deep .asset-wrapper .asset-body__node-tree{border-right:1px solid #d8d8d8}:host::ng-deep .asset-wrapper .asset-body__node-details{flex:1}@media screen and (max-width:768px){:host::ng-deep .asset-wrapper .asset-header{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px}:host::ng-deep .asset-wrapper .asset-body{flex-direction:column;justify-content:flex-start}:host::ng-deep .asset-wrapper .asset-body__node-tree{width:100%}:host::ng-deep .asset-wrapper .asset-body__node-details{max-width:100%!important}}::ng-deep .mat-tooltip.width-auto{max-width:100%!important}"]
|
|
6008
6047
|
}] }
|
|
6009
6048
|
];
|
|
@@ -6013,6 +6052,7 @@ var AssetWrapperComponent = /** @class */ (function () {
|
|
|
6013
6052
|
]; };
|
|
6014
6053
|
AssetWrapperComponent.propDecorators = {
|
|
6015
6054
|
header: [{ type: Input }],
|
|
6055
|
+
isDialog: [{ type: Input }],
|
|
6016
6056
|
hasModifyPermission: [{ type: Input }],
|
|
6017
6057
|
hasAccessPermission: [{ type: Input }],
|
|
6018
6058
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -6024,6 +6064,8 @@ if (false) {
|
|
|
6024
6064
|
/** @type {?} */
|
|
6025
6065
|
AssetWrapperComponent.prototype.header;
|
|
6026
6066
|
/** @type {?} */
|
|
6067
|
+
AssetWrapperComponent.prototype.isDialog;
|
|
6068
|
+
/** @type {?} */
|
|
6027
6069
|
AssetWrapperComponent.prototype.hasModifyPermission;
|
|
6028
6070
|
/** @type {?} */
|
|
6029
6071
|
AssetWrapperComponent.prototype.hasAccessPermission;
|
|
@@ -6395,8 +6437,14 @@ var NodeDetailsComponent = /** @class */ (function () {
|
|
|
6395
6437
|
*/
|
|
6396
6438
|
function (_a) {
|
|
6397
6439
|
var _b = __read(_a, 2), foldersRes = _b[0], assetsRes = _b[1];
|
|
6440
|
+
/** @type {?} */
|
|
6441
|
+
var pagination = assetsRes && assetsRes.Meta || {};
|
|
6442
|
+
/** @type {?} */
|
|
6443
|
+
var assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
|
|
6444
|
+
/** @type {?} */
|
|
6445
|
+
var totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
|
|
6398
6446
|
_this.setFolderList(foldersRes);
|
|
6399
|
-
_this.assetService.setAssetList(
|
|
6447
|
+
_this.assetService.setAssetList(assets, pagination, totalFile);
|
|
6400
6448
|
if (foldersRes.Data && foldersRes.Data.Children) {
|
|
6401
6449
|
foldersRes.Data.Children.forEach((/**
|
|
6402
6450
|
* @param {?} node
|
|
@@ -6496,8 +6544,8 @@ var NodeDetailsComponent = /** @class */ (function () {
|
|
|
6496
6544
|
NodeDetailsComponent.decorators = [
|
|
6497
6545
|
{ type: Component, args: [{
|
|
6498
6546
|
selector: 'lib-node-details',
|
|
6499
|
-
template: "<div class=\"node-details custom-scrollbar\">\n <div class=\"node-header\">\n <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n </mat-progress-bar>\n <div class=\"node-header-content\">\n <div class=\"node-header-content__left\">\n <H5 class=\"node-header-content__left--title\">\n <ng-container *ngIf=\"assetService?.keyword\">\n Search results for <span>{{ assetService?.keyword }}</span> in\n </ng-container>\n {{ currentFolder?.OriginalFileName }}\n </H5>\n <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n {{ assetService?.folderTotal }}\n {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n {{ assetService?.fileTotal }}\n {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n </p>\n </div>\n <div class=\"node-header-content__right\">\n <div class=\"button-wrapper\">\n <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n Upload asset\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n Add folder\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"node-body\">\n <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n <ng-template #contentAsset>\n <lib-folder-list\n class=\"node-body__section\"\n [folders]=\"currentFolder?.Children\"\n [pagination]=\"folderPagination\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n (onPageChange)=\"onFolderPageChange($event)\"\n ></lib-folder-list>\n <lib-asset-list\n [assets]=\"assets\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n ></lib-asset-list>\n </ng-template>\n </div>\n</div>",
|
|
6500
|
-
styles: [":host::ng-deep .node-details{max-height:100%;overflow-y:auto}:host::ng-deep .node-details .node-header{position
|
|
6547
|
+
template: "<div class=\"node-details custom-scrollbar\">\n <div class=\"node-header\">\n <mat-progress-bar [style.visibility]=\"(loading$ | async) ? 'visible' : 'hidden'\" mode=\"indeterminate\">\n </mat-progress-bar>\n <div class=\"node-header-content\">\n <div class=\"node-header-content__left\">\n <H5 class=\"node-header-content__left--title\">\n <ng-container *ngIf=\"assetService?.keyword\">\n Search results for <span>{{ assetService?.keyword }}</span> in\n </ng-container>\n {{ currentFolder?.OriginalFileName }}\n </H5>\n <p *ngIf=\"!noResults\" class=\"node-header-content__left--subtitle\">\n {{ assetService?.folderTotal }}\n {{ assetService?.folderTotal > 1 ? 'folders' : 'folder' }},\n {{ assetService?.fileTotal }}\n {{ assetService?.fileTotal > 1 ? 'files': 'file' }}\n </p>\n </div>\n <div class=\"node-header-content__right\">\n <div class=\"button-wrapper\">\n <button mat-raised-button [disabled]=\"!selectedAssets?.length || !hasArchivePermission\" (click)=\"deleteAssets()\" color=\"warn\">\n <span>{{selectedAssets?.length > 1 ? 'Delete assets' : 'Delete asset'}}</span>\n <span *ngIf=\"selectedAssets?.length\" class=\"count\">({{ selectedAssets.length }})</span>\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"openUploadDialog()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n Upload asset\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"addFolder()\" [disabled]=\"!currentFolder?.AssetId || !hasModifyPermission\">\n Add folder\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"node-body\">\n <lib-search-not-found *ngIf=\"noResults; else contentAsset\"></lib-search-not-found>\n <ng-template #contentAsset>\n <lib-folder-list\n class=\"node-body__section\"\n [folders]=\"currentFolder?.Children\"\n [pagination]=\"folderPagination\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n (onPageChange)=\"onFolderPageChange($event)\"\n ></lib-folder-list>\n <lib-asset-list\n [assets]=\"assets\"\n [isDialog]=\"isDialog\"\n [hasModifyPermission]=\"hasModifyPermission\"\n [hasAccessPermission]=\"hasAccessPermission\"\n [hasArchivePermission]=\"hasArchivePermission\"\n ></lib-asset-list>\n </ng-template>\n </div>\n</div>",
|
|
6548
|
+
styles: [":host::ng-deep .node-details{max-height:100%;overflow-y:auto}:host::ng-deep .node-details .node-header{position:sticky;top:0;background-color:#fff;z-index:20}:host::ng-deep .node-details .node-header-content{padding:10px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}:host::ng-deep .node-details .node-header-content__left--title{margin-bottom:5px}:host::ng-deep .node-details .node-header-content__left--title span{color:#fb3458}:host::ng-deep .node-details .node-header-content__left--subtitle{margin:0;color:#979797;font-size:14px}:host::ng-deep .node-details .node-header-content__right{flex:1}:host::ng-deep .node-details .node-header-content__right .button-wrapper{display:flex;gap:15px;justify-content:flex-end}:host::ng-deep .node-details .node-header-content__right .button-wrapper .count{margin-left:3px}:host::ng-deep .node-details .node-body{padding:0 20px}:host::ng-deep .node-details .node-body__section{display:block;margin-bottom:15px}"]
|
|
6501
6549
|
}] }
|
|
6502
6550
|
];
|
|
6503
6551
|
/** @nocollapse */
|
|
@@ -6509,6 +6557,7 @@ var NodeDetailsComponent = /** @class */ (function () {
|
|
|
6509
6557
|
{ type: ChangeDetectorRef }
|
|
6510
6558
|
]; };
|
|
6511
6559
|
NodeDetailsComponent.propDecorators = {
|
|
6560
|
+
isDialog: [{ type: Input }],
|
|
6512
6561
|
hasModifyPermission: [{ type: Input }],
|
|
6513
6562
|
hasAccessPermission: [{ type: Input }],
|
|
6514
6563
|
hasArchivePermission: [{ type: Input }]
|
|
@@ -6516,6 +6565,8 @@ var NodeDetailsComponent = /** @class */ (function () {
|
|
|
6516
6565
|
return NodeDetailsComponent;
|
|
6517
6566
|
}());
|
|
6518
6567
|
if (false) {
|
|
6568
|
+
/** @type {?} */
|
|
6569
|
+
NodeDetailsComponent.prototype.isDialog;
|
|
6519
6570
|
/** @type {?} */
|
|
6520
6571
|
NodeDetailsComponent.prototype.hasModifyPermission;
|
|
6521
6572
|
/** @type {?} */
|