Merge remote-tracking branch 'origin/Development' into Development

This commit is contained in:
George Kalampokis 2022-03-01 14:40:09 +02:00
commit f373c9016e
11 changed files with 48 additions and 26 deletions

View File

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

View File

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

View File

@ -159,9 +159,10 @@
<div class="full-width basic-info-input"> <div class="full-width basic-info-input">
<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'" <rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
[placeholder]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [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> </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> <mat-error>
{{'GENERAL.VALIDATION.REQUIRED'| translate}} {{'GENERAL.VALIDATION.REQUIRED'| translate}}
</mat-error> </mat-error>

View File

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

View File

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

View File

@ -32,9 +32,9 @@
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'" <rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' + [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> </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('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>
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

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