diff --git a/src/app/fuse-fake-db/file-manager.ts b/src/app/fuse-fake-db/file-manager.ts index 2c4555e6..41cfe9b6 100644 --- a/src/app/fuse-fake-db/file-manager.ts +++ b/src/app/fuse-fake-db/file-manager.ts @@ -6,9 +6,9 @@ export class FileManagerFakeDb 'type' : 'folder', 'owner' : 'me', 'size' : '', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true @@ -18,9 +18,9 @@ export class FileManagerFakeDb 'type' : 'folder', 'owner' : 'public', 'size' : '', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true @@ -30,9 +30,9 @@ export class FileManagerFakeDb 'type' : 'folder', 'owner' : 'me', 'size' : '', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true @@ -42,9 +42,9 @@ export class FileManagerFakeDb 'type' : 'document', 'owner' : 'Emily Bennett', 'size' : '1.2 Mb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -55,9 +55,9 @@ export class FileManagerFakeDb 'type' : 'document', 'owner' : 'Emily Bennett', 'size' : '980 Kb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -68,9 +68,9 @@ export class FileManagerFakeDb 'type' : 'spreadsheet', 'owner' : 'Emily Bennett', 'size' : '750 Kb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -81,9 +81,9 @@ export class FileManagerFakeDb 'type' : 'document', 'owner' : 'Emily Bennett', 'size' : '980 Mb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -94,9 +94,9 @@ export class FileManagerFakeDb 'type' : 'document', 'owner' : 'Emily Bennett', 'size' : '52 Kb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -107,9 +107,9 @@ export class FileManagerFakeDb 'type' : 'spreadsheet', 'owner' : 'Emily Bennett', 'size' : '27 Mb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -120,9 +120,9 @@ export class FileManagerFakeDb 'type' : 'document', 'owner' : 'Emily Bennett', 'size' : '1.1 Kb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, @@ -133,9 +133,9 @@ export class FileManagerFakeDb 'type' : 'spreadsheet', 'owner' : 'Emily Bennett', 'size' : '505 Kb', - 'modified' : 'July 8, 2015', - 'opened' : 'July 8, 2015', - 'created' : 'July 8, 2015', + 'modified' : 'July 8, 2017', + 'opened' : 'July 8, 2017', + 'created' : 'July 8, 2017', 'extention': '', 'location' : 'My Files > Documents', 'offline' : true, diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index ba5b5fd3..c6706e10 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -1,44 +1,58 @@ - + - - - - - - - + + + + - + + - + + + Name + {{row.name}} + - - + + + Type + {{row.type}} + - - + + + Owner + {{row.owner}} + - - + + + Size + {{row.size === '' ? '-': row.size}} + - - + + + Modified + {{row.modified}} + - - - + + + + + + + + + + + + diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.scss b/src/app/main/apps/file-manager/file-list/file-list.component.scss index 31d97454..f7e1316c 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.scss +++ b/src/app/main/apps/file-manager/file-list/file-list.component.scss @@ -1,28 +1,28 @@ +@import "src/app/core/scss/fuse"; + :host { - .ngx-datatable { + .mat-table { background: transparent; box-shadow: none; - } - .type-icon { - &.folder { - &:before { - content: 'folder'; - color: #FFB300; - } - } + .mat-row { + position: relative; + cursor: pointer; - &.document { - &:before { - content: 'insert_drive_file'; - color: #1565C0; - } - } + .mat-cell { - &.spreadsheet { - &:before { - content: 'insert_chart'; - color: #4CAF50; + &.mat-column-icon { + flex: 0 1 auto; + padding: 0 24px 0 0; + } + + &.mat-column-detail-button { + flex: 0 1 auto; + padding: 0 24px 0 0; + @include media-breakpoint('gt-md') { + display: none; + } + } } } } diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts index 546ccc15..cf53245d 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.ts +++ b/src/app/main/apps/file-manager/file-list/file-list.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; import { FileManagerService } from '../file-manager.service'; +import { DataSource } from '@angular/cdk'; +import { Observable } from 'rxjs/Observable'; @Component({ selector : 'fuse-file-list', @@ -9,28 +11,46 @@ import { FileManagerService } from '../file-manager.service'; }) export class FileListComponent implements OnInit { - - rows: any[]; - selected = []; - - loadingIndicator = false; - reorderable = true; + files: any; + dataSource: FilesDataSource | null; + displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button']; + selected: any; constructor(private fileManagerService: FileManagerService) { - + this.fileManagerService.onFilesChanged.subscribe(files => { + this.files = files; + }); + this.fileManagerService.onFileSelected.subscribe(selected => { + this.selected = selected; + }); } ngOnInit() { - this.rows = this.fileManagerService.files; - this.selected = [this.rows[0]]; - this.fileManagerService.onFileSelected.next(this.selected[0]); + this.dataSource = new FilesDataSource(this.fileManagerService); } - onSelect(ev) + onSelect(selected) { - this.fileManagerService.onFileSelected.next(this.selected[0]); + this.fileManagerService.onFileSelected.next(selected); + } +} + +export class FilesDataSource extends DataSource +{ + constructor(private fileManagerService: FileManagerService) + { + super(); } + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + return this.fileManagerService.onFilesChanged; + } + + disconnect() + { + } } diff --git a/src/app/main/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html index 7f8b475e..2d869a12 100644 --- a/src/app/main/apps/file-manager/file-manager.component.html +++ b/src/app/main/apps/file-manager/file-manager.component.html @@ -3,9 +3,9 @@ - - Sidenav + + @@ -13,19 +13,19 @@
-
+
-
+
- - @@ -40,17 +40,20 @@ -
- - {{path}} - - +
+
+ {{path}} + chevron_right +
-
- @@ -62,9 +65,7 @@
- -
@@ -72,8 +73,8 @@ - + diff --git a/src/app/main/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss index 9d900011..8cf748cf 100644 --- a/src/app/main/apps/file-manager/file-manager.component.scss +++ b/src/app/main/apps/file-manager/file-manager.component.scss @@ -1,15 +1,66 @@ +@import "src/app/core/scss/fuse"; + #file-manager { md-sidenav-container { .sidenav { width: 320px !important; - min-width: 320px !important;; - max-width: 320px !important;; + min-width: 320px !important; + max-width: 320px !important; + + &.left-sidenav { + } + + &.right-sidenav { + @include media-breakpoint('gt-md') { + z-index: 0; + } + } } .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; + } } } } diff --git a/src/app/main/apps/file-manager/file-manager.component.ts b/src/app/main/apps/file-manager/file-manager.component.ts index ddf2ccaa..5e6082dc 100644 --- a/src/app/main/apps/file-manager/file-manager.component.ts +++ b/src/app/main/apps/file-manager/file-manager.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { FileManagerService } from './file-manager.service'; @Component({ selector : 'fuse-file-manager', @@ -9,12 +10,20 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; export class FileManagerComponent implements OnInit { - constructor() + selected: any; + pathArr: string[]; + + constructor(private fileManagerService: FileManagerService) { + } ngOnInit() { + this.fileManagerService.onFileSelected.subscribe(selected => { + this.selected = selected; + this.pathArr = selected.location.split('>'); + }); } } diff --git a/src/app/main/apps/file-manager/file-manager.service.ts b/src/app/main/apps/file-manager/file-manager.service.ts index 56503c30..d2a72364 100644 --- a/src/app/main/apps/file-manager/file-manager.service.ts +++ b/src/app/main/apps/file-manager/file-manager.service.ts @@ -7,8 +7,8 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class FileManagerService implements Resolve { - files: any[]; - onFileSelected = new BehaviorSubject(null); + onFilesChanged: BehaviorSubject = new BehaviorSubject({}); + onFileSelected: BehaviorSubject = new BehaviorSubject({}); constructor(private http: Http) { @@ -29,7 +29,6 @@ export class FileManagerService implements Resolve this.getFiles() ]).then( ([files]) => { - this.files = files; resolve(); }, reject @@ -42,6 +41,8 @@ export class FileManagerService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/file-manager') .subscribe(response => { + this.onFilesChanged.next(response.json().data); + this.onFileSelected.next(response.json().data[0]); resolve(response.json().data); }, reject); });