inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

separate page for data table within demo app

Browse Source
This commit is contained in:
Denys Vuika 2016-05-18 12:55:48 +01:00
parent a73591773b
commit ca630772d0
7 changed files with 166 additions and 40 deletions

6
demo-shell-ng2/app/app.component.html

@ -8,7 +8,8 @@
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">Files</a>
<a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">DocumentList</a>
<a class="mdl-navigation__link" data-automation-id="datatable" href="" [routerLink]="['DataTable']">DataTable</a>
<a class="mdl-navigation__link" data-automation-id="uploader" href="" [routerLink]="['Uploader']">Uploader</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
</nav>
@ -43,7 +44,8 @@
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Alfresco</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">Files</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">DocumentList</a>
<a class="mdl-navigation__link" href="" [routerLink]="['DataTable']" (click)="hideDrawer()">DataTable</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Uploader']" (click)="hideDrawer()">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login</a>
</nav>

35
demo-shell-ng2/app/app.component.ts

@ -14,16 +14,18 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AlfrescoAuthenticationService} from 'ng2-alfresco-login/ng2-alfresco-login';
import {MDL} from 'ng2-alfresco-core/material';
import {FilesComponent} from './components/files/files.component';
import {AlfrescoLoginComponent} from 'ng2-alfresco-login/ng2-alfresco-login';
import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import {UploadButtonComponent} from 'ng2-alfresco-upload/ng2-alfresco-upload';
import { Component } from 'angular2/core';
import { Router, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { AlfrescoAuthenticationService } from 'ng2-alfresco-login/ng2-alfresco-login';
import { MDL } from 'ng2-alfresco-core/material';
import { FilesComponent } from './components/files/files.component';
import { AlfrescoLoginComponent } from 'ng2-alfresco-login/ng2-alfresco-login';
import { AuthRouterOutlet } from './components/router/AuthRouterOutlet';
import { AlfrescoSettingsService } from 'ng2-alfresco-core/services';
import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';
import { UploadButtonComponent } from 'ng2-alfresco-upload/ng2-alfresco-upload';
import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
declare var document: any;
@ -36,26 +38,27 @@ declare var document: any;
@RouteConfig([
{path: '/home', name: 'Home', component: FilesComponent},
{path: '/', name: 'Files', component: FilesComponent, useAsDefault: true},
{path: '/datatable', name: 'DataTable', component: DataTableDemoComponent},
{path: '/uploader', name: 'Uploader', component: UploadButtonComponent},
{path: '/login', name: 'Login', component: AlfrescoLoginComponent}
])
export class AppComponent {
translate: TranslateService;
constructor(public auth:AlfrescoAuthenticationService,
public router:Router,
constructor(public auth: AlfrescoAuthenticationService,
public router: Router,
translate: TranslateService,
alfrescoSettingsService:AlfrescoSettingsService) {
alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://192.168.99.100:8080';
this.translationInit(translate);
}
isActive(instruction:any[]):boolean {
isActive(instruction: any[]): boolean {
return this.router.isRouteActive(this.router.generate(instruction));
}
isLoggedIn():boolean {
isLoggedIn(): boolean {
return this.auth.isLoggedIn();
}
@ -67,7 +70,7 @@ export class AppComponent {
);
}
changeLanguage(lang:string) {
changeLanguage(lang: string) {
this.translate.use(lang);
}

72
demo-shell-ng2/app/components/datatable/datatable-demo.component.html Normal file

@ -0,0 +1,72 @@
<div class="p-10">
<alfresco-datatable>
<data-columns>
<data-column source="$thumbnail"></data-column>
<data-column
title="{{'DATATABLE.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
class="full-width name-column">
</data-column>
<data-column
title="{{'DATATABLE.COLUMNS.CREATED_BY' | translate}}"
source="createdByUser.displayName">
</data-column>
<data-column
title="{{'DATATABLE.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
</data-column>
</data-columns>
<data-actions>
<data-action
target="folder"
type="button"
icon="delete"
handler="system1">
</data-action>
<data-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</data-action>
<data-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</data-action>
<!-- document actions -->
<data-action
target="document"
type="button"
icon="account_circle"
handler="my-handler">
</data-action>
<data-action
target="document"
type="button"
icon="cloud_download"
handler="download">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</data-action>
</data-actions>
</alfresco-datatable>
</div>

38
demo-shell-ng2/app/components/datatable/datatable-demo.component.ts Normal file

@ -0,0 +1,38 @@
/**
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {Component} from 'angular2/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
ALFRESCO_DATATABLE_PROVIDERS
} from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
declare let __moduleName:string;
@Component({
moduleId: __moduleName,
selector: 'datatable-demo',
templateUrl: './datatable-demo.component.html',
directives: [ALFRESCO_DATATABLE_DIRECTIVES],
providers: [ALFRESCO_DATATABLE_PROVIDERS],
pipes: [TranslatePipe]
})
export class DataTableDemoComponent {
}

6
demo-shell-ng2/app/css/app.css

@ -2,4 +2,8 @@
.p-10 {
padding: 10px;
}
}
.m-10 {
margin: 10px;
}

19
demo-shell-ng2/i18n/en.json

@ -18,5 +18,24 @@
"CUSTOM": "Custom action"
}
}
},
"DATATABLE": {
"COLUMNS": {
"DISPLAY_NAME": "Display name",
"CREATED_BY": "Created by",
"CREATED_ON": "Created on"
},
"ACTIONS": {
"FOLDER": {
"SYSTEM_1": "System folder action 1",
"CUSTOM": "Custom folder action"
},
"DOCUMENT": {
"DOWNLOAD": "Download",
"SYSTEM_2": "System document action 2",
"CUSTOM": "Custom action"
}
}
}
}

30
demo-shell-ng2/index.html

@ -37,6 +37,7 @@
map: {
'ng2-uploader': 'node_modules/ng2-uploader',
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable',
'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
@ -48,27 +49,14 @@
format: 'register',
defaultExtension: 'js'
},
'ng2-uploader': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-documentlist': {
defaultExtension: 'js'
},
'ng2-alfresco-login': {
defaultExtension: 'js'
},
'ng2-alfresco-upload': {
defaultExtension: 'js'
},
'ng2-translate': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
'ng2-uploader': {defaultExtension: 'js'},
'ng2-alfresco-core': {defaultExtension: 'js'},
'ng2-alfresco-documentlist': {defaultExtension: 'js'},
'ng2-alfresco-login': {defaultExtension: 'js'},
'ng2-alfresco-upload': {defaultExtension: 'js'},
'ng2-alfresco-datatable': {defaultExtension: 'js'},
'ng2-translate': {defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'}
}
});
System.import('app/main')