@dignite-ng/expand.file-explorer 0.0.2 → 0.0.3

package/config/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/file-explorer/config",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/config/{enums/index.d.ts → src/enums/index.ts}

@@ -1 +1 @@
-export * from './route-names';
+export * from './route-names';

package/config/src/enums/route-names.ts

@@ -0,0 +1,15 @@
+export const enum eFileRouteNames {
+  // Cms = 'Cms',
+  // Entries = 'Entries',
+  // Settings = "Settings",
+  // Fields = "Fields",
+  // Sites = "Sites",
+  // Sections = "Sections",
+  // Cms = '内容管理',
+  // Entries = '条目',
+  // Settings = "设置",
+  // Fields = "字段",
+  // Sites = "站点",
+  FileUploadDemo = "File Upload Demo",
+  
+}

package/config/src/file-config.module.ts

@@ -0,0 +1,12 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FILE_ROUTE_PROVIDERS } from './providers/route.provider';
+
+@NgModule()
+export class FileConfigModule {
+  static forRoot(): ModuleWithProviders<FileConfigModule> {
+    return {
+      ngModule: FileConfigModule,
+      providers: [FILE_ROUTE_PROVIDERS],
+    };
+  }
+}

package/config/{providers/index.d.ts → src/providers/index.ts}

@@ -1 +1 @@
-export * from './route.provider';
+export * from './route.provider';

package/config/src/providers/route.provider.ts

@@ -0,0 +1,26 @@
+import { eLayoutType, RoutesService } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+import { eFileRouteNames } from '../enums';
+
+export const FILE_ROUTE_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureRoutes,
+    deps: [RoutesService],
+    multi: true,
+  },
+];
+
+export function configureRoutes(routesService: RoutesService) {
+  return () => {
+    routesService.add([
+      {
+        path: '/file/file-dome',
+        name:eFileRouteNames.FileUploadDemo,
+        iconClass: 'fas fa fa-file-archive-o',
+        layout: eLayoutType.application,
+        order: 9,
+      },
+    ]);
+  };
+}

package/config/{public-api.d.ts → src/public-api.ts}

@@ -1,3 +1,3 @@
-export * from './enums';
-export * from './file-config.module';
-export * from './providers';
+export * from './enums';
+export * from './file-config.module';
+export * from './providers';

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/file-explorer",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@dignite-ng/expand.file-explorer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "ng-zorro-antd": ">=16.0.0",
-    "@ngx-validate/core": "~0.2.0",
-    "@abp/ng.core": "~7.4.5",
-    "@abp/ng.components": "~7.4.5",
-    "@abp/ng.theme.shared": "~7.4.5"
+    "@angular/core": "^16.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -17,24 +12,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  },
-  "module": "fesm2022/dignite-ng-expand.file-explorer.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/dignite-ng-expand.file-explorer.mjs",
-      "esm": "./esm2022/dignite-ng-expand.file-explorer.mjs",
-      "default": "./fesm2022/dignite-ng-expand.file-explorer.mjs"
-    },
-    "./config": {
-      "types": "./config/index.d.ts",
-      "esm2022": "./esm2022/config/dignite-ng-expand.file-explorer-config.mjs",
-      "esm": "./esm2022/config/dignite-ng-expand.file-explorer-config.mjs",
-      "default": "./fesm2022/dignite-ng-expand.file-explorer-config.mjs"
-    }
   }
-}
+}

package/src/lib/components/dome/file-dome.component.html

