Use Treeselect in Site/Folder at Edit Content

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

@@ -6,87 +6,93 @@
     {{ field.name }}
 </label>
 
-<ng-container [ngSwitch]="field.fieldType">
-    <dot-edit-content-select-field
-        *ngSwitchCase="fieldTypes.SELECT"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-radio-field
-        *ngSwitchCase="fieldTypes.RADIO"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-text-field
-        *ngSwitchCase="fieldTypes.TEXT"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-text-area
-        *ngSwitchCase="fieldTypes.TEXTAREA"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-checkbox-field
-        *ngSwitchCase="fieldTypes.CHECKBOX"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-multi-select-field
-        *ngSwitchCase="fieldTypes.MULTI_SELECT"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-calendar-field
-        *ngSwitchCase="calendarTypes.includes(field.fieldType) ? field.fieldType : ''"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field">
-    </dot-edit-content-calendar-field>
-
-    <dot-edit-content-tag-field
-        *ngSwitchCase="fieldTypes.TAG"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-json-field
-        *ngSwitchCase="fieldTypes.JSON"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-binary-field
-        *ngSwitchCase="fieldTypes.BINARY"
-        [attr.data-testId]="'field-' + field.variable"
-        [contentlet]="contentlet"
-        [field]="field"
-        [formControlName]="field.variable" />
-
-    <dot-edit-content-custom-field
-        *ngSwitchCase="fieldTypes.CUSTOM_FIELD"
-        [attr.data-testId]="'field-' + field.variable"
-        [contentType]="contentType"
-        [field]="field" />
-
-    <dot-block-editor
-        *ngSwitchCase="fieldTypes.BLOCK_EDITOR"
-        [attr.data-testId]="'field-' + field.variable"
-        [contentlet]="contentlet"
-        [field]="field"
-        [formControlName]="field.variable" />
-
-    <dot-edit-content-key-value
-        *ngSwitchCase="fieldTypes.KEY_VALUE"
-        [attr.data-testId]="'field-' + field.variable"
-        [formControlName]="field.variable" />
-
-    <dot-edit-content-wysiwyg-field
-        *ngSwitchCase="fieldTypes.WYSIWYG"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-
-    <dot-edit-content-category-field
-        *ngSwitchCase="fieldTypes.CATEGORY"
-        [attr.data-testId]="'field-' + field.variable"
-        [field]="field" />
-</ng-container>
-
-<small *ngIf="field.hint" [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
+@switch (field.fieldType) {
+    @case (fieldTypes.SELECT) {
+        <dot-edit-content-select-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.RADIO) {
+        <dot-edit-content-radio-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.TEXT) {
+        <dot-edit-content-text-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.TEXTAREA) {
+        <dot-edit-content-text-area
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.CHECKBOX) {
+        <dot-edit-content-checkbox-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.MULTI_SELECT) {
+        <dot-edit-content-multi-select-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') {
+        <dot-edit-content-calendar-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.TAG) {
+        <dot-edit-content-tag-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.JSON) {
+        <dot-edit-content-json-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.BINARY) {
+        <dot-edit-content-binary-field
+            [formControlName]="field.variable"
+            [contentlet]="contentlet"
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.CUSTOM_FIELD) {
+        <dot-edit-content-custom-field
+            [field]="field"
+            [contentType]="contentType"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.BLOCK_EDITOR) {
+        <dot-block-editor
+            [formControlName]="field.variable"
+            [contentlet]="contentlet"
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.KEY_VALUE) {
+        <dot-edit-content-key-value
+            [formControlName]="field.variable"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.WYSIWYG) {
+        <dot-edit-content-wysiwyg-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.HOST_FOLDER) {
+        <dot-edit-content-host-folder-field
+            [field]="field"
+            [attr.data-testId]="'field-' + field.variable" />
+    }
+    @case (fieldTypes.CATEGORY) {
+        <dot-edit-content-category-field
+            [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

@@ -24,6 +24,7 @@ import { DotEditContentCalendarFieldComponent } from '../../fields/dot-edit-cont
 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 { 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';
@@ -39,7 +40,8 @@ import {
     BINARY_FIELD_CONTENTLET,
     createFormGroupDirectiveMock,
     DOT_MESSAGE_SERVICE_MOCK,
-    FIELDS_MOCK
+    FIELDS_MOCK,
+    TREE_SELECT_MOCK
 } from '../../utils/mocks';
 
 interface DotEditFieldTestBed {
@@ -72,6 +74,14 @@ const FIELD_TYPES_COMPONENTS: Record<FIELD_TYPES, Type<unknown> | DotEditFieldTe
     [FIELD_TYPES.DATE]: DotEditContentCalendarFieldComponent,
     [FIELD_TYPES.DATE_AND_TIME]: DotEditContentCalendarFieldComponent,
     [FIELD_TYPES.TIME]: DotEditContentCalendarFieldComponent,
+    [FIELD_TYPES.HOST_FOLDER]: {
+        component: DotEditContentHostFolderFieldComponent,
+        providers: [
+            mockProvider(DotEditContentService, {
+                getSitesTreePath: jest.fn().mockReturnValue(of(TREE_SELECT_MOCK))
+            })
+        ]
+    },
     [FIELD_TYPES.TAG]: {
         component: DotEditContentTagFieldComponent,
         providers: [{ provide: DotEditContentService, useValue: { getTags: () => of([]) } }]

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

@@ -1,5 +1,4 @@
-import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { BlockEditorModule } from '@dotcms/block-editor';
@@ -26,9 +25,6 @@ import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-        NgSwitch,
-        NgSwitchCase,
-        NgIf,
         ReactiveFormsModule,
         DotEditContentFieldsModule,
         DotFieldRequiredDirective,

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

@@ -23,6 +23,8 @@ import { DotMessageService } from '@dotcms/data-access';
 import { DotCMSContentTypeField, DotCMSContentTypeLayoutTab } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
+import { resolutionValue } from './utils';
+
 import {
     CALENDAR_FIELD_TYPES,
     FLATTENED_FIELD_TYPES
@@ -104,7 +106,7 @@ export class DotEditContentFormComponent implements OnInit {
     private initializeFormControl(field: DotCMSContentTypeField): FormControl {
         const validators = [];
 
-        const value = this.formData.contentlet?.[field.variable] ?? field.defaultValue;
+        const value = resolutionValue[field.fieldType](this.formData.contentlet, field);
 
         if (field.required) validators.push(Validators.required);
         if (field.regexCheck) {

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

@@ -0,0 +1,40 @@
+import { DotCMSContentTypeField, DotCMSContentlet } from '@dotcms/dotcms-models';
+
+import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
+
+export type FnResolutionValue = (
+    contentlet: DotCMSContentlet,
+    field: DotCMSContentTypeField
+) => string;
+
+const defaultResolutionFn: FnResolutionValue = (contentlet, field) =>
+    contentlet?.[field.variable] ?? field.defaultValue;
+
+export const resolutionValue: Record<FIELD_TYPES, FnResolutionValue> = {
+    [FIELD_TYPES.BINARY]: defaultResolutionFn,
+    [FIELD_TYPES.BLOCK_EDITOR]: defaultResolutionFn,
+    [FIELD_TYPES.CHECKBOX]: defaultResolutionFn,
+    [FIELD_TYPES.CUSTOM_FIELD]: defaultResolutionFn,
+    [FIELD_TYPES.DATE]: defaultResolutionFn,
+    [FIELD_TYPES.DATE_AND_TIME]: defaultResolutionFn,
+    [FIELD_TYPES.HOST_FOLDER]: (contentlet, field) => {
+        if (contentlet?.hostName && contentlet?.url) {
+            const path = `${contentlet?.hostName}${contentlet?.url}`;
+
+            return path.slice(0, path.indexOf('/content'));
+        }
+
+        return field.defaultValue ?? '';
+    },
+    [FIELD_TYPES.JSON]: defaultResolutionFn,
+    [FIELD_TYPES.KEY_VALUE]: defaultResolutionFn,
+    [FIELD_TYPES.MULTI_SELECT]: defaultResolutionFn,
+    [FIELD_TYPES.RADIO]: defaultResolutionFn,
+    [FIELD_TYPES.SELECT]: defaultResolutionFn,
+    [FIELD_TYPES.TAG]: defaultResolutionFn,
+    [FIELD_TYPES.TEXT]: defaultResolutionFn,
+    [FIELD_TYPES.TEXTAREA]: defaultResolutionFn,
+    [FIELD_TYPES.TIME]: defaultResolutionFn,
+    [FIELD_TYPES.WYSIWYG]: defaultResolutionFn,
+    [FIELD_TYPES.CATEGORY]: defaultResolutionFn
+};

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

@@ -1,14 +1,14 @@
 @if (values.length) {
-<div class="dot-category-field__categories" data-testId="category-chip-list">
-    @for (category of values; track category.id) {
-    <p-chip
-        [pTooltip]="category.value"
-        [removable]="true"
-        [label]="category.value"
-        tooltipPosition="top"
-        styleClass="p-chip-sm" />
-    }
-</div>
+    <div class="dot-category-field__categories" data-testId="category-chip-list">
+        @for (category of values; track category.id) {
+            <p-chip
+                [pTooltip]="category.value"
+                [removable]="true"
+                [label]="category.value"
+                tooltipPosition="top"
+                styleClass="p-chip-sm" />
+        }
+    </div>
 }
 
 <div class="dot-category-field__select">

core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts

@@ -5,6 +5,7 @@ import { DotEditContentCalendarFieldComponent } from './dot-edit-content-calenda
 import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field/dot-edit-content-category-field.component';
 import { DotEditContentCheckboxFieldComponent } from './dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component';
 import { DotEditContentCustomFieldComponent } from './dot-edit-content-custom-field/dot-edit-content-custom-field.component';
+import { DotEditContentHostFolderFieldComponent } from './dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component';
 import { DotEditContentJsonFieldComponent } from './dot-edit-content-json-field/dot-edit-content-json-field.component';
 import { DotEditContentMultiSelectFieldComponent } from './dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component';
 import { DotEditContentRadioFieldComponent } from './dot-edit-content-radio-field/dot-edit-content-radio-field.component';
@@ -29,6 +30,7 @@ import { DotEditContentWYSIWYGFieldComponent } from './dot-edit-content-wysiwyg-
         DotEditContentJsonFieldComponent,
         DotEditContentCustomFieldComponent,
         DotEditContentWYSIWYGFieldComponent,
+        DotEditContentHostFolderFieldComponent,
         DotEditContentCategoryFieldComponent
     ],
     exports: [
@@ -44,6 +46,7 @@ import { DotEditContentWYSIWYGFieldComponent } from './dot-edit-content-wysiwyg-
         DotEditContentJsonFieldComponent,
         DotEditContentCustomFieldComponent,
         DotEditContentWYSIWYGFieldComponent,
+        DotEditContentHostFolderFieldComponent,
         DotEditContentCategoryFieldComponent
     ]
 })

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.html

@@ -0,0 +1,18 @@
+<p-treeSelect
+    [formControl]="pathControl"
+    [options]="options()"
+    [attr.aria-labelledby]="'field-' + field.variable"
+    (onNodeSelect)="onNodeSelect($event)"
+    (onNodeExpand)="onNodeExpand($event)"
+    selectionMode="single">
+    <ng-template let-node pTemplate="default">
+        <span>{{ node.label | truncatePath }}</span>
+    </ng-template>
+    <ng-template pTemplate="triggericon">
+        @if (sitesStatus() === 'loading') {
+            <i class="pi pi-spin pi-spinner"></i>
+        } @else {
+            <i class="pi pi-chevron-down"></i>
+        }
+    </ng-template>
+</p-treeSelect>