purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

(File Manager App) updated.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-02 10:18:39 +03:00
parent ba3c22d67d
commit d7d3a6833d
8 changed files with 223 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/fuse-fake-db/file-manager.ts
View File

@ -6,9 +6,9 @@ export class FileManagerFakeDb
'type' : 'folder', 'type' : 'folder',
'owner' : 'me', 'owner' : 'me',
'size' : '', 'size' : '',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true 'offline' : true
@ -18,9 +18,9 @@ export class FileManagerFakeDb
'type' : 'folder', 'type' : 'folder',
'owner' : 'public', 'owner' : 'public',
'size' : '', 'size' : '',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true 'offline' : true
@ -30,9 +30,9 @@ export class FileManagerFakeDb
'type' : 'folder', 'type' : 'folder',
'owner' : 'me', 'owner' : 'me',
'size' : '', 'size' : '',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true 'offline' : true
@ -42,9 +42,9 @@ export class FileManagerFakeDb
'type' : 'document', 'type' : 'document',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '1.2 Mb', 'size' : '1.2 Mb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -55,9 +55,9 @@ export class FileManagerFakeDb
'type' : 'document', 'type' : 'document',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '980 Kb', 'size' : '980 Kb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -68,9 +68,9 @@ export class FileManagerFakeDb
'type' : 'spreadsheet', 'type' : 'spreadsheet',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '750 Kb', 'size' : '750 Kb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -81,9 +81,9 @@ export class FileManagerFakeDb
'type' : 'document', 'type' : 'document',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '980 Mb', 'size' : '980 Mb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -94,9 +94,9 @@ export class FileManagerFakeDb
'type' : 'document', 'type' : 'document',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '52 Kb', 'size' : '52 Kb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -107,9 +107,9 @@ export class FileManagerFakeDb
'type' : 'spreadsheet', 'type' : 'spreadsheet',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '27 Mb', 'size' : '27 Mb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -120,9 +120,9 @@ export class FileManagerFakeDb
'type' : 'document', 'type' : 'document',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '1.1 Kb', 'size' : '1.1 Kb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,
@ -133,9 +133,9 @@ export class FileManagerFakeDb
'type' : 'spreadsheet', 'type' : 'spreadsheet',
'owner' : 'Emily Bennett', 'owner' : 'Emily Bennett',
'size' : '505 Kb', 'size' : '505 Kb',
'modified' : 'July 8, 2015', 'modified' : 'July 8, 2017',
'opened' : 'July 8, 2015', 'opened' : 'July 8, 2017',
'created' : 'July 8, 2015', 'created' : 'July 8, 2017',
'extention': '', 'extention': '',
'location' : 'My Files > Documents', 'location' : 'My Files > Documents',
'offline' : true, 'offline' : true,

86
src/app/main/apps/file-manager/file-list/file-list.component.html
View File

@ -1,44 +1,58 @@
<ngx-datatable <md-table #table [dataSource]="dataSource">
class="material"
[rows]="rows"
[loadingIndicator]="loadingIndicator"
[columnMode]="'force'"
[headerHeight]="48"
[footerHeight]="56"
[rowHeight]="'auto'"
[scrollbarH]="true"
[reorderable]="reorderable"
[selected]="selected"
[selectionType]="'single'"
(select)='onSelect($event)'
[limit]="10">
<ngx-datatable-column [width]="48" <!-- Type Column -->
[canAutoResize]="false" <ng-container cdkColumnDef="icon">
[sortable]="false"> <md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let row">
<ng-template ngx-datatable-header-template>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<md-icon class="type-icon" [class]="row.type"></md-icon> <md-icon class="type-icon" [class]="row.type"></md-icon>
</ng-template> </md-cell>
</ng-container>
</ngx-datatable-column> <!-- Name Column -->
<ng-container cdkColumnDef="name">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}}</md-cell>
</ng-container>
<ngx-datatable-column name="Name" prop="name" [width]="200"> <!-- Type Column -->
</ngx-datatable-column> <ng-container cdkColumnDef="type">
<md-header-cell *cdkHeaderCellDef>Type</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
</ng-container>
<ngx-datatable-column name="Type" prop="type" [width]="200"> <!-- Owner Column -->
</ngx-datatable-column> <ng-container cdkColumnDef="owner">
<md-header-cell *cdkHeaderCellDef>Owner</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell>
</ng-container>
<ngx-datatable-column name="Owner" prop="owner" [width]="200"> <!-- Size Column -->
</ngx-datatable-column> <ng-container cdkColumnDef="size">
<md-header-cell *cdkHeaderCellDef>Size</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.size === '' ? '-': row.size}}</md-cell>
</ng-container>
<ngx-datatable-column name="Size" prop="size" [width]="200"> <!-- Modified Column -->
</ngx-datatable-column> <ng-container cdkColumnDef="modified">
<md-header-cell *cdkHeaderCellDef>Modified</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell>
</ng-container>
<ngx-datatable-column name="Last Modified" prop="modified" [width]="200"> <!-- Detail Button Column -->
</ngx-datatable-column> <ng-container cdkColumnDef="detail-button">
</ngx-datatable> <md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let row">
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-right-sidenav">
<md-icon>info</md-icon>
</button>
</md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"
(click)="onSelect(row)"
[ngClass]="{'md-light-blue-50-bg':row == selected}"
md-ripple>
</md-row>
</md-table>

