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

project table

This commit is contained in:
annampak 2017-11-01 11:56:35 +02:00
parent 65198e1907
commit 3e9c5dbe0f
7 changed files with 175 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,11 +60,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
],
providers: [
// {
// provide: HTTP_INTERCEPTORS,
// useClass: GlobalInterceptor,
// multi: true,
// },
{
provide: HTTP_INTERCEPTORS,
useClass: GlobalInterceptor,
multi: true,
},
ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService
],
bootstrap: [AppComponent]

27
dmp-frontend/src/app/pipes/project-table-filter.pipe.ts Normal file
View File

@ -0,0 +1,27 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "projectTableFilter"
})
export class ProjectTableFilterPipe implements PipeTransform {
transform(array: any[], query: string): any {
if (query) {
return _.filter(array, row => {
return (
row.label.indexOf(query) > -1 ||
//row.version == query ||
row.id.indexOf(query) > -1
)
});
}
return array;
}
}

40
dmp-frontend/src/app/projects/project.css
View File

@ -9,4 +9,44 @@
a.editGridColumn{
color: #333;
}
.invisible {
display:none;
}
.visible {
display:block;
}
tr.hover:hover > * {
background-color: #eeeeee;
}
.editor-container{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.button-150px {
max-width: 150px;
}
.ng-template{
text-align: right;
}
.grayout-empty-table {
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
text-align: center;
vertical-align: middle;
}
.btncustom{
background-color:#337ab7;
color:white;
margin-top:15px;
}

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

@ -1,53 +1,76 @@
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
<div style="margin: auto; max-width: 1000px; margin-top:50px">
<div>
<span>Filter: </span>
<input type="text" id="myInput" (keyup)="myFunction()" placeholder="Search for labels.." title="Type in a name">
</div>
<data-table id="projects-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">
<data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'startDate'" [header]="'Start Date'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'endDate'" [header]="'End Date'" [sortable]="true">
</data-table-column>
<data-table-column [property]="'active'" [header]="'Status'" [width]="100" [resizable]="true">
<template #dataTableHeader let-item="item">
<span>Active</span>
</template>
<template #dataTableCell let-item="item">
<span style="color: grey">
<span class="fa fa-check" *ngIf="item.active"></span>
<span class="fa fa-times" *ngIf="!item.active"></span>
</span>
</template>
</data-table-column>
<data-table-column header="Actions">
<template #dataTableHeader let-item="item">
<i>Actions</i>
</template>
<template #dataTableCell let-item="item">
<a class="editGridColumn" (click) = "editRow(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
</template>
</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>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">New Project</button>
<!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
<option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
</select> -->
</div>
<table class="table table-striped" [mfData]="tableData | dmpTableFilter : filterQuery"
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th colspan="1">
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
</th>
<th>
<button class="btn btn-default" (click)="refreshTable($event)">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</th>
</tr>
<tr>
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
<mfDefaultSorter by="id">ID</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="label">Label</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="abbreviation">Αbbreviation</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="startDate">Start Date</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="endDate">End Date</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="description">Description</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="status">Status</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter>Actions </mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
<td colspan="7">No elements</td>
</tr>
<tr *ngFor="let project of mf.data" class="hover">
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
<td>{{project?.label}}</td>
<td>{{project?.abbreviation}}</td>
<td>{{project?.startDate}}</td>
<td>{{project?.endDate}}</td>
<td>{{project?.description}}</td>
<td>{{project?.status}}</td>
<td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i>
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i>
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete DMP"></i>
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

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

@ -1,7 +1,8 @@
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 {DataTableModule} from 'angular2-datatable';
import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';
import { ProjectsComponent } from './projects.component';
@ -21,7 +22,8 @@ import { ModalComponent } from '../modal/modal.component';
declarations: [
ProjectsComponent,
ProjectDetailComponent,
ModalComponent
ModalComponent,
ProjectTableFilterPipe
],
providers: [ ]
})

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

@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dmp } from '../entities/model/dmp';
import { Dataset } from '../entities/model/dataset';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
import {DataTable} from 'angular2-datatable';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
import { ModalComponent } from '../modal/modal.component';
@ -21,10 +22,32 @@ import { TokenService, TokenProvider } from '../services/token.service';
})
export class ProjectsComponent implements OnInit{
// Start ALTERNATIVE
//whole dmp data model
tableData : any[] = new Array();
//organisation editor data model
editingOrganisation: any = {};
organisationEditorForm : any;
//required by the table
public filterQuery = "";
public rowsOnPage = 10;
//public sortBy = "email";
public sortOrder = "asc";
//visibility rules for containers
tableVisible: boolean = true;
editorVisible: boolean = false;
// for tableIds
showIDs : boolean = false;
// END ALTERNATIVE
returnUrl: string;
@Input() projects: Project[];
projectResource :DataTableResource<Project>;
datasetResource :DataTableResource<Dataset>;
@Input() projectCount = 0;
@Input() datasetDropDown:DropdownField;
//@Input() dataSetVisibe:boolean;
@ -63,7 +86,7 @@ export class ProjectsComponent implements OnInit{
this.projects = [];
this.serverService.getProjectOfUer().subscribe( //getProjects()
response => {
this.tableData = response;
response.forEach(resp => {
let pr = new Project();
@ -72,15 +95,7 @@ export class ProjectsComponent implements OnInit{
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.dataset = new Dataset();
// pr.dmp.dataset = resp.dmp !=null && 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);
this.projects.push(pr);
}
);
}
@ -100,16 +115,6 @@ export class ProjectsComponent implements OnInit{
);
}
reloadProjects(params) {
this.projectResource = new DataTableResource(this.projects);
this.projectResource.query(params).then(projects => this.projects = projects);
}
afterLoad(){
this.projectResource = new DataTableResource(this.projects);
this.projectResource.count().then(count => this.projectCount = count);
}
getDMPs(){
this.serverService.listDmpsLabelID().subscribe(
response =>{
@ -167,14 +172,6 @@ SaveNewProject(){
);
}
// special params:
translations = <DataTableTranslations>{
indexColumn: 'Index column',
expandColumn: 'Expand column',
selectColumn: 'Select column',
paginationLimit: 'Max results',
paginationRange: 'Result range'
};
signOut() {
    this.serverService.logOut();

2
dmp-frontend/src/app/services/interceptor.ts
View File

@ -20,7 +20,7 @@ export class GlobalInterceptor implements HttpInterceptor {
}
*/
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err instanceof HttpErrorResponse) {debugger;
if (err.status === 401) {
var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {