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

Change deposit in DMPs: Modal changed to dropdown in deposit action and change DOI display

This commit is contained in:
Konstantinos Triantafyllou 2023-01-20 14:56:29 +02:00
parent 57a400f817
commit 13d03e4459
13 changed files with 351 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,62 @@
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { FormattingModule } from '@app/core/formatting.module'; import {FormattingModule} from '@app/core/formatting.module';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module'; import {AutoCompleteModule} from '@app/library/auto-complete/auto-complete.module';
import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module'; import {ConfirmationDialogModule} from '@common/modules/confirmation-dialog/confirmation-dialog.module';
import { ExportMethodDialogModule } from '@app/library/export-method-dialog/export-method-dialog.module'; import {ExportMethodDialogModule} from '@app/library/export-method-dialog/export-method-dialog.module';
import { UrlListingModule } from '@app/library/url-listing/url-listing.module'; import {UrlListingModule} from '@app/library/url-listing/url-listing.module';
import { DmpCloneComponent } from '@app/ui/dmp/clone/dmp-clone.component'; import {DmpCloneComponent} from '@app/ui/dmp/clone/dmp-clone.component';
import { DmpRoutingModule } from '@app/ui/dmp/dmp.routing'; import {DmpRoutingModule} from '@app/ui/dmp/dmp.routing';
import { AddResearcherComponent } from '@app/ui/dmp/editor/add-researcher/add-researcher.component'; import {AddResearcherComponent} from '@app/ui/dmp/editor/add-researcher/add-researcher.component';
import { AvailableProfilesComponent } from '@app/ui/dmp/editor/available-profiles/available-profiles.component'; import {AvailableProfilesComponent} from '@app/ui/dmp/editor/available-profiles/available-profiles.component';
import { DatasetsTabComponent } from '@app/ui/dmp/editor/datasets-tab/datasets-tab.component'; import {DatasetsTabComponent} from '@app/ui/dmp/editor/datasets-tab/datasets-tab.component';
import { DmpEditorComponent } from '@app/ui/dmp/editor/dmp-editor.component'; import {DmpEditorComponent} from '@app/ui/dmp/editor/dmp-editor.component';
import { DmpFinalizeDialogComponent } from '@app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component'; import {DmpFinalizeDialogComponent} from '@app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component';
import { DynamicDmpFieldResolverComponent } from '@app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component'; import {
import { DynamicFieldGrantComponent } from '@app/ui/dmp/editor/dynamic-fields-grant/dynamic-field-grant/dynamic-field-grant.component'; DynamicDmpFieldResolverComponent
import { DynamicFieldsGrantComponent } from '@app/ui/dmp/editor/dynamic-fields-grant/dynamic-fields-grant.component'; } from '@app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component';
import { GeneralTabComponent } from '@app/ui/dmp/editor/general-tab/general-tab.component'; import {
import { GrantTabComponent } from '@app/ui/dmp/editor/grant-tab/grant-tab.component'; DynamicFieldGrantComponent
import { PeopleTabComponent } from '@app/ui/dmp/editor/people-tab/people-tab.component'; } from '@app/ui/dmp/editor/dynamic-fields-grant/dynamic-field-grant/dynamic-field-grant.component';
import { InvitationAcceptedComponent } from '@app/ui/dmp/invitation/accepted/dmp-invitation-accepted.component'; import {DynamicFieldsGrantComponent} from '@app/ui/dmp/editor/dynamic-fields-grant/dynamic-fields-grant.component';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component'; import {GeneralTabComponent} from '@app/ui/dmp/editor/general-tab/general-tab.component';
import { DmpCriteriaComponent } from '@app/ui/dmp/listing/criteria/dmp-criteria.component'; import {GrantTabComponent} from '@app/ui/dmp/editor/grant-tab/grant-tab.component';
import { DmpUploadDialogue } from '@app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component'; import {PeopleTabComponent} from '@app/ui/dmp/editor/people-tab/people-tab.component';
import { DmpListingComponent } from '@app/ui/dmp/listing/dmp-listing.component'; import {InvitationAcceptedComponent} from '@app/ui/dmp/invitation/accepted/dmp-invitation-accepted.component';
import { DmpListingItemComponent } from '@app/ui/dmp/listing/listing-item/dmp-listing-item.component'; import {DmpInvitationDialogComponent} from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
import { DmpOverviewModule } from '@app/ui/dmp/overview/dmp-overview.module'; import {DmpCriteriaComponent} from '@app/ui/dmp/listing/criteria/dmp-criteria.component';
import { DmpWizardComponent } from '@app/ui/dmp/wizard/dmp-wizard.component'; import {DmpUploadDialogue} from '@app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component';
import { DmpWizardEditorComponent } from '@app/ui/dmp/wizard/editor/dmp-wizard-editor.component'; import {DmpListingComponent} from '@app/ui/dmp/listing/dmp-listing.component';
import { DmpWizardDatasetListingComponent } from '@app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component'; import {DmpListingItemComponent} from '@app/ui/dmp/listing/listing-item/dmp-listing-item.component';
import { CommonFormsModule } from '@common/forms/common-forms.module'; import {DmpOverviewModule} from '@app/ui/dmp/overview/dmp-overview.module';
import { FormValidationErrorsDialogModule } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.module'; import {DmpWizardComponent} from '@app/ui/dmp/wizard/dmp-wizard.component';
import { CommonUiModule } from '@common/ui/common-ui.module'; import {DmpWizardEditorComponent} from '@app/ui/dmp/wizard/editor/dmp-wizard-editor.component';
import { MultipleChoiceDialogModule } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.module'; import {DmpWizardDatasetListingComponent} from '@app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component';
import { AddOrganizationComponent } from './editor/add-organization/add-organization.component'; import {CommonFormsModule} from '@common/forms/common-forms.module';
import { AddCostComponent } from './editor/cost-editor/add-cost/add-cost.component'; import {
import { CostListingComponent } from './editor/cost-editor/cost-listing/cost-listing.component'; FormValidationErrorsDialogModule
import { DmpCriteriaDialogComponent } from './listing/criteria/dmp-criteria-dialog.component'; } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.module';
import { StartNewDmpDialogComponent } from './start-new-dmp-dialogue/start-new-dmp-dialog.component'; import {CommonUiModule} from '@common/ui/common-ui.module';
import { MainInfoComponent } from './editor/main-info/main-info.component'; import {MultipleChoiceDialogModule} from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.module';
import { FundingInfoComponent } from './editor/funding-info/funding-info.component'; import {AddOrganizationComponent} from './editor/add-organization/add-organization.component';
import { DatasetInfoComponent } from './editor/dataset-info/dataset-info.component'; import {AddCostComponent} from './editor/cost-editor/add-cost/add-cost.component';
import { DatasetEditorDetailsModule } from './editor/dataset-editor-details/dataset-editor-details.module'; import {CostListingComponent} from './editor/cost-editor/cost-listing/cost-listing.component';
import { DatasetEditorDetailsComponent } from './editor/dataset-editor-details/dataset-editor-details.component'; import {DmpCriteriaDialogComponent} from './listing/criteria/dmp-criteria-dialog.component';
import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module'; import {StartNewDmpDialogComponent} from './start-new-dmp-dialogue/start-new-dmp-dialog.component';
import { LicenseInfoComponent } from './editor/license-info/license-info.component'; import {MainInfoComponent} from './editor/main-info/main-info.component';
import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component'; import {FundingInfoComponent} from './editor/funding-info/funding-info.component';
import { NgxDropzoneModule } from 'ngx-dropzone'; import {DatasetInfoComponent} from './editor/dataset-info/dataset-info.component';
import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dialog.component'; import {DatasetEditorDetailsModule} from './editor/dataset-editor-details/dataset-editor-details.module';
import { FormProgressIndicationComponent } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component'; import {DatasetEditorDetailsComponent} from './editor/dataset-editor-details/dataset-editor-details.component';
import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module'; import {DatasetDescriptionFormModule} from '../misc/dataset-description-form/dataset-description-form.module';
import { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview-dialog.component'; import {LicenseInfoComponent} from './editor/license-info/license-info.component';
import {StartNewDatasetDialogComponent} from './start-new-dataset-dialogue/start-new-dataset-dialog.component';
import {NgxDropzoneModule} from 'ngx-dropzone';
import {DmpToDatasetDialogComponent} from './dmp-to-dataset/dmp-to-dataset-dialog.component';
import {
FormProgressIndicationModule
} from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
import {DatasetPreviewDialogComponent} from './dataset-preview/dataset-preview-dialog.component';
import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module"; import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
import { DmpDepositDialogComponent } from './editor/dmp-deposit-dialog/dmp-deposit-dialog.component';
@NgModule({ @NgModule({
imports: [ imports: [
@ -104,8 +110,7 @@ import { DmpDepositDialogComponent } from './editor/dmp-deposit-dialog/dmp-depos
FundingInfoComponent, FundingInfoComponent,
DatasetInfoComponent, DatasetInfoComponent,
LicenseInfoComponent, LicenseInfoComponent,
DatasetPreviewDialogComponent, DatasetPreviewDialogComponent
DmpDepositDialogComponent
], ],
entryComponents: [ entryComponents: [
DmpInvitationDialogComponent, DmpInvitationDialogComponent,
@ -121,8 +126,7 @@ import { DmpDepositDialogComponent } from './editor/dmp-deposit-dialog/dmp-depos
StartNewDmpDialogComponent, StartNewDmpDialogComponent,
StartNewDatasetDialogComponent, StartNewDatasetDialogComponent,
DatasetEditorDetailsComponent, DatasetEditorDetailsComponent,
DatasetPreviewDialogComponent, DatasetPreviewDialogComponent
DmpDepositDialogComponent
] ]
}) })
export class DmpModule { } export class DmpModule { }

21
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dialog/dmp-deposit-dialog.component.html
View File

@ -1,21 +0,0 @@
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">{{ data.message }}</div>
<div class="col-auto close-btn ml-auto" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div *ngIf="inputRepos.length > 0">
<mat-action-list>
<button mat-list-item *ngFor="let repo of inputRepos" (click)="deposit(repo)"> {{ repo.repositoryId }} </button>
</mat-action-list>
</div>
<div *ngIf="inputRepos.length === 0" class="emptyList">{{'DMP-OVERVIEW.DEPOSIT.NO-REPOSITORIES' | translate}}</div>
<div mat-dialog-actions class="d-flex justify-content-end mb-1">
<div class="col-auto">
<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ data.cancelButton }}</button>
</div>
<!-- <div class="col-auto">
<button mat-raised-button class="submit-btn" (click)="onSubmit()">{{ data.confirmButton }}</button>
</div> -->
</div>