38
src/app/main/apps/file-manager/file-list/file-list.component.scss
View File

@ -1,28 +1,28 @@
@import "src/app/core/scss/fuse";
:host { :host {
.ngx-datatable { .mat-table {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
}
.type-icon {
&.folder { .mat-row {
&:before { position: relative;
content: 'folder'; cursor: pointer;
color: #FFB300;
} .mat-cell {
&.mat-column-icon {
flex: 0 1 auto;
padding: 0 24px 0 0;
} }
&.document { &.mat-column-detail-button {
&:before { flex: 0 1 auto;
content: 'insert_drive_file'; padding: 0 24px 0 0;
color: #1565C0; @include media-breakpoint('gt-md') {
} display: none;
} }
}
&.spreadsheet {
&:before {
content: 'insert_chart';
color: #4CAF50;
} }
} }
} }

44
src/app/main/apps/file-manager/file-list/file-list.component.ts
View File

@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; import { Http } from '@angular/http';
import { FileManagerService } from '../file-manager.service'; import { FileManagerService } from '../file-manager.service';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
@Component({ @Component({
selector : 'fuse-file-list', selector : 'fuse-file-list',
@ -9,28 +11,46 @@ import { FileManagerService } from '../file-manager.service';
}) })
export class FileListComponent implements OnInit export class FileListComponent implements OnInit
{ {
files: any;
rows: any[]; dataSource: FilesDataSource | null;
selected = []; displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button'];
selected: any;
loadingIndicator = false;
reorderable = true;
constructor(private fileManagerService: FileManagerService) constructor(private fileManagerService: FileManagerService)
{ {
this.fileManagerService.onFilesChanged.subscribe(files => {
this.files = files;
});
this.fileManagerService.onFileSelected.subscribe(selected => {
this.selected = selected;
});
} }
ngOnInit() ngOnInit()
{ {
this.rows = this.fileManagerService.files; this.dataSource = new FilesDataSource(this.fileManagerService);
this.selected = [this.rows[0]];
this.fileManagerService.onFileSelected.next(this.selected[0]);
} }
onSelect(ev) onSelect(selected)
{ {
this.fileManagerService.onFileSelected.next(this.selected[0]); this.fileManagerService.onFileSelected.next(selected);
}
} }
export class FilesDataSource extends DataSource<any>
{
constructor(private fileManagerService: FileManagerService)
{
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<any[]>
{
return this.fileManagerService.onFilesChanged;
}
disconnect()
{
}
} }

41
src/app/main/apps/file-manager/file-manager.component.html
View File

@ -3,9 +3,9 @@
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav p-24" align="start" opened="false" mode="over" <md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
fuseMdSidenavHelper="simple-left-sidenav"> fuseMdSidenavHelper="file-manager-left-sidenav">
Sidenav <fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
</md-sidenav> </md-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
@ -13,19 +13,19 @@
<div class="center" fxFlex perfect-scrollbar> <div class="center" fxFlex perfect-scrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column"> <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center"> <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row"> <div class="left-side" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle" <button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav"> fuseMdSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
</button> </button>
<button md-button class="mat-icon-button sidenav-toggle" <button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav" fuseMdSidenavToggler="file-manager-right-sidenav"
fxHide.gt-md> fxHide.gt-md>
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
</button> </button>
@ -40,17 +40,20 @@
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- BREADCRUMB --> <!-- BREADCRUMB -->
<div class="breadcrumb text-truncate" fxLayout="row" fxLayoutAlign="start center"> <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center">
<span data-ng-repeat="path in vm.path"> <div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
{{path}} <span>{{path}}</span>
<md-icon md-font-icon="icon-chevron-right" class="icon separator"></md-icon> <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
</span> </div>
</div> </div>
<!-- / BREADCRUMB --> <!-- / BREADCRUMB -->
<!-- ADD FILE BUTTON --> <!-- ADD FILE BUTTON -->
<div id="file-uploader"> <div class="file-uploader">
<button md-fab class="add-file-button mat-accent" <input hidden type="file" #fileInput/>
<button type="submit" md-fab
class="add-file-button mat-accent"
(click)="fileInput.click()"
aria-label="Add file"> aria-label="Add file">
<md-icon>add</md-icon> <md-icon>add</md-icon>
</button> </button>
@ -62,9 +65,7 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="content"> <div class="content">
<fuse-file-list></fuse-file-list> <fuse-file-list></fuse-file-list>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->
@ -72,8 +73,8 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" <md-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md"> fuseMdSidenavHelper="file-manager-right-sidenav" md-is-locked-open="gt-md">
<fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav> <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
</md-sidenav> </md-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->

57
src/app/main/apps/file-manager/file-manager.component.scss
View File

@ -1,15 +1,66 @@
@import "src/app/core/scss/fuse";
#file-manager { #file-manager {
md-sidenav-container { md-sidenav-container {
.sidenav { .sidenav {
width: 320px !important; width: 320px !important;
min-width: 320px !important;; min-width: 320px !important;
max-width: 320px !important;; max-width: 320px !important;
&.left-sidenav {
}
&.right-sidenav {
@include media-breakpoint('gt-md') {
z-index: 0;
}
}
} }
.mat-sidenav-content { .mat-sidenav-content {
z-index: 60; z-index: 1;
.center {
.header {
position: relative;
height: 200px;
min-height: 200px;
max-height: 200px;
.add-file-button {
position: absolute;
bottom: -28px;
left: 16px;
}
}
}
}
}
.type-icon {
&.folder {
&:before {
content: 'folder';
color: #FFB300;
}
}
&.document {
&:before {
content: 'insert_drive_file';
color: #1565C0;
}
}
&.spreadsheet {
&:before {
content: 'insert_chart';
color: #4CAF50;
}
} }
} }
} }

