MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

new page dataset, data table 4

This commit is contained in:
annampak 2017-10-18 19:30:39 +03:00
parent eced040f8d
commit cb6572c72e
12 changed files with 229 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmp-frontend/src/app/app-routing.module.ts
View File

@ -5,6 +5,7 @@ import { DynamicFormComponent } from './form/dynamic-form.component';
import { LoginComponent } from './login/login-page';
import { AuthGuard } from './guards/auth.guard';
import { ProjectsComponent } from './projects/projects.component';
import { DatasetsComponent } from './datasets/dataset.component';
const appRoutes: Routes = [
{ path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },

4
dmp-frontend/src/app/app.module.ts
View File

@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes, Router } from '@angular/router';
import {DataTableModule } from 'angular-2-data-table';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import { AppComponent } from './app.component';
import { RestBase } from './services/rest-base';
@ -24,6 +24,7 @@ import { TocComponent } from './form/tableOfContents/toc.component';
import { ProjectsModule } from './projects/project.module';
import { PaginationService } from './services/pagination.service';
import { EestoreService } from './services/eestore.service';
import { DatasetsModule } from './datasets/dataset.module';
@NgModule({
declarations: [
@ -43,6 +44,7 @@ import { EestoreService } from './services/eestore.service';
HttpModule,
HttpClientModule,
ProjectsModule,
DatasetsModule,
AppRoutingModule,
DataTableModule

22
dmp-frontend/src/app/datasets/dataset-routing.module.ts Normal file
View File

@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DatasetsComponent } from './dataset.component';
//import { ProjectDetailComponent } from './project.detail';
import { DynamicFormComponent } from '../form/dynamic-form.component';
import { AuthGuard } from '../guards/auth.guard';
const datasetsRoutes: Routes = [
{ path: 'dataset', component: DatasetsComponent },
{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [
RouterModule.forChild(datasetsRoutes)
],
exports: [
RouterModule
]
})
export class DatasetRoutingModule { }

93
dmp-frontend/src/app/datasets/dataset.component.ts Normal file
View File

@ -0,0 +1,93 @@
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import {GoogleSignInSuccess} from 'angular-google-signin';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dmp } from '../entities/model/Dmp';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
@Component({
selector: 'projects',
templateUrl: 'dataset.html',
// template: `
// <h1 class="title">Projects</h1>
// <ul class="list-group col-md-4">
// <li *ngFor="let project of projects"
// class="list-group-item">
// <a [routerLink]="['/dynamic-form', project.id]" >
// {{ project.name }}
// </a>
// </li>
// </ul>
// <router-outlet></router-outlet>
// `,
providers: [ServerService]
})
export class DatasetsComponent implements OnInit{
returnUrl: string;
@Input() projects: Project[];
projectResource :DataTableResource<Project>;
@Input() projectCount = 0;
@ViewChild(DataTable) projectsTable;
constructor(
private serverService: ServerService,
private route: ActivatedRoute,
private router: Router){
}
ngOnInit() {
//this.projects = this.serverService.getDummyProjects();
this.projects = [];
this.serverService.getProjects().subscribe(
response => {
console.log("response");
console.log(response);
response.forEach(resp => {
let pr = new Project();
pr.id = resp.id;
pr.name = resp.label;
pr.abbreviation = resp.abbreviation;
pr.definition = resp.definition;
pr.uri = resp.uri;
pr.dmp = new Dmp();
// pr.dmp.id = resp.dmp;
pr.dmp.id = resp.dmp =! null || resp.dmp ==! undefined ? resp.dmp.id : null;
// pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
this.projects.push(pr);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();
this.projectResource.query(params).then(projects => this.projects = projects);
});
}
);
}
reloadProjects(params) {
this.projectResource.query(params).then(projects => this.projects = projects);
}
afterLoad(){
this.projectResource = new DataTableResource(this.projects);
this.projectResource.count().then(count => this.projectCount = count);
}
// special params:
translations = <DataTableTranslations>{
indexColumn: 'Index column',
expandColumn: 'Expand column',
selectColumn: 'Select column',
paginationLimit: 'Max results',
paginationRange: 'Result range'
};
}

46
dmp-frontend/src/app/datasets/dataset.html Normal file
View File

@ -0,0 +1,46 @@
<div style="margin: auto; max-width: 1000px; margin-top:50px">
<data-table id="films-grid" headerTitle="My Projects" [items]="projects" [itemCount]="projectCount" (reload)="reloadProjects($event)"
[limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false"
[expandableRows]="true" [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true">
<template #dataTableExpand let-item="item">
<div>
<!-- <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a> -->
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Dmp</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>-->
<td> <a [routerLink]="['/dataset']"> {{ item.dmp.id }}</a></td>
<td>{{item.dmp.id}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'id'" [header]="'Id'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'uri'" [header]="'Uri'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'definition'" [header]="'Definition'" [sortable]="true">
</data-table-column>
</data-table>
<div style="margin-top: 10px">
<b>Selected:</b>
<span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
<span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
</div>
</div>

24
dmp-frontend/src/app/datasets/dataset.module.ts Normal file
View File

@ -0,0 +1,24 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import { DatasetsComponent } from './dataset.component';
import { DatasetRoutingModule } from './dataset-routing.module';
//import { ProjectDetailComponent } from './project.detail';
@NgModule({
imports: [
CommonModule,
FormsModule,
DatasetRoutingModule,
DataTableModule
],
declarations: [
DatasetsComponent
//ProjectDetailComponent
],
providers: [ ]
})
export class DatasetsModule {}

6
dmp-frontend/src/app/entities/model/dataset.ts Normal file
View File

@ -0,0 +1,6 @@
import { Injectable } from '@angular/core';
export class Dataset {
id:string;
name: string;
}

2
dmp-frontend/src/app/entities/model/project.ts
View File

@ -1,5 +1,6 @@
import { Injectable } from '@angular/core';
import { Dmp } from './dmp'
import { Dataset } from './dataset'
export class Project {
name: string;
@ -8,4 +9,5 @@ export class Project {
definition: string;
uri: string;
dmp: Dmp;
dataset: Dataset;
}

16
dmp-frontend/src/app/projects/project.css Normal file
View File

@ -0,0 +1,16 @@
:host /deep/ .index-column,
:host /deep/ .index-column-header {
text-align: right;
}
:host /deep/ .data-table .data-table-row.selected {
background-color: #E4EDF9;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

11
dmp-frontend/src/app/projects/project.html
View File

@ -8,17 +8,19 @@
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Dmp</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>
<!-- <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>-->
<td> <a [routerLink]="['/dataset']"> {{ item.dmp.id }}</a></td>
<td>{{item.dmp.id}}</td>
</tr>
</tbody>
</table>
@ -41,4 +43,7 @@
<span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
<span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
</div>
</div>
<router-outlet></router-outlet>

2
dmp-frontend/src/app/projects/project.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {DataTableModule } from 'angular-2-data-table';
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
import { ProjectsComponent } from './projects.component';

6
dmp-frontend/src/app/projects/projects.component.ts
View File

@ -4,7 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dmp } from '../entities/model/Dmp';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-2-data-table';
import { Dataset } from '../entities/model/dataset';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
@Component({
selector: 'projects',
@ -59,7 +60,8 @@ export class ProjectsComponent implements OnInit{
pr.dmp = new Dmp();
// pr.dmp.id = resp.dmp;
pr.dmp.id = resp.dmp =! null || resp.dmp ==! undefined ? resp.dmp.id : null;
// pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
pr.dataset = new Dataset();
pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
this.projects.push(pr);
var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad();