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

Merge branch 'master' of https://github.com/withinpixels/fuse2

Browse Source
This commit is contained in:
Sercan Yemen 2017-08-02 13:29:17 +03:00
commit eefc691238
8 changed files with 163 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/fuse-fake-db/fuse-fake-db.service.ts
View File

@ -29,7 +29,7 @@ export class FuseFakeDbService implements InMemoryDbService
'profile-timeline' : ProfileFakeDb.timeline, 'profile-timeline' : ProfileFakeDb.timeline,
'profile-photos-videos': ProfileFakeDb.photosVideos, 'profile-photos-videos': ProfileFakeDb.photosVideos,
'profile-about' : ProfileFakeDb.about, 'profile-about' : ProfileFakeDb.about,
'contacts' : ContactsFakeDb.contacts, 'contacts-contacts' : ContactsFakeDb.contacts,
'invoice' : InvoiceFakeDb.invoice, 'invoice' : InvoiceFakeDb.invoice,
'file-manager' : FileManagerFakeDb.files, 'file-manager' : FileManagerFakeDb.files,
'search-classic' : SearchFakeDb.classic, 'search-classic' : SearchFakeDb.classic,

78
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -1,51 +1,75 @@
<md-table #table [dataSource]="dataSource"> <md-table #table [dataSource]="dataSource">
<!-- Type Column --> <!-- Checkbox Column -->
<ng-container cdkColumnDef="icon"> <ng-container cdkColumnDef="checkbox">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let row"> <md-cell *cdkCellDef="let contact">
<md-icon class="type-icon" [class]="row.type"></md-icon> Check
</md-cell>
</ng-container>
<!-- Avatar Column -->
<ng-container cdkColumnDef="avatar">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
<md-cell *cdkCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/>
</md-cell> </md-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell> <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}}</md-cell> <md-cell *cdkCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
</md-cell>
</ng-container> </ng-container>
<!-- Type Column --> <!-- Email Column -->
<ng-container cdkColumnDef="type"> <ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef>Type</md-header-cell> <md-header-cell *cdkHeaderCellDef>Email</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.type}}</md-cell> <md-cell *cdkCellDef="let contact">
<p class="email text-truncate" fxShow.gt-sm>
{{contact.email}}
</p>
</md-cell>
</ng-container> </ng-container>
<!-- Owner Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="owner"> <ng-container cdkColumnDef="phone">
<md-header-cell *cdkHeaderCellDef>Owner</md-header-cell> <md-header-cell *cdkHeaderCellDef>Phone</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell> <md-cell *cdkCellDef="let contact">
<p class="phone text-truncate" fxShow.gt-md>
{{contact.phone}}
</p>
</md-cell>
</ng-container> </ng-container>
<!-- Size Column --> <!-- Job Title Column -->
<ng-container cdkColumnDef="size"> <ng-container cdkColumnDef="jobTitle">
<md-header-cell *cdkHeaderCellDef>Size</md-header-cell> <md-header-cell *cdkHeaderCellDef>Job title</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.size === '' ? '-': row.size}}</md-cell> <md-cell *cdkCellDef="let contact">
<p class="job-title text-truncate" fxShow.gt-lg>
{{contact.jobTitle}}
</p>
</md-cell>
</ng-container> </ng-container>
<!-- Modified Column --> <!-- Company Column -->
<ng-container cdkColumnDef="modified"> <ng-container cdkColumnDef="company">
<md-header-cell *cdkHeaderCellDef>Modified</md-header-cell> <md-header-cell *cdkHeaderCellDef>Company</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell> <md-cell *cdkCellDef="let contact">
<p class="company text-truncate" fxShow.gt-lg>
{{contact.company}}
</p>
</md-cell>
</ng-container> </ng-container>
<!-- Detail Button Column --> <!-- Buttons Column -->
<ng-container cdkColumnDef="detail-button"> <ng-container cdkColumnDef="buttons">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let row"> <md-cell *cdkCellDef="let row">
<button md-icon-button class="sidenav-toggle" Buttons
fuseMdSidenavToggler="file-manager-right-sidenav">
<md-icon>info</md-icon>
</button>
</md-cell> </md-cell>
</ng-container> </ng-container>

