From 21c4de8f218d26f264bbdf56cada3388ca449f04 Mon Sep 17 00:00:00 2001 From: Diamantis Tziotzios Date: Thu, 5 Sep 2019 13:29:59 +0300 Subject: [PATCH] added Glossary and FAQs --- .../faq/faq-dialog.component.html | 39 +++++++++++++++++ .../faq/faq-dialog.component.scss | 13 ++++++ .../faq/faq-dialog.component.ts | 28 ++++++++++++ .../glossary/glossary-dialog.component.html | 26 +++++++++++ .../glossary/glossary-dialog.component.scss | 13 ++++++ .../glossary/glossary-dialog.component.ts | 28 ++++++++++++ .../sidebar-footer.component.css | 1 + .../sidebar-footer.component.html | 26 +++++++---- .../sidebar-footer.component.ts | 43 ++++++++++++++----- .../src/app/ui/sidebar/sidebar.module.ts | 15 +++++-- dmp-frontend/src/assets/i18n/en.json | 13 ++++++ 11 files changed, 222 insertions(+), 23 deletions(-) create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.scss create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.ts create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.scss create mode 100644 dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.ts diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.html new file mode 100644 index 000000000..72b3ef809 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.html @@ -0,0 +1,39 @@ +
+
+ {{'FAQ.TITLE' | translate}} +
+
+ close +
+
+
+

What is OpenDMP?

+

OpenDMP is an open and collaborative platform for creating Data Management Plans according to funders or institutions’ open science policy requirements. OpenDMP technology provides solutions and workflows that connect the DMP to the actual data where they are stored and link to other useful information such as publications and funding information, thus enabling the association between research outputs and processes and leading to the creation of coherent/ complete research entities. OpenDMP is comprised of two major features: the OpenDMP template and the Dataset Description.

+ +
+

Who is it for?

+

OpenDMP is inclusive to all researchers and research coordinators who may use the tool to create machine actionable DMPs. Funding and Research Performing Organizations as well as research communities may use the tool and create Dataset Description templates according to their preferences or requirements. OpenDMP may be used for purposes other than research projects, such as on the occasion of trainings that familiarise scientists with the data management planning process.

+ +
+

How can I use it?

+

OpenDMP is comprised of two main functionalities: DMP templates and Dataset Descriptions. Additional entities are Projects that link to funders and grants information.
OpenDMP can be used for: +

A. viewing/ consulting publicly released DMPs and Dataset Descriptions or Projects corresponding to DMPs

+ The tool offers options for publishing DMPs in two modes, private or public. To view public DMPs and Dataset Descriptions, there is no need for login to the platform. + +

B. writing and publishing a DMP

+ The tool helps researchers comply with mandates that may be attached to their grant proposal/ project funding. They can therefore choose from the most suitable to their needs template from the Dataset Descriptions collection and proceed with answering the corresponding questions. Once finalized, researchers can assign a DOI to their DMP, publish and eventually cite it. + +

C. practicing in writing DMPs and Dataset Descriptions

+ Given that Data Management Planning reflects the data management lifecycle and in accordance/ response to the increasing demand of the global scientific/ research community for training in Research Data Management (RDM), openDMP may be used for educational purposes. Examples may refer to embedding DMP and DMP tools in specific curricula or even utilization of the tool for researchers and students familiarization with the concept and process, as part of library instructions’ sessions. +

+ +
+

What is the difference between the “Wizard” and the “Expert” modes/ features?

+

There are two ways of creating a DMP: the “Wizard” and the “Expert”. The DMP Wizard combines the most necessary fields of the DMP template and the Data Description template. It is an easy way of starting a DMP and completing a Dataset Description. The downside when using the Wizard is that it only supports one Dataset Description. To add more datasets documentation, someone must open the DMP from DMP Expert. +
DMP expert contains extra fields for describing the project, grant, funding, contributors and associations between DMP authors, etc. DMP Expert is advised for use when further modification and personalization is to take place. +

