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

Adds "Insert manually" link instead of add ( + ) button

This commit is contained in:
apapachristou 2020-09-23 19:41:12 +03:00
parent 26fa759d81
commit eb0bf2f003
5 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.html
View File

@ -36,9 +36,9 @@
<div *ngIf="isCreateNewFunder" (click)="createFunder()"> <div *ngIf="isCreateNewFunder" (click)="createFunder()">
<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-FUNDER' | translate}}</span> <span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-FUNDER' | translate}}</span>
</div> </div>
<div *ngIf="!isCreateNewFunder" (click)="createFunder()"> <div *ngIf="!isCreateNewFunder">
<span [ngClass]="isNewVersion?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span> <span [ngClass]="isNewVersion?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
<span [ngClass]="isNewVersion?'disabled-toggle':'insert'">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span> <span [ngClass]="isNewVersion?'disabled-toggle':'insert'" (click)="createFunder()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -82,9 +82,9 @@
<div *ngIf="isCreateNew" (click)="createGrant()"> <div *ngIf="isCreateNew" (click)="createGrant()">
<span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span> <span class="insert">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span>
</div> </div>
<div *ngIf="!isCreateNew" (click)="createGrant()"> <div *ngIf="!isCreateNew">
<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span> <span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'not-found'">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
<span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'insert'">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span> <span [ngClass]="isNewVersion || isGrantDisabled()?'disabled-toggle':'insert'" (click)="createGrant()">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</div> </div>
</div> </div>
</div> </div>

2
dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss
View File

@ -68,7 +68,7 @@
} }
.not-found { .not-found {
cursor: pointer; // cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
padding: 0rem 0.5rem 0rem 0rem; padding: 0rem 0.5rem 0rem 0rem;

14
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
View File

@ -52,10 +52,12 @@
{{formGroup.get('researchers').getError('backendError').message}}</mat-error> {{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')"> <mat-error *ngIf="formGroup.get('researchers').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)"> <!-- <button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
<mat-icon class="icon-btn">add_circle</mat-icon> <mat-icon class="icon-btn">add_circle</mat-icon>
</button> </button> -->
</mat-form-field> </mat-form-field>
<span *ngIf="!formGroup.get('researchers').disabled" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
<span *ngIf="!formGroup.get('researchers').disabled" class="insert-manually" (click)="addResearcher($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -74,10 +76,14 @@
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')"> <mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error> {{formGroup.get('organisations').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="canAddOrganizations()" type="button" (click)="addOrganization($event)"> <!-- <button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="cantAddOrganizations()" type="button" (click)="addOrganization($event)">
<mat-icon class="icon-btn">add_circle</mat-icon> <mat-icon class="icon-btn">add_circle</mat-icon>
</button> </button> -->
</mat-form-field> </mat-form-field>
<div *ngIf="showOrganizationCreator()" class="pb-4">
<span *ngIf="!cantAddOrganizations()" class="not-found">{{'DMP-EDITOR.FUNDING-INFO.FIND' | translate}}</span>
<span *ngIf="!cantAddOrganizations()" class="insert-manually" (click)="addOrganization($event)">{{'DMP-EDITOR.ACTIONS.INSERT-MANUALLY' | translate}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

143
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss
View File

@ -1,97 +1,112 @@
.main-info { .main-info {
// position: relative; // position: relative;
// left: 362px; // left: 362px;
// width: calc(100% - 366px); // width: calc(100% - 366px);
.intro { .intro {
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 3rem 0rem 3rem 0rem;
} }
.heading { .heading {
text-align: left; text-align: left;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
opacity: 0.81; opacity: 0.81;
margin-top: 1.625rem; margin-top: 1.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
.hint { .hint {
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
opacity: 0.81; opacity: 0.81;
margin-bottom: 2.125rem; margin-bottom: 2.125rem;
} }
.title-form, .title-form,
.description-form { .description-form {
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
color: #7d7d7d; color: #7d7d7d;
opacity: 1; opacity: 1;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
// textarea::placeholder { // textarea::placeholder {
// font-style: oblique; // font-style: oblique;
// } // }
.input-btn { .input-btn {
border: none; border: none;
color: #aaaaaa; color: #aaaaaa;
background-color: #ffffff00; background-color: #ffffff00;
cursor: pointer; cursor: pointer;
} }
.input-btn :hover { .input-btn :hover {
color: #00b29f !important; color: #00b29f !important;
} }
.insert-manually {
text-decoration: underline;
color: #00b29f;
cursor: pointer;
font-size: 1rem;
font-weight: 400;
}
.not-found {
// cursor: pointer;
font-size: 1rem;
font-weight: 400;
padding: 0rem 0.5rem 0rem 0rem;
}
} }
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important; background: #fafafa !important;
} }
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important; background: #fafafa !important;
} }
::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important; background: #fafafa !important;
} }
::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important; background: #fafafa !important;
} }
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem; font-size: 1rem;
padding: 0.6em 0 1em 0 !important; padding: 0.6em 0 1em 0 !important;
} }
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem; font-size: 1rem;
padding: 0.6em 0 1em 0 !important; padding: 0.6em 0 1em 0 !important;
} }
::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem; font-size: 1rem;
padding: 0.6em 0 1em 0 !important; padding: 0.6em 0 1em 0 !important;
} }
::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem; font-size: 1rem;
padding: 0.6em 0 1em 0 !important; padding: 0.6em 0 1em 0 !important;
} }

10
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts
View File

@ -84,10 +84,10 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date()); this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
} }
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed)) // this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => { // .subscribe(x => {
this.onFormChanged.emit(); // this.onFormChanged.emit();
}); // });
} }
// Researchers // Researchers
@ -126,7 +126,7 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
return this.externalSourcesService.searchDMPOrganizations(value); return this.externalSourcesService.searchDMPOrganizations(value);
} }
canAddOrganizations(): boolean { cantAddOrganizations(): boolean {
if (!isNullOrUndefined(this.formGroup.get('organizations'))) { if (!isNullOrUndefined(this.formGroup.get('organizations'))) {
return this.formGroup.get('organiztions').disabled; return this.formGroup.get('organiztions').disabled;
} else { } else {