Created common component for rich text editor configuration & added rich text for dmp and dataset description.

1. library/rich-text-editor: [NEW] Common component which configures a rich text editor.
2. dataset-editor.component.html & main-info.component.html: Use <rich-text-editor-component> to allow rich text in dataset and dmp description.
3. dataset-overview.component.html & dmp-overview.component.html: Show dataset and dmp description as innerHTML.
4. dataset.module.ts & dmp.module.ts: Imported RichTextEditorModule.
This commit is contained in:
Konstantina Galouni 2021-11-01 14:45:02 +02:00
parent 6ff9ea2d05
commit 7bdfcb70af
9 changed files with 142 additions and 10 deletions

View File

@ -0,0 +1,45 @@
::ng-deep .angular-editor-textarea {
min-height: 150px !important;
}
//.form-field-subscript-wrapper {
// font-size: 75%;
// padding-left: 12px;
// margin-top: 8px;
//}
.editor-wrapper {
border: 1px solid transparent !important;
border-radius: 5px;
}
::ng-deep .angular-editor-toolbar {
margin-left: 1px;
margin-right: 1px;
}
::ng-deep .angular-editor-textarea, ::ng-deep .angular-editor-toolbar {
border: none !important;
}
::ng-deep .angular-editor {
border: 1px solid #ddd !important;
border-radius: 5px;
background-color: #fff;
}
.editor-wrapper:hover, ::ng-deep .angular-editor:hover {
border: 1px solid #000 !important;
}
.editor-wrapper:focus-within, ::ng-deep .angular-editor:focus-within {
border: 1px solid #034459 !important;
}
.required.editor-wrapper, .required .editor ::ng-deep .angular-editor {
border: 1px solid #f44336 !important;
}
.full-width {
width: 100%;
}

View File

@ -0,0 +1,58 @@
import {Component, Input} from "@angular/core";
import {AngularEditorConfig} from "@kolkov/angular-editor";
@Component({
selector: 'rich-text-editor-component',
template: `
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
</div>
`,
styleUrls: ['./rich-text-editor.component.scss']
})
export class RichTextEditorComponent {
@Input() parentFormGroup;
@Input() controlName;
@Input() id: string = "editor1";
@Input() placeholder: string = "Enter text";
@Input() required: boolean = false;
@Input() wrapperClasses: string = "";
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
maxHeight: 'auto',
width: '100%',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: '',
defaultParagraphSeparator: '',
defaultFontName: '',
defaultFontSize: '',
sanitize: true,
toolbarPosition: 'top',
toolbarHiddenButtons: [
[
'heading',
'fontName'
],
[
'fontSize',
'backgroundColor',
'customClasses',
'insertImage',
'insertVideo',
'removeFormat',
'toggleEditorMode'
]
]
};
constructor() {
}
}

View File

@ -0,0 +1,21 @@
import {NgModule} from "@angular/core";
import {HttpClientModule} from "@angular/common/http";
import {CommonUiModule} from "@common/ui/common-ui.module";
import {CommonFormsModule} from "@common/forms/common-forms.module";
import {AngularEditorModule} from "@kolkov/angular-editor";
import {RichTextEditorComponent} from "@app/library/rich-text-editor/rich-text-editor.component";
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
HttpClientModule, AngularEditorModule
],
declarations: [
RichTextEditorComponent
],
exports: [
RichTextEditorComponent
]
})
export class RichTextEditorModule { }

View File

@ -29,11 +29,15 @@
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a> <a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> --> <span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
<div class="description-form"> <div class="description-form">
<mat-form-field> <rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea> [placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' +
((formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error> <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-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -27,6 +27,7 @@ import { FormProgressIndicationModule } from '../misc/dataset-description-form/c
import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module'; import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component'; import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
import { DatasetOverviewModule } from './overview/dataset-overview.module'; import { DatasetOverviewModule } from './overview/dataset-overview.module';
import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
@NgModule({ @NgModule({
imports: [ imports: [
@ -45,7 +46,8 @@ import { DatasetOverviewModule } from './overview/dataset-overview.module';
FormValidationErrorsDialogModule, FormValidationErrorsDialogModule,
DatasetCopyDialogModule, DatasetCopyDialogModule,
DatasetOverviewModule, DatasetOverviewModule,
FormProgressIndicationModule FormProgressIndicationModule,
RichTextEditorModule
], ],
declarations: [ declarations: [
DatasetListingComponent, DatasetListingComponent,

View File

@ -91,7 +91,7 @@
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dataset.description"> <div class="row" *ngIf="dataset.description">
<p class="desc-txt">{{ dataset.description }}</p> <p class="desc-txt" [innerHTML]="dataset.description"></p>
</div> </div>
<div class="row" *ngIf="!dataset.description"> <div class="row" *ngIf="!dataset.description">
<span class="material-icons">horizontal_rule</span> <span class="material-icons">horizontal_rule</span>

View File

@ -49,6 +49,7 @@ import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dia
import { FormProgressIndicationComponent } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component'; import { FormProgressIndicationComponent } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component';
import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module'; 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 { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview-dialog.component';
import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
@NgModule({ @NgModule({
imports: [ imports: [
@ -66,7 +67,8 @@ import { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview
DatasetEditorDetailsModule, DatasetEditorDetailsModule,
DatasetDescriptionFormModule, DatasetDescriptionFormModule,
NgxDropzoneModule, NgxDropzoneModule,
FormProgressIndicationModule FormProgressIndicationModule,
RichTextEditorModule
], ],
declarations: [ declarations: [
DmpListingComponent, DmpListingComponent,

View File

@ -25,9 +25,9 @@
<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div> <div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.FIELDS.DESCRIPTION-HINT' | translate}}</div> <div class="hint">{{'DMP-EDITOR.FIELDS.DESCRIPTION-HINT' | translate}}</div>
<div class="description-form"> <div class="description-form">
<mat-form-field> <rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea> [placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'">
</mat-form-field> </rich-text-editor-component>
</div> </div>
</div> </div>
</div> </div>

View File

@ -82,7 +82,7 @@
</div> </div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dmp.description"> <div class="row" *ngIf="dmp.description">
<p class="desc-txt">{{ dmp.description }}</p> <p class="desc-txt" [innerHTML]="dmp.description"></p>
</div> </div>
<div class="row" *ngIf="!dmp.description"> <div class="row" *ngIf="!dmp.description">
<span class="material-icons">horizontal_rule</span> <span class="material-icons">horizontal_rule</span>