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

DMP profile editor. Basic restyle

This commit is contained in:
Kristian Ntavidi 2021-06-22 16:48:46 +03:00
parent e2f262b385
commit ad0853dc20
12 changed files with 136 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html
View File

@ -1,9 +1,28 @@
<div class="main-content">
<div class="container-fluid dmp-profile-editor">
<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>
</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">
<h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
<mat-card>
<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>

36
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss
View File

@ -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;
}
}

33
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts
View File

@ -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,13 +180,27 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
}
delete() {
this.formGroup.get('status').setValue(DmpProfileStatus.Deleted);
this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
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))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}
}
)
}
finalize() {

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

@ -8,6 +8,6 @@
}
.dmp-criteria{
margin-top: 4em;
margin-bottom: 2em;
margin-top: 3em;
margin-bottom: 0em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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