+ +
+
+
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.scss b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.scss new file mode 100644 index 000000000..e2869c014 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.scss @@ -0,0 +1,13 @@ +.form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.full-width { + width: 100%; +} + +.close-btn { + cursor: pointer; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.ts new file mode 100644 index 000000000..8b680044f --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/faq/faq-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, Inject } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; + +@Component({ + selector: 'app-faq-dialog', + templateUrl: './faq-dialog.component.html', + styleUrls: ['./faq-dialog.component.scss'] +}) +export class FaqDialogComponent { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: FormGroup + ) { } + + cancel() { + this.dialogRef.close(); + } + + send() { + this.dialogRef.close(this.data); + } + + close() { + this.dialogRef.close(false); + } +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.html new file mode 100644 index 000000000..4b6ef450c --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.html @@ -0,0 +1,26 @@ +
+
+ {{'GLOSSARY.TITLE' | translate}} +
+
+ close +
+
+
+

DMP

+

A DMP - short for Data Management Plan - is a document describing the processes that the data have undergone and the tools used for their handling and storage during a research lifecycle. Most importantly, DMPs secure provenance and enable re-use of data by appointing data managers and by including information on how data can be re-used by others in the future. Therefore, a DMP is a living document which is modified according to the data developments of a project before it’s completed and handed over at the end of the project. + Public funders increasingly contain DMPs in their grant proposals or policy funding requirements. A good paradigm is the European Commission demands for the production and delivery of DMPs for projects funded under the Horizon 2020 Funding Programme. On that note, and to encourage good data management practices uptake, many European institutions include DMPs in post-graduate researchers policies and offer relevant support to staff and students. +

+ +

DMP template

+

DMP template contains general but vital information about the name and the duration of the project that the DMP corresponds to, the contributing organisations and individuals as well as the datasets that are under the Dataset Description section. It also offers the possibility of describing datasets other than primary data generated, under “External References” section. A DMP template can have many Dataset Descriptions. +

+ +

Dataset Description

+

Dataset Description documents the management processes of datasets following funder’s or institution’s requirements. A dataset description is essentially a questionnaire template with underlying added value services for interoperability and machine readability of information which is developed based on the given requirements. Management requirements differ from funder to funder and from institution to institution, hence the growing collection of Dataset Descriptions to select from. + Moreover, a Dataset Description links to the documentation of one dataset, hence a DMP template may contain more than one dataset descriptions on the occasion when multiple datasets were used during the project. When documentation of some of the project’s datasets falls under additional requirements (e.g. projects receiving multiple grants from different sources), there is the possibility of describing datasets with more than one Dataset Description template. +

