inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simple breadcrumb for ng2 document list

Browse Source
This commit is contained in:
Denys Vuika
2016-04-15 22:17:32 +01:00
parent 398440f904
commit 0625bf8116
2 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
demo-shell-ng2/app/components/document-list.component.ts
View File

@@ -7,30 +7,48 @@ import {DocumentEntity} from "./core/entities/document.entity";
selector: 'alfresco-document-list',
styles: [
`
:host .breadcrumb {
margin-bottom: 4px;
}
:host .folder-icon {
float: left;
margin-right: 10px;
}
:host .file-icon {
width: 52px;
height: 52px;
float: left;
margin-right: 10px;
}
:host .document-header:hover {
text-decoration: underline;
}
`
],
template: `
<ol *ngIf="breadcrumb" class="breadcrumb">
<li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
<span *ngSwitchWhen="true">{{r.name}}</span>
<a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
</li>
</ol>
<div *ngIf="folder" class="list-group">
<a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
<a href="#" *ngIf="!breadcrumb && canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
<i class="fa fa-level-up"></i> ...
</a>
<a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item clearfix">
<i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"></i>
<img *ngIf="thumbnails && !document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
<h4 class="list-group-item-heading">
<h4 class="list-group-item-heading document-header">
{{document.displayName}}
</h4>
<p class="list-group-item-text">{{document.description}}</p>
<small>
Modified {{document.modifiedOn}} by {{document.modifiedBy}}
</small>
</a>
</div>
`,
@@ -40,20 +58,25 @@ export class DocumentList implements OnInit {
// example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
@Input() navigate: boolean = true;
// example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
@Input() breadcrumb: boolean = false;
// example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
@Input('folder-icon-class') folderIconClass: string = 'fa fa-folder-o fa-4x';
// example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
@Input() thumbnails: boolean = true;
rootFolderPath: string = 'swsdp/documentLibrary';
rootFolder = {
name: 'Document Library',
path: 'swsdp/documentLibrary'
};
currentFolderPath: string = 'swsdp/documentLibrary';
folder: FolderEntity;
errorMessage;
private route: string[] = [];
route: any[] = [];
canNavigateParent(): boolean {
return this.currentFolderPath !== this.rootFolderPath;
return this.currentFolderPath !== this.rootFolder.path;
}
constructor (
@@ -61,8 +84,8 @@ export class DocumentList implements OnInit {
) {}
ngOnInit() {
this.route.push(this.rootFolderPath);
this.displayFolderContent(this.rootFolderPath);
this.route.push(this.rootFolder);
this.displayFolderContent(this.rootFolder.path);
}
private displayFolderContent(path) {
@@ -82,9 +105,9 @@ export class DocumentList implements OnInit {
if (this.navigate) {
this.route.pop();
var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolderPath;
var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
if (parent) {
this.displayFolderContent(parent);
this.displayFolderContent(parent.path);
}
}
}
@@ -97,12 +120,27 @@ export class DocumentList implements OnInit {
if (this.navigate && item) {
if (item.isFolder) {
var path = this.getItemPath(item);
this.route.push(path);
this.route.push({
name: item.displayName,
path: path
});
this.displayFolderContent(path);
}
}
}
goToRoute(r, $event) {
if ($event) {
$event.preventDefault();
}
var idx = this.route.indexOf(r);
if (idx > -1) {
this.route.splice(idx + 1);
this.displayFolderContent(r.path);
}
}
private getItemPath(item: DocumentEntity):string {
var container = item.location.container;
var path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';

11
demo-shell-ng2/app/components/page1.view.ts
View File

@@ -5,12 +5,14 @@ import {DocumentList} from "./document-list.component";
template: `
<div class="container">
<div class="row">
<label>
<input type="checkbox" [(ngModel)]="thumbnails"> Toggle Thumbnails
</label>
<div><label><input type="checkbox" [(ngModel)]="thumbnails"> Toggle Thumbnails</label></div>
<div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Toggle Breadcrumb</label></div>
</div>
<div class="row">
<alfresco-document-list #list [thumbnails]="thumbnails"></alfresco-document-list>
<alfresco-document-list #list
[thumbnails]="thumbnails"
[breadcrumb]="breadcrumb">
</alfresco-document-list>
</div>
</div>
`,
@@ -18,4 +20,5 @@ import {DocumentList} from "./document-list.component";
})
export class Page1View {
thumbnails: boolean = true;
breadcrumb: boolean = false;
}