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 { 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,

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 *ngIf="showDescription" class="mb-4">
<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
<div class="editor-wrapper row">
<angular-editor class="full-width editor" id="editor1" [formControl]="form.get('description')" [config]="editorConfig"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
</div>
<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'"
[wrapperClasses]="'row'">
</rich-text-editor-component>
</div>
<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>
<div class="editor-wrapper row">
<angular-editor class="full-width editor" id="editor2" [formControl]="form.get('extendedDescription')" [config]="editorConfig"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"></angular-editor>
</div>
<rich-text-editor-component [parentFormGroup]="form" [controlName]="'extendedDescription'"
[id]="'editor2'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'"
[wrapperClasses]="'row'">
</rich-text-editor-component>
</div>
<div class="row" *ngIf="showAdditionalInfo">
<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 {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;

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="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<div class="col-12">
<div class="editor-wrapper">
<angular-editor class="editor" id="editor" formControlName="description" [config]="editorConfig"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
</div>
<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
[placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'">
</rich-text-editor-component>
</div>
<!-- <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 { Guid } from '@common/types/guid';
import { takeUntil } from 'rxjs/operators';
import {AngularEditorConfig} from "@kolkov/angular-editor";
@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 {
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() 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">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
<div class="full-width basic-info-input">
<div class="editor-wrapper" [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
<angular-editor id="editor" class="editor" [formControl]="form.get('description')" [config]="editorConfig"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER' | translate}}"></angular-editor>
</div>
<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
[placeholder]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'"
[wrapperClasses]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
</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">
<mat-error>
{{'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 { 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,

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

@ -254,47 +254,47 @@
}
// CSS for <angular-editor> (@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 <angular-editor> (@kolkov/angular-editor)
/* Transition Group */