Dataset Profile Datatable Admin- material was implemented
This commit is contained in:
parent
b3bf19be0b
commit
3df3ed15ce
|
@ -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 }
|
||||
];
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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');
|
||||
}
|
|
@ -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] },
|
||||
];
|
|
@ -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 });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -26,7 +26,8 @@
|
|||
"PROJECTS": "Projects",
|
||||
"DMPS": "Plans",
|
||||
"DATASETS": "Datasets",
|
||||
"USERS": "Users"
|
||||
"USERS": "Users",
|
||||
"DATASETS(ADMIN)":"Datasets (Admin)"
|
||||
|
||||
},
|
||||
"PROJECT-LISTING": {
|
||||
|
|
Loading…
Reference in New Issue