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

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

@@ -1,21 +0,0 @@
-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();
-  });
-});

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

@@ -1,284 +0,0 @@
-import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
-import * as FileService from '../../proxy/dignite/file-explorer/files';
-import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
-import { PagedResultDto, ABP, ListService, Rest, RestService, LocalizationService, LIST_QUERY_DEBOUNCE_TIME } from '@abp/ng.core';
-import { FileDescriptorDto, GetFilesInput } from '../../proxy/dignite/file-explorer/files';
-import { FileApiService } from '../../services/file-api.service';
-import { SelectionType } from '@swimlane/ngx-datatable';
-var that
-@Component({
-  selector: 'fe-file-modal',
-  templateUrl: './file-modal.component.html',
-  styleUrls: ['./file-modal.component.scss'],
-  providers: [
-    // [Required]
-    ListService,
-    // [Optional]
-    // Provide this token if you want a different debounce time.
-    // Default is 300. Cannot be 0. Any value below 100 is not recommended.
-    { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
-  ]
-})
-export class FileModalComponent {
-
-  constructor(
-    private _FileService: FileService.FileDescriptorService,
-    private toaster: ToasterService,
-    public readonly list: ListService,
-    public _FileApiService: FileApiService,
-    private restService: RestService,
-    private confirmation: ConfirmationService,
-    private _LocalizationService: LocalizationService,
-  ) {
-    that = this
-  }
-
-  /**图片容器 */
-  _fileContainerName: string
-  @Input()
-  public set fileContainerName(v: string) {
-    if (v) {
-      this._fileContainerName = v;
-      this.loadData()
-    }
-  }
-
-  /**是否多选 */
-  _multiple: boolean = true
-  @Input()
-  public set multiple(v: boolean) {
-    this._multiple = v;
-    if (v) { }
-  }
-
-  /**文件大小限制 
-* @param 1mb
-*/
-  sizeLimit: number = 1048576
-  @Input()
-  public set limit(v: number) {
-    this.sizeLimit = v;
-  }
-  /**父组件传递的模态框状态 */
-  @Input()
-  public set visible(v: boolean) {
-    this.ModalOpen = v;
-    if (v) {
-      this.loadData()
-    }
-  }
-
-  /**模态框状态回调 */
-  @Output() visibleChange = new EventEmitter()
-
-
-
-  /**模态框-状态-是否打开 */
-  ModalOpen: boolean = false
-
-  /**模态框-繁忙状态-用于确定模态的繁忙状态是否为真 */
-  ModalBusy: boolean = false
-
-
-
-  /**模态框-状态改变回调 */
-  ModalVisibleChange(event) {
-    if (!event) {
-      this.visibleChange.emit(event)
-      return
-    }
-  }
-
-  /**模态框保存 */
-  modalSave() {
-    let selectedTablearr = this._FileApiService.deepClone(this.selectedTable)
-    this.selectFilefn.emit(selectedTablearr)
-
-    this.ModalVisibleChange(false)
-  }
-  /**dignite-file-modal-tree */
-  /**选择的tree节点 */
-  _theSelectedTreeNode: any = ''
-
-  /**初始化数据 */
-  loadData() {
-    if (this.ModalOpen && this._fileContainerName) {
-      this.hookToQuery()
-    }
-  }
-
-  /**tree-节点选择 */
-  _nodeClick(event) {
-    this._theSelectedTreeNode = event
-    this.list.get()
-  }
-
-  /**图片上传-要上传图片的状态文件列表 */
-  uploadPictureStatusList: any[] = []
-
-  /**图片上传-获取文件信息改变 */
-  async getFileChange(event) {
-    let files = new Array(...event.target.files)
-    this.uploadPictureStatusList = files
-    for (const file of files) {
-      if (file.size > this.sizeLimit) {
-        this.setuploadPictureStatus(file, 2)
-        continue;
-      }
-      await this.uploadingFile(file).then(() => {
-        this.setuploadPictureStatus(file, 1)
-        this.list.get()
-      }).catch(() => {
-        this.setuploadPictureStatus(file, 2)
-      }); // 等待每个文件上传完成  
-    }
-    this.list.get()
-    let isSubmit = !this.uploadPictureStatusList.some(el => el.status == 2);
-    if (isSubmit) {
-      // this.toaster.success("上传完成");
-      setTimeout(() => {
-        this.uploadPictureStatusList = []
-      }, 6000)
-    }
-  }
-
-  /**图片上传-设置uploadPictureStatusList的状态 */
-  setuploadPictureStatus(file, type) {
-    this.uploadPictureStatusList.map(el => {
-      if (el == file) el.status = type
-    })
-  }
-
-
-  /**图片上传-递归按顺序上传 */
-  uploadingFile(file) {
-    return new Promise((resolve, rejects) => {
-      let formData = new FormData();
-      formData.append('file', file, file.name);
-      this.createFile({
-        file: formData,
-        containerName: this._fileContainerName,
-        directoryId: this._theSelectedTreeNode?.key || '',
-        entityId: ''
-      }).subscribe(res => {
-        resolve(true)
-      }, (err) => {
-        rejects(false)
-      })
-    })
-  }
-
-
-  /**文件表格-数据*/
-  data: PagedResultDto<FileDescriptorDto> = {
-    items: [],
-    totalCount: 0,
-  };
-
-  /**文件表格-条件*/
-  filters = {} as GetFilesInput;
-
-  /**文件表格-表格自带选择类型 */
-  SelectionType = SelectionType;
-
-  /**文件表格-选择的表格数据项 */
-  selectedTable = []
-
-  /**已选定的文件 */
-  @Input() selectPickerFile: any[]
-
-  ngOnChanges(changes: SimpleChanges): void {
-    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
-    //Add '${implements OnChanges}' to the class.
-    this.selectedTable = this._FileApiService.deepClone(this.selectPickerFile)
-  }
-  /**当前选择的table项 id */
-  nowSelectId: any = ''
-
-  /**选择文件回调 */
-  // @Output() selectedFileChange = new EventEmitter<any[]>()
-  @Output() selectFilefn = new EventEmitter<any[]>()
-
-  /**文件表格-获取表格数据 */
-  hookToQuery() {
-    const getData = (query: ABP.PageQueryParams) => this._FileService.getList({
-      ...query,
-      ...this.filters,
-      containerName: this._fileContainerName,
-      directoryId: this._theSelectedTreeNode.key
-    });
-    const setData = (list: PagedResultDto<FileDescriptorDto>) => (this.data = list);
-    this.list.hookToQuery(getData).subscribe(setData);
-  }
-
-  /**文件表格-查看所有分组的文件数据 */
-  lookAllFile() {
-    this._theSelectedTreeNode = ''
-    this.list.get()
-  }
-
-  /**选择表格项 */
-  onSelectTableItem({ selected }) {
-    this.selectedTable = this._FileApiService.deepClone(selected)
-    let selectedTablearr = this.removeDuplicatesById(this.selectedTable)
-    if (selected.length > selectedTablearr.length) {
-      selectedTablearr = selectedTablearr.filter(el => el.id !== this.nowSelectId)
-    }
-    this.selectedTable = selectedTablearr
-  }
-
-  /**删除数组中重复的项 */
-  removeDuplicatesById(array) {
-    const seenIds = {};
-    return array.filter(item => {
-      if (!seenIds[item.id]) {
-        seenIds[item.id] = true;
-        return true;
-      }
-      return false;
-    });
-  }
-
-  /**一个布尔or函数，可用于检查是否要根据条件选择特定行。 */
-  selectCheck = (row, column, value) => {
-    this.nowSelectId = row.id
-    return true;
-  }
-
-  /**判断row是否选中 */
-  selectedcheckbox = (id) => {
-    return this.selectedTable.some(el => el.id == id)
-  }
-
-
-
-  /**删除图片 */
-  deleteFile(file) {
-
-    this.confirmation
-      .warn('', { key: '', defaultValue: this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`) })
-      .subscribe((status: Confirmation.Status) => {
-        if (status == 'confirm') {
-          this._FileService.delete(file.id).subscribe(res => {
-            this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
-            this.list.get()
-          })
-        }
-      });
-  }
-
-  /**关闭文件状态弹窗 */
-  closeFileStatusModal() {
-    this.uploadPictureStatusList = []
-  }
-
-  /**创建图片的接口，代理中的file类型不匹配，切换为any类型 */
-  createFile = (input: any, config?: Partial<Rest.Config>) =>
-    this.restService.request<any, FileDescriptorDto>({
-      method: 'POST',
-      url: '/api/file-explorer/files',
-      params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
-      body: input.file,
-    },
-      { apiName: 'FileExplorer', ...config });
-}

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

@@ -1,63 +0,0 @@
-<div class="card-header  p-0 mb-1 d-flex justify-content-between align-items-center">
-    <h6 class="h6 mb-0">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>
-    <button type="button" class="btn btn-light btn-sm ms-2" (click.stop)="addDescriptorBtn()"><i
-            class="fas fa-plus-circle" aria-hidden="true"></i></button>
-</div>
-<nz-tree [nzData]="fileGroupList" class="ng-zorro-antd-tree" nzDraggable nzBlockNode nzShowIcon
-    [nzExpandedIcon]="multiExpandedIconTpl" (nzOnDrop)="nzEvent($event)" [nzBeforeDrop]="beforeDrop"
-    (nzClick)="activeNode($event)" (nzExpandChange)="nzExpandChange($event)" [nzTreeTemplate]="nzTreeTemplate">
-    <ng-template #nzTreeTemplate let-node let-origin="origin">
-        <div class="custom-node d-inline-block   ng-star-inserted dropdown" [title]="node.title">
-            <div #dropdown="ngbDropdown" class="d-inline-block" ngbDropdown placement="bottom" container="body">
-                <div class="btn-group" [class.selected]="isNodeSelected(node)">
-                    <button class="btn btn-sm  p-0 px-1">{{ node.title }}</button>
-                    <button class="btn btn-sm  p-0" (click)="handleClick($event)" ngbDropdownToggle
-                        [class.dropdown-toggle]="false" aria-hidden="true">
-                        <i class="fas fa-caret-down text-muted p-1"></i>
-                    </button>
-                </div>
-                <div ngbDropdownMenu>
-                    <button ngbDropdownItem
-                        (click.stop)="addDescriptorBtn(node)">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>
-                    <button ngbDropdownItem
-                        (click.stop)="addDescriptorBtn(node,true)">{{'AbpUi::Edit' | abpLocalization}}</button>
-                    <button ngbDropdownItem
-                        (click.stop)="deleteDescriptorBtn(node)">{{'AbpUi::Delete' | abpLocalization}}</button>
-                </div>
-            </div>
-        </div>
-    </ng-template>
-    <ng-template #multiExpandedIconTpl let-node let-origin="origin">
-        <ng-container *ngIf="node.children.length > 0">
-            <i [class]="node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'"></i>
-        </ng-container>
-    </ng-template>
-</nz-tree>
-
-
-<abp-modal [(visible)]="ModalDescriptorOpen" [busy]="ModalDescriptorBusy"
-    (visibleChange)="ModalDescriptorVisibleChange($event)">
-    <ng-template #abpHeader>
-        <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>
-    </ng-template>
-    <ng-template #abpBody>
-        <ng-template #loaderRef>
-            <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
-        </ng-template>
-        <ng-container *ngIf="ModalDescriptorForm; else loaderRef">
-            <form class="sites-modal-form" #myForm="ngForm" [formGroup]="ModalDescriptorForm"
-                (ngSubmit)="createOrEditSave()">
-                <button type="submit" #ModalFormDescriptorSubmit style="display: none"></button>
-                <div class="mb-3">
-                    <label class="form-label">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>
-                    <input type="email" class="form-control" formControlName="name">
-                </div>
-            </form>
-        </ng-container>
-    </ng-template>
-    <ng-template #abpFooter>
-        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
-        <abp-button iconClass="fa fa-check"
-            (click)="ModalFormDescriptorSubmit.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
-    </ng-template>
-</abp-modal>

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

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

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

@@ -1,207 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewContainerRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
-import * as DescriptorService from '../../proxy/dignite/file-explorer/directories';
-import {  ToasterService } from '@abp/ng.theme.shared';
-import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
-import {  of } from 'rxjs';
-import { FileApiService } from '../../services/file-api.service';
-import { LocalizationService } from '@abp/ng.core';
-var that;
-@Component({
-  selector: 'fe-file-modal-tree',
-  templateUrl: './file-modal-tree.component.html',
-  styleUrls: ['./file-modal-tree.component.scss']
-})
-export class FileModalTreeComponent {
-  constructor(
-    private _DescriptorService: DescriptorService.FileDescriptorService,
-    private fb: FormBuilder,
-    private toaster: ToasterService,
-    public _FileApiService: FileApiService,
-    public _LocalizationService: LocalizationService,
-  ) {
-    that = this
-  }
-
-  /**文件分组列表 */
-  fileGroupList: any[] = [];
-
-  /**选择的tree节点 */
-  _theSelectedTreeNode: any = '';
-  @Input()
-  public set theSelectedTreeNode(v: any) {
-    this._theSelectedTreeNode = v;
-    if (v.length > 0) {
-      this.loadData()
-    }
-  }
-
-  /**正在编辑的节点 */
-  theNodeBeingEdited: any = '';
-
-  /**已展开的节点 */
-  anExpandedNode: any[] = [];
-
-  /**图片容器 */
-  _fileContainerName: string;
-
-  /**tree节点选择回调 */
-  @Output() nodeClick = new EventEmitter();
-
-
-  @Input()
-  public set fileContainerName(v: string) {
-    if (v) {
-      this._fileContainerName = v;
-      this.loadData()
-    }
-  }
-
-  handleClick = (event) => event.stopPropagation();
-
-  loadData() {
-    if (this._fileContainerName) {
-      this.getFileGroupList()
-    }
-  }
-
-
-  /**获取文件分组 */
-  getFileGroupList() {
-    this._DescriptorService.getList({
-      containerName: this._fileContainerName,
-    }).subscribe(async (res) => {
-      this.fileGroupList = await this.setTheValueOfTheNodeRecursively(res.items)
-    })
-  }
-  
-  /**递归设置节点的值 */
-  setTheValueOfTheNodeRecursively(array: any[]): any {
-    return new Promise((reslove, rejects) => {
-      array.forEach((el) => {
-        el.title = el.name
-        el.key = el.id
-        el.expanded = this.anExpandedNode.includes(el.key)
-        if (el.children.length > 0) {
-          this.setTheValueOfTheNodeRecursively(el.children)
-        }
-      })
-      reslove(array)
-    })
-  }
-
-  /**tree-拖拽 */
-  nzEvent(event: NzFormatEmitEvent): void {
-  }
-
-  /**tree-拖拽 -验证*/
-  beforeDrop(arg: NzFormatBeforeDropEvent) {
-    if (arg.pos === 0 || arg.pos === 1) {
-      that._DescriptorService.move(arg.dragNode.key, {
-        "parentId": arg.pos === 1 ? (arg.node.parentNode?.key||'') : arg.node.key,
-        "order": arg.pos === 1 ? arg.node.origin.order + 1 : arg.node.origin.children.length + 1
-      }).subscribe(res => {
-        // that.toaster.success("拖拽完成");
-        that.getFileGroupList()
-      })
-      return of(true)
-    } else {
-      return of(false);
-    }
-  }
-
-  /**tree--选择节点 */
-  activeNode(event) {
-    this._theSelectedTreeNode = event.node
-    this.nodeClick.emit(event.node)
-  }
-
-  /**判断节点是否选中 */
-  isNodeSelected = (el) => el.key === this._theSelectedTreeNode?.key
-
-  /**点击展开树节点图标触发 */
-  nzExpandChange(event) {
-    let anExpandedNode = this.anExpandedNode
-    if (anExpandedNode.includes(event.node.key)) {
-      anExpandedNode = anExpandedNode.filter(key => key !== event.node.key)
-    } else {
-      anExpandedNode.push(event.node.key)
-    }
-    this.anExpandedNode = anExpandedNode
-  }
-
-
-  /**增加分组 */
-  addDescriptorBtn(items: any = '', edit = false) {
-    this.ModalDescriptorOpen = true
-    this.ModalDescriptorForm = this.fb.group({
-      containerName: [this._fileContainerName || '', Validators.required],
-      name: ['', Validators.required],
-      parentId: [items?.key || '', Validators.required],
-    })
-    /**编辑 */
-    if (edit) {
-      this.theNodeBeingEdited = items.origin
-      this.ModalDescriptorForm.patchValue({
-        name: items.origin.name
-      })
-    }
-  }
-
-  /**删除分组 */
-  deleteDescriptorBtn(node) {
-    this._DescriptorService.delete(node.key).subscribe(res => {
-      // this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
-      this.ModalDescriptorOpen = false
-      if (this.theNodeBeingEdited.key == node.key) this.theNodeBeingEdited = ''
-      this.getFileGroupList()
-    })
-  }
-
-  
-
-  /**分组 */
-  /**模态框-状态-是否打开 */
-  ModalDescriptorOpen: boolean = false
-
-  /**模态框-descriptor-繁忙状态-用于确定模态的繁忙状态是否为真 */
-  ModalDescriptorBusy: boolean = false
-
-  /**模态框-descriptor-表单 */
-  ModalDescriptorForm: FormGroup | undefined;
-  
-  /**模态框-descriptor-表单--控件模板-动态赋值表单控件 */
-  @ViewChild('ModalFormDescriptorSubmit', { static: false }) ModalFormDescriptorSubmit: ElementRef;
-
-  /**模态框-descriptor-状态改变回调 */
-  ModalDescriptorVisibleChange(event) {
-    if (!event) {
-      this.ModalDescriptorForm = undefined
-      this.theNodeBeingEdited = ''
-      return
-    }
-  }
-
-  /**f分组模态框保存 */
-  createOrEditSave() {
-    let input = this.ModalDescriptorForm.value
-    if (this.theNodeBeingEdited) {
-      this._DescriptorService.update(this.theNodeBeingEdited.key, input).subscribe(res => {
-        // this.toaster.success("保存成功");
-        this.ModalDescriptorOpen = false
-        this.getFileGroupList()
-      })
-      return
-    }
-    this._DescriptorService.create(input).subscribe(res => {
-      // this.toaster.success("保存成功");
-      this.ModalDescriptorOpen = false
-      this.getFileGroupList()
-    })
-  }
-
-
-
-
-}

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

@@ -1,28 +0,0 @@
-<button class="btn btn-sm btn-primary ms-2" type="button" (click.stop)="ModalOpen = true">{{'FileExplorer::SelectFile' | abpLocalization}}</button>
-<fe-file-modal [(visible)]="ModalOpen" [selectPickerFile]="selectFormFile"  (selectFilefn)="_selectFilefn($event)" [fileContainerName]="_fileContainerName"></fe-file-modal>
-<table class="table" *ngIf="_fileShowTable.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 _fileShowTable;let i =index">
-            <tr>
-                <th scope="row">
-                    <div>{{item.name}}</div>
-                </th>
-                <td >{{_FileApiService.formatFileSize(item.size)}}</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-picker/file-picker.component.spec.ts

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