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

Use <rich-text-editor-component> 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 <angular-editor> with <rich-text-editor-component> (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.
This commit is contained in:
Konstantina Galouni 2021-11-01 15:10:00 +02:00
parent 7bdfcb70af
commit 03009edaa3
8 changed files with 54 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts
View File

@ -51,9 +51,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component
import { ParseStatus } from './listing/pipe/parse-status.pipe'; import { ParseStatus } from './listing/pipe/parse-status.pipe';
import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents'; 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 { 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 {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, MatBadgeModule,
DragulaModule, DragulaModule,
AutoCompleteModule, AutoCompleteModule,
HttpClientModule, AngularEditorModule, TransitionGroupModule, TransitionGroupModule,
RichTextEditorModule
], ],
declarations: [ declarations: [
DatasetProfileListingComponent, DatasetProfileListingComponent,

16
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
View File

@ -78,17 +78,17 @@
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]> <div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
<div *ngIf="showDescription" class="mb-4"> <div *ngIf="showDescription" class="mb-4">
<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5> <h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
<div class="editor-wrapper row"> <rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
<angular-editor class="full-width editor" id="editor1" [formControl]="form.get('description')" [config]="editorConfig" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"></angular-editor> [wrapperClasses]="'row'">
</div> </rich-text-editor-component>
</div> </div>
<div *ngIf="showExtendedDescription" class="mb-4"> <div *ngIf="showExtendedDescription" class="mb-4">
<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5> <h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
<div class="editor-wrapper row"> <rich-text-editor-component [parentFormGroup]="form" [controlName]="'extendedDescription'"
<angular-editor class="full-width editor" id="editor2" [formControl]="form.get('extendedDescription')" [config]="editorConfig" [id]="'editor2'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"></angular-editor> [wrapperClasses]="'row'">
</div> </rich-text-editor-component>
</div> </div>
<div class="row" *ngIf="showAdditionalInfo"> <div class="row" *ngIf="showAdditionalInfo">
<mat-form-field class="col p-0 underline-line-field" appearance="legacy"> <mat-form-field class="col p-0 underline-line-field" appearance="legacy">

34
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
View File

@ -49,7 +49,6 @@ import {Subject} from 'rxjs';
import {debounceTime, delay, map, takeUntil, tap} from 'rxjs/operators'; import {debounceTime, delay, map, takeUntil, tap} from 'rxjs/operators';
import {GENERAL_ANIMATIONS} from '../../animations/animations'; import {GENERAL_ANIMATIONS} from '../../animations/animations';
import {BaseComponent} from '@common/base/base.component'; import {BaseComponent} from '@common/base/base.component';
import {AngularEditorConfig} from "@kolkov/angular-editor";
import {TransitionGroupComponent} from "@app/ui/transition-group/transition-group.component"; import {TransitionGroupComponent} from "@app/ui/transition-group/transition-group.component";
@Component({ @Component({
@ -59,39 +58,6 @@ import {TransitionGroupComponent} from "@app/ui/transition-group/transition-grou
animations:[GENERAL_ANIMATIONS] animations:[GENERAL_ANIMATIONS]
}) })
export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges { 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() form: FormGroup;
@Input() indexPath: string; @Input() indexPath: string;

7
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html
View File

@ -30,10 +30,9 @@
<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div> <div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div> <div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<div class="col-12"> <div class="col-12">
<div class="editor-wrapper"> <rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
<angular-editor class="editor" id="editor" formControlName="description" [config]="editorConfig" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'">
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"></angular-editor> </rich-text-editor-component>
</div>
</div> </div>
<!-- <div class="col-md-6"> <!-- <div class="col-md-6">

34
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts
View File

@ -6,7 +6,6 @@ import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import {AngularEditorConfig} from "@kolkov/angular-editor";
@Component({ @Component({
selector: 'app-dataset-profile-editor-section-component', selector: 'app-dataset-profile-editor-section-component',
@ -15,39 +14,6 @@ import {AngularEditorConfig} from "@kolkov/angular-editor";
}) })
export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit { export class DatasetProfileEditorSectionComponent extends BaseComponent 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'
]
]
};
@Input() form: FormGroup; @Input() form: FormGroup;
//@Input() dataModel: SectionEditorModel; //@Input() dataModel: SectionEditorModel;

