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

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

@@ -1,112 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-::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

@@ -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();
-  });
-});