Dataset Profile Datatable Admin- material was implemented

This commit is contained in:
annampak 2018-02-06 15:56:33 +02:00
parent b3bf19be0b
commit 3df3ed15ce
10 changed files with 354 additions and 8 deletions

View File

@ -16,6 +16,7 @@ const appRoutes: Routes = [
{ path: '', redirectTo: '/welcome', pathMatch: 'full' },
{ path: "unauthorized", loadChildren: './unauthorized/unauthorized.module#UnauthorizedModule' },
{ path: "users", loadChildren: './users/users.module#UsersModule' },
{ path: "datasetsProfiles", loadChildren: './datasets-admin-listing/dataset-admin.module#DatasetAdminModule' },
{ path: "welcome", component: WelcomepageComponent }
];

View File

@ -2,7 +2,6 @@ import { RouterModule, Routes } from '@angular/router';
import { FormComponent } from 'app/dataset-profile-form/form/form.component';
export const DatasetProfileRoutes: Routes = [
//{ path: "new/:dmpId", component: DatasetWizardComponent, canActivate: [AuthGuard] }
{
path: ':id',
component: FormComponent

View File

@ -0,0 +1,94 @@
<div class="container-fluid">
<h3>{{titlePrefix}} {{'DATASET-LISTING.TITLE' | translate}}</h3>
<app-datasets-criteria-component></app-datasets-criteria-component>
<mat-card class="mat-card">
<mat-card-header>
<mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
</mat-card-header>
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="dmp">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container>
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Submission Time -->
<ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="rowClick(row.id)"><mat-icon>mode_edit</mat-icon>{{'DATASET-LISTING.ACTIONS.EDIT' | translate}}</button>
<!-- <button *ngIf="row.status==1" mat-menu-item (click)="rowClick(row.id)"><mat-icon>visibility</mat-icon>{{'DATASET-LISTING.ACTIONS.VIEW' | translate}}</button>
<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/form'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>

View File

@ -0,0 +1,35 @@
.mat-table {
margin: 24px;
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
.full-width {
width: 100%;
}
.mat-card {
margin: 16px 0;
}
.mat-row {
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
}
// mat-row:nth-child(even){
// background-color:red;
// }
mat-row:nth-child(odd){
background-color:#eef0fb;
}

View File

@ -0,0 +1,156 @@
import { DataTableRequest } from '../models/data-table/DataTableRequest';
import { DatasetListingModel } from '../models/datasets/DatasetListingModel';
import { DatasetCriteria } from '../models/criteria/dataset/DatasetCriteria';
import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
import { Router, Params, ActivatedRoute } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { DataSource } from "@angular/cdk/table";
import { Observable } from "rxjs/Observable";
import { PageEvent } from '@angular/material';
import { DataManagementPlanService } from "@app/services/data-management-plan/data-management-plan.service";
import { DataManagementPlanModel } from "@app/models/data-managemnt-plans/DataManagementPlanModel";
import { DatasetCriteriaComponent } from '@app/shared/components/criteria/datasets/datasets-criteria.component';
import { DatasetProfileAdmin } from '@app/services/datasetProfileAdmin/datasetProfileAfmin.service';
@Component({
selector: 'app-dataset-admin-listing-component',
templateUrl: 'dataset-admin-listing.component.html',
styleUrls: ['./dataset-admin-listing.component.scss'],
providers: [DatasetProfileAdmin, DataManagementPlanService]
})
export class DatasetAdminListingComponent implements OnInit {
@ViewChild(MatPaginator) _paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(DatasetCriteriaComponent) criteria: DatasetCriteriaComponent;
dataSource: DatasetDataSource | null;
displayedColumns: String[] = ['label', 'dmp', 'profile', 'dataRepositories', 'registries', 'services', 'description', 'created', 'actions'];
pageEvent: PageEvent;
titlePrefix: String;
dmpId: String;
statuses = [
{ value: '0', viewValue: 'Active' },
{ value: '1', viewValue: 'Inactive' }
];
constructor(
private datasetService: DatasetProfileAdmin,
private router: Router,
private languageService: TranslateService,
public snackBar: MatSnackBar,
public route: ActivatedRoute,
public dataManagementPlanService: DataManagementPlanService
) {
}
ngOnInit() {
this.route.params.subscribe((params: Params) => {
this.dmpId = params['dmpId'];
if (this.dmpId != null) this.setDmpTitle(this.dmpId);
this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
this.refresh();
this.criteria.setRefreshCallback(() => this.refresh());
});
}
setDmpTitle(dmpId: String) {
this.dataManagementPlanService.getSingle(dmpId).map(data => data as DataManagementPlanModel)
.subscribe(data => {
this.titlePrefix = data.label;
});
}
refresh() {
this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
}
rowClick(rowId: String) {
this.router.navigate(['form/' + rowId]);
}
getDefaultCriteria(dmpId: String): DatasetCriteria {
const defaultCriteria = new DatasetCriteria();
if (dmpId != null) {
defaultCriteria.dmpIds.push(dmpId);
}
return defaultCriteria;
}
// makeItPublic(id: String) {
// debugger;
// this.datasetService.makeDatasetPublic(id).subscribe();
// }
}
export class DatasetDataSource extends DataSource<DatasetListingModel> {
totalCount = 0;
isLoadingResults = false;
constructor(
private _service: DatasetProfileAdmin,
private _paginator: MatPaginator,
private _sort: MatSort,
private _languageService: TranslateService,
private _snackBar: MatSnackBar,
private _criteria: DatasetCriteriaComponent
) {
super();
}
connect(): Observable<DatasetListingModel[]> {
const displayDataChanges = [
this._paginator.page
//this._sort.matSortChange
];
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
setTimeout(() => {
this.isLoadingResults = true;
});
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array()
if (this._sort.active) fields = this._sort.direction === "asc" ? ["+" + this._sort.active] : ["-" + this._sort.active];
const request = new DataTableRequest<DatasetCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = this._criteria.criteria;
return this._service.getPaged(request);
})
/*.catch((error: any) => {
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
duration: 3000,
extraClasses: ['snackbar-warning']
});
//this._criteria.criteria.onCallbackError(error);
return Observable.of(null);
})*/
.map(result => {
setTimeout(() => {
this.isLoadingResults = false;
});
return result;
})
.map(result => {
if (!result) { return []; }
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
return result.data;
});
}
disconnect() {
// No-op
}
}

View File

@ -0,0 +1,54 @@
import { RouterModule } from '@angular/router';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { DatasetService } from '../services/dataset/dataset.service';
import { DynamicFormModule } from '../form/dynamic-form.module';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { DatasetAdminRoutes } from './dataset-admin.routes';
import { DatasetAdminListingComponent } from './dataset-admin-listing.component';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module'
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpClientModule,
SharedModule,
RouterModule.forChild(DatasetAdminRoutes),
ReactiveFormsModule,
DynamicFormModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
],
declarations: [
DatasetAdminListingComponent,
],
exports: [
DatasetAdminListingComponent,
RouterModule
],
providers: [
DatasetService
]
})
export class DatasetAdminModule {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
}
}
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, 'assets/lang/', '.json');
}

