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

Dmp Editor First Commit

This commit is contained in:
apapachristou 2019-05-23 18:48:54 +03:00
parent 4f727e5f2e
commit 9d40ffde63
13 changed files with 575 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
View File

@ -30,7 +30,8 @@ th {
margin-left: 2.5em;
margin-right: 2.5em;
border-radius: 10em;
background-color: #007bff;
background-color: rgba(0, 112, 192, 1);
/* background-color: #007bff; */
color: #fff;
text-transform: uppercase;
text-align: center;

4
dmp-frontend/src/app/ui/dmp/dmp.module.ts
View File

@ -24,6 +24,7 @@ import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.comp
import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
import { DmpOverviewComponent } from './overview/dmp-overview.component';
import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
import { GeneralTabComponent } from './editor/general-tab/general-tab.component';
@NgModule({
imports: [
@ -53,7 +54,8 @@ import { ExportMethodDialogModule } from '../../library/export-method-dialog/exp
DynamicFieldProjectComponent,
DmpUploadDialogue,
DmpListingItemComponent,
DmpOverviewComponent
DmpOverviewComponent,
GeneralTabComponent
],
entryComponents: [
DmpInvitationDialogComponent,

2
dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
View File

@ -1,4 +1,4 @@
<h4 mat-dialog-title>Available Dataset profiles</h4>
<h4 mat-dialog-title>Available Dataset Templates</h4>
<div mat-dialog-content>
<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions">
<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)'>

140
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -1,4 +1,106 @@
<div class="main-content">
<div class="container-fluid">
<div *ngIf="dmp" class="card col-12">
<div class="card-header card-header-plain d-flex">
<div class="card-desc d-flex flex-column justify-content-center">
<h4 class="card-title">{{ dmp.label }}</h4>
</div>
<div class="d-flex ml-auto p-2">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item *ngIf="!isPublic" (click)="newVersion(dmp.id, dmp.label)">
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
</button>
<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="clone(dmp.id)" class="menu-item">
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
</button>
<button mat-menu-item (click)="delete()" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
</button>
<button mat-menu-item (click)="advancedClicked()" class="menu-item">
<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.ADV-EXP' | translate }}
</button>
</mat-menu>
<button mat-raised-button color="primary" (click)="downloadPDF(dmp.id)"
class="lightblue-btn ml-2 text-uppercase">
<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
</button>
</div>
</div>
<div class="row d-flex flex-column">
<mat-tab-group class="col-12 mt-3">
<mat-tab>
<ng-template mat-tab-label class="tab-label">
<i class="material-icons-outlined mr-2">view_agenda</i>
{{ 'SIDE-BAR.GENERAL' | translate }}
</ng-template>
<!-- <div class="row"> -->
<app-general-tab [formGroup]="formGroup"></app-general-tab>
<!-- </div> -->
<!-- <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"></form> -->
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">work_outline</mat-icon>
{{ 'DMP-LISTING.COLUMNS.PROJECT' | translate }}
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">library_books</mat-icon>
{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">person</mat-icon>
{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">settings</mat-icon>
{{ 'DMP-LISTING.ACTIONS.SETTINGS' | translate }}
</ng-template>
</mat-tab>
</mat-tab-group>
<div class="col-12 d-flex justify-content-end pt-2 pb-4">
<div>
<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button"
class="lightblue-btn text-uppercase mr-2">
{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
</button>
</div>
<!-- <div class="col"></div> -->
<!-- <div class="col-auto" *ngIf="!isNew && this.formGroup.enabled">
<button mat-raised-button color="primary" type="button" (click)="delete()">
{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div> -->
<div *ngIf="this.formGroup.enabled">
<button mat-raised-button color="primary" type="submit"
class="lightblue-btn text-uppercase mr-2">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
<div *ngIf="dmp.lockable && this.formGroup.enabled">
<button type="button" mat-raised-button color="primary" class="lightblue-btn text-uppercase"
(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="main-content">
<div class="container-fluid">
<div class="dmp-editor">
<div>
@ -70,12 +172,12 @@
<mat-form-field class="col-md-12">
<textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
</textarea> -->
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error> -->
</mat-form-field>
<!-- </mat-form-field>
<mat-form-field class="col-md-6">
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
@ -85,9 +187,9 @@
{{formGroup.get('project').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('project').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<mat-form-field class="col-md-6">
</mat-form-field> -->
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<!-- <mat-form-field class="col-md-6">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
@ -100,11 +202,11 @@
(click)="availableProfiles()">
<mat-icon>view_list</mat-icon>
</button>
</mat-form-field>
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
</mat-form-field> -->
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<mat-form-field class="col-md-6">
<!-- <mat-form-field class="col-md-6">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
@ -127,10 +229,10 @@
type="button" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon>
</button>
</mat-form-field>
</mat-form-field> -->
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
<mat-form-field class="col-md-6">
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
<!-- <mat-form-field class="col-md-6">
<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
@ -140,11 +242,11 @@
<mat-form-field class="col-md-6">
<input matInput placeholder="Version" disabled
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field>
</mat-form-field> -->
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
<!-- <app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition">
</app-dynamic-dmp-field-resolver>
@ -180,8 +282,8 @@
</div>
</mat-card-content>
</mat-card>
</form>
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>
</form> -->
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
<!-- </div>
</div>
</div>
</div> -->

25
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
View File

@ -1,3 +1,24 @@
.dmp-editor {
.menu-item {
width: 248px;
}
.more-horiz {
font-size: 28px;
color: #aaaaaa;
}
.more-icon :hover {
color: #4687e6;
}
::ng-deep .mat-tab-labels {
justify-content: space-between;
}
::ng-deep .mat-tab-label-content {
text-transform: uppercase;
}
::ng-deep .mat-ink-bar {
background-color: #0070c0 !important;
}

143
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

@ -40,6 +40,7 @@ import { AvailableProfilesComponent } from './available-profiles/available-profi
import { DmpEditorModel } from './dmp-editor.model';
import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-dialog.component';
import { AuthService } from '../../../core/services/auth/auth.service';
import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
@Component({
selector: 'app-dmp-editor-component',
@ -57,18 +58,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
dmp: DmpEditorModel;
formGroup: FormGroup = null;
filteringOrganisationsAsync = false;
filteringResearchersAsync = false;
filteredProfilesAsync = false;
filteredOrganisations: ExternalSourceItemModel[];
filteredResearchers: ExternalSourceItemModel[];
filteredProfiles: DatasetProfileModel[];
projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
dmpProfileAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
createNewVersion;
associatedUsers: Array<UserModel>;
@ -115,34 +106,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
titleFn: (item) => item['label']
};
this.dmpProfileAutoCompleteConfiguration = {
filterFn: this.dmpProfileSearch.bind(this),
initialItems: (extraData) => this.dmpProfileSearch(''),
displayFn: (item) => item['label'],
titleFn: (item) => item['label']
};
this.profilesAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['label'],
titleFn: (item) => item['label']
};
this.organisationsAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['name'],
titleFn: (item) => item['name']
};
this.researchersAutoCompleteConfiguration = {
filterFn: this.filterResearchers.bind(this),
initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['name'],
titleFn: (item) => item['name']
};
if (itemId != null) {
this.isNew = false;
this.dmpService.getSingle(itemId).map(data => data as DmpModel)
@ -150,7 +113,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
.subscribe(async data => {
this.dmp = new DmpEditorModel().fromModel(data);
this.formGroup = this.dmp.buildForm();
this.registerFormEventsForDmpProfile(this.dmp.definition);
//this.registerFormEventsForDmpProfile(this.dmp.definition);
if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
if (this.isAuthenticated) {
// if (!this.isAuthenticated) {
@ -177,7 +140,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.dmp = new DmpEditorModel();
this.dmp.project = data;
this.formGroup = this.dmp.buildForm();
this.registerFormEventsForDmpProfile();
//this.registerFormEventsForDmpProfile();
this.formGroup.get('project').disable();
this.registerFormEventsForNewItem();
});
@ -189,7 +152,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
.subscribe(async data => {
this.dmp = new DmpEditorModel().fromModel(data);
this.formGroup = this.dmp.buildForm();
this.registerFormEventsForDmpProfile(this.dmp.definition);
//this.registerFormEventsForDmpProfile(this.dmp.definition);
if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
if (this.isAuthenticated()) {
// if (!this.isAuthenticated) {
@ -207,7 +170,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
} else {
this.dmp = new DmpEditorModel();
this.formGroup = this.dmp.buildForm();
this.registerFormEventsForDmpProfile();
this.registerFormEventsForNewItem();
}
});
@ -220,24 +182,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
});
}
registerFormEventsForDmpProfile(definitionPropertys?: DmpProfileDefinition): void {
this.formGroup.get('profile').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(Option => {
if (Option instanceof Object) {
this.selectedDmpProfileDefinition = null;
this.dmpProfileService.getSingle(Option.id)
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
this.selectedDmpProfileDefinition = result.definition;
});
} else {
this.selectedDmpProfileDefinition = null;
}
this.selectedDmpProfileDefinition = definitionPropertys;
})
}
isAuthenticated() {
return this.authService.current() != null;
}
@ -311,54 +255,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.router.navigate(['/invite/' + this.dmp.id]);
}
filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {
this.filteredOrganisations = undefined;
this.filteringOrganisationsAsync = true;
return this.externalSourcesService.searchDMPOrganizations(value);
}
filterResearchers(value: string): Observable<ExternalSourceItemModel[]> {
this.filteredResearchers = undefined;
this.filteringResearchersAsync = true;
return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } });
}
filterProfiles(value: string): Observable<DatasetProfileModel[]> {
this.filteredProfiles = undefined;
this.filteredProfilesAsync = true;
const request = new RequestItem<DatasetProfileCriteria>();
const criteria = new DatasetProfileCriteria();
criteria.like = value;
request.criteria = criteria;
return this._service.searchDMPProfiles(request);
}
addResearcher(rowId: any, rowName: any) {
const dialogRef = this.dialog.open(AddResearcherComponent, {
data: {
dmpId: rowId,
dmpName: rowName
}
});
}
availableProfiles() {
const dialogRef = this.dialog.open(AvailableProfilesComponent, {
data: {
profiles: this.formGroup.get('profiles')
}
});
return false;
}
public delete(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
@ -383,16 +279,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
}
// selectOption(option: any) {
// this.dmp.definition = null;
// this.formGroup.get('profile').patchValue(option, { emitEvent: false });
// this.dmpProfileService.getSingle(option.id)
// .pipe(takeUntil(this._destroyed))
// .subscribe(result => {
// this.selectedDmpProfileDefinition = result.definition;
// });
// }
displayWith(item: any) {
if (!item) { return null; }
return item['label'];
@ -418,6 +304,27 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
}
advancedClicked() {
const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
maxWidth: '400px',
data: {
message: "Download as:",
XMLButton: "XML",
documentButton: "Document",
pdfButton: "PDF"
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result == "pdf") {
this.downloadPDF(this.dmp.id);
} else if (result == "xml") {
this.downloadXml(this.dmp.id);
} else if (result == "doc") {
this.downloadDocx(this.dmp.id);
}
});
}
downloadXml(id: string) {
this.dmpService.downloadXML(id)
.pipe(takeUntil(this._destroyed))

50
dmp-frontend/src/app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.html
View File

@ -1,27 +1,29 @@
<div class="row">
<div *ngFor="let field of dmpProfileDefinition?.fields; let i = index" class="col-md-6">
<!-- <div *ngIf="field.type == dmpProfileTypeEnum.Input"> -->
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Date">
<input matInput [matDatepicker]="picker" [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
<div *ngFor="let field of dmpProfileDefinition?.fields; let i = index" class="row">
<div class="col-md-8">
<!-- <div *ngIf="field.type == dmpProfileTypeEnum.Input"> -->
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Date">
<input matInput [matDatepicker]="picker" [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
[required]="field.required">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Text">
<input matInput [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
</mat-form-field>
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Text">
<input matInput [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
[required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Number">
<input matInput type="number" [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
</mat-form-field>
<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Number">
<input matInput type="number" [placeholder]="field.label"
[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
[required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<!-- </div> -->
</div>
</div>
</mat-form-field>
<!-- </div> -->
</div>
</div>

130
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html Normal file
View File

@ -0,0 +1,130 @@
<div class="row" [formGroup]="formGroup">
<div class="col-9 pt-4 pb-4">
<div class="row">
<mat-form-field class="col-8">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-8">
<textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error> -->
</mat-form-field>
</div>
<div class="row">
<!-- <mat-form-field class="col-8">
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('project').hasError('backendError')">
{{formGroup.get('project').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('project').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> -->
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
</div>
<div class="row">
<mat-form-field class="col-8">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled"
(click)="availableProfiles()">
<mat-icon class="icon-btn">view_list</mat-icon>
</button>
</mat-form-field>
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
</div>
<div class="row">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
<button matSuffix mat-icon-button [disabled]="formGroup.get('researchers').disabled" type="button"
(click)="addResearcher()">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</mat-form-field>
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
</div>
<div class="row">
<mat-form-field class="col-8">
<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
</div>
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup"
[dmpProfileDefinition]="selectedDmpProfileDefinition">
</app-dynamic-dmp-field-resolver>
<!-- Associates Users -->
<!-- <div class="col-8">
<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
<h3 mat-subheader>Associated Users</h3>
<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
<mat-icon mat-list-icon>person</mat-icon>
<div>{{user.name}}</div>
</mat-list-item>
</mat-list>
</div> -->
</div>
<!-- Versioning Container-->
<div class='col-3'>
<div class='row version-menu'>
<mat-form-field class="col-auto">
<input matInput placeholder="Version" disabled
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field>
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<div class="col-auto mb-2">
Versioning is automated.
</div>
<!-- Versioning Actions -->
<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
<mat-icon>edit</mat-icon>
<span>Click here to edit</span>
</div>
<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
<mat-icon>history</mat-icon>
Click here to view previous versions
</div> -->
</div>
</div>
</div>

24
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss Normal file
View File

@ -0,0 +1,24 @@
.icon-btn {
font-size: 22px !important;
color: #aaaaaa;
}
.mat-icon-button :hover {
color: #4687f0 !important;
}
.version-menu {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
background-color: rgba(250, 250, 250, 1);
border: 1px solid #ececec;
padding-top: 1em;
margin-top: 2em;
margin-right: 2em;
font-size: 12px;
}
.version-menu mat-icon {
color: #4687f0;
}

176
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts Normal file
View File

@ -0,0 +1,176 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../../core/common/base/base.component';
import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
import { DatasetProfileModel } from '../../../../core/model/dataset/dataset-profile';
import { DmpProfileDefinition } from '../../../../core/model/dmp-profile/dmp-profile';
import { ExternalSourceItemModel } from '../../../../core/model/external-sources/external-source-item';
import { DatasetProfileCriteria } from '../../../../core/query/dataset-profile/dataset-profile-criteria';
import { DmpProfileCriteria } from '../../../../core/query/dmp/dmp-profile-criteria';
import { RequestItem } from '../../../../core/query/request-item';
import { DmpProfileService } from '../../../../core/services/dmp/dmp-profile.service';
import { DmpService } from '../../../../core/services/dmp/dmp.service';
import { ExternalSourcesService } from '../../../../core/services/external-sources/external-sources.service';
import { MultipleAutoCompleteConfiguration } from '../../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
import { SingleAutoCompleteConfiguration } from '../../../../library/auto-complete/single/single-auto-complete-configuration';
import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service';
import { AddResearcherComponent } from '../add-researcher/add-researcher.component';
import { AvailableProfilesComponent } from '../available-profiles/available-profiles.component';
@Component({
selector: 'app-general-tab',
templateUrl: './general-tab.component.html',
styleUrls: ['./general-tab.component.scss']
})
export class GeneralTabComponent extends BaseComponent implements OnInit {
@Input() formGroup: FormGroup = null;
filteringOrganisationsAsync = false;
filteringResearchersAsync = false;
filteredProfilesAsync = false;
filteredOrganisations: ExternalSourceItemModel[];
filteredResearchers: ExternalSourceItemModel[];
filteredProfiles: DatasetProfileModel[];
profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
dmpProfileAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
selectedDmpProfileDefinition: DmpProfileDefinition;
constructor(
private dmpProfileService: DmpProfileService,
private externalSourcesService: ExternalSourcesService,
private _service: DmpService,
private dialog: MatDialog,
public languageResolverService: LanguageResolverService,
) {
super();
}
ngOnInit() {
this.registerFormEventsForDmpProfile();
this.dmpProfileAutoCompleteConfiguration = {
filterFn: this.dmpProfileSearch.bind(this),
initialItems: (extraData) => this.dmpProfileSearch(''),
displayFn: (item) => item['label'],
titleFn: (item) => item['label']
};
this.profilesAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['label'],
titleFn: (item) => item['label']
};
this.organisationsAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['name'],
titleFn: (item) => item['name']
};
this.researchersAutoCompleteConfiguration = {
filterFn: this.filterResearchers.bind(this),
initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['name'],
titleFn: (item) => item['name']
};
}
registerFormEventsForDmpProfile(definitionPropertys?: DmpProfileDefinition): void {
this.formGroup.get('profile').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(Option => {
if (Option instanceof Object) {
this.selectedDmpProfileDefinition = null;
this.dmpProfileService.getSingle(Option.id)
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
this.selectedDmpProfileDefinition = result.definition;
});
} else {
this.selectedDmpProfileDefinition = null;
}
this.selectedDmpProfileDefinition = definitionPropertys;
})
}
dmpProfileSearch(query: string) {
let fields: Array<string> = new Array();
var request = new DataTableRequest<DmpProfileCriteria>(0, 10, { fields: fields });
request.criteria = new DmpProfileCriteria();
return this.dmpProfileService.getPaged(request).map(x => x.data);
}
// onCallbackSuccess(): void {
// this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
// this.router.navigate(['/plans']);
// }
// onCallbackError(error: any) {
// this.setErrorModel(error.error);
// //this.validateAllFormFields(this.formGroup);
// }
// public setErrorModel(validationErrorModel: ValidationErrorModel) {
// Object.keys(validationErrorModel).forEach(item => {
// (<any>this.dmp.validationErrorModel)[item] = (<any>validationErrorModel)[item];
// });
// }
filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {
this.filteredOrganisations = undefined;
this.filteringOrganisationsAsync = true;
return this.externalSourcesService.searchDMPOrganizations(value);
}
filterResearchers(value: string): Observable<ExternalSourceItemModel[]> {
this.filteredResearchers = undefined;
this.filteringResearchersAsync = true;
return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } });
}
filterProfiles(value: string): Observable<DatasetProfileModel[]> {
this.filteredProfiles = undefined;
this.filteredProfilesAsync = true;
const request = new RequestItem<DatasetProfileCriteria>();
const criteria = new DatasetProfileCriteria();
criteria.like = value;
request.criteria = criteria;
return this._service.searchDMPProfiles(request);
}
addResearcher(rowId: any, rowName: any) {
const dialogRef = this.dialog.open(AddResearcherComponent, {
data: {
dmpId: rowId,
dmpName: rowName
}
});
}
availableProfiles() {
const dialogRef = this.dialog.open(AvailableProfilesComponent, {
data: {
profiles: this.formGroup.get('profiles')
}
});
return false;
}
}

3
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -143,7 +143,8 @@ h4 span {
margin-left: 2.5em;
margin-right: 2.5em;
border-radius: 10em;
background-color: rgb(70, 135, 230);
background-color: rgba(0, 112, 192, 1);
// background-color: rgb(70, 135, 230);
color: #fff;
text-transform: uppercase;
font-weight: 500;

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

@ -227,7 +227,8 @@
"LATEST_VERSION": "Latest Version",
"ACTIONS": "Actions",
"DATASETS": "Datasets",
"STATUS": "Status"
"STATUS": "Status",
"PEOPLE": "People"
},
"ACTIONS": {
"NEW":"New Data Management Plan",
@ -243,7 +244,8 @@
"ADV-EXP": "Advanced Export",
"DOWNLOAD-XML": "Download XML",
"DOWNLOAD-DOCX": "Download Document",
"DOWNLOAD-PDF": "Download PDF"
"DOWNLOAD-PDF": "Download PDF",
"SETTINGS": "Settings"
}
},
"DMP-PUBLIC-LISTING": {
@ -430,21 +432,23 @@
"EDIT": "Edit"
},
"FIELDS": {
"NAME": "Name",
"PROJECT": "Project",
"DESCRIPTION": "Description",
"ORGANISATIONS": "Organisations",
"NAME": "Dmp Name",
"PROJECT": "Related Project",
"DESCRIPTION": "Dmp Description",
"ORGANISATIONS": "Related Organisations",
"RESEARCHERS": "Researchers",
"TEMPLATES": "Templates",
"PROFILES": "Available Dataset Profiles",
"TEMPLATE": "Dmp Template",
"DATASET-TEMPLATES": "Related Dataset Templates",
"PROFILE": "DMP Profile",
"GRANT": "Grant",
"FUNDER": "Funder"
"FUNDER": "Funder",
"STATUS": "Dmp Status"
},
"ACTIONS": {
"GO-TO-PROJECT": "Go To DMP Project",
"GO-TO-DATASETS": "Go To Datasets",
"SAVE": "Save",
"SAVE": "Save Changes",
"CANCEL": "Cancel",
"DELETE": "Delete",
"FINALISE": "Finalize"

55
dmp-frontend/src/styles.scss
View File

@ -31,7 +31,8 @@ $theme: mat-light-theme($primary, $accent);
}
.lightblue-btn {
background-color: rgb(70, 135, 240) !important;
background-color: rgba(0, 112, 192, 1) !important;
// background-color: rgb(70, 135, 240) !important;
}
.listing-item {
@ -55,14 +56,15 @@ $theme: mat-light-theme($primary, $accent);
.chip {
padding: 0.1em 1em;
border-radius: 10em;
background-color: rgb(70, 135, 230);
background-color: rgba(0, 112, 192, 1);
// background-color: rgb(70, 135, 230);
color: #fff;
text-transform: uppercase;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bordered-chip {
@ -70,13 +72,14 @@ $theme: mat-light-theme($primary, $accent);
border: 0.1em solid rgb(218, 227, 243);
border-radius: 10em;
background-color: rgb(236, 241, 249);
color: rgb(68, 114, 196);
color: rgba(0, 112, 192, 1);
// color: rgb(68, 114, 196);
text-transform: uppercase;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.squared-chip {
@ -84,11 +87,11 @@ $theme: mat-light-theme($primary, $accent);
border: 0.1em solid rgb(236, 241, 249);
border-radius: 0.5em;
background-color: rgb(246, 246, 246);
color: rgb(127, 127, 127);
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgb(127, 127, 127);
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
mat-icon {
@ -133,17 +136,17 @@ $theme: mat-light-theme($primary, $accent);
// }
.draft-bookmark {
color: #e7e6e6;
display: inline;
position: absolute;
padding-top: 3px
color: #e7e6e6;
display: inline;
position: absolute;
padding-top: 3px;
}
.finalized-bookmark {
color: #92d050;
display: inline;
position: absolute;
padding-top: 3px;
color: #92d050;
display: inline;
position: absolute;
padding-top: 3px;
}
h4 span {