@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
|
@@ -556,10 +556,11 @@ class AssetService {
|
|
|
556
556
|
/**
|
|
557
557
|
* @param {?} assets
|
|
558
558
|
* @param {?=} pagination
|
|
559
|
+
* @param {?=} totalFile
|
|
559
560
|
* @return {?}
|
|
560
561
|
*/
|
|
561
|
-
setAssetList(assets, pagination) {
|
|
562
|
-
this.setPagination(pagination);
|
|
562
|
+
setAssetList(assets, pagination, totalFile) {
|
|
563
|
+
this.setPagination(pagination, totalFile);
|
|
563
564
|
this.assetList$.next(assets);
|
|
564
565
|
}
|
|
565
566
|
/**
|
|
@@ -578,11 +579,12 @@ class AssetService {
|
|
|
578
579
|
/**
|
|
579
580
|
* @private
|
|
580
581
|
* @param {?} pagination
|
|
582
|
+
* @param {?} totalFile
|
|
581
583
|
* @return {?}
|
|
582
584
|
*/
|
|
583
|
-
setPagination(pagination) {
|
|
585
|
+
setPagination(pagination, totalFile) {
|
|
584
586
|
if (pagination) {
|
|
585
|
-
this.fileTotal =
|
|
587
|
+
this.fileTotal = totalFile || 0;
|
|
586
588
|
this.pageIndex = pagination.PageIndex;
|
|
587
589
|
this.pageSize = pagination.PageSize;
|
|
588
590
|
}
|
|
@@ -1049,13 +1051,16 @@ class NodeTreeService {
|
|
|
1049
1051
|
/**
|
|
1050
1052
|
* @private
|
|
1051
1053
|
* @param {?} id
|
|
1054
|
+
* @param {?=} pageSize
|
|
1052
1055
|
* @return {?}
|
|
1053
1056
|
*/
|
|
1054
|
-
fetchChildrenFolder(id) {
|
|
1057
|
+
fetchChildrenFolder(id, pageSize) {
|
|
1055
1058
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1056
1059
|
try {
|
|
1057
1060
|
/** @type {?} */
|
|
1058
|
-
const result = yield this.assetService
|
|
1061
|
+
const result = yield this.assetService
|
|
1062
|
+
.getChildrenFolders({ assetId: id, isFilter: false, pageSize: pageSize || this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE })
|
|
1063
|
+
.toPromise();
|
|
1059
1064
|
if (result) {
|
|
1060
1065
|
return result.Data;
|
|
1061
1066
|
}
|
|
@@ -1069,7 +1074,7 @@ class NodeTreeService {
|
|
|
1069
1074
|
* @param {?} __0
|
|
1070
1075
|
* @return {?}
|
|
1071
1076
|
*/
|
|
1072
|
-
initialData({ dispatchRootId, pageSize = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE }) {
|
|
1077
|
+
initialData({ dispatchRootId, pageSize = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE, }) {
|
|
1073
1078
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1074
1079
|
if (dispatchRootId) {
|
|
1075
1080
|
this.loading$.next(true);
|
|
@@ -1113,11 +1118,12 @@ class NodeTreeService {
|
|
|
1113
1118
|
}
|
|
1114
1119
|
/**
|
|
1115
1120
|
* @param {?} node
|
|
1121
|
+
* @param {?=} pageSize
|
|
1116
1122
|
* @return {?}
|
|
1117
1123
|
*/
|
|
1118
|
-
getChildren(node) {
|
|
1124
|
+
getChildren(node, pageSize) {
|
|
1119
1125
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1120
|
-
return yield this.fetchChildrenFolder(node.AssetId);
|
|
1126
|
+
return yield this.fetchChildrenFolder(node.AssetId, pageSize);
|
|
1121
1127
|
});
|
|
1122
1128
|
}
|
|
1123
1129
|
/**
|
|
@@ -1583,7 +1589,7 @@ class AssetManagementDialogComponent {
|
|
|
1583
1589
|
AssetManagementDialogComponent.decorators = [
|
|
1584
1590
|
{ type: Component, args: [{
|
|
1585
1591
|
selector: 'lib-asset-management-dialog',
|
|
1586
|
-
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
|
|
1592
|
+
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>",
|
|
1587
1593
|
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}"]
|
|
1588
1594
|
}] }
|
|
1589
1595
|
];
|
|
@@ -1955,7 +1961,7 @@ ModalComponent.decorators = [
|
|
|
1955
1961
|
{ type: Component, args: [{
|
|
1956
1962
|
selector: 'lib-modal',
|
|
1957
1963
|
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",
|
|
1958
|
-
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:-
|
|
1964
|
+
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}"]
|
|
1959
1965
|
}] }
|
|
1960
1966
|
];
|
|
1961
1967
|
/** @nocollapse */
|
|
@@ -2265,7 +2271,7 @@ FileListComponent.decorators = [
|
|
|
2265
2271
|
{ type: Component, args: [{
|
|
2266
2272
|
selector: 'lib-file-list',
|
|
2267
2273
|
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",
|
|
2268
|
-
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
|
|
2274
|
+
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}"]
|
|
2269
2275
|
}] }
|
|
2270
2276
|
];
|
|
2271
2277
|
/** @nocollapse */
|
|
@@ -3314,9 +3320,14 @@ class AssetListComponent {
|
|
|
3314
3320
|
* @return {?}
|
|
3315
3321
|
*/
|
|
3316
3322
|
(res) => {
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3323
|
+
/** @type {?} */
|
|
3324
|
+
const pagination = res && res.Meta || {};
|
|
3325
|
+
/** @type {?} */
|
|
3326
|
+
const assets = res && res.Data && res.Data.Children || [];
|
|
3327
|
+
/** @type {?} */
|
|
3328
|
+
const totalFile = res && res.Data && res.Data.TotalFile || 0;
|
|
3329
|
+
this.assetService.setAssetList(assets, pagination, totalFile);
|
|
3330
|
+
})).add((/**
|
|
3320
3331
|
* @return {?}
|
|
3321
3332
|
*/
|
|
3322
3333
|
() => {
|
|
@@ -3358,8 +3369,8 @@ class AssetListComponent {
|
|
|
3358
3369
|
AssetListComponent.decorators = [
|
|
3359
3370
|
{ type: Component, args: [{
|
|
3360
3371
|
selector: 'lib-asset-list',
|
|
3361
|
-
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",
|
|
3362
|
-
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:
|
|
3372
|
+
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",
|
|
3373
|
+
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}"]
|
|
3363
3374
|
}] }
|
|
3364
3375
|
];
|
|
3365
3376
|
/** @nocollapse */
|
|
@@ -3368,6 +3379,7 @@ AssetListComponent.ctorParameters = () => [
|
|
|
3368
3379
|
{ type: AssetManagementService }
|
|
3369
3380
|
];
|
|
3370
3381
|
AssetListComponent.propDecorators = {
|
|
3382
|
+
isDialog: [{ type: Input }],
|
|
3371
3383
|
hasModifyPermission: [{ type: Input }],
|
|
3372
3384
|
hasAccessPermission: [{ type: Input }],
|
|
3373
3385
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -3375,6 +3387,8 @@ AssetListComponent.propDecorators = {
|
|
|
3375
3387
|
assets: [{ type: Input }]
|
|
3376
3388
|
};
|
|
3377
3389
|
if (false) {
|
|
3390
|
+
/** @type {?} */
|
|
3391
|
+
AssetListComponent.prototype.isDialog;
|
|
3378
3392
|
/** @type {?} */
|
|
3379
3393
|
AssetListComponent.prototype.hasModifyPermission;
|
|
3380
3394
|
/** @type {?} */
|
|
@@ -4081,8 +4095,8 @@ class AssetItemComponent {
|
|
|
4081
4095
|
AssetItemComponent.decorators = [
|
|
4082
4096
|
{ type: Component, args: [{
|
|
4083
4097
|
selector: 'lib-asset-item',
|
|
4084
|
-
template: "<div class=\"asset-wrapper\">\n <div class=\"asset-content\">\n <div class=\"asset-content__header\" *ngIf=\"asset?.BackgroudProcessingStatus === backgroundProcessingNum.Processed
|
|
4085
|
-
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{
|
|
4098
|
+
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>",
|
|
4099
|
+
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}"]
|
|
4086
4100
|
}] }
|
|
4087
4101
|
];
|
|
4088
4102
|
/** @nocollapse */
|
|
@@ -4094,6 +4108,7 @@ AssetItemComponent.ctorParameters = () => [
|
|
|
4094
4108
|
{ type: ChangeDetectorRef }
|
|
4095
4109
|
];
|
|
4096
4110
|
AssetItemComponent.propDecorators = {
|
|
4111
|
+
isDialog: [{ type: Input }],
|
|
4097
4112
|
hasModifyPermission: [{ type: Input }],
|
|
4098
4113
|
hasAccessPermission: [{ type: Input }],
|
|
4099
4114
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -4101,6 +4116,8 @@ AssetItemComponent.propDecorators = {
|
|
|
4101
4116
|
selectAsset: [{ type: Output }]
|
|
4102
4117
|
};
|
|
4103
4118
|
if (false) {
|
|
4119
|
+
/** @type {?} */
|
|
4120
|
+
AssetItemComponent.prototype.isDialog;
|
|
4104
4121
|
/** @type {?} */
|
|
4105
4122
|
AssetItemComponent.prototype.hasModifyPermission;
|
|
4106
4123
|
/** @type {?} */
|
|
@@ -4279,15 +4296,16 @@ class NodeTreeDataSource {
|
|
|
4279
4296
|
/**
|
|
4280
4297
|
* Reload the node, remove from display list
|
|
4281
4298
|
* @param {?} node
|
|
4299
|
+
* @param {?=} pageSize
|
|
4282
4300
|
* @return {?}
|
|
4283
4301
|
*/
|
|
4284
|
-
reloadNode(node) {
|
|
4302
|
+
reloadNode(node, pageSize) {
|
|
4285
4303
|
return __awaiter(this, void 0, void 0, function* () {
|
|
4286
4304
|
if (!node) {
|
|
4287
4305
|
return;
|
|
4288
4306
|
}
|
|
4289
4307
|
/** @type {?} */
|
|
4290
|
-
const newNode = yield this._database.getChildren(node.item);
|
|
4308
|
+
const newNode = yield this._database.getChildren(node.item, pageSize);
|
|
4291
4309
|
/** @type {?} */
|
|
4292
4310
|
const index = this.data.indexOf(node);
|
|
4293
4311
|
if (!newNode || index < 0) {
|
|
@@ -4382,7 +4400,7 @@ class NodeTreeComponent {
|
|
|
4382
4400
|
const rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
|
|
4383
4401
|
return {
|
|
4384
4402
|
length: rootFolder ? rootFolder.size : 0,
|
|
4385
|
-
total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder ||
|
|
4403
|
+
total: this.nodeTreeService.rootFolder ? this.nodeTreeService.rootFolder.TotalFolder || "0" : 0,
|
|
4386
4404
|
};
|
|
4387
4405
|
}
|
|
4388
4406
|
/**
|
|
@@ -4425,9 +4443,7 @@ class NodeTreeComponent {
|
|
|
4425
4443
|
* @return {?}
|
|
4426
4444
|
*/
|
|
4427
4445
|
bindSubscriber() {
|
|
4428
|
-
this.nodeTreeService.loading$
|
|
4429
|
-
.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
|
|
4430
|
-
.subscribe((/**
|
|
4446
|
+
this.nodeTreeService.loading$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
|
|
4431
4447
|
* @param {?} loading
|
|
4432
4448
|
* @return {?}
|
|
4433
4449
|
*/
|
|
@@ -4435,9 +4451,7 @@ class NodeTreeComponent {
|
|
|
4435
4451
|
this.homeLoading = loading;
|
|
4436
4452
|
this.changeDetectorRef.detectChanges();
|
|
4437
4453
|
}));
|
|
4438
|
-
this.nodeTreeService.initialData$
|
|
4439
|
-
.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged())
|
|
4440
|
-
.subscribe((/**
|
|
4454
|
+
this.nodeTreeService.initialData$.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe((/**
|
|
4441
4455
|
* @param {?} data
|
|
4442
4456
|
* @return {?}
|
|
4443
4457
|
*/
|
|
@@ -4452,9 +4466,7 @@ class NodeTreeComponent {
|
|
|
4452
4466
|
(node) => this.nodeTreeService.addNode(node.item, null)));
|
|
4453
4467
|
this.changeDetectorRef.detectChanges();
|
|
4454
4468
|
}));
|
|
4455
|
-
this.dataSource.dataChange
|
|
4456
|
-
.pipe(takeUntil(this.unsubscribe$))
|
|
4457
|
-
.subscribe((/**
|
|
4469
|
+
this.dataSource.dataChange.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
|
|
4458
4470
|
* @param {?} data
|
|
4459
4471
|
* @return {?}
|
|
4460
4472
|
*/
|
|
@@ -4579,11 +4591,13 @@ class NodeTreeComponent {
|
|
|
4579
4591
|
/** @type {?} */
|
|
4580
4592
|
const itemsPerPage = this.assetService.AMConfig.pageFolderSize || MAX_FOLDER_TREE_SIZE;
|
|
4581
4593
|
/** @type {?} */
|
|
4582
|
-
const result = yield this.assetService
|
|
4594
|
+
const result = yield this.assetService
|
|
4595
|
+
.getChildrenFolders({
|
|
4583
4596
|
assetId: id === ROOT_ASSET_ID ? null : id,
|
|
4584
4597
|
isFilter: false,
|
|
4585
|
-
pageIndex: Math.round((children ? children.size : 0) / itemsPerPage)
|
|
4586
|
-
})
|
|
4598
|
+
pageIndex: Math.round((children ? children.size : 0) / itemsPerPage),
|
|
4599
|
+
})
|
|
4600
|
+
.toPromise();
|
|
4587
4601
|
/** @type {?} */
|
|
4588
4602
|
const assetChildren = result.Data.Children || [];
|
|
4589
4603
|
// Handle datasource
|
|
@@ -4611,7 +4625,7 @@ class NodeTreeComponent {
|
|
|
4611
4625
|
this.changeDetectorRef.detectChanges();
|
|
4612
4626
|
}
|
|
4613
4627
|
catch (error) {
|
|
4614
|
-
console.log(
|
|
4628
|
+
console.log("Load more folder error", error);
|
|
4615
4629
|
this.setLoadingMore(id, false);
|
|
4616
4630
|
}
|
|
4617
4631
|
});
|
|
@@ -4679,20 +4693,26 @@ class NodeTreeComponent {
|
|
|
4679
4693
|
const parent = this.getParent(node);
|
|
4680
4694
|
if (parent) {
|
|
4681
4695
|
// Reload parent folder (get children and expand it again)
|
|
4682
|
-
|
|
4696
|
+
/** @type {?} */
|
|
4697
|
+
const children = this.folderChildrenMap.get(parent.item.AssetId);
|
|
4698
|
+
yield this.dataSource.reloadNode(parent, children.size);
|
|
4683
4699
|
/** @type {?} */
|
|
4684
4700
|
const updatedNode = this.getNodeById(id);
|
|
4685
4701
|
if (updatedNode) {
|
|
4702
|
+
// TODO
|
|
4686
4703
|
yield this.treeControl.expand(updatedNode);
|
|
4687
4704
|
}
|
|
4688
4705
|
}
|
|
4689
4706
|
else {
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4707
|
+
/** @type {?} */
|
|
4708
|
+
const rootFolder = this.folderChildrenMap.get(ROOT_ASSET_ID);
|
|
4709
|
+
yield this.nodeTreeService.initialData({ dispatchRootId: false, pageSize: rootFolder.size });
|
|
4710
|
+
/** @type {?} */
|
|
4711
|
+
const updatedNode = this.getNodeById(id);
|
|
4712
|
+
if (updatedNode) {
|
|
4713
|
+
// TODO
|
|
4714
|
+
yield this.treeControl.expand(updatedNode);
|
|
4715
|
+
}
|
|
4696
4716
|
}
|
|
4697
4717
|
}
|
|
4698
4718
|
else {
|
|
@@ -4723,9 +4743,9 @@ class NodeTreeComponent {
|
|
|
4723
4743
|
}
|
|
4724
4744
|
NodeTreeComponent.decorators = [
|
|
4725
4745
|
{ type: Component, args: [{
|
|
4726
|
-
selector:
|
|
4746
|
+
selector: "lib-node-tree",
|
|
4727
4747
|
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>",
|
|
4728
|
-
styles: [":host::ng-deep .node{overflow-x:hidden;height:100%;display
|
|
4748
|
+
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}"]
|
|
4729
4749
|
}] }
|
|
4730
4750
|
];
|
|
4731
4751
|
/** @nocollapse */
|
|
@@ -4996,11 +5016,16 @@ class SearchBoxComponent {
|
|
|
4996
5016
|
* @param {?} __0
|
|
4997
5017
|
* @return {?}
|
|
4998
5018
|
*/
|
|
4999
|
-
([folders,
|
|
5019
|
+
([folders, assetsRes]) => {
|
|
5020
|
+
/** @type {?} */
|
|
5021
|
+
const pagination = assetsRes && assetsRes.Meta || {};
|
|
5022
|
+
/** @type {?} */
|
|
5023
|
+
const assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
|
|
5024
|
+
/** @type {?} */
|
|
5025
|
+
const totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
|
|
5000
5026
|
this.assetService.setFolderList(folders.Data, { Total: folders.Data.TotalFolder });
|
|
5001
|
-
this.assetService.setAssetList(assets
|
|
5002
|
-
}))
|
|
5003
|
-
.add((/**
|
|
5027
|
+
this.assetService.setAssetList(assets, pagination, totalFile);
|
|
5028
|
+
})).add((/**
|
|
5004
5029
|
* @return {?}
|
|
5005
5030
|
*/
|
|
5006
5031
|
() => {
|
|
@@ -5209,7 +5234,7 @@ class AssetWrapperComponent {
|
|
|
5209
5234
|
AssetWrapperComponent.decorators = [
|
|
5210
5235
|
{ type: Component, args: [{
|
|
5211
5236
|
selector: 'lib-asset-wrapper',
|
|
5212
|
-
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\"
|
|
5237
|
+
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>",
|
|
5213
5238
|
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}"]
|
|
5214
5239
|
}] }
|
|
5215
5240
|
];
|
|
@@ -5219,6 +5244,7 @@ AssetWrapperComponent.ctorParameters = () => [
|
|
|
5219
5244
|
];
|
|
5220
5245
|
AssetWrapperComponent.propDecorators = {
|
|
5221
5246
|
header: [{ type: Input }],
|
|
5247
|
+
isDialog: [{ type: Input }],
|
|
5222
5248
|
hasModifyPermission: [{ type: Input }],
|
|
5223
5249
|
hasAccessPermission: [{ type: Input }],
|
|
5224
5250
|
hasArchivePermission: [{ type: Input }],
|
|
@@ -5228,6 +5254,8 @@ if (false) {
|
|
|
5228
5254
|
/** @type {?} */
|
|
5229
5255
|
AssetWrapperComponent.prototype.header;
|
|
5230
5256
|
/** @type {?} */
|
|
5257
|
+
AssetWrapperComponent.prototype.isDialog;
|
|
5258
|
+
/** @type {?} */
|
|
5231
5259
|
AssetWrapperComponent.prototype.hasModifyPermission;
|
|
5232
5260
|
/** @type {?} */
|
|
5233
5261
|
AssetWrapperComponent.prototype.hasAccessPermission;
|
|
@@ -5567,8 +5595,14 @@ class NodeDetailsComponent {
|
|
|
5567
5595
|
* @return {?}
|
|
5568
5596
|
*/
|
|
5569
5597
|
([foldersRes, assetsRes]) => {
|
|
5598
|
+
/** @type {?} */
|
|
5599
|
+
const pagination = assetsRes && assetsRes.Meta || {};
|
|
5600
|
+
/** @type {?} */
|
|
5601
|
+
const assets = assetsRes && assetsRes.Data && assetsRes.Data.Children || [];
|
|
5602
|
+
/** @type {?} */
|
|
5603
|
+
const totalFile = assetsRes && assetsRes.Data && assetsRes.Data.TotalFile || 0;
|
|
5570
5604
|
this.setFolderList(foldersRes);
|
|
5571
|
-
this.assetService.setAssetList(
|
|
5605
|
+
this.assetService.setAssetList(assets, pagination, totalFile);
|
|
5572
5606
|
if (foldersRes.Data && foldersRes.Data.Children) {
|
|
5573
5607
|
foldersRes.Data.Children.forEach((/**
|
|
5574
5608
|
* @param {?} node
|
|
@@ -5648,8 +5682,8 @@ class NodeDetailsComponent {
|
|
|
5648
5682
|
NodeDetailsComponent.decorators = [
|
|
5649
5683
|
{ type: Component, args: [{
|
|
5650
5684
|
selector: 'lib-node-details',
|
|
5651
|
-
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>",
|
|
5652
|
-
styles: [":host::ng-deep .node-details{max-height:100%;overflow-y:auto}:host::ng-deep .node-details .node-header{position
|
|
5685
|
+
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>",
|
|
5686
|
+
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}"]
|
|
5653
5687
|
}] }
|
|
5654
5688
|
];
|
|
5655
5689
|
/** @nocollapse */
|
|
@@ -5661,11 +5695,14 @@ NodeDetailsComponent.ctorParameters = () => [
|
|
|
5661
5695
|
{ type: ChangeDetectorRef }
|
|
5662
5696
|
];
|
|
5663
5697
|
NodeDetailsComponent.propDecorators = {
|
|
5698
|
+
isDialog: [{ type: Input }],
|
|
5664
5699
|
hasModifyPermission: [{ type: Input }],
|
|
5665
5700
|
hasAccessPermission: [{ type: Input }],
|
|
5666
5701
|
hasArchivePermission: [{ type: Input }]
|
|
5667
5702
|
};
|
|
5668
5703
|
if (false) {
|
|
5704
|
+
/** @type {?} */
|
|
5705
|
+
NodeDetailsComponent.prototype.isDialog;
|
|
5669
5706
|
/** @type {?} */
|
|
5670
5707
|
NodeDetailsComponent.prototype.hasModifyPermission;
|
|
5671
5708
|
/** @type {?} */
|