Restyle DMP profile listing (Admin Pages)
This commit is contained in:
parent
9cc765e7f5
commit
c9b376f76c
|
@ -1,18 +1,11 @@
|
|||
<div class="dmp-criteria">
|
||||
<mat-card class="mat-card">
|
||||
<div class="row">
|
||||
|
||||
<mat-form-field class="col-md-6">
|
||||
<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
|
||||
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
|
||||
</mat-form-field>
|
||||
|
||||
<div class="col"></div>
|
||||
<div class="row justify-content-end">
|
||||
<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>
|
||||
<mat-form-field class="search-form-field">
|
||||
<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
|
||||
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
|
||||
<mat-icon matPrefix>search</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -53,24 +53,24 @@ export class DmpProfileCriteriaComponent extends BaseCriteriaComponent implement
|
|||
}
|
||||
|
||||
|
||||
openDialog(): void {
|
||||
const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
|
||||
restoreFocus: false,
|
||||
data: {
|
||||
message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
|
||||
confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
|
||||
cancelButton: this.language.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();
|
||||
}
|
||||
});
|
||||
}
|
||||
// openDialog(): void {
|
||||
// const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
|
||||
// restoreFocus: false,
|
||||
// data: {
|
||||
// message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
|
||||
// confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
|
||||
// cancelButton: this.language.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();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
|
|
@ -1,9 +1,26 @@
|
|||
<div class="main-content">
|
||||
<div class="container-fluid dmp-profile-listing">
|
||||
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<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>
|
||||
<mat-card class="row mat-card">
|
||||
<div class="mat-elevation-z6">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
|
||||
<!-- Column Definition: Name -->
|
||||
|
@ -17,7 +34,11 @@
|
|||
<ng-container cdkColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="status">
|
||||
{{'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>
|
||||
|
||||
<!-- Column Definition: Created -->
|
||||
|
@ -36,12 +57,6 @@
|
|||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</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>
|
||||
|
|
|
@ -1,65 +1,77 @@
|
|||
.mat-table {
|
||||
margin: 24px;
|
||||
margin-top: 47px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dmp-profile-listing {
|
||||
margin-top: 1.3rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 2rem;
|
||||
|
||||
.mat-header-row{
|
||||
background: #f3f5f8;
|
||||
}
|
||||
.mat-card {
|
||||
margin: 16px 0;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mat-row {
|
||||
cursor: pointer;
|
||||
min-height: 4.5em;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
background-color: #eef5f6;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #0c748914;
|
||||
// background-color: #eef0fb;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
// top: auto !important;
|
||||
// right: 20px !important;
|
||||
// bottom: 10px !important;
|
||||
// left: auto !important;
|
||||
// position: fixed !important;
|
||||
float: right;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
// PAGINATOR
|
||||
:host ::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
align-items: center;
|
||||
}
|
||||
.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 {
|
||||
height: 43px;
|
||||
.import-btn {
|
||||
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 {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
.status-chip{
|
||||
border-radius: 20px;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0.2em;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
.status-chip-inactive{
|
||||
color: #ff3d33;
|
||||
background: #ffd5d3 0% 0% no-repeat padding-box;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.status-chip-active{
|
||||
color: #00c4ff;
|
||||
background: #d3f5ff 0% 0% no-repeat padding-box;
|
||||
}
|
|
@ -2,10 +2,12 @@
|
|||
import { DataSource } from '@angular/cdk/table';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
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 { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
|
||||
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 { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
|
||||
import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
|
||||
import { DialodConfirmationUploadDmpProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
|
||||
|
||||
|
||||
@Component({
|
||||
|
@ -38,8 +41,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
|
|||
breadCrumbs: Observable<BreadcrumbItem[]>;
|
||||
|
||||
statuses = [
|
||||
{ value: '0', viewValue: 'Active' },
|
||||
{ value: '1', viewValue: 'Inactive' }
|
||||
{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.ACTIVE' },// active
|
||||
{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.INACTIVE' }// inactive
|
||||
];
|
||||
|
||||
constructor(
|
||||
|
@ -49,7 +52,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
|
|||
public route: ActivatedRoute,
|
||||
public dmpProfileService: DmpProfileService,
|
||||
private httpClient: HttpClient,
|
||||
private matomoService: MatomoService
|
||||
private matomoService: MatomoService,
|
||||
private dialog: MatDialog,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
@ -88,6 +92,46 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
|
|||
// debugger;
|
||||
// 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> {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "DMP Vorlagen",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Name",
|
||||
"STATUS": "Status",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Name der DMP Vorlage",
|
||||
"UPLOAD-XML-IMPORT": "Datei",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Abbrechen"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "DMP Templates",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Name",
|
||||
"STATUS": "Status",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Name Of DMP Template",
|
||||
"UPLOAD-XML-IMPORT": "File",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Cancel"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "Plantilla del PGD",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Nombre",
|
||||
"STATUS": "Estado",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Nombre de la Plantilla del PGD",
|
||||
"UPLOAD-XML-IMPORT": "Fichero",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Cancelar"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Τίτλος",
|
||||
"STATUS": "Κατάσταση",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Τίτλος Template Σχεδίου Διαχείρισης Δεδομένων",
|
||||
"UPLOAD-XML-IMPORT": "Αρχείο",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Ακύρωση"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "PGDs",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Nome",
|
||||
"STATUS": "Estado",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Nome do PGD",
|
||||
"UPLOAD-XML-IMPORT": "Ficheiro",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Cancelar"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "Šablóny DMP",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Názov",
|
||||
"STATUS": "Stav",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Názov šablóny DMP",
|
||||
"UPLOAD-XML-IMPORT": "Súbor",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Zrušiť"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "Obrasci za Planove",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "Ime",
|
||||
"STATUS": "Status",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "Ime obrasca za Plan",
|
||||
"UPLOAD-XML-IMPORT": "Datoteka",
|
||||
"UPLOAD-XML-FILE-CANCEL": "Otkažite"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
|
@ -1060,6 +1060,7 @@
|
|||
},
|
||||
"DMP-PROFILE-LISTING": {
|
||||
"TITLE": "VYP Şablonları",
|
||||
"CREATE-DMP-TEMPLATE": "Create DMP Template",
|
||||
"COLUMNS": {
|
||||
"NAME": "İsim",
|
||||
"STATUS": "Durum",
|
||||
|
@ -1073,6 +1074,10 @@
|
|||
"UPLOAD-XML-NAME": "VYP Şablonu İsmi",
|
||||
"UPLOAD-XML-IMPORT": "Dosya",
|
||||
"UPLOAD-XML-FILE-CANCEL": "İptal"
|
||||
},
|
||||
"STATUS":{
|
||||
"ACTIVE": "Active",
|
||||
"INACTIVE": "Inactive"
|
||||
}
|
||||
},
|
||||
"DYNAMIC-FORM": {
|
||||
|
|
Loading…
Reference in New Issue