diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3a545fcb..86f741e5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -42,6 +42,10 @@ const appRoutes: Routes = [ path : 'apps/todo', loadChildren: './main/apps/todo/todo.module#FuseTodoModule' }, + { + path : 'apps/file-manager', + loadChildren: './main/apps/file-manager/file-manager.module#FuseFileManagerModule' + }, { path : '**', redirectTo: 'apps/dashboards/project' diff --git a/src/app/fuse-fake-db/file-manager.ts b/src/app/fuse-fake-db/file-manager.ts new file mode 100644 index 00000000..2c4555e6 --- /dev/null +++ b/src/app/fuse-fake-db/file-manager.ts @@ -0,0 +1,146 @@ +export class FileManagerFakeDb +{ + public static files = [ + { + 'name' : 'Work Documents', + 'type' : 'folder', + 'owner' : 'me', + 'size' : '', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true + }, + { + 'name' : 'Public Documents', + 'type' : 'folder', + 'owner' : 'public', + 'size' : '', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true + }, + { + 'name' : 'Private Documents', + 'type' : 'folder', + 'owner' : 'me', + 'size' : '', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true + }, + { + 'name' : 'Ongoing projects', + 'type' : 'document', + 'owner' : 'Emily Bennett', + 'size' : '1.2 Mb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Shopping list', + 'type' : 'document', + 'owner' : 'Emily Bennett', + 'size' : '980 Kb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Invoices', + 'type' : 'spreadsheet', + 'owner' : 'Emily Bennett', + 'size' : '750 Kb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Crash logs', + 'type' : 'document', + 'owner' : 'Emily Bennett', + 'size' : '980 Mb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'System logs', + 'type' : 'document', + 'owner' : 'Emily Bennett', + 'size' : '52 Kb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Prices', + 'type' : 'spreadsheet', + 'owner' : 'Emily Bennett', + 'size' : '27 Mb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Anabelle Manual', + 'type' : 'document', + 'owner' : 'Emily Bennett', + 'size' : '1.1 Kb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + }, + { + 'name' : 'Steam summer sale budget', + 'type' : 'spreadsheet', + 'owner' : 'Emily Bennett', + 'size' : '505 Kb', + 'modified' : 'July 8, 2015', + 'opened' : 'July 8, 2015', + 'created' : 'July 8, 2015', + 'extention': '', + 'location' : 'My Files > Documents', + 'offline' : true, + 'preview' : 'assets/images/etc/sample-file-preview.jpg' + } + ]; + +} diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fuse-fake-db/fuse-fake-db.service.ts index 60efff5d..6e14f060 100644 --- a/src/app/fuse-fake-db/fuse-fake-db.service.ts +++ b/src/app/fuse-fake-db/fuse-fake-db.service.ts @@ -6,6 +6,7 @@ import { CalendarFakeDb } from './calendar'; import { TodoFakeDb } from './todo'; import { ProfileFakeDb } from './profile'; import { ContactsFakeDb } from './contacts'; +import { FileManagerFakeDb } from './file-manager'; export class FuseFakeDbService implements InMemoryDbService { @@ -26,7 +27,8 @@ export class FuseFakeDbService implements InMemoryDbService 'profile-timeline' : ProfileFakeDb.timeline, 'profile-photos-videos': ProfileFakeDb.photosVideos, 'profile-about' : ProfileFakeDb.about, - 'contacts' : ContactsFakeDb.contacts + 'contacts' : ContactsFakeDb.contacts, + 'file-manager' : FileManagerFakeDb.files }; } } 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 new file mode 100644 index 00000000..3a6bc9e9 --- /dev/null +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 00000000..31d97454 --- /dev/null +++ b/src/app/main/apps/file-manager/file-list/file-list.component.scss @@ -0,0 +1,29 @@ +:host { + .ngx-datatable { + background: transparent; + box-shadow: none; + } + .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-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts new file mode 100644 index 00000000..546ccc15 --- /dev/null +++ b/src/app/main/apps/file-manager/file-list/file-list.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; +import { Http } from '@angular/http'; +import { FileManagerService } from '../file-manager.service'; + +@Component({ + selector : 'fuse-file-list', + templateUrl: './file-list.component.html', + styleUrls : ['./file-list.component.scss'] +}) +export class FileListComponent implements OnInit +{ + + rows: any[]; + selected = []; + + loadingIndicator = false; + reorderable = true; + + constructor(private fileManagerService: FileManagerService) + { + + } + + ngOnInit() + { + this.rows = this.fileManagerService.files; + this.selected = [this.rows[0]]; + this.fileManagerService.onFileSelected.next(this.selected[0]); + } + + onSelect(ev) + { + this.fileManagerService.onFileSelected.next(this.selected[0]); + } + +} diff --git a/src/app/main/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html new file mode 100644 index 00000000..7f8b475e --- /dev/null +++ b/src/app/main/apps/file-manager/file-manager.component.html @@ -0,0 +1,83 @@ +
+ + + + + + Sidenav + + + + +
+ + +
+ + +
+ +
+ + + +
+ +
+ +
+
+ + + +
+ + {{path}} + + +
+ + + +
+ +
+ + +
+ + + +
+ + + +
+ + +
+ + + + + + + + + + +
diff --git a/src/app/main/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss new file mode 100644 index 00000000..9d900011 --- /dev/null +++ b/src/app/main/apps/file-manager/file-manager.component.scss @@ -0,0 +1,15 @@ +#file-manager { + + md-sidenav-container { + + .sidenav { + width: 320px !important; + min-width: 320px !important;; + max-width: 320px !important;; + } + + .mat-sidenav-content { + z-index: 60; + } + } +} diff --git a/src/app/main/apps/file-manager/file-manager.component.ts b/src/app/main/apps/file-manager/file-manager.component.ts new file mode 100644 index 00000000..ddf2ccaa --- /dev/null +++ b/src/app/main/apps/file-manager/file-manager.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'fuse-file-manager', + templateUrl : './file-manager.component.html', + styleUrls : ['./file-manager.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class FileManagerComponent implements OnInit +{ + + constructor() + { + } + + ngOnInit() + { + } + +} diff --git a/src/app/main/apps/file-manager/file-manager.module.ts b/src/app/main/apps/file-manager/file-manager.module.ts new file mode 100644 index 00000000..b769e4e3 --- /dev/null +++ b/src/app/main/apps/file-manager/file-manager.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; +import { FileManagerComponent } from './file-manager.component'; +import { FileManagerService } from './file-manager.service'; +import { FileListComponent } from './file-list/file-list.component'; +import { MainSidenavComponent } from './sidenavs/main/main.component'; +import { DetailsSidenavComponent } from './sidenavs/details/details.component'; + +const routes: Routes = [ + { + path : '**', + component: FileManagerComponent, + children : [], + resolve : { + files: FileManagerService + } + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + FileManagerComponent, + FileListComponent, + MainSidenavComponent, + DetailsSidenavComponent + ], + providers : [ + FileManagerService + ] +}) +export class FuseFileManagerModule +{ +} diff --git a/src/app/main/apps/file-manager/file-manager.service.ts b/src/app/main/apps/file-manager/file-manager.service.ts new file mode 100644 index 00000000..56503c30 --- /dev/null +++ b/src/app/main/apps/file-manager/file-manager.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; +import { Http } from '@angular/http'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +@Injectable() +export class FileManagerService implements Resolve +{ + files: any[]; + onFileSelected = new BehaviorSubject(null); + + constructor(private http: Http) + { + } + + /** + * The File Manager App Main Resolver + * @param {ActivatedRouteSnapshot} route + * @param {RouterStateSnapshot} state + * @returns {Observable | Promise | any} + */ + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any + { + + return new Promise((resolve, reject) => { + + Promise.all([ + this.getFiles() + ]).then( + ([files]) => { + this.files = files; + resolve(); + }, + reject + ); + }); + } + + getFiles(): Promise + { + return new Promise((resolve, reject) => { + this.http.get('api/file-manager') + .subscribe(response => { + resolve(response.json().data); + }, reject); + }); + } + +} diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/apps/file-manager/sidenavs/details/details.component.html new file mode 100644 index 00000000..df804d9e --- /dev/null +++ b/src/app/main/apps/file-manager/sidenavs/details/details.component.html @@ -0,0 +1,84 @@ + +
+ +
+ + + + + + +
+ +
+
{{selected.name}}
+
+ Edited + : {{selected.modified}} +
+
+
+ + + +
+ +
+
+ +
+ + + + Available Offline + + + +
Info
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type{{selected.type}}
Size{{selected.size === '' ? '-': selected.size}}
Location{{selected.location}}
Owner{{selected.owner}}
Modified{{selected.modified}}
Opened{{selected.opened}}
Created{{selected.created}}
+
+ +
+ diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.scss b/src/app/main/apps/file-manager/sidenavs/details/details.component.scss new file mode 100644 index 00000000..10680ba9 --- /dev/null +++ b/src/app/main/apps/file-manager/sidenavs/details/details.component.scss @@ -0,0 +1,16 @@ +:host { + display: flex; + flex-direction: column; + flex: 1 0 auto; + height: 100%; + + > .header { + flex: 0 1 200px; + + } + + > .content { + flex: 1 0 auto; + + } +} diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/apps/file-manager/sidenavs/details/details.component.ts new file mode 100644 index 00000000..8c265e04 --- /dev/null +++ b/src/app/main/apps/file-manager/sidenavs/details/details.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; +import { FileManagerService } from '../../file-manager.service'; + +@Component({ + selector : 'fuse-file-manager-details-sidenav', + templateUrl: './details.component.html', + styleUrls : ['./details.component.scss'] +}) +export class DetailsSidenavComponent implements OnInit +{ + + selected: any; + + constructor(private fileManagerService: FileManagerService) + { + + } + + ngOnInit() + { + this.fileManagerService.onFileSelected.subscribe(selected => { + this.selected = selected; + }); + } + +} diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.html b/src/app/main/apps/file-manager/sidenavs/main/main.component.html new file mode 100644 index 00000000..8af508c9 --- /dev/null +++ b/src/app/main/apps/file-manager/sidenavs/main/main.component.html @@ -0,0 +1,3 @@ +

+ main works! +

diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.scss b/src/app/main/apps/file-manager/sidenavs/main/main.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.ts b/src/app/main/apps/file-manager/sidenavs/main/main.component.ts new file mode 100644 index 00000000..87ea0f7f --- /dev/null +++ b/src/app/main/apps/file-manager/sidenavs/main/main.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector : 'fuse-file-manager-main-sidenav', + templateUrl: './main.component.html', + styleUrls : ['./main.component.scss'] +}) +export class MainSidenavComponent implements OnInit +{ + selected: any; + + constructor() + { + + } + + ngOnInit() + { + } + +}