17
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { ContactsService } from '../contacts.service'; import { ContactsService } from '../contacts.service';
import { DataSource } from '@angular/cdk'; import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -11,17 +10,17 @@ import { Observable } from 'rxjs/Observable';
}) })
export class ContactListComponent implements OnInit export class ContactListComponent implements OnInit
{ {
files: any; contacts: any;
dataSource: FilesDataSource | null; dataSource: FilesDataSource | null;
displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button']; displayedColumns = ['checkbox', 'avatar', 'name', 'email', 'phone', 'jobTitle', 'buttons'];
selected: any; selected: any;
constructor(private fileManagerService: ContactsService) constructor(private fileManagerService: ContactsService)
{ {
this.fileManagerService.onFilesChanged.subscribe(files => { this.fileManagerService.onContactsChanged.subscribe(files => {
this.files = files; this.contacts = files;
}); });
this.fileManagerService.onFileSelected.subscribe(selected => { this.fileManagerService.onContactSelected.subscribe(selected => {
this.selected = selected; this.selected = selected;
}); });
} }
@ -33,13 +32,13 @@ export class ContactListComponent implements OnInit
onSelect(selected) onSelect(selected)
{ {
this.fileManagerService.onFileSelected.next(selected); this.fileManagerService.onContactSelected.next(selected);
} }
} }
export class FilesDataSource extends DataSource<any> export class FilesDataSource extends DataSource<any>
{ {
constructor(private fileManagerService: ContactsService) constructor(private contactsService: ContactsService)
{ {
super(); super();
} }
@ -47,7 +46,7 @@ export class FilesDataSource extends DataSource<any>
/** Connect function called by the table to retrieve one stream containing the data to render. */ /** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<any[]> connect(): Observable<any[]>
{ {
return this.fileManagerService.onFilesChanged; return this.contactsService.onContactsChanged;
} }
disconnect() disconnect()

113
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -1,24 +1,94 @@
<div id="file-manager" class="page-layout simple right-sidenav" fxLayout="row"> <div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fxfxLayout="column">
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxfxLayout="row" fxLayoutAlign="space-between center">
<!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
<div class="logo" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon mr-16">account_box</md-icon>
<span class="logo-text h1">Contacts</span>
</div>
</div>
<!-- / APP TITLE -->
<!-- SEARCH -->
<div class="search-input-wrapper" fxLayout="row" fxLayoutAlign="start center">
<label for="search" class="mr-8">
<md-icon>search</md-icon>
</label>
<md-input-container md-no-float class="m-0" floatPlaceholder="never">
<input mdInput id="search" placeholder="Search for anyone">
</md-input-container>
</div>
<!-- / SEARCH -->
</div>
<!-- / HEADER -->
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over" <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="file-manager-left-sidenav"> fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
<fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
<div class="sidenav-content" perfect-scrollbar>
<fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
</div>
</md-sidenav> </md-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center p-24" perfect-scrollbar>
<!-- CONTENT -->
<div class="content p-24 md-white-bg mat-elevation-z4">
<fuse-contacts-contact-list></fuse-contacts-contact-list>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</md-sidenav-container>
</div>
<!--
<div id="file-manager" class="page-layout simple right-sidenav" fxfxLayout="row">
<md-sidenav-container>
&lt;!&ndash; SIDENAV &ndash;&gt;
<md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
fuseMdSidenavHelper="file-manager-left-sidenav">
<fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
</md-sidenav>
&lt;!&ndash; / SIDENAV &ndash;&gt;
&lt;!&ndash; CENTER &ndash;&gt;
<div class="center" fxFlex perfect-scrollbar> <div class="center" fxFlex perfect-scrollbar>
<!-- HEADER --> &lt;!&ndash; HEADER &ndash;&gt;
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start"> <div class="header md-accent-bg p-24" fxfxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR --> &lt;!&ndash; TOOLBAR &ndash;&gt;
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start"> <div class="toolbar w-100-p" fxFlex fxfxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row"> <div class="left-side" fxfxLayout="row">
<button md-icon-button class="sidenav-toggle" <button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-left-sidenav"> fuseMdSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
@ -31,24 +101,24 @@
</button> </button>
</div> </div>
<div class="right-side" fxLayout="row"> <div class="right-side" fxfxLayout="row">
<button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search"> <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
<md-icon>search</md-icon> <md-icon>search</md-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- / TOOLBAR --> &lt;!&ndash; / TOOLBAR &ndash;&gt;
<!-- BREADCRUMB --> &lt;!&ndash; BREADCRUMB &ndash;&gt;
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"> <div class="breadcrumb text-truncate h1 pl-72" fxfxLayout="row" fxLayoutAlign="start center">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center"> <div *ngFor="let path of pathArr; last as isLast" fxfxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span> <span>{{path}}</span>
<md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon> <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
</div> </div>
</div> </div>
<!-- / BREADCRUMB --> &lt;!&ndash; / BREADCRUMB &ndash;&gt;
<!-- ADD FILE BUTTON --> &lt;!&ndash; ADD FILE BUTTON &ndash;&gt;
<div class="file-uploader"> <div class="file-uploader">
<input hidden type="file" #fileInput/> <input hidden type="file" #fileInput/>
<button type="submit" md-fab <button type="submit" md-fab
@ -58,20 +128,21 @@
<md-icon>add</md-icon> <md-icon>add</md-icon>
</button> </button>
</div> </div>
<!-- / ADD FILE BUTTON --> &lt;!&ndash; / ADD FILE BUTTON &ndash;&gt;
</div> </div>
<!-- / HEADER --> &lt;!&ndash; / HEADER &ndash;&gt;
<!-- CONTENT --> &lt;!&ndash; CONTENT &ndash;&gt;
<div class="content"> <div class="content">
<fuse-contacts-contact-list></fuse-contacts-contact-list> <fuse-contacts-contact-list></fuse-contacts-contact-list>
</div> </div>
<!-- / CONTENT --> &lt;!&ndash; / CONTENT &ndash;&gt;
</div> </div>
<!-- / CENTER --> &lt;!&ndash; / CENTER &ndash;&gt;
</md-sidenav-container> </md-sidenav-container>
</div> </div>
-->

64
src/app/main/content/apps/contacts/contacts.component.scss
View File

@ -1,66 +1,2 @@
@import "src/app/core/scss/fuse"; @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;
}
}
}
}

6
src/app/main/content/apps/contacts/contacts.component.ts
View File

@ -11,18 +11,16 @@ export class ContactsComponent implements OnInit
{ {
selected: any; selected: any;
pathArr: string[];
constructor(private fileManagerService: ContactsService) constructor(private contactsService: ContactsService)
{ {
} }
ngOnInit() ngOnInit()
{ {
this.fileManagerService.onFileSelected.subscribe(selected => { this.contactsService.onContactSelected.subscribe(selected => {
this.selected = selected; this.selected = selected;
this.pathArr = selected.location.split('>');
}); });
} }

16
src/app/main/content/apps/contacts/contacts.service.ts
View File

@ -7,15 +7,15 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable() @Injectable()
export class ContactsService implements Resolve<any> export class ContactsService implements Resolve<any>
{ {
onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({}); onContactsChanged: BehaviorSubject<any> = new BehaviorSubject({});
onFileSelected: BehaviorSubject<any> = new BehaviorSubject({}); onContactSelected: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http) constructor(private http: Http)
{ {
} }
/** /**
* The File Manager App Main Resolver * The Contacts App Main Resolver
* @param {ActivatedRouteSnapshot} route * @param {ActivatedRouteSnapshot} route
* @param {RouterStateSnapshot} state * @param {RouterStateSnapshot} state
* @returns {Observable<any> | Promise<any> | any} * @returns {Observable<any> | Promise<any> | any}
@ -26,7 +26,7 @@ export class ContactsService implements Resolve<any>
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Promise.all([ Promise.all([
this.getFiles() this.getContacts()
]).then( ]).then(
([files]) => { ([files]) => {
resolve(); resolve();
@ -36,13 +36,13 @@ export class ContactsService implements Resolve<any>
}); });
} }
getFiles(): Promise<any> getContacts(): Promise<any>
{ {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.http.get('api/file-manager') this.http.get('api/contacts-contacts')
.subscribe(response => { .subscribe(response => {
this.onFilesChanged.next(response.json().data); this.onContactsChanged.next(response.json().data);
this.onFileSelected.next(response.json().data[0]); this.onContactSelected.next(response.json().data[0]);
resolve(response.json().data); resolve(response.json().data);
}, reject); }, reject);
}); });

1
src/app/main/main.component.scss
View File

@ -31,6 +31,7 @@ fuse-main {
fuse-content { fuse-content {
display: flex; display: flex;
flex: 1;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
width: 100%; width: 100%;