@@ -0,0 +1,18 @@
+<div class="row">
+    <div class="col">
+        <div class="card">
+            <div class="card-header py-2 border-bottom">Send file stream with form</div>
+            <div class="card-body">
+                <fe-file-edit  [(fileData)]="fileSubmittedData"   (fileDataChange)="fileDataChange($event)"></fe-file-edit>
+            </div>
+        </div>
+    </div>
+    <div class="col">
+        <div class="card">
+            <div class="card-header py-2 border-bottom">Send file stream with form</div>
+            <div class="card-body">
+                <fe-file-picker  [selectFormFile]="selectedFileGroup" (selectedFileChange)="_selectedFileChange($event)" ></fe-file-picker>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/dome/file-dome.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileDomeComponent } from './file-dome.component';
+
+describe('FileDomeComponent', () => {
+  let component: FileDomeComponent;
+  let fixture: ComponentFixture<FileDomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileDomeComponent]
+    });
+    fixture = TestBed.createComponent(FileDomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/dome/file-dome.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'fe-file-dome',
+  templateUrl: './file-dome.component.html',
+  styleUrls: ['./file-dome.component.scss']
+})
+export class FileDomeComponent {
+
+  /**跟随表单提交--已提交的数据，或选择的数据源 */
+  fileSubmittedData: any[] = []
+
+  /**跟随表单提交--待提交的数据
+   * 
+   * @param 待上传的文件们
+   * @param 待删除已上传的文件们
+   */
+  fileDataToBeSubmitted: any
+
+
+  /**跟随表单提交--数据发生改变回调 */
+  fileDataChange(event) {
+    this.fileDataToBeSubmitted = event
+  }
+
+  /**选择文件-弹窗的-已选定的文件 */
+  selectedFileGroup:any[]=[]
+
+  /**_selectedFile改变回调 */
+  _selectedFileChange(event) {
+    this.selectedFileGroup = event
+  }
+}

package/src/lib/components/file-edit/file-edit.component.html

@@ -0,0 +1,29 @@
+<div class="input-group mb-2">
+    <input type="file" class="form-control" #fileEdit [multiple]="_multiple" accept=".jpg,.jpeg,.png,.gif,.webp"(change)="getFileChange($event)">
+</div>
+
+<table class="table" *ngIf="filesTableData.length>0">
+    <thead>
+        <tr>
+            <th scope="col">{{'FileExplorer::FileName' | abpLocalization}}</th>
+            <th scope="col">{{'FileExplorer::FileSize' | abpLocalization}}</th>
+            <th scope="col"></th>
+        </tr>
+    </thead>
+    <tbody>
+        <ng-container *ngFor="let item of filesTableData;let i =index">
+            <tr>
+                <th scope="row">
+                    <div>{{item.name}}</div>
+                    <div class="form-text text-danger" *ngIf="item.size > sizeLimit">{{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>
+                </th>
+                <td>{{item.fileSize}}</td>
+                <td>
+                    <button class="btn btn-sm p-0 btn-light " (click.stop)="deleteFileTableItem(i,item)">
+                        <i class="fas fa-trash p-2"></i>
+                    </button>
+                </td>
+            </tr>
+        </ng-container>
+    </tbody>
+</table>

package/src/lib/components/file-edit/file-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileEditComponent } from './file-edit.component';
+
+describe('FileEditComponent', () => {
+  let component: FileEditComponent;
+  let fixture: ComponentFixture<FileEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileEditComponent]
+    });
+    fixture = TestBed.createComponent(FileEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/file-edit/file-edit.component.ts

@@ -0,0 +1,98 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FileApiService } from '../../services/file-api.service';
+
+@Component({
+  selector: 'fe-file-edit',
+  templateUrl: './file-edit.component.html',
+  styleUrls: ['./file-edit.component.scss']
+})
+export class FileEditComponent {
+  constructor(
+    public _FileApiService: FileApiService,
+  ) { }
+
+  /**是否多选 */
+  _multiple: boolean = true
+  @Input()
+  public set multiple(v: boolean) {
+    this._multiple = v;
+    if (v) { }
+  }
+  /**文件数据--已上传的数据 */
+  _fileData: any[] = []
+  @Input()
+  public set fileData(v: any[]) {
+    this._fileData = v;
+    if (v.length > 0) {
+      this.getFileChange({ target: { files: v } })
+    }
+  }
+  /** 跟随表单提交--已提交的数据，或选择的数据源--回调*/
+  @Output() fileDataChange = new EventEmitter()
+
+  /**文件大小限制 
+   * @param 1mb
+  */
+  sizeLimit: number = 1048576
+  @Input()
+  public set limit(v: number) {
+    this.sizeLimit = v;
+  }
+
+  /**文件表格数据 */
+  filesTableData: any[] = []
+  /** 待删除已上传的文件们*/
+  deleteTheUploadedFiles: any[] = []
+
+  /**获取文件选择框的元素 */
+  @ViewChild('fileEdit', { static: true }) fileEdit: ElementRef;
+
+
+  /**获取文件信息改变 */
+  async getFileChange(event) {
+    let files = new Array(...event.target.files)
+    /**需要等待setfileSizeUnits执行完后在执行其他方法--需要完善 */
+    await this.waitFileToAddTable(files)
+    this.fileHandling()
+  }
+
+  /**等待将文件数据加入到文件表格数据中 */
+  waitFileToAddTable(files) {
+    return new Promise(async (resolve, rejects) => {
+      this.filesTableData.push(...await this.setfileSizeUnits(files))
+      resolve(true)
+    })
+  }
+
+  /**删除文件表格的项 */
+  deleteFileTableItem(index, item) {
+    this.filesTableData.splice(index, 1)
+    if (item.id) {
+      this.deleteTheUploadedFiles.push(item)
+    }
+    this.fileHandling()
+  }
+
+  /**文件处理-调用回调函数 */
+  fileHandling() {
+    let theFilesToBeUploaded = this.filesTableData.filter(el => !el.id)
+    //判断图片大小是否超过限制-用于判断表单是否允许提交
+    let isSubmit = !this.filesTableData.some(el => el.size > this.sizeLimit);
+    this.fileDataChange.emit({ theFilesToBeUploaded, deleteTheUploadedFiles: this.deleteTheUploadedFiles, isSubmit })
+  }
+
+  /**设置值文件大小单位/ */
+  async setfileSizeUnits(files: File[] | any[]): Promise<any> {
+    return new Promise((resolve, rejects) => {
+      let formattedFiles = []
+      files.forEach(async (file) => {
+        file.fileSize = this._FileApiService.formatFileSize(file.size)
+        formattedFiles.push(file)
+        //设置选择图片的本地url
+        if (!file.src) file.src = await this._FileApiService.getImageLacolBase64Url(file);
+      });
+      resolve(files)
+    })
+  }
+
+}