0
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dialog/dmp-deposit-dialog.component.scss
View File

138
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dialog/dmp-deposit-dialog.component.ts
View File

@ -1,138 +0,0 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DepositConfigurationStatus } from '@app/core/common/enum/deposit-configuration-status';
import { DepositConfigurationModel } from '@app/core/model/deposit/deposit-configuration';
import { DmpOverviewModel } from '@app/core/model/dmp/dmp-overview';
import { DoiModel } from '@app/core/model/doi/doi';
import { DepositRepositoriesService } from '@app/core/services/deposit-repositories/deposit-repositories.service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service';
import { BaseComponent } from '@common/base/base.component';
import { MultipleChoiceDialogComponent } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-dmp-deposit-dialog',
templateUrl: './dmp-deposit-dialog.component.html',
styleUrls: ['./dmp-deposit-dialog.component.scss']
})
export class DmpDepositDialogComponent extends BaseComponent implements OnInit {
inputRepos: DepositConfigurationModel[];
outputRepos: DoiModel[];
dmp: DmpOverviewModel;
private oauthLock: boolean;
constructor(
private depositRepositoriesService: DepositRepositoriesService,
public dialogRef: MatDialogRef<DmpDepositDialogComponent>,
private dialog: MatDialog,
private language: TranslateService,
private translate: TranslateService,
private uiNotificationService: UiNotificationService,
private oauth2DialogService: Oauth2DialogService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();
this.inputRepos = data['depositRepos'][0];
this.dmp = data['depositRepos'][1];
for(var i = 0; i < this.dmp.dois.length; i++){
this.inputRepos = this.inputRepos.filter(r => this.hasDoi(r, this.dmp.dois, i));
}
this.outputRepos = [];
}
hasDoi(repo, dois, i){
return repo.repositoryId !== dois[i].repositoryId;
}
ngOnInit(): void {
}
onSubmit() {
this.dialogRef.close(this.outputRepos);
}
close() {
this.dialogRef.close(this.outputRepos);
}
deposit(repo: DepositConfigurationModel) {
if(repo.depositType == DepositConfigurationStatus.BothSystemAndUser){
const dialogRef = this.dialog.open(MultipleChoiceDialogComponent, {
maxWidth: '600px',
restoreFocus: false,
data: {
message: this.language.instant('DMP-OVERVIEW.DEPOSIT.ACCOUNT-LOGIN'),
titles: [this.language.instant('DMP-OVERVIEW.DEPOSIT.LOGIN', { 'repository': repo.repositoryId }), this.language.instant('DMP-OVERVIEW.MULTIPLE-DIALOG.USE-DEFAULT')]
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
switch (result) {
case 0:
this.showOauth2Dialog(repo.repositoryAuthorizationUrl + '?client_id=' + repo.repositoryClientId
+ '&response_type=code&scope=deposit:write+deposit:actions+user:email&state=astate&redirect_uri='
+ repo.redirectUri, repo, this.dmp);
break;
case 1:
this.depositRepositoriesService.createDoi(repo.repositoryId, this.dmp.id, null)
.pipe(takeUntil(this._destroyed))
.subscribe(doi =>{
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.close();
}, error => this.onDOICallbackError(error));
break;
}
});
}
else if(repo.depositType == DepositConfigurationStatus.System){
this.depositRepositoriesService.createDoi(repo.repositoryId, this.dmp.id, null)
.pipe(takeUntil(this._destroyed))
.subscribe(doi =>{
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.close();
}, error => this.onDOICallbackError(error));
}
}
onDOICallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.language.instant('DMP-EDITOR.SNACK-BAR.SUCCESSFUL-DOI'), SnackBarNotificationLevel.Success);
}
onDOICallbackError(error) {
this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('DMP-EDITOR.SNACK-BAR.UNSUCCESSFUL-DOI'), SnackBarNotificationLevel.Error);
}
showOauth2Dialog(url: string, repo: DepositConfigurationModel, dmp: DmpOverviewModel) {
this.oauth2DialogService.login(url)
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
if (result !== undefined) {
if (result.oauthCode !== undefined && result.oauthCode !== null && !this.oauthLock) {
this.depositRepositoriesService.getAccessToken(repo.repositoryId, result.oauthCode)
.pipe(takeUntil(this._destroyed))
.subscribe(token => {
this.depositRepositoriesService.createDoi(repo.repositoryId, dmp.id, token)
.pipe(takeUntil(this._destroyed))
.subscribe(doi =>{
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.close();
}, error => this.onDOICallbackError(error));
});
this.oauthLock = true;
}
}
else{
this.oauthLock = false;
}
});
}
}