8
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -157,10 +157,10 @@
<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> --> <!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div> <div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
<div class="full-width basic-info-input"> <div class="full-width basic-info-input">
<div class="editor-wrapper" [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''"> <rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
<angular-editor id="editor" class="editor" [formControl]="form.get('description')" [config]="editorConfig" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER' | translate}}"></angular-editor> [wrapperClasses]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
</div> </rich-text-editor-component>
<div [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper"> <div [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error> <mat-error>
{{'GENERAL.VALIDATION.REQUIRED'| translate}} {{'GENERAL.VALIDATION.REQUIRED'| translate}}

36
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -45,8 +45,6 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil
import { UserService } from '@app/core/services/user/user.service'; import { UserService } from '@app/core/services/user/user.service';
import { MatInput } from '@angular/material/input'; import { MatInput } from '@angular/material/input';
import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component'; import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
import {AngularEditorConfig} from "@kolkov/angular-editor";
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json'); const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@ -58,39 +56,6 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
providers:[VisibilityRulesService] providers:[VisibilityRulesService]
}) })
export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit { 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 { canDeactivate(): boolean {
return !this.form.dirty; return !this.form.dirty;
@ -378,6 +343,7 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
const renderStyle = field.get('viewStyle').get('renderStyle').value; const renderStyle = field.get('viewStyle').get('renderStyle').value;
if(renderStyle && ![ if(renderStyle && ![
DatasetProfileFieldViewStyle.TextArea, DatasetProfileFieldViewStyle.TextArea,
DatasetProfileFieldViewStyle.RichTextArea,
DatasetProfileFieldViewStyle.FreeText, DatasetProfileFieldViewStyle.FreeText,
DatasetProfileFieldViewStyle.BooleanDecision, DatasetProfileFieldViewStyle.BooleanDecision,
DatasetProfileFieldViewStyle.RadioBox, DatasetProfileFieldViewStyle.RadioBox,

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

@ -254,47 +254,47 @@
} }
// CSS for <angular-editor> (@kolkov/angular-editor) // CSS for <angular-editor> (@kolkov/angular-editor)
.angular-editor-textarea {
min-height: 150px !important;
}
.form-field-subscript-wrapper { .form-field-subscript-wrapper {
font-size: 75%; font-size: 75%;
padding-left: 12px; padding-left: 12px;
margin-top: 8px; margin-top: 8px;
} }
.editor-wrapper { //.angular-editor-textarea {
border: 1px solid transparent !important; // min-height: 150px !important;
border-radius: 5px; //}
} //
//.editor-wrapper {
.angular-editor-toolbar { // border: 1px solid transparent !important;
margin-left: 1px; // border-radius: 5px;
margin-right: 1px; //}
} //
//.angular-editor-toolbar {
.angular-editor-textarea, .angular-editor-toolbar { // margin-left: 1px;
border: none !important; // margin-right: 1px;
} //}
//
.angular-editor { //.angular-editor-textarea, .angular-editor-toolbar {
border: 1px solid #ddd !important; // border: none !important;
border-radius: 5px; //}
background-color: #fff; //
} //.angular-editor {
// border: 1px solid #ddd !important;
.editor-wrapper:hover, .angular-editor:hover { // border-radius: 5px;
border: 1px solid #000 !important; // background-color: #fff;
} //}
//
.editor-wrapper:focus-within, .angular-editor:focus-within { //.editor-wrapper:hover, .angular-editor:hover {
border: 1px solid #034459 !important; // border: 1px solid #000 !important;
} //}
//
.required.editor-wrapper, .required .editor .angular-editor { //.editor-wrapper:focus-within, .angular-editor:focus-within {
border: 1px solid #f44336 !important; // border: 1px solid #034459 !important;
} //}
//
//.required.editor-wrapper, .required .editor .angular-editor {
// border: 1px solid #f44336 !important;
//}
// end of CSS for <angular-editor> (@kolkov/angular-editor) // end of CSS for <angular-editor> (@kolkov/angular-editor)
/* Transition Group */ /* Transition Group */