feat(edit-content) Develop basic form with text field and save button #…

…26330

* Working on EditContenlet MVP

* Maked changes based on PR suggestions

* Finalized new arch of edit-content lib.

* Working on PR Suggestions

* Working on tests. Have problem on edit-content.layout.spec

* Find issue in tests

* Finished tests

* Make a PR suggestion changes. Added new tests

* Maked PR suggestions. Added new tests. Added new behavior on content-edit.layout

* Changed way to test dot-edit-content.service, now use createHttpFactory

* Remove unused imports and variables

* Add sidebar and styles rows spacing

---------

Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com>
Co-authored-by: Jalinson Diaz <zjaaaldev@gmail.com>

core-web/libs/edit-content/jest.config.ts

@@ -5,8 +5,8 @@ export default {
     setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
     globals: {
         'ts-jest': {
-            tsconfig: '<rootDir>/tsconfig.spec.json',
-            stringifyContentPathRegex: '\\.(html|svg)$'
+            stringifyContentPathRegex: '\\.(html|svg)$',
+            tsconfig: '<rootDir>/tsconfig.spec.json'
         }
     },
     coverageDirectory: '../../coverage/libs/edit-content',

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html

@@ -0,0 +1,20 @@
+<ng-container [ngSwitch]="field.fieldType">
+    <div class="field" *ngSwitchCase="'Text'">
+        <label
+            [attr.data-testId]="'label-' + field.variable"
+            [for]="field.variable"
+            [checkIsRequiredControl]="field.variable"
+            dotFieldRequired
+            >{{ field.name }}</label
+        >
+        <input
+            [id]="field.variable"
+            [formControlName]="field.variable"
+            [attr.data-testId]="'input-' + field.variable"
+            type="text"
+            pInputText />
+        <small *ngIf="field.hint" [attr.data-testId]="'hint-' + field.variable">{{
+            field.hint
+        }}</small>
+    </div>
+</ng-container>

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.spec.ts

@@ -0,0 +1,93 @@
+import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator';
+
+import { CommonModule } from '@angular/common';
+import {
+    ControlContainer,
+    FormControl,
+    FormGroup,
+    FormGroupDirective,
+    ReactiveFormsModule
+} from '@angular/forms';
+
+import { InputTextModule } from 'primeng/inputtext';
+
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotFieldRequiredDirective } from '@dotcms/ui';
+
+import { DotEditContentFieldComponent } from './dot-edit-content-field.component';
+
+export const FIELD_MOCK: DotCMSContentTypeField = {
+    clazz: 'com.dotcms.contenttype.model.field.ImmutableTextField',
+    contentTypeId: 'd46d6404125ac27e6ab68fad09266241',
+    dataType: 'TEXT',
+    fieldType: 'Text',
+    fieldTypeLabel: 'Text',
+    fieldVariables: [],
+    fixed: false,
+    iDate: 1696896882000,
+    id: 'c3b928bc2b59fc22c67022de4dd4b5c4',
+    indexed: false,
+    listed: false,
+    hint: 'A helper text',
+    modDate: 1696896882000,
+    name: 'testVariable',
+    readOnly: false,
+    required: false,
+    searchable: false,
+    sortOrder: 2,
+    unique: false,
+    variable: 'testVariable'
+};
+
+const FORM_GROUP_MOCK = new FormGroup({
+    testVariable: new FormControl('')
+});
+const FORM_GROUP_DIRECTIVE_MOCK: FormGroupDirective = new FormGroupDirective([], []);
+FORM_GROUP_DIRECTIVE_MOCK.form = FORM_GROUP_MOCK;
+
+describe('DotFieldComponent', () => {
+    let spectator: Spectator<DotEditContentFieldComponent>;
+    const createComponent = createComponentFactory({
+        component: DotEditContentFieldComponent,
+        imports: [
+            DotEditContentFieldComponent,
+            CommonModule,
+            ReactiveFormsModule,
+            InputTextModule,
+            DotFieldRequiredDirective
+        ],
+        componentViewProviders: [
+            {
+                provide: ControlContainer,
+                useValue: FORM_GROUP_DIRECTIVE_MOCK
+            }
+        ],
+        providers: [FormGroupDirective]
+    });
+
+    beforeEach(async () => {
+        spectator = createComponent({
+            props: {
+                field: FIELD_MOCK
+            }
+        });
+    });
+
+    it('should render the label', () => {
+        spectator.detectChanges();
+        const label = spectator.query(byTestId(`label-${FIELD_MOCK.variable}`));
+        expect(label?.textContent).toContain(FIELD_MOCK.name);
+    });
+
+    it('should render the hint', () => {
+        spectator.detectChanges();
+        const hint = spectator.query(byTestId(`hint-${FIELD_MOCK.variable}`));
+        expect(hint?.textContent).toContain(FIELD_MOCK.hint);
+    });
+
+    it('should render the input', () => {
+        spectator.detectChanges();
+        const input = spectator.query(byTestId(`input-${FIELD_MOCK.variable}`));
+        expect(input).toBeDefined();
+    });
+});

core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
+import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
+
+import { InputTextModule } from 'primeng/inputtext';
+
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotFieldRequiredDirective } from '@dotcms/ui';
+
+@Component({
+    selector: 'dot-edit-content-field',
+    standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, InputTextModule, DotFieldRequiredDirective],
+    templateUrl: './dot-edit-content-field.component.html',
+    styleUrls: ['./dot-edit-content-field.component.scss'],
+    viewProviders: [
+        {
+            provide: ControlContainer,
+            useFactory: () => inject(ControlContainer, { skipSelf: true })
+        }
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotEditContentFieldComponent {
+    @Input() field!: DotCMSContentTypeField;
+}

core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html

@@ -0,0 +1,16 @@
+<form class="p-fluid" *ngIf="form" [formGroup]="form">
+    <ng-container *ngFor="let row of formData">
+        <div class="row">
+            <div class="column" *ngFor="let column of row.columns">
+                <dot-edit-content-field
+                    *ngFor="let field of column.fields"
+                    [field]="field"></dot-edit-content-field>
+            </div>
+        </div>
+    </ng-container>
+</form>
+
+<aside>
+    <p-button [label]="'Save' | dm" (click)="saveContenlet()" data-testId="button-save"></p-button>
+    <pre><code>{{form.value | json}}</code></pre>
+</aside>

core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.scss

@@ -0,0 +1,20 @@
+@use "variables" as *;
+
+:host {
+    display: grid;
+    grid-template-columns: 1fr 16rem;
+    gap: $spacing-4;
+    padding: $spacing-4;
+}
+
+.row {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: $spacing-2;
+
+    .column {
+        display: grid;
+        min-height: $spacing-7;
+    }
+}