13
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.html Normal file
View File

@ -0,0 +1,13 @@
<div [matMenuTriggerFor]="depositMenu" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div>
<mat-menu #depositMenu="matMenu">
<button mat-menu-item *ngFor="let repo of inputRepos" (click)="deposit(repo)">
<img *ngIf="repo.hasLogo" class="logo" [src]="logos.get(repo.repositoryId)">
<img *ngIf="!repo.hasLogo" class="logo" src="assets/images/repository-placeholder.png">
<span>{{ repo.repositoryId }}</span>
</button>
</mat-menu>

36
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.scss Normal file
View File

@ -0,0 +1,36 @@
.frame-btn {
border: 1px solid #212121;
color: black;
background: #ffffff;
box-shadow: 0px 2px 6px #00000029;
display: flex;
justify-content: center;
align-items: center;
}
.frame-txt {
color: #000000;
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0px;
text-transform: uppercase;
cursor: pointer;
}
.mat-mini-fab {
width: 2.5em;
height: 2.5em;
}
.mat-mini-fab-icon {
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
margin-right: 16px;
max-width: 24px;
max-height: 24px;
}

140
dmp-frontend/src/app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component.ts Normal file
View File

@ -0,0 +1,140 @@
import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {DepositConfigurationStatus} from '@app/core/common/enum/deposit-configuration-status';
import {DepositConfigurationModel} from '@app/core/model/deposit/deposit-configuration';
import {DmpOverviewModel} from '@app/core/model/dmp/dmp-overview';
import {DoiModel} from '@app/core/model/doi/doi';
import {DepositRepositoriesService} from '@app/core/services/deposit-repositories/deposit-repositories.service';
import {
SnackBarNotificationLevel,
UiNotificationService
} from '@app/core/services/notification/ui-notification-service';
import {Oauth2DialogService} from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service';
import {BaseComponent} from '@common/base/base.component';
import {MultipleChoiceDialogComponent} from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.component';
import {TranslateService} from '@ngx-translate/core';
import {takeUntil} from 'rxjs/operators';
import {DomSanitizer, SafeHtml, SafeResourceUrl} from "@angular/platform-browser";
@Component({
selector: 'app-dmp-deposit-dropdown',
templateUrl: './dmp-deposit-dropdown.component.html',
styleUrls: ['./dmp-deposit-dropdown.component.scss']
})
export class DmpDepositDropdown extends BaseComponent implements OnInit {
@Input()
inputRepos: DepositConfigurationModel[];
@Input()
dmp: DmpOverviewModel;
outputRepos = [];
logos: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>();
@Output()
outputReposEmitter: EventEmitter<DoiModel[]> = new EventEmitter<DoiModel[]>();
private oauthLock: boolean;
constructor(
private depositRepositoriesService: DepositRepositoriesService,
private dialog: MatDialog,
private language: TranslateService,
private translate: TranslateService,
private uiNotificationService: UiNotificationService,
private oauth2DialogService: Oauth2DialogService,
private sanitizer: DomSanitizer
) {
super();
}
hasDoi(repo, dois, i) {
return repo.repositoryId !== dois[i].repositoryId;
}
ngOnInit(): void {
for (var i = 0; i < this.dmp.dois.length; i++) {
this.inputRepos = this.inputRepos.filter(r => this.hasDoi(r, this.dmp.dois, i));
}
this.inputRepos.forEach(repo => {
if(repo.hasLogo) {
this.depositRepositoriesService.getLogo(repo.repositoryId).subscribe(logo => {
console.log(this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + logo));
this.logos.set(repo.repositoryId, this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64, ' + logo));
})
}
})
}
deposit(repo: DepositConfigurationModel) {
if (repo.depositType == DepositConfigurationStatus.BothSystemAndUser) {
const dialogRef = this.dialog.open(MultipleChoiceDialogComponent, {
maxWidth: '600px',
restoreFocus: false,
data: {
message: this.language.instant('DMP-OVERVIEW.DEPOSIT.ACCOUNT-LOGIN'),
titles: [this.language.instant('DMP-OVERVIEW.DEPOSIT.LOGIN', {'repository': repo.repositoryId}), this.language.instant('DMP-OVERVIEW.MULTIPLE-DIALOG.USE-DEFAULT')]
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
switch (result) {
case 0:
this.showOauth2Dialog(repo.repositoryAuthorizationUrl + '?client_id=' + repo.repositoryClientId
+ '&response_type=code&scope=deposit:write+deposit:actions+user:email&state=astate&redirect_uri='
+ repo.redirectUri, repo, this.dmp);
break;
case 1:
this.depositRepositoriesService.createDoi(repo.repositoryId, this.dmp.id, null)
.pipe(takeUntil(this._destroyed))
.subscribe(doi => {
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.outputReposEmitter.emit(this.outputRepos);
}, error => this.onDOICallbackError(error));
break;
}
});
} else if (repo.depositType == DepositConfigurationStatus.System) {
this.depositRepositoriesService.createDoi(repo.repositoryId, this.dmp.id, null)
.pipe(takeUntil(this._destroyed))
.subscribe(doi => {
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.outputReposEmitter.emit(this.outputRepos);
}, error => this.onDOICallbackError(error));
}
}
onDOICallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.language.instant('DMP-EDITOR.SNACK-BAR.SUCCESSFUL-DOI'), SnackBarNotificationLevel.Success);
}
onDOICallbackError(error) {
this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('DMP-EDITOR.SNACK-BAR.UNSUCCESSFUL-DOI'), SnackBarNotificationLevel.Error);
}
showOauth2Dialog(url: string, repo: DepositConfigurationModel, dmp: DmpOverviewModel) {
this.oauth2DialogService.login(url)
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
if (result !== undefined) {
if (result.oauthCode !== undefined && result.oauthCode !== null && !this.oauthLock) {
this.depositRepositoriesService.getAccessToken(repo.repositoryId, result.oauthCode)
.pipe(takeUntil(this._destroyed))
.subscribe(token => {
this.depositRepositoriesService.createDoi(repo.repositoryId, dmp.id, token)
.pipe(takeUntil(this._destroyed))
.subscribe(doi => {
this.onDOICallbackSuccess();
this.outputRepos.push(doi);
this.outputReposEmitter.emit(this.outputRepos);
}, error => this.onDOICallbackError(error));
});
this.oauthLock = true;
}
} else {
this.oauthLock = false;
}
});
}
}