View File

@ -0,0 +1,7 @@
import { AuthGuard } from '../guards/auth.guard';
import { DatasetAdminListingComponent } from './dataset-admin-listing.component';
import { RouterModule, Routes } from '@angular/router';
export const DatasetAdminRoutes: Routes = [
{ path: '', component: DatasetAdminListingComponent, canActivate: [AuthGuard] },
];

View File

@ -9,6 +9,7 @@ import { DatasetModel } from '../../models/datasets/DatasetModel';
import { DatasetCriteria } from '../../models/criteria/dataset/DatasetCriteria';
import { DatasetProfileModelAdmin } from '../../models/datasetProfileAdmin/DatasetProfileModelAdmin';
import { DatasetListingModel } from '@app/models/datasets/DatasetListingModel';
@Injectable()
@ -36,12 +37,9 @@ export class DatasetProfileAdmin {
getDatasetProfileById(datasetProfileID){
return this.http.get<DatasetProfileModelAdmin>(this.actionUrl + 'get/' + datasetProfileID, { headers: this.headers })
}
// getPaged(dataTableRequest: DataTableRequest<DatasetCriteria>): Observable<DataTableData<DatasetListingModel>> {
// return this.http.post<DataTableData<DatasetListingModel>>(this.actionUrl + 'getPaged', dataTableRequest, { headers: this.headers });
// }
// makeDatasetPublic(id: String){
// return this.http.get(this.actionUrl + 'makepublic/' + id, { headers: this.headers })
// }
getPaged(dataTableRequest: DataTableRequest<DatasetCriteria>): Observable<DataTableData<DatasetListingModel>> {
return this.http.post<DataTableData<DatasetListingModel>>(this.actionUrl + 'datasetprofiles/getPaged', dataTableRequest, { headers: this.headers });
}
}

View File

@ -5,6 +5,7 @@
<button mat-button class="navbar-button" routerLink="/dmps">{{'NAV-BAR.DMPS' | translate}}</button>
<button mat-button class="navbar-button" routerLink="/datasets">{{'NAV-BAR.DATASETS' | translate}}</button>
<button *ngIf="isAdmin()" mat-button class="navbar-button" routerLink="/users">{{'NAV-BAR.USERS' | translate}}</button>
<button *ngIf="isAdmin()" mat-button class="navbar-button" routerLink="/datasetsProfiles">{{'NAV-BAR.DATASETS(ADMIN)' | translate}}</button>
</div>
<span class="navbar-spacer"></span>
<div *ngIf="isAuthenticated();else loginoption">

View File

@ -26,7 +26,8 @@
"PROJECTS": "Projects",
"DMPS": "Plans",
"DATASETS": "Datasets",
"USERS": "Users"
"USERS": "Users",
"DATASETS(ADMIN)":"Datasets (Admin)"
},
"PROJECT-LISTING": {