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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component.html
View File

@ -1,18 +1,11 @@
<div class="dmp-criteria">
<mat-card class="mat-card">
<div class="row">
<mat-form-field class="col-md-6">
<div class="row justify-content-end">
<div class="col-auto">
<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 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>
</mat-card>
</div>

13
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component.scss
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;
}

40
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component.ts
View File

@ -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();
// }
// });
// }
}

31
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html
View File

@ -1,9 +1,26 @@
<div class="main-content">
<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>
</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>

84
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
View File

@ -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;
}
.mat-card {
margin: 1em 0;
min-height: 4.5em;
}
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;
}

50
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.ts
View File

@ -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> {

5
dmp-frontend/src/assets/i18n/de.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/en.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/es.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/gr.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/pt.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/sk.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/sr.json
View File

@ -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": {

5
dmp-frontend/src/assets/i18n/tr.json
View File

@ -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": {