Restyle DMP profile listing (Admin Pages)

This commit is contained in:
Kristian Ntavidi 2021-06-22 13:00:58 +03:00
parent 9cc765e7f5
commit c9b376f76c
14 changed files with 200 additions and 83 deletions

View File

@ -1,18 +1,11 @@
<div class="dmp-criteria"> <div class="dmp-criteria">
<mat-card class="mat-card"> <div class="row justify-content-end">
<div class="row"> <div class="col-auto">
<mat-form-field class="search-form-field">
<mat-form-field class="col-md-6">
<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike" <input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()"> [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
<mat-icon matPrefix>search</mat-icon>
</mat-form-field> </mat-form-field>
<div class="col"></div>
<div class="col-auto">
<!-- imgFileInput.click() && -->
<button mat-raised-button class="col-auto" color="primary" (click)="openDialog()"
type="button">{{ 'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML' | translate }}</button>
</div> </div>
</div> </div>
</mat-card>
</div> </div>

View File

@ -0,0 +1,13 @@
:host ::ng-deep .search-form-field .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}
.dmp-criteria{
margin-top: 4em;
margin-bottom: 2em;
}

View File

@ -53,24 +53,24 @@ export class DmpProfileCriteriaComponent extends BaseCriteriaComponent implement
} }
openDialog(): void { // openDialog(): void {
const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, { // const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
restoreFocus: false, // restoreFocus: false,
data: { // data: {
message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'), // message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'), // confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'), // cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
name: '', // name: '',
file: FileList, // file: FileList,
sucsess: false // sucsess: false
} // }
}); // });
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { // dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data && data.sucsess && data.name != null && data.file != null) { // if (data && data.sucsess && data.name != null && data.file != null) {
this.dmpProfileService.uploadFile(data.file, data.name) // this.dmpProfileService.uploadFile(data.file, data.name)
.pipe(takeUntil(this._destroyed)) // .pipe(takeUntil(this._destroyed))
.subscribe(); // .subscribe();
} // }
}); // });
} // }
} }

View File

