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

(Contacts App) start to build on filemanager app..

Browse Source
This commit is contained in:
mustafahlvc 2017-08-02 10:51:11 +03:00
parent d7d3a6833d
commit 7e33e36162
12 changed files with 492 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -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'

58
src/app/main/apps/contacts/contact-list/contact-list.component.html Normal file
View File

@ -0,0 +1,58 @@
<md-table #table [dataSource]="dataSource">
<!-- Type Column -->
<ng-container cdkColumnDef="icon">
<md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let row">
<md-icon class="type-icon" [class]="row.type"></md-icon>
</md-cell>
</ng-container>
<!-- 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>
<!-- Type Column -->
<ng-container cdkColumnDef="type">
<md-header-cell *cdkHeaderCellDef>Type</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
</ng-container>
<!-- Owner Column -->
<ng-container cdkColumnDef="owner">
<md-header-cell *cdkHeaderCellDef>Owner</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell>
</ng-container>
<!-- Size 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>
<!-- Modified Column -->
<ng-container cdkColumnDef="modified">
<md-header-cell *cdkHeaderCellDef>Modified</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell>
</ng-container>
<!-- Detail Button Column -->
<ng-container cdkColumnDef="detail-button">
<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>

29
src/app/main/apps/contacts/contact-list/contact-list.component.scss Normal file
View File

@ -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;
}
}
}
}
}
}

56
src/app/main/apps/contacts/contact-list/contact-list.component.ts Normal file
View File

@ -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<any>
{
constructor(private fileManagerService: ContactsService)
{
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<any[]>
{
return this.fileManagerService.onFilesChanged;
}
disconnect()
{
}
}

77
src/app/main/apps/contacts/contacts.component.html Normal file
View File

@ -0,0 +1,77 @@
<div id="file-manager" class="page-layout simple right-sidenav" fxLayout="row">
<md-sidenav-container>
<!-- SIDENAV -->
<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>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR -->
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row">
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon>
</button>
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-right-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
</div>
<div class="right-side" fxLayout="row">
<button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
<md-icon>search</md-icon>
</button>
</div>
</div>
<!-- / TOOLBAR -->
<!-- BREADCRUMB -->
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span>
<md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
</div>
</div>
<!-- / BREADCRUMB -->
<!-- ADD FILE BUTTON -->
<div class="file-uploader">
<input hidden type="file" #fileInput/>
<button type="submit" md-fab
class="add-file-button mat-accent"
(click)="fileInput.click()"
aria-label="Add file">
<md-icon>add</md-icon>
</button>
</div>
<!-- / ADD FILE BUTTON -->
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<fuse-contacts-contact-list></fuse-contacts-contact-list>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</md-sidenav-container>
</div>

66
src/app/main/apps/contacts/contacts.component.scss Normal file
View File

@ -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;
}
}
}
}

29
src/app/main/apps/contacts/contacts.component.ts Normal file
View File

@ -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('>');
});
}
}

36
src/app/main/apps/contacts/contacts.module.ts Normal file
View File

@ -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
{
}

51
src/app/main/apps/contacts/contacts.service.ts Normal file
View File

@ -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<any>
{
onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
{
}
/**
* The File Manager App Main Resolver
* @param {ActivatedRouteSnapshot} route
* @param {RouterStateSnapshot} state
* @returns {Observable<any> | Promise<any> | any}
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
{
return new Promise((resolve, reject) => {
Promise.all([
this.getFiles()
]).then(
([files]) => {
resolve();
},
reject
);
});
}
getFiles(): Promise<any>
{
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);
});
}
}

54
src/app/main/apps/contacts/sidenavs/main/main.component.html Normal file
View File

@ -0,0 +1,54 @@
<!-- SIDENAV HEADER -->
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="logo" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon mr-16">folder</md-icon>
<span class="logo-text h1">File Manager</span>
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content py-16" perfect-scrollbar>
<div class="nav">
<div class="nav-item" aria-label="inbox">
<a class="nav-link" md-ripple>
<md-icon class="nav-link-icon">folder</md-icon>
<span class="title">My Files</span>
</a>
</div>
<div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple>
<md-icon class="nav-link-icon">star</md-icon>
<div class="title">Starred</div>
</a>
</div>
<div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple>
<md-icon class="nav-link-icon">folder_shared</md-icon>
<div class="title">Sharred with me</div>
</a>
</div>
<div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple>
<md-icon class="nav-link-icon">access_time</md-icon>
<div class="title">Recent</div>
</a>
</div>
<div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple>
<md-icon class="nav-link-icon">not_interested</md-icon>
<div class="title">Offline</div>
</a>
</div>
</div>
</div>
<!-- / SIDENAV CONTENT -->

11
src/app/main/apps/contacts/sidenavs/main/main.component.scss Normal file
View File

@ -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);
}
}

21
src/app/main/apps/contacts/sidenavs/main/main.component.ts Normal file
View File

@ -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()
{
}
}