toc one page, projects data table

This commit is contained in:
annampak 2017-10-18 15:50:12 +03:00
parent deb527eef0
commit 45c1fb966e
11 changed files with 205 additions and 59 deletions

View File

@ -16,7 +16,7 @@ export class RestBase {
}
protocol: string = "http";
hostname: string = "localhost";//"dl010.madgik.di.uoa.gr";//
hostname: string = "dionysus.di.uoa.gr";//"dl010.madgik.di.uoa.gr";//
port: number = 7070;//8080;//
webappname: string = "dmp-backend";//"dmp-backend-new";//
restpath: string = "rest";

View File

@ -175,6 +175,16 @@
"tslib": "1.7.1"
}
},
"@angular/platform-server": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.4.5.tgz",
"integrity": "sha1-dvI7LDhO1zldwXk8+Fl4iDuiy1A=",
"requires": {
"parse5": "3.0.2",
"tslib": "1.7.1",
"xhr2": "0.1.4"
}
},
"@angular/router": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.6.tgz",
@ -240,8 +250,7 @@
"@types/node": {
"version": "6.0.88",
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz",
"integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ==",
"dev": true
"integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ=="
},
"@types/q": {
"version": "0.0.32",
@ -365,6 +374,57 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
"angular-2-data-table": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/angular-2-data-table/-/angular-2-data-table-0.1.2.tgz",
"integrity": "sha1-eiz/jPxKpxSpfTMwmLkRaqQourw="
},
"angular-4-data-table-bootstrap-4": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/angular-4-data-table-bootstrap-4/-/angular-4-data-table-bootstrap-4-0.2.0.tgz",
"integrity": "sha512-gw+3z96SSXZZFSjzAXEx69JecBZ9O5K2uMl/asCc7HFrLeS9Q2T0+HGrb4syODEBhJtey0JpzX4GGBotXuHfjg==",
"requires": {
"@angular/common": "4.3.6",
"@angular/core": "4.3.6",
"@angular/forms": "4.3.6",
"@angular/platform-browser": "4.3.6",
"@angular/platform-browser-dynamic": "4.3.6",
"@angular/platform-server": "4.4.5",
"@types/node": "8.0.44",
"rxjs": "5.4.3",
"ts-node": "3.3.0",
"zone.js": "0.8.17"
},
"dependencies": {
"@types/node": {
"version": "8.0.44",
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.44.tgz",
"integrity": "sha512-56TeARKE2uMi7xWhpRRws/QdnpSVx9i7E8esGiPYoj90jnonGfmV1vwRLvHWYjPxF5u5l7p5fgdKwdse+VeAQQ=="
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
},
"ts-node": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.3.0.tgz",
"integrity": "sha1-wTxqMCTjC+EYDdUwOPwgkonUv2k=",
"requires": {
"arrify": "1.0.1",
"chalk": "2.1.0",
"diff": "3.3.0",
"make-error": "1.3.0",
"minimist": "1.2.0",
"mkdirp": "0.5.1",
"source-map-support": "0.4.16",
"tsconfig": "6.0.0",
"v8flags": "3.0.0",
"yn": "2.0.0"
}
}
}
},
"angular-google-signin": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/angular-google-signin/-/angular-google-signin-0.1.5.tgz",
@ -690,8 +750,7 @@
"arrify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
"dev": true
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
},
"asap": {
"version": "2.0.6",
@ -1403,7 +1462,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
"integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
"dev": true,
"requires": {
"ansi-styles": "3.2.0",
"escape-string-regexp": "1.0.5",
@ -1414,7 +1472,6 @@
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
"integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
"dev": true,
"requires": {
"color-convert": "1.9.0"
}
@ -1422,14 +1479,12 @@
"has-flag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
"dev": true
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
},
"supports-color": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
"integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
"dev": true,
"requires": {
"has-flag": "2.0.0"
}
@ -1623,7 +1678,6 @@
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
"integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@ -1631,8 +1685,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "0.3.0",
@ -2268,8 +2321,7 @@
"diff": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/diff/-/diff-3.3.0.tgz",
"integrity": "sha512-w0XZubFWn0Adlsapj9EAWX0FqWdO4tz8kc3RiYdWLh4k/V8PTb6i0SMgXt0vRM3zyKnT8tKO7mUlieRQHIjMNg==",
"dev": true
"integrity": "sha512-w0XZubFWn0Adlsapj9EAWX0FqWdO4tz8kc3RiYdWLh4k/V8PTb6i0SMgXt0vRM3zyKnT8tKO7mUlieRQHIjMNg=="
},
"diffie-hellman": {
"version": "5.0.2",
@ -2717,8 +2769,7 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
"escope": {
"version": "3.6.0",
@ -5025,8 +5076,7 @@
"make-error": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.0.tgz",
"integrity": "sha1-Uq06M5zPEM5itAQLcI/nByRLi5Y=",
"dev": true
"integrity": "sha1-Uq06M5zPEM5itAQLcI/nByRLi5Y="
},
"map-obj": {
"version": "1.0.1",
@ -5248,8 +5298,7 @@
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
},
"mixin-object": {
"version": "2.0.1",
@ -5273,7 +5322,6 @@
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
}
@ -5881,6 +5929,14 @@
"error-ex": "1.3.1"
}
},
"parse5": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz",
"integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
"requires": {
"@types/node": "6.0.88"
}
},
"parsejson": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.3.tgz",
@ -7777,8 +7833,7 @@
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
},
"source-map-loader": {
"version": "0.2.1",
@ -7824,7 +7879,6 @@
"version": "0.4.16",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.16.tgz",
"integrity": "sha512-A6vlydY7H/ljr4L2UOhDSajQdZQ6dMD7cLH0pzwcmwLyc9u8PNI4WGtnfDDzX7uzGL6c/T+ORL97Zlh+S4iOrg==",
"dev": true,
"requires": {
"source-map": "0.5.7"
}
@ -8166,8 +8220,7 @@
"strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
},
"style-loader": {
"version": "0.13.2",
@ -8491,7 +8544,6 @@
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-6.0.0.tgz",
"integrity": "sha1-aw6DdgA9evGGT434+J3QBZ/80DI=",
"dev": true,
"requires": {
"strip-bom": "3.0.0",
"strip-json-comments": "2.0.1"
@ -8500,8 +8552,7 @@
"strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
}
}
},
@ -8776,8 +8827,7 @@
"user-home": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
"integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
"dev": true
"integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA="
},
"useragent": {
"version": "2.2.1",
@ -8842,7 +8892,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.0.0.tgz",
"integrity": "sha512-AGl+C+4qpeSu2g3JxCD/mGFFOs/vVZ3XREkD3ibQXEqr4Y4zgIrPWW124/IKJFHOIVFIoH8miWrLf0o84HYjwA==",
"dev": true,
"requires": {
"user-home": "1.1.1"
}
@ -9451,6 +9500,11 @@
"integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=",
"dev": true
},
"xhr2": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz",
"integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8="
},
"xml-char-classes": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
@ -9584,8 +9638,7 @@
"yn": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
"integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
"dev": true
"integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo="
},
"zone.js": {
"version": "0.8.17",

View File

@ -21,6 +21,8 @@
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/router": "^4.3.6",
"angular-2-data-table": "^0.1.2",
"angular-4-data-table-bootstrap-4": "^0.2.0",
"angular-google-signin": "^0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",

View File

@ -4,6 +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-4-data-table-bootstrap-4';
import { AppComponent } from './app.component';
import { DynamicFormComponent } from './form/dynamic-form.component';
@ -40,7 +41,8 @@ import { PaginationService } from './services/pagination.service';
HttpModule,
HttpClientModule,
ProjectsModule,
AppRoutingModule
AppRoutingModule,
DataTableModule
],
providers: [ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService],

