diff --git a/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.html b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.html new file mode 100644 index 0000000000..7bb36d055c --- /dev/null +++ b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.html @@ -0,0 +1,22 @@ +

Configure Text Block

+ + + +

+ This text is displayed as part of the form to provide additional information + without any input options for the user: +

+ +
+
+ + + +
+
+
+ + + + + diff --git a/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.scss b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.scss new file mode 100644 index 0000000000..405d7096a4 --- /dev/null +++ b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.scss @@ -0,0 +1,6 @@ + +.entity-form-cell { + mat-form-field { + width: 100%; + } +} diff --git a/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.spec.ts b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.spec.ts new file mode 100644 index 0000000000..bde8309680 --- /dev/null +++ b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.spec.ts @@ -0,0 +1,50 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; + +import { AdminEditDescriptionOnlyFieldComponent } from "./admin-edit-description-only-field.component"; +import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; +import { Entity } from "app/core/entity/model/entity"; +import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing"; +import { NoopAnimationsModule } from "@angular/platform-browser/animations"; +import { FormBuilder } from "@angular/forms"; +import { AdminEntityService } from "app/core/admin/admin-entity.service"; + +describe("AdminEditDescriptionOnlyFieldComponent", () => { + let component: AdminEditDescriptionOnlyFieldComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + AdminEditDescriptionOnlyFieldComponent, + FontAwesomeTestingModule, + NoopAnimationsModule, + ], + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: { + entitySchemaField: {}, + entityType: Entity, + }, + FormBuilder, + AdminEntityService, + }, + { provide: MatDialogRef, useValue: { close: () => null } }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(AdminEditDescriptionOnlyFieldComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + it("should initialize schemaFieldsForm with proper values", () => { + component.formField = { id: "foo", label: "Test Label" }; + component.initSettings(); + expect(component.schemaFieldsForm.get("label").value).toBe("Test Label"); + }); +}); diff --git a/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.ts b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.ts new file mode 100644 index 0000000000..faeea80404 --- /dev/null +++ b/src/app/core/admin/admin-entity-details/admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component.ts @@ -0,0 +1,84 @@ +import { Component, Inject, OnChanges, SimpleChanges } from "@angular/core"; +import { + MAT_DIALOG_DATA, + MatDialogModule, + MatDialogRef, +} from "@angular/material/dialog"; +import { MatButtonModule } from "@angular/material/button"; +import { DialogCloseComponent } from "../../../../common-components/dialog-close/dialog-close.component"; +import { MatInputModule } from "@angular/material/input"; +import { ErrorHintComponent } from "../../../../common-components/error-hint/error-hint.component"; +import { + FormBuilder, + FormGroup, + FormsModule, + ReactiveFormsModule, + Validators, +} from "@angular/forms"; +import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; +import { MatTooltipModule } from "@angular/material/tooltip"; +import { v4 as uuid } from "uuid"; +import { FormFieldConfig } from "../../../../common-components/entity-form/FormConfig"; + +@Component({ + selector: "app-admin-edit-description-only-field", + standalone: true, + imports: [ + MatDialogModule, + MatButtonModule, + DialogCloseComponent, + MatInputModule, + ErrorHintComponent, + FormsModule, + ReactiveFormsModule, + FontAwesomeModule, + MatTooltipModule, + ], + templateUrl: "./admin-edit-description-only-field.component.html", + styleUrl: "./admin-edit-description-only-field.component.scss", +}) +export class AdminEditDescriptionOnlyFieldComponent implements OnChanges { + formField: FormFieldConfig; + schemaFieldsForm: FormGroup; + + constructor( + @Inject(MAT_DIALOG_DATA) + data: FormFieldConfig, + private dialogRef: MatDialogRef, + private fb: FormBuilder, + ) { + this.formField = data; + + this.initSettings(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.entitySchemaField) { + this.initSettings(); + } + } + + public initSettings() { + this.schemaFieldsForm = this.fb.group({ + label: [this.formField.label, Validators.required], + }); + } + + save() { + this.schemaFieldsForm.markAllAsTouched(); + if (this.schemaFieldsForm.invalid) { + return; + } + if (!this.formField.id) { + this.formField.id = uuid(); + } + + const newSchemaField = { + id: this.formField.id, + editComponent: "EditDescriptionOnly", + label: this.schemaFieldsForm.get("label").value, + }; + + this.dialogRef.close(newSchemaField); + } +} diff --git a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html index d551af5a5b..e0ba4c80fd 100644 --- a/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html +++ b/src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html @@ -26,12 +26,11 @@ cdkDragBoundary=".overall-container" > -