From 03009edaa3a236e22878caa2c07d28c36514c0a7 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Mon, 1 Nov 2021 15:10:00 +0200 Subject: [PATCH] Use when html editor is needed - replace in dataset template descriprion, section & question descriptions. 1. dataset-profile-editor-section.component.html & dataset-profile-editor.component.html & dataset-profile-editor-composite-field.component.html: Replace with (custom common component when rich text editor is set). 2. dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts & dataset-profile-editor-composite-field.component.ts: Remove AngularEditorConfig (this is set in RichTextEditorComponent). 3. dataset-profile.module.ts: Instead of AngularEditorModule, import RichTextEditorModule (common component where rich text editor is set). 4. styles.scss: Moved css for angular editor to dedicated css file (src/app/library/rich-text-editor/rich-text-editor.component.scss) and keep here only "form-field-subscript-wrapper" class. --- .../dataset-profile/dataset-profile.module.ts | 6 +- ...file-editor-composite-field.component.html | 16 ++--- ...rofile-editor-composite-field.component.ts | 34 --------- ...aset-profile-editor-section.component.html | 7 +- ...ataset-profile-editor-section.component.ts | 34 --------- .../dataset-profile-editor.component.html | 8 +-- .../dataset-profile-editor.component.ts | 36 +--------- dmp-frontend/src/styles.scss | 70 +++++++++---------- 8 files changed, 54 insertions(+), 157 deletions(-) diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts index 44a213352..ff0b0b52e 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts @@ -51,9 +51,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component import { ParseStatus } from './listing/pipe/parse-status.pipe'; import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents'; import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section'; -import {HttpClientModule} from "@angular/common/http"; -import {AngularEditorModule} from "@kolkov/angular-editor"; import {TransitionGroupModule} from "@app/ui/transition-group/transition-group.module"; +import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module"; @@ -72,7 +71,8 @@ import {TransitionGroupModule} from "@app/ui/transition-group/transition-group.m MatBadgeModule, DragulaModule, AutoCompleteModule, - HttpClientModule, AngularEditorModule, TransitionGroupModule, + TransitionGroupModule, + RichTextEditorModule ], declarations: [ DatasetProfileListingComponent, diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 188936b9c..434dd727d 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -78,17 +78,17 @@
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}
-
- -
+ +
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}
-
- -
+ +
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts index d8ff4acb7..4ae05edfc 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts @@ -49,7 +49,6 @@ import {Subject} from 'rxjs'; import {debounceTime, delay, map, takeUntil, tap} from 'rxjs/operators'; import {GENERAL_ANIMATIONS} from '../../animations/animations'; import {BaseComponent} from '@common/base/base.component'; -import {AngularEditorConfig} from "@kolkov/angular-editor"; import {TransitionGroupComponent} from "@app/ui/transition-group/transition-group.component"; @Component({ @@ -59,39 +58,6 @@ import {TransitionGroupComponent} from "@app/ui/transition-group/transition-grou animations:[GENERAL_ANIMATIONS] }) export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges { - editorConfig: AngularEditorConfig = { - editable: true, - spellcheck: true, - height: 'auto', - minHeight: '0', - maxHeight: 'auto', - width: '100%', - minWidth: '0', - translate: 'yes', - enableToolbar: true, - showToolbar: true, - placeholder: 'Enter text here...', - defaultParagraphSeparator: '', - defaultFontName: '', - defaultFontSize: '', - sanitize: true, - toolbarPosition: 'top', - toolbarHiddenButtons: [ - [ - 'heading', - 'fontName' - ], - [ - 'fontSize', - 'backgroundColor', - 'customClasses', - 'insertImage', - 'insertVideo', - 'removeFormat'//, - // 'toggleEditorMode' - ] - ] - }; @Input() form: FormGroup; @Input() indexPath: string; diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html index 4bf4fe5c2..391dd4238 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html @@ -30,10 +30,9 @@
{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}}
{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}
-
- -
+ +
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}
-
- -
+ +
{{'GENERAL.VALIDATION.REQUIRED'| translate}} diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts index cd4385d16..0fc6b11de 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts @@ -45,8 +45,6 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil import { UserService } from '@app/core/services/user/user.service'; import { MatInput } from '@angular/material/input'; import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component'; -import {AngularEditorConfig} from "@kolkov/angular-editor"; - const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json'); @@ -58,39 +56,6 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable. providers:[VisibilityRulesService] }) export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit { - editorConfig: AngularEditorConfig = { - editable: true, - spellcheck: true, - height: 'auto', - minHeight: '0', - maxHeight: 'auto', - width: '100%', - minWidth: '0', - translate: 'yes', - enableToolbar: true, - showToolbar: true, - placeholder: 'Enter text here...', - defaultParagraphSeparator: '', - defaultFontName: '', - defaultFontSize: '', - sanitize: true, - toolbarPosition: 'top', - toolbarHiddenButtons: [ - [ - 'heading', - 'fontName' - ], - [ - 'fontSize', - 'backgroundColor', - 'customClasses', - 'insertImage', - 'insertVideo', - 'removeFormat', - 'toggleEditorMode' - ] - ] - }; canDeactivate(): boolean { return !this.form.dirty; @@ -378,6 +343,7 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent const renderStyle = field.get('viewStyle').get('renderStyle').value; if(renderStyle && ![ DatasetProfileFieldViewStyle.TextArea, + DatasetProfileFieldViewStyle.RichTextArea, DatasetProfileFieldViewStyle.FreeText, DatasetProfileFieldViewStyle.BooleanDecision, DatasetProfileFieldViewStyle.RadioBox, diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index bd009402b..4d24d173e 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -254,47 +254,47 @@ } // CSS for (@kolkov/angular-editor) -.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; -} - -.angular-editor-toolbar { - margin-left: 1px; - margin-right: 1px; -} - -.angular-editor-textarea, .angular-editor-toolbar { - border: none !important; -} - -.angular-editor { - border: 1px solid #ddd !important; - border-radius: 5px; - background-color: #fff; -} - -.editor-wrapper:hover, .angular-editor:hover { - border: 1px solid #000 !important; -} - -.editor-wrapper:focus-within, .angular-editor:focus-within { - border: 1px solid #034459 !important; -} - -.required.editor-wrapper, .required .editor .angular-editor { - border: 1px solid #f44336 !important; -} +//.angular-editor-textarea { +// min-height: 150px !important; +//} +// +//.editor-wrapper { +// border: 1px solid transparent !important; +// border-radius: 5px; +//} +// +//.angular-editor-toolbar { +// margin-left: 1px; +// margin-right: 1px; +//} +// +//.angular-editor-textarea, .angular-editor-toolbar { +// border: none !important; +//} +// +//.angular-editor { +// border: 1px solid #ddd !important; +// border-radius: 5px; +// background-color: #fff; +//} +// +//.editor-wrapper:hover, .angular-editor:hover { +// border: 1px solid #000 !important; +//} +// +//.editor-wrapper:focus-within, .angular-editor:focus-within { +// border: 1px solid #034459 !important; +//} +// +//.required.editor-wrapper, .required .editor .angular-editor { +// border: 1px solid #f44336 !important; +//} // end of CSS for (@kolkov/angular-editor) /* Transition Group */