29
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
View File

@ -112,13 +112,19 @@
</div> </div>
<div class="col-md-4 col-lg-4 p-0"> <div class="col-md-4 col-lg-4 p-0">
<div *ngIf="!hasDoi(dmp)" class="row d-flex flex-column ml-0 mr-0 mb-3"> <div *ngIf="!hasDoi(dmp)" class="row d-flex flex-column ml-0 mr-0 mb-3">
<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p> <div class="d-flex align-items-center doi-label">
<div class="doi-panel"> <span class="mr-3">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}: </span>
<mat-select #select class="mb-0 ml-3" placeholder="{{ dmp.dois[0].doi }}"> <ng-container *ngIf="selectedModel">
<mat-option *ngFor="let doi of dmp.dois" (click)="selectDoi(select, doi)"> <mat-select class="max-width-80 select-repo" [placeholder]="selectedModel.repositoryId">
{{doi.repositoryId}} <mat-option *ngFor="let doi of dmp.dois" (click)="selectDoi(doi)">
</mat-option> {{doi.repositoryId}}
</mat-select> </mat-option>
</mat-select>
</ng-container>
</div>
<div *ngIf="dmp.dois" class="doi-panel">
<span class="ml-3 mr-3">{{selectedModel.doi}}</span>
<div class="d-flex justify-content-end ml-3"> <div class="d-flex justify-content-end ml-3">
<button (click)="copyDoi(dmp.dois[0].doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.COPY' | translate}}" matTooltipPosition="above"> <button (click)="copyDoi(dmp.dois[0].doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
@ -161,13 +167,8 @@
<hr class="hr-line"> <hr class="hr-line">
</div> </div>
</div> </div>
<div *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" (click)="deposit()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> <app-dmp-deposit-dropdown [inputRepos]="depositRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
<button mat-mini-fab class="frame-btn"> <div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp) && isUserOwner" (click)="reverse()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div>
<div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp) && isUserOwner" (click)="reverse(dmp)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon> <mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button> </button>

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