11
src/app/main/apps/file-manager/file-manager.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FileManagerService } from './file-manager.service';
@Component({ @Component({
selector : 'fuse-file-manager', selector : 'fuse-file-manager',
@ -9,12 +10,20 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
export class FileManagerComponent implements OnInit export class FileManagerComponent implements OnInit
{ {
constructor() selected: any;
pathArr: string[];
constructor(private fileManagerService: FileManagerService)
{ {
} }
ngOnInit() ngOnInit()
{ {
this.fileManagerService.onFileSelected.subscribe(selected => {
this.selected = selected;
this.pathArr = selected.location.split('>');
});
} }
} }

7
src/app/main/apps/file-manager/file-manager.service.ts
View File

@ -7,8 +7,8 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable() @Injectable()
export class FileManagerService implements Resolve<any> export class FileManagerService implements Resolve<any>
{ {
files: any[]; onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
onFileSelected = new BehaviorSubject<any>(null); onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http) constructor(private http: Http)
{ {
@ -29,7 +29,6 @@ export class FileManagerService implements Resolve<any>
this.getFiles() this.getFiles()
]).then( ]).then(
([files]) => { ([files]) => {
this.files = files;
resolve(); resolve();
}, },
reject reject
@ -42,6 +41,8 @@ export class FileManagerService implements Resolve<any>
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.http.get('api/file-manager') this.http.get('api/file-manager')
.subscribe(response => { .subscribe(response => {
this.onFilesChanged.next(response.json().data);
this.onFileSelected.next(response.json().data[0]);
resolve(response.json().data); resolve(response.json().data);
}, reject); }, reject);
}); });