+
+
+
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.scss b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.scss new file mode 100644 index 000000000..e2869c014 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.scss @@ -0,0 +1,13 @@ +.form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.full-width { + width: 100%; +} + +.close-btn { + cursor: pointer; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.ts new file mode 100644 index 000000000..b2d7c36e1 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/glossary/glossary-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, Inject } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; + +@Component({ + selector: 'app-glossary-dialog', + templateUrl: './glossary-dialog.component.html', + styleUrls: ['./glossary-dialog.component.scss'] +}) +export class GlossaryDialogComponent { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: FormGroup + ) { } + + cancel() { + this.dialogRef.close(); + } + + send() { + this.dialogRef.close(this.data); + } + + close() { + this.dialogRef.close(false); + } +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css index 7f8f7396d..f1fb4aa11 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css @@ -13,6 +13,7 @@ border-radius: 0px; color: white; cursor: pointer; + display: inline-flex; } .sidebar-footer :hover { diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html index 5f3c086b2..b369bb370 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html @@ -1,9 +1,19 @@ -
- -

{{'CONTACT.SUPPORT.TITLE' | translate}}

+
+ +
+

{{'FOOTER.GLOSSARY' | translate}}

+
+
+

{{'FOOTER.FAQ' | translate}}

+
+
+

{{'FOOTER.CONTACT-SUPPORT' | translate}}

+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts index d5edaafc4..b3e69608a 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts @@ -1,14 +1,16 @@ import { Component, OnInit } from '@angular/core'; +import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material'; -import { takeUntil } from 'rxjs/operators'; -import { BaseComponent } from '../../../core/common/base/base.component'; -import { ContactDialogComponent } from '../../../library/contact-dialog/contact-dialog.component'; -import { ContactSupportService } from '../../../core/services/contact-support/contact-support.service'; -import { UiNotificationService, SnackBarNotificationLevel } from '../../../core/services/notification/ui-notification-service'; import { TranslateService } from '@ngx-translate/core'; -import { ContactEmailFormModel } from '../../../core/model/contact/contact-email-form-model'; -import { FormGroup, AbstractControl, FormControl, FormArray } from '@angular/forms'; +import { takeUntil } from 'rxjs/operators'; import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model'; +import { BaseComponent } from '../../../core/common/base/base.component'; +import { ContactEmailFormModel } from '../../../core/model/contact/contact-email-form-model'; +import { ContactSupportService } from '../../../core/services/contact-support/contact-support.service'; +import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service'; +import { ContactDialogComponent } from '../../../library/contact-dialog/contact-dialog.component'; +import { FaqDialogComponent } from './faq/faq-dialog.component'; +import { GlossaryDialogComponent } from './glossary/glossary-dialog.component'; @Component({ selector: 'app-sidebar-footer', @@ -41,10 +43,7 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit { else { const dialogRef = this.dialog.open(ContactDialogComponent, { width: '400px', - hasBackdrop: true, - autoFocus: false, - closeOnNavigation: true, - disableClose: false, + disableClose: true, data: this.formGroup }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { @@ -61,6 +60,28 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit { } } + openGlossaryDialog() { + if (this.dialog.openDialogs.length > 0) { + this.dialog.closeAll(); + } + else { + const dialogRef = this.dialog.open(GlossaryDialogComponent, { + disableClose: true, + }); + } + } + + openFaqDialog() { + if (this.dialog.openDialogs.length > 0) { + this.dialog.closeAll(); + } + else { + const dialogRef = this.dialog.open(FaqDialogComponent, { + disableClose: true, + }); + } + } + onCallbackSuccess(): void { this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-EMAIL-SEND'), SnackBarNotificationLevel.Success); } diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts index bb0ac7da0..06ed28055 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonFormsModule } from '../../common/forms/common-forms.module'; import { CommonUiModule } from '../../common/ui/common-ui.module'; -import { SidebarComponent } from './sidebar.component'; -import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component'; import { ContactDialogModule } from '../../library/contact-dialog/contact-dialog.module'; +import { FaqDialogComponent } from './sidebar-footer/faq/faq-dialog.component'; +import { GlossaryDialogComponent } from './sidebar-footer/glossary/glossary-dialog.component'; +import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component'; +import { SidebarComponent } from './sidebar.component'; @NgModule({ imports: [ @@ -15,9 +17,14 @@ import { ContactDialogModule } from '../../library/contact-dialog/contact-dialog ], declarations: [ SidebarComponent, - SidebarFooterComponent + SidebarFooterComponent, + GlossaryDialogComponent, + FaqDialogComponent + ], + entryComponents: [ + GlossaryDialogComponent, + FaqDialogComponent ], - entryComponents: [], exports: [SidebarComponent] }) export class SidebarModule { } diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index adddec0ea..c29917b14 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -872,6 +872,19 @@ "WELCOME": "Welcome to OpenDMP", "WELCOME-MESSAGE": "Create, Link, Share Data Management Plans" }, + "FOOTER": { + "CONTACT-SUPPORT": "Contact Support", + "FAQ": "FAQ", + "GLOSSARY": "Glossary" + }, + "GLOSSARY": { + "TITLE": "Glossary", + "CLOSE": "Close" + }, + "FAQ": { + "TITLE": "FAQ", + "CLOSE": "Close" + }, "CONTACT": { "SUPPORT": { "TITLE": "Contact Support",