@ -1,9 +1,26 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid dmp-profile-listing"> <div class="container-fluid dmp-profile-listing">
<div class="row align-items-center">
<div class="col-auto">
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3> <h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button class="import-btn" (click)="openDialog()">
<span class="button-text">
{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML' | translate}}
</span>
</button>
<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['/dmp-profiles/new'] ">
<span class="button-text">
{{'DMP-PROFILE-LISTING.CREATE-DMP-TEMPLATE' | translate}}
</span>
</button>
</div>
</div>
<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component> <app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
<mat-card class="row mat-card"> <div class="mat-elevation-z6">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> <mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name --> <!-- Column Definition: Name -->
@ -17,7 +34,11 @@
<ng-container cdkColumnDef="status"> <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status"> <mat-header-cell *matHeaderCellDef mat-sort-header="status">
{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell> {{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell> <mat-cell *matCellDef="let row">
<div [ngClass]="['status-chip', getStatusClass(row.status)]">
{{parseStatus(row.status) | translate}}
</div>
</mat-cell>
</ng-container> </ng-container>
<!-- Column Definition: Created --> <!-- Column Definition: Created -->
@ -36,12 +57,6 @@
</mat-table> </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"> <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator> </mat-paginator>
</mat-card>
<div class="row justify-content-end pr-2">
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,65 +1,77 @@
.mat-table { .mat-table {
margin: 24px; margin-top: 47px;
border-radius: 4px;
} }
.dmp-profile-listing { .dmp-profile-listing {
margin-top: 1.3rem; margin-top: 1.3rem;
margin-left: 1rem;
margin-right: 2rem;
.mat-header-row{
background: #f3f5f8;
}
.mat-card {
margin: 16px 0;
padding: 0px;
}
.mat-row { .mat-row {
cursor: pointer; cursor: pointer;
} min-height: 4.5em;
.mat-card {
margin: 1em 0;
} }
mat-row:hover { mat-row:hover {
background-color: lightgray; background-color: #eef5f6;
} }
mat-row:nth-child(odd) {
background-color: #0c748914;
// background-color: #eef0fb;
}
.mat-fab-bottom-right { .mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right; float: right;
z-index: 5; z-index: 5;
} }
} }
// PAGINATOR
:host ::ng-deep .mat-paginator-container { :host ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; flex-direction: row-reverse !important;
justify-content: space-between !important; justify-content: space-between !important;
background-color: #f6f6f6; background-color: #f6f6f6;
height: 30px; align-items: center;
min-height: 30px !important; }
.create-btn {
border-radius: 30px;
background-color: #f7dd72;
padding-left: 2em;
padding-right: 2em;
// color: #000;
.button-text{
display: inline-block;
}
} }
:host ::ng-deep .mat-paginator-page-size { .import-btn {
height: 43px; background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 30px;
// color: #129d99;
// border: 1px solid #129d99;
padding-left: 2em;
padding-right: 2em;
color: #000;
border: 1px solid #000;
} }
:host ::ng-deep .mat-paginator-range-label { .status-chip{
margin: 15px 32px 0 24px !important; border-radius: 20px;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.2em;
font-size: .8em;
} }
:host ::ng-deep .mat-paginator-range-actions { .status-chip-inactive{
width: 55% !important; color: #ff3d33;
min-height: 43px !important; background: #ffd5d3 0% 0% no-repeat padding-box;
justify-content: space-between;
} }
:host ::ng-deep .mat-paginator-navigation-previous { .status-chip-active{
margin-left: auto !important; color: #00c4ff;
} background: #d3f5ff 0% 0% no-repeat padding-box;
:host ::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
} }

View File

@ -2,10 +2,12 @@
import { DataSource } from '@angular/cdk/table'; import { DataSource } from '@angular/cdk/table';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material';
import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing'; import { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
import { DmpProfileCriteria } from '@app/core/query/dmp/dmp-profile-criteria'; import { DmpProfileCriteria } from '@app/core/query/dmp/dmp-profile-criteria';
@ -17,6 +19,7 @@ import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { merge as observableMerge, Observable, of as observableOf } from 'rxjs'; import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
import { map, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
import { DialodConfirmationUploadDmpProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
@Component({ @Component({
@ -38,8 +41,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
statuses = [ statuses = [
{ value: '0', viewValue: 'Active' }, { value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.ACTIVE' },// active
{ value: '1', viewValue: 'Inactive' } { value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.INACTIVE' }// inactive
]; ];
constructor( constructor(
@ -49,7 +52,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
public route: ActivatedRoute, public route: ActivatedRoute,
public dmpProfileService: DmpProfileService, public dmpProfileService: DmpProfileService,
private httpClient: HttpClient, private httpClient: HttpClient,
private matomoService: MatomoService private matomoService: MatomoService,
private dialog: MatDialog,
) { ) {
super(); super();
} }
@ -88,6 +92,46 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
// debugger; // debugger;
// this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe(); // this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
// } // }
parseStatus(value: number): string{
const stringVal = value.toString()
try{
return this.statuses.find(status => status.value === stringVal).viewValue;
}catch{
return stringVal;
}
}
openDialog(): void {
const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
restoreFocus: false,
data: {
message: this.languageService.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
confirmButton: this.languageService.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
cancelButton: this.languageService.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
name: '',
file: FileList,
sucsess: false
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data && data.sucsess && data.name != null && data.file != null) {
this.dmpProfileService.uploadFile(data.file, data.name)
.pipe(takeUntil(this._destroyed))
.subscribe();
}
});
}
getStatusClass(status: number):string{
if(status === 1){//inactive
return 'status-chip-inactive'
}
if(status === 0){
return 'status-chip-active';
}
return '';
}
} }
export class DatasetDataSource extends DataSource<DmpProfileListing> { export class DatasetDataSource extends DataSource<DmpProfileListing> {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "DMP Vorlagen", "TITLE": "DMP Vorlagen",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Name", "NAME": "Name",
"STATUS": "Status", "STATUS": "Status",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Name der DMP Vorlage", "UPLOAD-XML-NAME": "Name der DMP Vorlage",
"UPLOAD-XML-IMPORT": "Datei", "UPLOAD-XML-IMPORT": "Datei",
"UPLOAD-XML-FILE-CANCEL": "Abbrechen" "UPLOAD-XML-FILE-CANCEL": "Abbrechen"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "DMP Templates", "TITLE": "DMP Templates",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Name", "NAME": "Name",
"STATUS": "Status", "STATUS": "Status",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Name Of DMP Template", "UPLOAD-XML-NAME": "Name Of DMP Template",
"UPLOAD-XML-IMPORT": "File", "UPLOAD-XML-IMPORT": "File",
"UPLOAD-XML-FILE-CANCEL": "Cancel" "UPLOAD-XML-FILE-CANCEL": "Cancel"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Plantilla del PGD", "TITLE": "Plantilla del PGD",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Nombre", "NAME": "Nombre",
"STATUS": "Estado", "STATUS": "Estado",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Nombre de la Plantilla del PGD", "UPLOAD-XML-NAME": "Nombre de la Plantilla del PGD",
"UPLOAD-XML-IMPORT": "Fichero", "UPLOAD-XML-IMPORT": "Fichero",
"UPLOAD-XML-FILE-CANCEL": "Cancelar" "UPLOAD-XML-FILE-CANCEL": "Cancelar"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων", "TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Τίτλος", "NAME": "Τίτλος",
"STATUS": "Κατάσταση", "STATUS": "Κατάσταση",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Τίτλος Template Σχεδίου Διαχείρισης Δεδομένων", "UPLOAD-XML-NAME": "Τίτλος Template Σχεδίου Διαχείρισης Δεδομένων",
"UPLOAD-XML-IMPORT": "Αρχείο", "UPLOAD-XML-IMPORT": "Αρχείο",
"UPLOAD-XML-FILE-CANCEL": "Ακύρωση" "UPLOAD-XML-FILE-CANCEL": "Ακύρωση"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "PGDs", "TITLE": "PGDs",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Nome", "NAME": "Nome",
"STATUS": "Estado", "STATUS": "Estado",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Nome do PGD", "UPLOAD-XML-NAME": "Nome do PGD",
"UPLOAD-XML-IMPORT": "Ficheiro", "UPLOAD-XML-IMPORT": "Ficheiro",
"UPLOAD-XML-FILE-CANCEL": "Cancelar" "UPLOAD-XML-FILE-CANCEL": "Cancelar"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Šablóny DMP", "TITLE": "Šablóny DMP",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Názov", "NAME": "Názov",
"STATUS": "Stav", "STATUS": "Stav",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Názov šablóny DMP", "UPLOAD-XML-NAME": "Názov šablóny DMP",
"UPLOAD-XML-IMPORT": "Súbor", "UPLOAD-XML-IMPORT": "Súbor",
"UPLOAD-XML-FILE-CANCEL": "Zrušiť" "UPLOAD-XML-FILE-CANCEL": "Zrušiť"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Obrasci za Planove", "TITLE": "Obrasci za Planove",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "Ime", "NAME": "Ime",
"STATUS": "Status", "STATUS": "Status",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "Ime obrasca za Plan", "UPLOAD-XML-NAME": "Ime obrasca za Plan",
"UPLOAD-XML-IMPORT": "Datoteka", "UPLOAD-XML-IMPORT": "Datoteka",
"UPLOAD-XML-FILE-CANCEL": "Otkažite" "UPLOAD-XML-FILE-CANCEL": "Otkažite"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {

View File

@ -1060,6 +1060,7 @@
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "VYP Şablonları", "TITLE": "VYP Şablonları",
"CREATE-DMP-TEMPLATE": "Create DMP Template",
"COLUMNS": { "COLUMNS": {
"NAME": "İsim", "NAME": "İsim",
"STATUS": "Durum", "STATUS": "Durum",
@ -1073,6 +1074,10 @@
"UPLOAD-XML-NAME": "VYP Şablonu İsmi", "UPLOAD-XML-NAME": "VYP Şablonu İsmi",
"UPLOAD-XML-IMPORT": "Dosya", "UPLOAD-XML-IMPORT": "Dosya",
"UPLOAD-XML-FILE-CANCEL": "İptal" "UPLOAD-XML-FILE-CANCEL": "İptal"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
} }
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {