30515 create basic relationship field structure for edit contentlet vico

.github/workflows/cicd_comp_test-phase.yml

@@ -238,7 +238,7 @@ jobs:
       - uses: ./.github/actions/core-cicd/maven-job
         with:
           stage-name: "E2E ${{ matrix.suites.name }}"
-          maven-args: "verify -Pcoverage -De2e.test.skip=false ${{ matrix.suites.maven_args}}"
+          maven-args: "verify -De2e.test.skip=false ${{ matrix.suites.maven_args}}"
           generates-test-results: true
           dotcms-license: ${{ secrets.DOTCMS_LICENSE }}
           requires-node: true

core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts

@@ -61,6 +61,7 @@ export interface DotCMSContentTypeField {
     variable: string;
     forceIncludeInApi?: boolean;
     fieldContentTypeProperties?: string[];
+    skipRelationshipCreation?: boolean;
     metadata?: { [key: string]: string | number | boolean };
 }
 

core-web/libs/dotcms-scss/shared/_colors.scss

@@ -226,7 +226,17 @@ $success: $color-accessible-text-green;
     --color-palette-primary-800: hsl(var(--color-primary-h) var(--color-primary-s) 27%);
     --color-palette-primary-900: hsl(var(--color-primary-h) var(--color-primary-s) 21%);
 
-    --color-palette-primary-op-10: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.1);
+    --primary-100: var(--color-palette-primary-100);
+    --primary-200: var(--color-palette-primary-200);
+    --primary-300: var(--color-palette-primary-300);
+    --primary-400: var(--color-palette-primary-400);
+    --primary-500: var(--color-palette-primary-500);
+    --primary-600: var(--color-palette-primary-600);
+    --primary-700: var(--color-palette-primary-700);
+    --primary-800: var(--color-palette-primary-800);
+    --primary-900: var(--color-palette-primary-900);
+
+    --color-palette-primary-op-10: var(--color-palette-primary-op-10);
     --color-palette-primary-op-20: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.2);
     --color-palette-primary-op-30: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.3);
     --color-palette-primary-op-40: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.4);

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

@@ -142,6 +142,14 @@
                 [field]="field" />
         }
     }
+    @case (fieldTypes.RELATIONSHIP) {
+        @defer (on immediate) {
+            <dot-edit-content-relationship-field
+                [formControlName]="field.variable"
+                [attr.data-testId]="'field-' + field.variable"
+                [field]="field" />
+        }
+    }
 }
 @if (field.hint) {
     <small [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>

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

@@ -34,6 +34,7 @@ import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-
 import { DotEditContentKeyValueComponent } from '../../fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
 import { DotEditContentMultiSelectFieldComponent } from '../../fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
 import { DotEditContentRadioFieldComponent } from '../../fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
+import { DotEditContentRelationshipFieldComponent } from '../../fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component';
 import { DotEditContentSelectFieldComponent } from '../../fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
 import { DotEditContentTagFieldComponent } from '../../fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
 import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
@@ -73,6 +74,9 @@ declare module '@tiptap/core' {
 const FIELD_TYPES_COMPONENTS: Record<FIELD_TYPES, Type<unknown> | DotEditFieldTestBed> = {
     // We had to use unknown because components have different types.
     [FIELD_TYPES.TEXT]: DotEditContentTextFieldComponent,
+    [FIELD_TYPES.RELATIONSHIP]: {
+        component: DotEditContentRelationshipFieldComponent
+    },
     [FIELD_TYPES.FILE]: {
         component: DotEditContentFileFieldComponent,
         providers: [

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

@@ -3,24 +3,25 @@ import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { BlockEditorModule } from '@dotcms/block-editor';
 import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotEditContentBinaryFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
+import { DotEditContentCalendarFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
+import { DotEditContentCategoryFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-category-field/dot-edit-content-category-field.component';
+import { DotEditContentCheckboxFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
+import { DotEditContentCustomFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component';
+import { DotEditContentFileFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-file-field/dot-edit-content-file-field.component';
+import { DotEditContentHostFolderFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component';
+import { DotEditContentJsonFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-json-field/dot-edit-content-json-field.component';
+import { DotEditContentKeyValueComponent } from '@dotcms/edit-content/fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
+import { DotEditContentMultiSelectFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
+import { DotEditContentRadioFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
+import { DotEditContentRelationshipFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component';
+import { DotEditContentSelectFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
+import { DotEditContentTagFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
+import { DotEditContentTextAreaComponent } from '@dotcms/edit-content/fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
+import { DotEditContentTextFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-text-field/dot-edit-content-text-field.component';
+import { DotEditContentWYSIWYGFieldComponent } from '@dotcms/edit-content/fields/dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component';
 import { DotFieldRequiredDirective } from '@dotcms/ui';
 
-import { DotEditContentBinaryFieldComponent } from '../../fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
-import { DotEditContentCalendarFieldComponent } from '../../fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component';
-import { DotEditContentCategoryFieldComponent } from '../../fields/dot-edit-content-category-field/dot-edit-content-category-field.component';
-import { DotEditContentCheckboxFieldComponent } from '../../fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
-import { DotEditContentCustomFieldComponent } from '../../fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component';
-import { DotEditContentFileFieldComponent } from '../../fields/dot-edit-content-file-field/dot-edit-content-file-field.component';
-import { DotEditContentHostFolderFieldComponent } from '../../fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component';
-import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-json-field/dot-edit-content-json-field.component';
-import { DotEditContentKeyValueComponent } from '../../fields/dot-edit-content-key-value/dot-edit-content-key-value.component';
-import { DotEditContentMultiSelectFieldComponent } from '../../fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
-import { DotEditContentRadioFieldComponent } from '../../fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component';
-import { DotEditContentSelectFieldComponent } from '../../fields/dot-edit-content-select-field/dot-edit-content-select-field.component';
-import { DotEditContentTagFieldComponent } from '../../fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component';
-import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component';
-import { DotEditContentTextFieldComponent } from '../../fields/dot-edit-content-text-field/dot-edit-content-text-field.component';
-import { DotEditContentWYSIWYGFieldComponent } from '../../fields/dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component';
 import { CALENDAR_FIELD_TYPES } from '../../models/dot-edit-content-field.constant';
 import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
 
@@ -54,10 +55,10 @@ import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
         DotEditContentCategoryFieldComponent,
         DotFieldRequiredDirective,
         BlockEditorModule,
-        DotEditContentBinaryFieldComponent,
         DotEditContentKeyValueComponent,
         DotEditContentWYSIWYGFieldComponent,
-        DotEditContentFileFieldComponent
+        DotEditContentFileFieldComponent,
+        DotEditContentRelationshipFieldComponent
     ]
 })
 export class DotEditContentFieldComponent {

core-web/libs/edit-content/src/lib/components/dot-edit-content-form/utils.ts

@@ -62,5 +62,6 @@ export const resolutionValue: Record<FIELD_TYPES, FnResolutionValue> = {
         }
 
         return field.defaultValue ?? [];
-    }
+    },
+    [FIELD_TYPES.RELATIONSHIP]: defaultResolutionFn
 };

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.html

@@ -0,0 +1,26 @@
+@let currentPage = $currentPage();
+@let totalPages = $totalPages();
+
+<div class="flex justify-content-center gap-3">
+    <span class="text-primary-500 flex align-items-center">
+        {{ currentPage }} of {{ totalPages }}
+    </span>
+    <div class="flex justify-content-center gap-1">
+        <p-button
+            type="button"
+            (onClick)="previousPage.emit()"
+            icon="pi pi-angle-left"
+            [rounded]="true"
+            [text]="true"
+            [disabled]="currentPage === 1"
+            size="small" />
+        <p-button
+            type="button"
+            (onClick)="nextPage.emit()"
+            icon="pi pi-angle-right"
+            [rounded]="true"
+            [text]="true"
+            [disabled]="currentPage === totalPages"
+            size="small" />
+    </div>
+</div>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/pagination/pagination.component.ts

@@ -0,0 +1,33 @@
+import { Component, input, output } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    selector: 'dot-pagination',
+    standalone: true,
+    imports: [ButtonModule],
+    templateUrl: './pagination.component.html'
+})
+export class PaginationComponent {
+    /**
+     * A signal that holds the total number of pages.
+     * It is used to display the total number of pages in the pagination component.
+     */
+    $totalPages = input.required<number>({ alias: 'totalPages' });
+
+    /**
+     * A signal that holds the current page number.
+     * It is used to display the current page number in the pagination component.
+     */
+    $currentPage = input.required<number>({ alias: 'currentPage' });
+
+    /**
+     * An output signal that emits when the previous page button is clicked.
+     */
+    previousPage = output<void>();
+
+    /**
+     * An output signal that emits when the next page button is clicked.
+     */
+    nextPage = output<void>();
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.html

@@ -0,0 +1,50 @@
+<p-inputGroup size="small">
+    <input
+        #searchInput
+        pInputText
+        type="search"
+        [placeholder]="'dot.file.relationship.dialog.search' | dm"
+        (input)="onSearch.emit(searchInput.value)" />
+    <p-button
+        (onClick)="op.toggle($event)"
+        size="small"
+        type="button"
+        icon="pi pi-sliders-h"
+        [text]="true" />
+</p-inputGroup>
+
+<p-overlayPanel #op>
+    <form class="w-11rem" [formGroup]="form">
+        <div class="flex flex-column gap-2">
+            <div class="flex flex-column gap-2">
+                <p-dropdown
+                    styleClass="w-full"
+                    [options]="[]"
+                    formControlName="language"
+                    optionLabel="language" />
+
+                <p-dropdown
+                    styleClass="w-full"
+                    [options]="[]"
+                    formControlName="site"
+                    optionLabel="Site or Host" />
+            </div>
+
+            <div class="flex justify-content-end gap-2">
+                <p-button
+                    (onClick)="op.toggle($event)"
+                    label="Clear all"
+                    type="button"
+                    text="true"
+                    severity="primary"
+                    outline="true" />
+
+                <p-button
+                    (onClick)="op.toggle($event)"
+                    label="Search"
+                    type="button"
+                    severity="primary" />
+            </div>
+        </div>
+    </form>
+</p-overlayPanel>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.compoment.ts

@@ -0,0 +1,44 @@
+import { Component, inject, output } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputTextModule } from 'primeng/inputtext';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+@Component({
+    selector: 'dot-search',
+    standalone: true,
+    imports: [
+        InputTextModule,
+        ButtonModule,
+        InputGroupModule,
+        OverlayPanelModule,
+        DotMessagePipe,
+        DropdownModule,
+        ReactiveFormsModule
+    ],
+    templateUrl: './search.compoment.html'
+})
+export class SearchComponent {
+    /**
+     * An output signal that emits when the search input is changed.
+     */
+    onSearch = output<string>();
+
+    /**
+     * Injects FormBuilder to create form control groups.
+     */
+    readonly #formBuilder = inject(FormBuilder);
+
+    /**
+     * Initializes the form group with default values for language and site.
+     */
+    readonly form = this.#formBuilder.group({
+        language: [''],
+        site: ['']
+    });
+}