DMP profile editor. Basic restyle
This commit is contained in:
parent
e2f262b385
commit
ad0853dc20
|
@ -1,9 +1,28 @@
|
|||
<div class="main-content">
|
||||
<div class="container-fluid dmp-profile-editor">
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<div class="row align-items-center mb-4" *ngIf="formGroup">
|
||||
<div class="col-auto">
|
||||
<h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
|
||||
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
|
||||
<mat-card>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col-auto" *ngIf="!isNew">
|
||||
<button mat-button class="action-btn" type="button" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="formGroup.get('status').value==1">
|
||||
<button class="finalize-btn" (click)="downloadXML()"
|
||||
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
||||
</div>
|
||||
<div *ngIf="formGroup.get('status').value!=1" class="col-auto">
|
||||
<button mat-button class="finalize-btn" (click)="finalize()"
|
||||
[disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<mat-card style="padding: 2em;">
|
||||
<!-- <mat-card-header>
|
||||
<mat-card-title *ngIf="isNew">
|
||||
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
|
||||
|
@ -13,8 +32,8 @@
|
|||
</mat-card-title>
|
||||
</mat-card-header> -->
|
||||
<mat-card-content>
|
||||
<div class="row pl-5">
|
||||
<mat-form-field class="col-10">
|
||||
<div class="row" style="gap:1em">
|
||||
<mat-form-field class="col-lg-6" appearance="legacy">
|
||||
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label"
|
||||
required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
|
@ -101,12 +120,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 pl-5 pr-4">
|
||||
<div class="row mt-4">
|
||||
<div class="col-auto">
|
||||
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col-auto" *ngIf="!isNew">
|
||||
<!-- <div class="col-auto" *ngIf="!isNew">
|
||||
<button mat-raised-button color="primary" type="button" (click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
||||
</div>
|
||||
<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto" color="primary" (click)="finalize()"
|
||||
|
@ -117,6 +136,12 @@
|
|||
<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
|
||||
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="col-auto" *ngIf="!viewOnly">
|
||||
<button mat-button class="action-btn" type="submit" [disabled]="!formGroup.valid">
|
||||
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
.dmp-profile-editor {
|
||||
margin-top: 1.3rem;
|
||||
margin-left: 1em;
|
||||
margin-right: 3em;
|
||||
|
||||
.centered-row-item {
|
||||
align-items: center;
|
||||
|
@ -25,3 +27,37 @@
|
|||
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.finalize-btn {
|
||||
border-radius: 30px;
|
||||
border: 1px solid #129D99;
|
||||
background: transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
color: #129D99;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: #f7dd72;
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
|
@ -23,6 +23,8 @@ import { map, takeUntil } from 'rxjs/operators';
|
|||
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
||||
|
||||
|
||||
@Component({
|
||||
|
@ -50,7 +52,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
private formService: FormService,
|
||||
private configurationService: ConfigurationService,
|
||||
private httpClient: HttpClient,
|
||||
private matomoService: MatomoService
|
||||
private matomoService: MatomoService,
|
||||
private dialog: MatDialog
|
||||
) {
|
||||
super();
|
||||
this.host = configurationService.server;
|
||||
|
@ -177,6 +180,16 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
}
|
||||
|
||||
delete() {
|
||||
this.dialog.open(ConfirmationDialogComponent,{data:{
|
||||
isDeleteConfirmation: true,
|
||||
confirmButton: this.language.instant('DMP-PROFILE-EDITOR.CONFIRM-DELETE-DIALOG.CONFIRM-BUTTON'),
|
||||
cancelButton: this.language.instant("DMP-PROFILE-EDITOR.CONFIRM-DELETE-DIALOG.CANCEL-BUTTON"),
|
||||
message: this.language.instant("DMP-PROFILE-EDITOR.CONFIRM-DELETE-DIALOG.MESSAGE")
|
||||
}})
|
||||
.afterClosed()
|
||||
.subscribe(
|
||||
confirmed =>{
|
||||
if(confirmed){
|
||||
this.formGroup.get('status').setValue(DmpProfileStatus.Deleted);
|
||||
this.dmpProfileService.createDmp(this.formGroup.value)
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
|
@ -185,6 +198,10 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
finalize() {
|
||||
//const data = this.form.value;
|
||||
|
|
|
@ -8,6 +8,6 @@
|
|||
}
|
||||
|
||||
.dmp-criteria{
|
||||
margin-top: 4em;
|
||||
margin-bottom: 2em;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 0em;
|
||||
}
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Löschen",
|
||||
"FINALIZE": "Finalize",
|
||||
"DOWNLOAD-XML": "Download XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Delete",
|
||||
"FINALIZE": "Finalize",
|
||||
"DOWNLOAD-XML": "Download XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Borrar",
|
||||
"FINALIZE": "Finalizar",
|
||||
"DOWNLOAD-XML": "Descargar XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Διαγραφή",
|
||||
"FINALIZE": "Οριστικοποίηση",
|
||||
"DOWNLOAD-XML": "Ληψη XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Eliminar",
|
||||
"FINALIZE": "Concluir",
|
||||
"DOWNLOAD-XML": "Exportar para XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Vymazať",
|
||||
"FINALIZE": "Dokončiť",
|
||||
"DOWNLOAD-XML": "Stiahnuť XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Obrišite",
|
||||
"FINALIZE": "Dovršite",
|
||||
"DOWNLOAD-XML": "Preuzmite XML"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
|
@ -908,6 +908,11 @@
|
|||
"DELETE": "Sil",
|
||||
"FINALIZE": "Tamamla",
|
||||
"DOWNLOAD-XML": "XML İndir"
|
||||
},
|
||||
"CONFIRM-DELETE-DIALOG":{
|
||||
"MESSAGE": "Would you like to delete this DMP template?",
|
||||
"CONFIRM-BUTTON": "Yes, delete",
|
||||
"CANCEL-BUTTON": "No"
|
||||
}
|
||||
},
|
||||
"GRANT-EDITOR": {
|
||||
|
|
Loading…
Reference in New Issue