From 7e33e361625381bcb0f5b798730c8d17a84ced67 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Wed, 2 Aug 2017 10:51:11 +0300 Subject: [PATCH] (Contacts App) start to build on filemanager app.. --- src/app/app.module.ts | 4 + .../contact-list/contact-list.component.html | 58 ++++++++++++++ .../contact-list/contact-list.component.scss | 29 +++++++ .../contact-list/contact-list.component.ts | 56 ++++++++++++++ .../apps/contacts/contacts.component.html | 77 +++++++++++++++++++ .../apps/contacts/contacts.component.scss | 66 ++++++++++++++++ .../main/apps/contacts/contacts.component.ts | 29 +++++++ src/app/main/apps/contacts/contacts.module.ts | 36 +++++++++ .../main/apps/contacts/contacts.service.ts | 51 ++++++++++++ .../sidenavs/main/main.component.html | 54 +++++++++++++ .../sidenavs/main/main.component.scss | 11 +++ .../contacts/sidenavs/main/main.component.ts | 21 +++++ 12 files changed, 492 insertions(+) create mode 100644 src/app/main/apps/contacts/contact-list/contact-list.component.html create mode 100644 src/app/main/apps/contacts/contact-list/contact-list.component.scss create mode 100644 src/app/main/apps/contacts/contact-list/contact-list.component.ts create mode 100644 src/app/main/apps/contacts/contacts.component.html create mode 100644 src/app/main/apps/contacts/contacts.component.scss create mode 100644 src/app/main/apps/contacts/contacts.component.ts create mode 100644 src/app/main/apps/contacts/contacts.module.ts create mode 100644 src/app/main/apps/contacts/contacts.service.ts create mode 100644 src/app/main/apps/contacts/sidenavs/main/main.component.html create mode 100644 src/app/main/apps/contacts/sidenavs/main/main.component.scss create mode 100644 src/app/main/apps/contacts/sidenavs/main/main.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 86f741e5..c708b423 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -46,6 +46,10 @@ const appRoutes: Routes = [ path : 'apps/file-manager', loadChildren: './main/apps/file-manager/file-manager.module#FuseFileManagerModule' }, + { + path : 'apps/contacts', + loadChildren: './main/apps/contacts/contacts.module#FuseContactsModule' + }, { path : '**', redirectTo: 'apps/dashboards/project' diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html new file mode 100644 index 00000000..c6706e10 --- /dev/null +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html @@ -0,0 +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/contacts/contact-list/contact-list.component.scss b/src/app/main/apps/contacts/contact-list/contact-list.component.scss new file mode 100644 index 00000000..f7e1316c --- /dev/null +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.scss @@ -0,0 +1,29 @@ +@import "src/app/core/scss/fuse"; + +:host { + .mat-table { + background: transparent; + box-shadow: none; + + .mat-row { + position: relative; + cursor: pointer; + + .mat-cell { + + &.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/contacts/contact-list/contact-list.component.ts b/src/app/main/apps/contacts/contact-list/contact-list.component.ts new file mode 100644 index 00000000..db557820 --- /dev/null +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit } from '@angular/core'; +import { Http } from '@angular/http'; +import { ContactsService } from '../contacts.service'; +import { DataSource } from '@angular/cdk'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector : 'fuse-contacts-contact-list', + templateUrl: './contact-list.component.html', + styleUrls : ['./contact-list.component.scss'] +}) +export class ContactListComponent implements OnInit +{ + files: any; + dataSource: FilesDataSource | null; + displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button']; + selected: any; + + constructor(private fileManagerService: ContactsService) + { + this.fileManagerService.onFilesChanged.subscribe(files => { + this.files = files; + }); + this.fileManagerService.onFileSelected.subscribe(selected => { + this.selected = selected; + }); + } + + ngOnInit() + { + this.dataSource = new FilesDataSource(this.fileManagerService); + } + + onSelect(selected) + { + this.fileManagerService.onFileSelected.next(selected); + } +} + +export class FilesDataSource extends DataSource +{ + constructor(private fileManagerService: ContactsService) + { + 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/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html new file mode 100644 index 00000000..a0dceb29 --- /dev/null +++ b/src/app/main/apps/contacts/contacts.component.html @@ -0,0 +1,77 @@ +
+ + + + + + + + + + +
+ + +
+ + +
+ +
+ + + +
+ +
+ +
+
+ + + +
+
+ {{path}} + chevron_right +
+
+ + + +
+ + +
+ + +
+ + + +
+ +
+ + +
+ + + + +
diff --git a/src/app/main/apps/contacts/contacts.component.scss b/src/app/main/apps/contacts/contacts.component.scss new file mode 100644 index 00000000..8cf748cf --- /dev/null +++ b/src/app/main/apps/contacts/contacts.component.scss @@ -0,0 +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; + + &.left-sidenav { + } + + &.right-sidenav { + @include media-breakpoint('gt-md') { + z-index: 0; + } + } + } + + .mat-sidenav-content { + 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/contacts/contacts.component.ts b/src/app/main/apps/contacts/contacts.component.ts new file mode 100644 index 00000000..79c1386f --- /dev/null +++ b/src/app/main/apps/contacts/contacts.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { ContactsService } from './contacts.service'; + +@Component({ + selector : 'fuse-contacts', + templateUrl : './contacts.component.html', + styleUrls : ['./contacts.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ContactsComponent implements OnInit +{ + + selected: any; + pathArr: string[]; + + constructor(private fileManagerService: ContactsService) + { + + } + + ngOnInit() + { + this.fileManagerService.onFileSelected.subscribe(selected => { + this.selected = selected; + this.pathArr = selected.location.split('>'); + }); + } + +} diff --git a/src/app/main/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts new file mode 100644 index 00000000..e93f148e --- /dev/null +++ b/src/app/main/apps/contacts/contacts.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; +import { MainSidenavComponent } from './sidenavs/main/main.component'; +import { ContactsComponent } from './contacts.component'; +import { ContactsService } from './contacts.service'; +import { ContactListComponent } from './contact-list/contact-list.component'; + +const routes: Routes = [ + { + path : '**', + component: ContactsComponent, + children : [], + resolve : { + contacts: ContactsService + } + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + ContactsComponent, + ContactListComponent, + MainSidenavComponent + ], + providers : [ + ContactsService + ] +}) +export class FuseContactsModule +{ +} diff --git a/src/app/main/apps/contacts/contacts.service.ts b/src/app/main/apps/contacts/contacts.service.ts new file mode 100644 index 00000000..4308f6fc --- /dev/null +++ b/src/app/main/apps/contacts/contacts.service.ts @@ -0,0 +1,51 @@ +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 ContactsService implements Resolve +{ + onFilesChanged: BehaviorSubject = new BehaviorSubject({}); + onFileSelected: BehaviorSubject = new BehaviorSubject({}); + + 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]) => { + resolve(); + }, + reject + ); + }); + } + + getFiles(): Promise + { + 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); + }); + } + +} diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.html b/src/app/main/apps/contacts/sidenavs/main/main.component.html new file mode 100644 index 00000000..d640990a --- /dev/null +++ b/src/app/main/apps/contacts/sidenavs/main/main.component.html @@ -0,0 +1,54 @@ + +
+ + + +
+ + + +
+ +
+ +
+ + folder + My Files + +
+ +
+ + star +
Starred
+ +
+ +
+ + folder_shared +
Sharred with me
+ +
+ +
+ + access_time +
Recent
+ +
+ +
+ + not_interested +
Offline
+ +
+
+ +
+ diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/apps/contacts/sidenavs/main/main.component.scss new file mode 100644 index 00000000..678b3c81 --- /dev/null +++ b/src/app/main/apps/contacts/sidenavs/main/main.component.scss @@ -0,0 +1,11 @@ +:host { + display: flex; + flex-direction: column; + flex: 1 0 auto; + height: 100%; + + > .header { + flex: 0 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } +} diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/apps/contacts/sidenavs/main/main.component.ts new file mode 100644 index 00000000..93eb77db --- /dev/null +++ b/src/app/main/apps/contacts/sidenavs/main/main.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector : 'fuse-contacts-main-sidenav', + templateUrl: './main.component.html', + styleUrls : ['./main.component.scss'] +}) +export class MainSidenavComponent implements OnInit +{ + selected: any; + + constructor() + { + + } + + ngOnInit() + { + } + +}