@dignite-ng/expand.file-explorer 3.0.0-rc.3 → 3.0.0-rc.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -24
- package/esm2022/config/dignite-ng-expand.file-explorer-config.mjs +1 -1
- package/esm2022/config/enums/index.mjs +1 -1
- package/esm2022/config/enums/route-names.mjs +1 -1
- package/esm2022/config/file-config.module.mjs +1 -1
- package/esm2022/config/providers/index.mjs +1 -1
- package/esm2022/config/providers/route.provider.mjs +1 -1
- package/esm2022/config/public-api.mjs +1 -1
- package/esm2022/dignite-ng-expand.file-explorer.mjs +1 -1
- package/esm2022/lib/components/dome/file-dome.component.mjs +1 -1
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-config.component.mjs +3 -2
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-config.mjs +1 -1
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-control.component.mjs +17 -3
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-view.component.mjs +41 -0
- package/esm2022/lib/components/dynamic-form/file-explorer/index.mjs +1 -1
- package/esm2022/lib/components/dynamic-form/form-control-group.mjs +3 -2
- package/esm2022/lib/components/file-edit/file-edit.component.mjs +4 -3
- package/esm2022/lib/components/file-modal/file-modal.component.mjs +6 -3
- package/esm2022/lib/components/file-modal-tree/file-modal-tree.component.mjs +7 -3
- package/esm2022/lib/components/file-picker/file-picker.component.mjs +3 -2
- package/esm2022/lib/components/index.mjs +1 -1
- package/esm2022/lib/file-explorer-routing.module.mjs +1 -1
- package/esm2022/lib/file-explorer.module.mjs +6 -2
- package/esm2022/lib/previews/file-preview.component.mjs +7 -3
- package/esm2022/lib/previews/index.mjs +1 -1
- package/esm2022/lib/previews/models.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/directories/file-descriptor.service.mjs +2 -1
- package/esm2022/lib/proxy/dignite/file-explorer/directories/index.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/directories/models.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/files/file-descriptor.service.mjs +2 -1
- package/esm2022/lib/proxy/dignite/file-explorer/files/index.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/files/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/asp-net-core/mvc/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/extensions/primitives/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/net/http/headers/models.mjs +1 -1
- package/esm2022/lib/proxy/volo/abp/content/models.mjs +1 -1
- package/esm2022/lib/services/file-api.service.mjs +1 -1
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/dignite-ng-expand.file-explorer-config.mjs.map +1 -1
- package/fesm2022/dignite-ng-expand.file-explorer.mjs +65 -9
- package/fesm2022/dignite-ng-expand.file-explorer.mjs.map +1 -1
- package/lib/components/dynamic-form/file-explorer/file-explorer-control.component.d.ts +4 -1
- package/lib/components/dynamic-form/file-explorer/file-explorer-view.component.d.ts +17 -0
- package/lib/file-explorer.module.d.ts +9 -8
- package/lib/previews/file-preview.component.d.ts +2 -1
- package/package.json +25 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable,
|
|
2
|
+
import { Injectable, Input, Component, EventEmitter, ViewChild, Output, inject, NgModule, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i3 from '@abp/ng.core';
|
|
4
|
-
import { ListService, LIST_QUERY_DEBOUNCE_TIME, CoreModule } from '@abp/ng.core';
|
|
4
|
+
import { ListService, LIST_QUERY_DEBOUNCE_TIME, ConfigStateService, EnvironmentService, CoreModule } from '@abp/ng.core';
|
|
5
5
|
import * as i2$1 from '@abp/ng.theme.shared';
|
|
6
6
|
import { ThemeSharedModule } from '@abp/ng.theme.shared';
|
|
7
7
|
import * as i1 from '@angular/forms';
|
|
@@ -173,6 +173,7 @@ class FilePreviewComponent {
|
|
|
173
173
|
this.type = '';
|
|
174
174
|
/**文件名称 */
|
|
175
175
|
this.name = '';
|
|
176
|
+
this.className = '';
|
|
176
177
|
/**是否是文件 */
|
|
177
178
|
this.isImage = true;
|
|
178
179
|
/**是否是视频 */
|
|
@@ -233,11 +234,11 @@ class FilePreviewComponent {
|
|
|
233
234
|
this.rotate += 90;
|
|
234
235
|
}
|
|
235
236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i8.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePreviewComponent, selector: "fe-file-preview", inputs: { width: "width", src: "src", preview: "preview", type: "type", name: "name" }, ngImport: i0, template: "<div class=\"image_box\" [style]=\"{width:width,maxWidth:'100%'}\">\n <div class=\"img_box\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
|
|
237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePreviewComponent, selector: "fe-file-preview", inputs: { width: "width", src: "src", preview: "preview", type: "type", name: "name", className: "className" }, ngImport: i0, template: "<div class=\"image_box\" [style]=\"{width:width,maxWidth:'100%'}\">\n <div class=\"img_box\" [class]=\"className\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
|
|
237
238
|
}
|
|
238
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, decorators: [{
|
|
239
240
|
type: Component,
|
|
240
|
-
args: [{ selector: 'fe-file-preview', template: "<div class=\"image_box\" [style]=\"{width:width,maxWidth:'100%'}\">\n <div class=\"img_box\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"] }]
|
|
241
|
+
args: [{ selector: 'fe-file-preview', template: "<div class=\"image_box\" [style]=\"{width:width,maxWidth:'100%'}\">\n <div class=\"img_box\" [class]=\"className\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"] }]
|
|
241
242
|
}], ctorParameters: () => [{ type: i8.NgbModal }], propDecorators: { width: [{
|
|
242
243
|
type: Input
|
|
243
244
|
}], src: [{
|
|
@@ -248,6 +249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
|
|
|
248
249
|
type: Input
|
|
249
250
|
}], name: [{
|
|
250
251
|
type: Input
|
|
252
|
+
}], className: [{
|
|
253
|
+
type: Input
|
|
251
254
|
}] } });
|
|
252
255
|
|
|
253
256
|
class FileEditComponent {
|
|
@@ -325,7 +328,7 @@ class FileEditComponent {
|
|
|
325
328
|
});
|
|
326
329
|
}
|
|
327
330
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
328
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileEditComponent, selector: "fe-file-edit", inputs: { multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, viewQueries: [{ propertyName: "fileEdit", first: true, predicate: ["fileEdit"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-group mb-3\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name}}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' |\n abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n </th>\n <td>{{item.fileSize}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileEditComponent, selector: "fe-file-edit", inputs: { multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, viewQueries: [{ propertyName: "fileEdit", first: true, predicate: ["fileEdit"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-group mb-3\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name}}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' |\n abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n </th>\n <td>{{item.fileSize}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
329
332
|
}
|
|
330
333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, decorators: [{
|
|
331
334
|
type: Component,
|
|
@@ -837,7 +840,7 @@ class FileModalComponent {
|
|
|
837
840
|
// Provide this token if you want a different debounce time.
|
|
838
841
|
// Default is 300. Cannot be 0. Any value below 100 is not recommended.
|
|
839
842
|
{ provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
|
|
840
|
-
], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n </div>\n </div>\n <div>\n <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n [resizeable]=\"false\">\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n (change)=\"selectFn(!allRowsSelected)\" />\n </ng-template>\n <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n (change)=\"onCheckboxChangeFn($event)\" />\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ _FileApiService.formatFileSize(value) }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n <i class=\"fas fa-trash text-primary p-2\"></i>\n </button>\n </ng-template>\n </ngx-datatable-column>\n </ngx-datatable>\n </div>\n <div *ngIf=\"uploadPictureStatusList.length > 0\"\n class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal m-5\"\n style=\"border-radius: 10px\">\n <div class=\"card p-1\">\n <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n </div>\n <div class=\"card-body\">\n <table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n <tr>\n <th scope=\"row\">\n <div>{{ item.name }}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n </div>\n </th>\n <td>{{ item.fileSize }}</td>\n <td>\n <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
843
|
+
], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n </div>\n </div>\n <div>\n <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n [resizeable]=\"false\">\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n (change)=\"selectFn(!allRowsSelected)\" />\n </ng-template>\n <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n (change)=\"onCheckboxChangeFn($event)\" />\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ _FileApiService.formatFileSize(value) }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n <i class=\"fas fa-trash text-primary p-2\"></i>\n </button>\n </ng-template>\n </ngx-datatable-column>\n </ngx-datatable>\n </div>\n <div *ngIf=\"uploadPictureStatusList.length > 0\"\n class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal m-5\"\n style=\"border-radius: 10px\">\n <div class=\"card p-1\">\n <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n </div>\n <div class=\"card-body\">\n <table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n <tr>\n <th scope=\"row\">\n <div>{{ item.name }}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n </div>\n </th>\n <td>{{ item.fileSize }}</td>\n <td>\n <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
841
844
|
}
|
|
842
845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, decorators: [{
|
|
843
846
|
type: Component,
|
|
@@ -905,7 +908,7 @@ class FilePickerComponent {
|
|
|
905
908
|
this.selectedFileChange.emit(this.selectFormFile);
|
|
906
909
|
}
|
|
907
910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePickerComponent, selector: "fe-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\" (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name||item.Name}}</div>\n </th>\n <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n\n", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FileModalComponent, selector: "fe-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePickerComponent, selector: "fe-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\" (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name||item.Name}}</div>\n </th>\n <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n\n", styles: [".table{border-collapse:collapse;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FileModalComponent, selector: "fe-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
909
912
|
}
|
|
910
913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, decorators: [{
|
|
911
914
|
type: Component,
|
|
@@ -1044,6 +1047,8 @@ class FileExplorerControlComponent {
|
|
|
1044
1047
|
this.formConfiguration = '';
|
|
1045
1048
|
/**文件容器名称 */
|
|
1046
1049
|
this.FileContainerName = '';
|
|
1050
|
+
this.configState = inject(ConfigStateService);
|
|
1051
|
+
this.environment = inject(EnvironmentService);
|
|
1047
1052
|
/**选择文件-弹窗的-已选定的文件 */
|
|
1048
1053
|
this.selectedFileGroup = [];
|
|
1049
1054
|
}
|
|
@@ -1087,6 +1092,11 @@ class FileExplorerControlComponent {
|
|
|
1087
1092
|
this.formConfiguration = this._fields.field.formConfiguration;
|
|
1088
1093
|
this.FileContainerName = this.formConfiguration['FileExplorer.FileContainerName'];
|
|
1089
1094
|
if (this._selected && this._selected.length > 0) {
|
|
1095
|
+
this._selected.map((el) => {
|
|
1096
|
+
if (!el['url']) {
|
|
1097
|
+
el['url'] = this.GetImageUrl(el.blobName, el.containerName, el.tenantId);
|
|
1098
|
+
}
|
|
1099
|
+
});
|
|
1090
1100
|
this.selectedFileGroup = this._selected;
|
|
1091
1101
|
}
|
|
1092
1102
|
let newControl = this.fb.control(this._selected, ValidatorsArray);
|
|
@@ -1094,6 +1104,12 @@ class FileExplorerControlComponent {
|
|
|
1094
1104
|
resolve(true);
|
|
1095
1105
|
});
|
|
1096
1106
|
}
|
|
1107
|
+
GetImageUrl(value, ...args) {
|
|
1108
|
+
let tenantId = args[1];
|
|
1109
|
+
const environment = this.environment.getEnvironment();
|
|
1110
|
+
let imgUrl = `${environment.apis.default.url}/api/file-explorer/files/${args[0]}/${value}?__tenant=${tenantId}&timer=${new Date().getTime()}`;
|
|
1111
|
+
return value ? imgUrl : '';
|
|
1112
|
+
}
|
|
1097
1113
|
/**_selectedFile改变回调 */
|
|
1098
1114
|
_selectedFileChange(event) {
|
|
1099
1115
|
this.selectedFileGroup = event;
|
|
@@ -1121,6 +1137,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
|
|
|
1121
1137
|
args: ['submitclick', { static: true }]
|
|
1122
1138
|
}] } });
|
|
1123
1139
|
|
|
1140
|
+
/* eslint-disable @angular-eslint/component-selector */
|
|
1141
|
+
class FileExplorerViewComponent {
|
|
1142
|
+
constructor() {
|
|
1143
|
+
/**展示则内容 */
|
|
1144
|
+
this.showValue = '';
|
|
1145
|
+
/**是否显示再列表 */
|
|
1146
|
+
this.showInList = false;
|
|
1147
|
+
/**表单控件Value */
|
|
1148
|
+
this._value = '';
|
|
1149
|
+
}
|
|
1150
|
+
set value(v) {
|
|
1151
|
+
this._value = v;
|
|
1152
|
+
}
|
|
1153
|
+
async ngAfterContentInit() {
|
|
1154
|
+
//Called after ngOnInit when the component's or directive's content has been initialized.
|
|
1155
|
+
//Add 'implements AfterContentInit' to the class.
|
|
1156
|
+
let valueOptions = this._value;
|
|
1157
|
+
if (this.type && valueOptions) {
|
|
1158
|
+
this.showValue = valueOptions;
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: FileExplorerViewComponent, selector: "fe-file-explorer-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n <fe-file-preview [width]=\"'40px'\" [className]=\"'rounded-5 overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n @if(showValue.length-1>0){\r\n +{{showValue.length-1}}\r\n }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name", "className"] }] }); }
|
|
1163
|
+
}
|
|
1164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerViewComponent, decorators: [{
|
|
1165
|
+
type: Component,
|
|
1166
|
+
args: [{ selector: 'fe-file-explorer-view', template: "@if(showInList){\r\n@if(showValue.length>=1){\r\n<div class=\"d-flex align-items-center \">\r\n <fe-file-preview [width]=\"'40px'\" [className]=\"'rounded-5 overflow-hidden me-1'\" [src]=\"showValue[0].url\"\r\n [name]=\"showValue[0].name\" [type]=\"showValue[0].mimeType\" [preview]=\"true\"></fe-file-preview>\r\n @if(showValue.length-1>0){\r\n +{{showValue.length-1}}\r\n }\r\n</div>\r\n}\r\n} @else{\r\n<div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n</div>\r\n}" }]
|
|
1167
|
+
}], propDecorators: { showInList: [{
|
|
1168
|
+
type: Input
|
|
1169
|
+
}], fields: [{
|
|
1170
|
+
type: Input
|
|
1171
|
+
}], type: [{
|
|
1172
|
+
type: Input
|
|
1173
|
+
}], value: [{
|
|
1174
|
+
type: Input
|
|
1175
|
+
}] } });
|
|
1176
|
+
|
|
1124
1177
|
/**
|
|
1125
1178
|
* 表单控件分组-包含配置，控件，显示的数组
|
|
1126
1179
|
*/
|
|
@@ -1130,7 +1183,7 @@ const fielFieldControlGroup = [
|
|
|
1130
1183
|
name: 'FileExplorer',
|
|
1131
1184
|
fieldConfigComponent: FileExplorerConfigComponent,
|
|
1132
1185
|
fieldComponent: FileExplorerControlComponent,
|
|
1133
|
-
|
|
1186
|
+
fieldViewComponent: FileExplorerViewComponent,
|
|
1134
1187
|
}
|
|
1135
1188
|
];
|
|
1136
1189
|
function getExcludeAssignControl(typeName) {
|
|
@@ -1150,7 +1203,8 @@ class FileExplorerModule {
|
|
|
1150
1203
|
FileDomeComponent,
|
|
1151
1204
|
FilePreviewComponent,
|
|
1152
1205
|
FileExplorerConfigComponent,
|
|
1153
|
-
FileExplorerControlComponent
|
|
1206
|
+
FileExplorerControlComponent,
|
|
1207
|
+
FileExplorerViewComponent], imports: [FormsModule,
|
|
1154
1208
|
CoreModule,
|
|
1155
1209
|
ThemeSharedModule,
|
|
1156
1210
|
ReactiveFormsModule,
|
|
@@ -1184,6 +1238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
|
|
|
1184
1238
|
FilePreviewComponent,
|
|
1185
1239
|
FileExplorerConfigComponent,
|
|
1186
1240
|
FileExplorerControlComponent,
|
|
1241
|
+
FileExplorerViewComponent,
|
|
1187
1242
|
],
|
|
1188
1243
|
imports: [
|
|
1189
1244
|
FormsModule,
|
|
@@ -1206,6 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
|
|
|
1206
1261
|
// FileExplorerControlComponent,
|
|
1207
1262
|
],
|
|
1208
1263
|
providers: [
|
|
1264
|
+
// GetImageUrlPipe
|
|
1209
1265
|
// // [Required]
|
|
1210
1266
|
// ListService,
|
|
1211
1267
|
// // [Optional]
|