angular-material-app documentation
  1. Components
  2. FileManagerComponent

File

src/app/pages/file-manager/file-manager.component.ts

Implements

OnInit OnDestroy

Metadata

selector stb-file-manager
styleUrls ./file-manager.component.scss
templateUrl ./file-manager.component.html

Index

Properties
Methods

Constructor

constructor(service: FileManagerService)
Defined in src/app/pages/file-manager/file-manager.component.ts:12
Parameters :
Name Type Optional
service FileManagerService No

Methods

ngOnDestroy
ngOnDestroy()
Defined in src/app/pages/file-manager/file-manager.component.ts:22
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/pages/file-manager/file-manager.component.ts:16
Returns : void
onCheckBoxAllTrigger
onCheckBoxAllTrigger(undefined)
Defined in src/app/pages/file-manager/file-manager.component.ts:36
Parameters :
Name Optional
No
Returns : void
onCheckBoxTrigger
onCheckBoxTrigger(undefined, file)
Defined in src/app/pages/file-manager/file-manager.component.ts:44
Parameters :
Name Optional
No
file No
Returns : void
onDeleteTrigger
onDeleteTrigger()
Defined in src/app/pages/file-manager/file-manager.component.ts:32
Returns : void
onDownLoadTrigger
onDownLoadTrigger()
Defined in src/app/pages/file-manager/file-manager.component.ts:28
Returns : void
onShareTrigger
onShareTrigger()
Defined in src/app/pages/file-manager/file-manager.component.ts:24
Returns : void

Properties

files
Type : any
Defined in src/app/pages/file-manager/file-manager.component.ts:11
fileSelected
Type : any[]
Default value : []
Defined in src/app/pages/file-manager/file-manager.component.ts:12
 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FileManagerFirebase } from './file-manager.firebase';
import { FileManagerService } from './file-manager.service';

@Component({
  selector: 'stb-file-manager',
  templateUrl: './file-manager.component.html',
  styleUrls: ['./file-manager.component.scss']
})
export class FileManagerComponent implements OnInit, OnDestroy {
  files: any;
  fileSelected: any[] = [];

  constructor(private service: FileManagerService) {}

  ngOnInit() {
    this.service.getFilesList().subscribe(files => {
      this.files = files;
    });
  }

  ngOnDestroy() {}

  onShareTrigger() {
    console.log(this.fileSelected);
  }

  onDownLoadTrigger() {
    console.log(this.fileSelected);
  }

  onDeleteTrigger() {
    console.log(this.fileSelected);
  }

  onCheckBoxAllTrigger({ checked }) {
    if (checked) {
      this.fileSelected = this.files;
    } else {
      this.fileSelected = [];
    }
  }

  onCheckBoxTrigger({ checked }, file) {
    if (checked) {
      this.fileSelected.push(file);
    } else {
      this.fileSelected = this.fileSelected.filter(source => source !== file);
    }
  }
}
Copy
<div fxFlex class="manage-sidenav-content">
  <div class="header">
    <button mat-raised-button color="primary">
      <mat-icon>add</mat-icon> 上传</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>share</mat-icon> 分享</button>
    <button mat-raised-button *ngIf="fileSelected.length" (click)="onDeleteTrigger()">
      <mat-icon>delete</mat-icon> 删除</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>file_download</mat-icon> 下载</button>
  </div>


  <div class="stbui-table-main mat-elevation-z2">
    <div class="stbui-table-toolbar" fxLayout="row" fxLayoutAlign="start center">
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
        <span>
          <mat-checkbox (change)="onCheckBoxAllTrigger($event)"></mat-checkbox>
        </span>
      </div>
      <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>名称</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>类型</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>提供者</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>大小</span>
      </div>
      <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
        <span>修改时间</span>
      </div>
    </div>

    <div class="stbui-table-list">
      <div class="stbui-table" fxLayout="row" *ngFor="let file of files">
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
          <mat-checkbox [checked]="checked" (change)="onCheckBoxTrigger($event, file)"></mat-checkbox>
        </div>

        <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <mat-icon>folder</mat-icon> {{ file.name }}
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.type }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.provide }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.size | fileSize }}</span>
        </div>

        <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
          <span>{{ file.lastModifiedDate | date:"yyyy/MM/dd" }}</span>
        </div>
      </div>
    </div>
  </div>

</div>
Copy

./file-manager.component.scss 

$color__inactive: #616161;
$color__primary: #3f51b5;
$color__read: #9f9f9f;
$color__checkbox__star: #616161;

$prefix: 'stbui-table';

:host {
  display: block;
  height: 100%;
}

.#{$prefix} {
  position: relative;
  min-height: 60px;
  max-height: 60px;
  padding: 8px 24px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: $color__inactive;
  transition: background 0.1s ease-in-out;
  border-bottom: 1px solid #eee;
  cursor: pointer;

  &.read {
    color: $color__read;
    font-weight: normal;
  }

  &:hover {
    background: #eee;
  }
}

.#{$prefix}-main {
  margin-top: 10px;
  max-height: 480px;
  overflow-x: hidden;
  overflow-y: auto;
}

.#{$prefix}-toolbar {
  box-sizing: border-box;
  min-height: 60px;
  max-height: 60px;
  border-bottom: 1px solid #eee;
  padding: 8px 24px;
  color: $color__inactive;
}

.start-wrapper {
  padding-right: 8px;

  .checkbox {
    margin: 0 8px 0 0;
    color: $color__checkbox__star;
  }
}

.content-wrapper {
  white-space: nowrap;
}

.end-wrapper {
  margin-left: 16px;
}

.header {
  position: relative;
  height: 200px;
  background: linear-gradient(90deg, #fc0, #ffa100);
  padding: 16px;

  > button {
    margin-right: 16px;
  }
}

.file-uploader {
  position: absolute;
  left: 30px;
  bottom: -20px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""