package/src/lib/components/file-modal/file-modal.component.html

@@ -0,0 +1,112 @@
+<abp-modal [(visible)]="ModalOpen" (visibleChange)="ModalVisibleChange($event)"
+  [options]="{ size: 'xl', scrollable: false }">
+  <ng-template #abpHeader>
+    <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>
+  </ng-template>
+  <ng-template #abpBody>
+    <div class="row file-explorer-modal-body file-modal">
+      <div class="col-3" style="overflow: auto; height: calc(100vh - 240px)">
+        <fe-file-modal-tree [theSelectedTreeNode]="_theSelectedTreeNode" (nodeClick)="_nodeClick($event)"
+          [fileContainerName]="_fileContainerName"></fe-file-modal-tree>
+      </div>
+      <div class="col-9" style="height: calc(100vh - 240px)">
+        <div class="mb-2 d-flex justify-content-between align-items-center">
+          <div class="btn-link" role=button style="flex: 2" (click)="lookAllFile()">{{'FileExplorer::AllFiles' | abpLocalization}}</div>
+          <div class="input-group form-file" style="flex: 2">
+            <input type="file" class="form-control" #fileEdit [multiple]="_multiple" accept=".jpg,.jpeg,.png,.gif,.webp"
+              (change)="getFileChange($event)" />
+          </div>
+        </div>
+        <div>
+          <ngx-datatable class="material container-height" [rows]="data.items" [list]="list" columnMode="flex"
+            [columns]="columns" [headerHeight]="50" [footerHeight]="50" rowHeight="auto" [scrollbarV]="true"
+            [virtualization]="false" [externalPaging]="true" [count]="data.totalCount" [selected]="selectedTable"
+            [selectCheck]="selectCheck" [selectionType]="SelectionType.multiClick" (select)="onSelectTableItem($event)">
+            <ngx-datatable-column [width]="50" prop="id" [sortable]="false" [canAutoResize]="false" [draggable]="false"
+              [resizeable]="false">
+              <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
+                let-selectFn="selectFn">
+                <input type="checkbox" class="form-check-input" [checked]="allRowsSelected"
+                  (change)="selectFn(!allRowsSelected)" />
+              </ng-template>
+              <ng-template ngx-datatable-cell-template let-row="row" let-value="value" let-isSelected="isSelected"
+                let-onCheckboxChangeFn="onCheckboxChangeFn">
+                <input type="checkbox" class="form-check-input" [checked]="selectedcheckbox(value)"
+                  (change)="onCheckboxChangeFn($event)" />
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column [name]="'FileExplorer::FileName' | abpLocalization" prop="name" [flexGrow]="4">
+              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                {{ value }}
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column  [name]="'FileExplorer::FileSize' | abpLocalization" prop="size" [flexGrow]="1.5">
+              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                {{ _FileApiService.formatFileSize(value) }}
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column  [name]="'FileExplorer::Directory' | abpLocalization" prop="cellName" [flexGrow]="1">
+              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                {{ value }}
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column [name]="'FileExplorer::CreationTime' | abpLocalization" prop="creationTime" [flexGrow]="2">
+              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                {{ value | date : 'YYYY/MM/dd HH:m:s' }}
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column [flexGrow]="1">
+              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                <button class="btn btn-sm btn-light p-0" (click.stop)="deleteFile(row)">
+                  <i class="fas fa-trash text-primary p-2"></i>
+                </button>
+              </ng-template>
+            </ngx-datatable-column>
+          </ngx-datatable>
+        </div>
+        <div *ngIf="uploadPictureStatusList.length > 0"
+          class="position-fixed bottom-0 end-0 shadow-lg file-status-modal border bg-white p-1 m-5"
+          style="border-radius: 10px">
+          <div class="card">
+            <div class="card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom">
+              <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>
+              <button type="button" class="btn-close" aria-label="Close" (click.stop)="closeFileStatusModal()"></button>
+            </div>
+            <div class="card-body">
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th scope="col">{{'FileExplorer::FileName' | abpLocalization}}</th>
+                    <th scope="col">{{'FileExplorer::FileSize' | abpLocalization}}</th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <ng-container *ngFor="let item of uploadPictureStatusList; let i = index">
+                    <tr>
+                      <th scope="row">
+                        <div>{{ item.name }}</div>
+                        <div class="form-text text-danger" *ngIf="item.size > sizeLimit">
+                          {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}
+                        </div>
+                      </th>
+                      <td>{{ item.fileSize }}</td>
+                      <td>
+                        <i *ngIf="item.status == 1" class="fas fa-check text-primary"></i>
+                        <i *ngIf="item.status == 2" class="fas fa-times-circle text-danger"></i>
+                      </td>
+                    </tr>
+                  </ng-container>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+    <abp-button iconClass="fa fa-check" (click)="modalSave()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+  </ng-template>
+</abp-modal>