@ -195,8 +195,7 @@
.doi-label { .doi-label {
font-size: 1em; font-size: 1em;
color: #212121; color: rgba(33, 33, 33, 0.6);
opacity: 0.6;
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
@ -337,6 +336,10 @@
padding: 0rem 0rem 0.4rem 0rem !important; padding: 0rem 0rem 0.4rem 0rem !important;
} }
.select-repo {
border-bottom: 1px solid #212121;
}
// .card-content { // .card-content {
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;

136
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -1,51 +1,52 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import {MatDialog} from '@angular/material/dialog';
import { MatDialog } from '@angular/material/dialog'; import {ActivatedRoute, Params, Router} from '@angular/router';
import { ActivatedRoute, Params, Router } from '@angular/router'; import {DatasetStatus} from '@app/core/common/enum/dataset-status';
import { DatasetStatus } from '@app/core/common/enum/dataset-status'; import {DmpStatus} from '@app/core/common/enum/dmp-status';
import { DmpStatus } from '@app/core/common/enum/dmp-status'; import {Principal} from '@app/core/model/auth/principal';
import { Principal } from '@app/core/model/auth/principal'; import {DatasetOverviewModel} from '@app/core/model/dataset/dataset-overview';
import { DatasetOverviewModel } from '@app/core/model/dataset/dataset-overview'; import {DatasetsToBeFinalized} from '@app/core/model/dataset/datasets-toBeFinalized';
import { DatasetsToBeFinalized } from '@app/core/model/dataset/datasets-toBeFinalized'; import {DmpOverviewModel} from '@app/core/model/dmp/dmp-overview';
import { DmpOverviewModel } from '@app/core/model/dmp/dmp-overview'; import {UserInfoListingModel} from '@app/core/model/user/user-info-listing';
import { UserInfoListingModel } from '@app/core/model/user/user-info-listing'; import {AuthService} from '@app/core/services/auth/auth.service';
import { AuthService } from '@app/core/services/auth/auth.service'; import {DmpService} from '@app/core/services/dmp/dmp.service';
import { DmpService } from '@app/core/services/dmp/dmp.service'; import {
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; SnackBarNotificationLevel,
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component'; UiNotificationService
import { DmpFinalizeDialogComponent, DmpFinalizeDialogInput, DmpFinalizeDialogOutput } from '@app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component'; } from '@app/core/services/notification/ui-notification-service';
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item'; import {ConfirmationDialogComponent} from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { BaseComponent } from '@common/base/base.component'; import {
import { TranslateService } from '@ngx-translate/core'; DmpFinalizeDialogComponent,
DmpFinalizeDialogInput,
DmpFinalizeDialogOutput
} from '@app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component';
import {BreadcrumbItem} from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import {BaseComponent} from '@common/base/base.component';
import {TranslateService} from '@ngx-translate/core';
import * as FileSaver from 'file-saver'; import * as FileSaver from 'file-saver';
import { Observable, of as observableOf } from 'rxjs'; import {Observable, of as observableOf} from 'rxjs';
import { takeUntil, map } from 'rxjs/operators'; import {map, takeUntil} from 'rxjs/operators';
import { Role } from "@app/core/common/enum/role"; import {Role} from "@app/core/common/enum/role";
import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation-dialog.component'; import {DmpInvitationDialogComponent} from '../invitation/dmp-invitation-dialog.component';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service'; import {ConfigurationService} from '@app/core/services/configuration/configuration.service';
import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service'; import {Location} from '@angular/common';
import { UserService } from '@app/core/services/user/user.service'; import {FormGroup} from '@angular/forms';
import { Location } from '@angular/common'; import {LockService} from '@app/core/services/lock/lock.service';
import { FormGroup } from '@angular/forms'; import {VersionListingModel} from '@app/core/model/version/version-listing.model';
import { LockService } from '@app/core/services/lock/lock.service'; import {CloneDialogComponent} from '../clone/clone-dialog/clone-dialog.component';
import { VersionListingModel } from '@app/core/model/version/version-listing.model'; import {DmpModel} from '@app/core/model/dmp/dmp';
import { CloneDialogComponent } from '../clone/clone-dialog/clone-dialog.component'; import {DmpEditorModel} from '../editor/dmp-editor.model';
import { DmpModel } from '@app/core/model/dmp/dmp'; import {FunderFormModel} from '../editor/grant-tab/funder-form-model';
import { DmpEditorModel } from '../editor/dmp-editor.model'; import {ProjectFormModel} from '../editor/grant-tab/project-form-model';
import { FunderFormModel } from '../editor/grant-tab/funder-form-model'; import {GrantTabModel} from '../editor/grant-tab/grant-tab-model';
import { ProjectFormModel } from '../editor/grant-tab/project-form-model'; import {ExtraPropertiesFormModel} from '../editor/general-tab/extra-properties-form.model';
import { GrantTabModel } from '../editor/grant-tab/grant-tab-model'; import {StartNewDmpDialogComponent} from '../start-new-dmp-dialogue/start-new-dmp-dialog.component';
import { ExtraPropertiesFormModel } from '../editor/general-tab/extra-properties-form.model'; import {MatomoService} from '@app/core/services/matomo/matomo-service';
import { StartNewDmpDialogComponent } from '../start-new-dmp-dialogue/start-new-dmp-dialog.component'; import {PopupNotificationDialogComponent} from '@app/library/notification/popup/popup-notification.component';
import { HttpClient } from '@angular/common/http'; import {DepositRepositoriesService} from '@app/core/services/deposit-repositories/deposit-repositories.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service'; import {DepositConfigurationModel} from '@app/core/model/deposit/deposit-configuration';
import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component'; import {DoiModel} from '@app/core/model/doi/doi';
import { DepositRepositoriesService } from '@app/core/services/deposit-repositories/deposit-repositories.service'; import {isNullOrUndefined} from '@app/utilities/enhancers/utils';
import { DmpDepositDialogComponent } from '../editor/dmp-deposit-dialog/dmp-deposit-dialog.component';
import { DepositConfigurationModel } from '@app/core/model/deposit/deposit-configuration';
import { DoiModel } from '@app/core/model/doi/doi';
import { MatSelect } from '@angular/material/select';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
@Component({ @Component({
selector: 'app-dmp-overview', selector: 'app-dmp-overview',
@ -68,6 +69,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
textMessage: any; textMessage: any;
versions: VersionListingModel[]; versions: VersionListingModel[];
version: VersionListingModel; version: VersionListingModel;
selectedModel: DoiModel;
@ViewChild('doi') @ViewChild('doi')
doi: ElementRef; doi: ElementRef;
@ -109,6 +111,9 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(data => { .subscribe(data => {
this.dmp = data; this.dmp = data;
if(!this.hasDoi()) {
this.selectedModel = this.dmp.dois[0];
}
this.checkLockStatus(this.dmp.id); this.checkLockStatus(this.dmp.id);
this.setIsUserOwner(); this.setIsUserOwner();
this.getAllVersions(this.dmp); this.getAllVersions(this.dmp);
@ -133,6 +138,9 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(data => { .subscribe(data => {
this.dmp = data; this.dmp = data;
if(!this.hasDoi()) {
this.selectedModel = this.dmp.dois[0];
}
// this.checkLockStatus(this.dmp.id); // this.checkLockStatus(this.dmp.id);
this.getAllVersions(this.dmp); this.getAllVersions(this.dmp);
const breadCrumbs = []; const breadCrumbs = [];
@ -454,8 +462,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
return (dmp.status == DmpStatus.Finalized && dmp.isPublic); return (dmp.status == DmpStatus.Finalized && dmp.isPublic);
} }
hasDoi(dmp: DmpOverviewModel) { hasDoi(dmp: DmpOverviewModel = null) {
return (this.dmp.dois == null || this.dmp.dois.length == 0) ? true : false; return (this.dmp.dois == null || this.dmp.dois.length == 0);
} }
getAllVersions(dmp: DmpOverviewModel) { getAllVersions(dmp: DmpOverviewModel) {
@ -494,29 +502,15 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
}); });
} }
deposit(){ afterDeposit(result: DoiModel[]) {
const dialogRef = this.dialog.open(DmpDepositDialogComponent, { if (result.length > 0) {
maxWidth: '600px', this.dmp.dois.push(...result);
disableClose: true, this.hasDOIToken = true;
restoreFocus: false, }
autoFocus: false,
data: {
depositRepos: [this.depositRepos, this.dmp],
message: this.language.instant('DMP-OVERVIEW.DEPOSIT.SELECT-REPOSITORIES'),
confirmButton: this.language.instant('DMP-OVERVIEW.DEPOSIT.AUTHORIZE'),
cancelButton: this.language.instant('DMP-OVERVIEW.DEPOSIT.CANCEL'),
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe((result: DoiModel[]) => {
if (result.length > 0) {
this.dmp.dois.push(...result);
this.hasDOIToken = true;
}
});
} }
moreDeposit(){ moreDeposit(){
return (this.dmp.dois.length < this.depositRepos.length) ? true : false; return (this.dmp.dois.length < this.depositRepos.length);
} }
finalize(dmp: DmpOverviewModel) { finalize(dmp: DmpOverviewModel) {
@ -642,8 +636,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
this.router.navigate(['/datasets', 'new', this.dmp.id]); this.router.navigate(['/datasets', 'new', this.dmp.id]);
} }
selectDoi(s: MatSelect, doiModel: DoiModel){ selectDoi(doiModel: DoiModel){
s.placeholder = doiModel.doi; this.selectedModel = doiModel;
const foundIdx = this.dmp.dois.findIndex(el => el == doiModel); const foundIdx = this.dmp.dois.findIndex(el => el == doiModel);
this.dmp.dois.splice(foundIdx, 1); this.dmp.dois.splice(foundIdx, 1);
this.dmp.dois.unshift(doiModel); this.dmp.dois.unshift(doiModel);

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

@ -10,21 +10,24 @@ import { CommonUiModule } from '@common/ui/common-ui.module';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CloneDialogModule } from '../clone/clone-dialog/clone-dialog.module'; import { CloneDialogModule } from '../clone/clone-dialog/clone-dialog.module';
import { NgDialogAnimationService } from 'ng-dialog-animation'; import { NgDialogAnimationService } from 'ng-dialog-animation';
import {DmpModule} from "@app/ui/dmp/dmp.module";
import {DmpDepositDropdown} from "@app/ui/dmp/editor/dmp-deposit-dropdown/dmp-deposit-dropdown.component";
@NgModule({ @NgModule({
imports: [ imports: [
CommonUiModule, CommonUiModule,
CommonFormsModule, CommonFormsModule,
UrlListingModule, UrlListingModule,
ConfirmationDialogModule, ConfirmationDialogModule,
CloneDialogModule, CloneDialogModule,
ExportMethodDialogModule, ExportMethodDialogModule,
FormattingModule, FormattingModule,
AutoCompleteModule, AutoCompleteModule,
RouterModule RouterModule
], ],
declarations: [ declarations: [
DmpOverviewComponent DmpOverviewComponent,
DmpDepositDropdown
], ],
providers: [ providers: [
NgDialogAnimationService NgDialogAnimationService

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

@ -1017,7 +1017,7 @@
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"NEW-VERSION": "New Version", "NEW-VERSION": "New Version",
"CREATE-DATASET": "Creating Dataset", "CREATE-DATASET": "Creating Dataset",
"SUBTITLE": "DOI", "SUBTITLE": "DOI provided by",
"PREVIEW-DATASET": "Previewing Dataset" "PREVIEW-DATASET": "Previewing Dataset"
}, },
"FIELDS": { "FIELDS": {

BIN
dmp-frontend/src/assets/images/repository-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB