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

#7518 & #7519: [Bug fix] in Required indication in Rich Text Area fields & editable general info on dataset template new version & date with time shown in dataset templates. 

1. rich-text-editor.component.scss: Css for .editor-wrapper .disabled added.
2. rich-text-editor.component.ts: New "editable" Input() field added, to allow rich text area to be disabled and not editable.
3. dataset-profile-editor.component.html:
   a. In <rich-text-editor-component> set [editable]="form.controls['description'].status !== 'DISABLED'"
   b. #7518 Show required message and css  in rich text area when there is error "required" and description is touched (not dirty)
4. dataset-profile-editor.component.ts: #7519 comment disable of form controls label (title), description and language.
5. dataset-profile-listing.component.html: #7519 Time added in created column of dataset templates.
6. dataset-editor.component.html & form-field.component.html: #7518 Show required message and css  in rich text area when there is error "required" and description is touched (not dirty).
7. clone-dialog.component.html: Replaced <textarea> with <rich-text-editor-component> for description field.
8. clone-dialog.module.ts: Import RichTextEditorModule.
9. clone-dialog.component.ts: #7519 comment disable of form group label (title)
10. styles.scss: Css for class .form-field-subscript-wrapper updated.
This commit is contained in:
Konstantina Galouni 2022-02-28 18:08:38 +02:00
parent c3aff92cd4
commit b68ede8cd7
11 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
View File

@ -29,12 +29,22 @@
background-color: #fff;
}
.editor-wrapper:hover, ::ng-deep .angular-editor:hover {
border: 1px solid #000 !important;
.editor-wrapper :not(.disabled) {
.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;
}
}
.editor-wrapper:focus-within, ::ng-deep .angular-editor:focus-within {
border: 1px solid #034459 !important;
.editor-wrapper .disabled {
color: rgba(0, 0, 0, 0.38);
}
.editor-wrapper .disabled ::ng-deep button {
pointer-events: none;
}
.required.editor-wrapper, .required .editor ::ng-deep .angular-editor {

10
dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
View File

@ -6,7 +6,8 @@ import {FormControl} from "@angular/forms";
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"
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
[config]="editorConfig" [formControlName]="controlName"
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
</div>
@ -20,9 +21,10 @@ export class RichTextEditorComponent {
@Input() placeholder: string = "Enter text";
@Input() required: boolean = false;
@Input() wrapperClasses: string = "";
@Input() editable: boolean = true;
editorConfig: AngularEditorConfig = {
editable: true,
editable: this.editable,
spellcheck: true,
height: 'auto',
minHeight: '0',
@ -58,4 +60,8 @@ export class RichTextEditorComponent {
get formInput(): FormControl {
return this.parentFormGroup.get(this.controlName);
}
ngAfterContentInit() {
this.editorConfig.editable = this.editable;
}
}

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

@ -159,9 +159,10 @@
<div class="full-width basic-info-input">
<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' : ''">
[wrapperClasses]="(form.get('description').touched && form.get('description').hasError('required')) ? 'required' : ''"
[editable]="form.controls['description'].status !== 'DISABLED'">
</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').touched && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error>
{{'GENERAL.VALIDATION.REQUIRED'| translate}}
</mat-error>

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

@ -195,9 +195,9 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
// this.isDeleted = this.masterItem.isActive === IsActive.Inactive;
this.form = this.dataModel.buildForm();
this.form.get('version').setValue(this.form.get('version').value + 1);
this.form.controls['label'].disable();
this.form.controls['description'].disable();
this.form.controls['language'].disable();
// this.form.controls['label'].disable();
// this.form.controls['description'].disable();
// this.form.controls['language'].disable();
this.prepareForm();
} catch (error){
this.logger.error('Could not parse MasterItem: ' + data);

2
dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
View File

@ -41,7 +41,7 @@
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'short'}}</mat-cell>
</ng-container>
<!-- Column Definition: Status -->

4
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
View File

@ -32,9 +32,9 @@
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' +
((formGroup.get('description').dirty && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')">
((formGroup.get('description').touched && (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">
<div [class]="(formGroup.get('description').touched && (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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>

11
dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html
View File

@ -21,13 +21,14 @@
</div>
<!-- Description field -->
<div class="row">
<div class="col-12">
<div class="col-12 pb-4">
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
<div class="description-form">
<mat-form-field>
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [formControl]="this.data.formGroup.get('description')"></textarea>
</mat-form-field>
<div class="full-width basic-info-input">
<rich-text-editor-component [parentFormGroup]="data.formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[editable]="data.formGroup.controls['description'].status !== 'DISABLED'">
</rich-text-editor-component>
</div>
</div>
</div>

2
dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts
View File

@ -45,7 +45,7 @@ export class CloneDialogComponent extends BaseComponent {
};
if (this.data.isNewVersion) {
this.data.formGroup.get('label').disable();
// this.data.formGroup.get('label').disable();
}
}

3
dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.module.ts
View File

@ -3,9 +3,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { CloneDialogComponent } from './clone-dialog.component';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
@NgModule({
imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule],
imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule],
declarations: [CloneDialogComponent],
exports: [CloneDialogComponent],
entryComponents: [CloneDialogComponent]

8
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -114,10 +114,12 @@
[placeholder]="form.get('data').value.label"
[required]="form.get('validationRequired').value"
[wrapperClasses]="'full-width editor ' +
((form.get('validationRequired').value) ? 'required' : '')">
((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')">
</rich-text-editor-component>
<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched) ? 'visible' : 'invisible'" class="col-12">
<div class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</ng-container>

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

@ -255,8 +255,9 @@
// CSS for <angular-editor> (@kolkov/angular-editor)
.form-field-subscript-wrapper {
font-size: 75%;
padding-left: 12px;
font-size: 75% !important;
//padding-left: 12px;
padding: 0 1em;
margin-top: 8px;
}