package/src/lib/components/file-modal/file-modal.component.scss

@@ -0,0 +1,56 @@
+::ng-deep .file-modal {
+    .container-height {
+        height: calc(100vh - 240px - 44px);
+    }
+
+    .file-status-modal {
+        background: #fff;
+    }
+
+    .file-status-modal {
+        .card-body {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+    }
+
+    .ngx-datatable.material.single-selection .datatable-body-row.active,
+    .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,
+    .ngx-datatable.material.multi-selection .datatable-body-row.active,
+    .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,
+    .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
+    .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
+        background-color: transparent !important;
+    }
+
+    .ant-tree {
+        .ant-tree-node-content-wrapper {
+            padding: 0;
+
+            .custom-node {
+                width: 100%;
+
+            }
+
+            .selected {
+                background-color: var(--lpx-brand) !important;
+
+                .btn {
+                    color: var(--lpx-navbar-color);
+                }
+            }
+        }
+
+        .ant-tree-node-content-wrapper.ant-tree-node-selected {
+            background-color: transparent;
+        }
+
+    }
+
+    .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,
+    .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
+        // width: inherit !important;
+        overflow: initial;
+        line-break: anywhere;
+    }
+}

package/src/lib/components/file-modal/file-modal.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileModalComponent } from './file-modal.component';
+
+describe('FileModalComponent', () => {
+  let component: FileModalComponent;
+  let fixture: ComponentFixture<FileModalComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileModalComponent]
+    });
+    fixture = TestBed.createComponent(FileModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});