View File

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

View File

@ -1,7 +1,11 @@
import { Injectable } from '@angular/core';
import { Dmp } from './dmp'
export class Project {
name: string;
id: string;
abbreviation: string;
definition: string;
uri: string;
dmp: Dmp;
}

View File

@ -1,9 +1,8 @@
<body data-spy="scroll" data-target="#toc">
<nav id="toc" data-toggle="toc">
<ul class="nav flex-column">
<li class="nav-item">
<div *ngFor="let section of dataModel.sections">
<div *ngFor="let group of section.groupFields">
<li class="nav-item">
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
<ul>
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
<ul *ngFor="let field of group.groupFields">
@ -18,7 +17,7 @@
</div>
<!-- <div *ngFor="let group of dataModel.groups">
<ul>
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>

View File

@ -0,0 +1,44 @@
<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>#</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>{{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>

View File

@ -1,6 +1,7 @@
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 { ProjectsComponent } from './projects.component';
@ -11,7 +12,8 @@ import { ProjectDetailComponent } from './project.detail';
imports: [
CommonModule,
FormsModule,
ProjectRoutingModule
ProjectRoutingModule,
DataTableModule
],
declarations: [
ProjectsComponent,

View File

@ -1,31 +1,38 @@
import { Component, OnInit } from '@angular/core';
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',
template: `
<h1 class="title">Projects</h1>
templateUrl: 'project.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>
// <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>
`,
// <router-outlet></router-outlet>
// `,
providers: [ServerService]
})
export class ProjectsComponent implements OnInit{
returnUrl: string;
projects: Project[];
@Input() projects: Project[];
projectResource :DataTableResource<Project>;
@Input() projectCount = 0;
@ViewChild(DataTable) projectsTable;
constructor(
private serverService: ServerService,
@ -46,12 +53,38 @@ export class ProjectsComponent implements OnInit{
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; debugger;
pr.dmp.id = resp.dmp =! null? resp.dmp.id : null;
pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
this.projects.push(pr);
this.afterLoad();
});
}
);
}
);
}
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'
};
}

View File

@ -75,7 +75,7 @@ export class ServerService {
console.log("google-token: "+ this.tokenService.getToken());
return this.httpClient.get<any>("http://dl010.madgik.di.uoa.gr:8080/dmp-backend-no-sec/rest/project/listAllLabelIDs");
return this.httpClient.get<any>("http://dl010.madgik.di.uoa.gr:8080/dmp-backend-no-sec/rest/project/getAll");
// let projects :Project[] =[];