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

(File Manager App) updated.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-02 10:18:39 +03:00
parent ba3c22d67d
commit d7d3a6833d
8 changed files with 223 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/fuse-fake-db/file-manager.ts
View File

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

86
src/app/main/apps/file-manager/file-list/file-list.component.html
View File

@ -1,44 +1,58 @@
<ngx-datatable
class="material"
[rows]="rows"
[loadingIndicator]="loadingIndicator"
[columnMode]="'force'"
[headerHeight]="48"
[footerHeight]="56"
[rowHeight]="'auto'"
[scrollbarH]="true"
[reorderable]="reorderable"
[selected]="selected"
[selectionType]="'single'"
(select)='onSelect($event)'
[limit]="10">
<md-table #table [dataSource]="dataSource">
<ngx-datatable-column [width]="48"
[canAutoResize]="false"
[sortable]="false">
<ng-template ngx-datatable-header-template>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<!-- 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>
</ng-template>
</md-cell>
</ng-container>
</ngx-datatable-column>
<!-- 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>
<ngx-datatable-column name="Name" prop="name" [width]="200">
</ngx-datatable-column>
<!-- 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>
<ngx-datatable-column name="Type" prop="type" [width]="200">
</ngx-datatable-column>
<!-- 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>
<ngx-datatable-column name="Owner" prop="owner" [width]="200">
</ngx-datatable-column>
<!-- 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>
<ngx-datatable-column name="Size" prop="size" [width]="200">
</ngx-datatable-column>
<!-- 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>
<ngx-datatable-column name="Last Modified" prop="modified" [width]="200">
</ngx-datatable-column>
</ngx-datatable>
<!-- 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>

38
src/app/main/apps/file-manager/file-list/file-list.component.scss
View File

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

44
src/app/main/apps/file-manager/file-list/file-list.component.ts
View File

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

41
src/app/main/apps/file-manager/file-manager.component.html
View File

@ -3,9 +3,9 @@
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav p-24" align="start" opened="false" mode="over"
fuseMdSidenavHelper="simple-left-sidenav">
Sidenav
<md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
fuseMdSidenavHelper="file-manager-left-sidenav">
<fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
@ -13,19 +13,19 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column">
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR -->
<div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center">
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav">
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon>
</button>
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav"
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-right-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
@ -40,17 +40,20 @@
<!-- / TOOLBAR -->
<!-- BREADCRUMB -->
<div class="breadcrumb text-truncate" fxLayout="row" fxLayoutAlign="start center">
<span data-ng-repeat="path in vm.path">
{{path}}
<md-icon md-font-icon="icon-chevron-right" class="icon separator"></md-icon>
</span>
<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 id="file-uploader">
<button md-fab class="add-file-button mat-accent"
<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>
@ -62,9 +65,7 @@
<!-- CONTENT -->
<div class="content">
<fuse-file-list></fuse-file-list>
</div>
<!-- / CONTENT -->
@ -72,8 +73,8 @@
<!-- / CENTER -->
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
<md-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="file-manager-right-sidenav" md-is-locked-open="gt-md">
<fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
</md-sidenav>
<!-- / SIDENAV -->

57
src/app/main/apps/file-manager/file-manager.component.scss
View File

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

11
src/app/main/apps/file-manager/file-manager.component.ts
View File

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

7
src/app/main/apps/file-manager/file-manager.service.ts
View File

@ -7,8 +7,8 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class FileManagerService implements Resolve<any>
{
files: any[];
onFileSelected = new BehaviorSubject<any>(null);
onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
constructor(private http: Http)
{
@ -29,7 +29,6 @@ export class FileManagerService implements Resolve<any>
this.getFiles()
]).then(
([files]) => {
this.files = files;
resolve();
},
reject
@ -42,6 +41,8 @@ export class FileManagerService implements Resolve<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);
});