feat(edit-content): add system timezone support to calendar field component

This commit introduces a new  interface and integrates timezone handling into the . Key changes include:

- Added  property to the  interface.
- Updated the calendar field component to display the system timezone label when applicable.
- Enhanced the calendar field's HTML and TypeScript to support timezone adjustments for date inputs.
- Refactored related utility functions to accommodate timezone logic.

These updates improve the user experience by ensuring accurate date and time representation based on the configured system timezone.

Author: oidacra

core-web/.cursor/rules/nx-rules.mdc

@@ -0,0 +1,34 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+
+// This file is automatically generated by Nx Console
+
+You are in an nx workspace using Nx 19.6.5 and yarn as the package manager.
+
+You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
+
+# General Guidelines
+- When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture
+- For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration
+- If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors
+- To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool
+
+# Generation Guidelines
+If the user wants to generate something, use the following flow: 
+
+- learn about the nx workspace and any specifics the user needs by using the 'nx_workspace' tool and the 'nx_project_details' tool if applicable
+- get the available generators using the 'nx_generators' tool
+- decide which generator to use. If no generators seem relevant, check the 'nx_available_plugins' tool to see if the user could install a plugin to help them
+- get generator details using the 'nx_generator_schema' tool
+- you may use the 'nx_docs' tool to learn more about a specific generator or technology if you're unsure
+- decide which options to provide in order to best complete the user's request. Don't make any assumptions and keep the options minimalistic
+- open the generator UI using the 'nx_open_generate_ui' tool
+- wait for the user to finish the generator
+- read the generator log file using the 'nx_read_generator_log' tool
+- use the information provided in the log file to answer the user's question or continue with what they were doing
+
+
+

core-web/libs/dotcms-js/src/lib/core/dotcms-config.service.ts

@@ -27,6 +27,12 @@ export interface DotUiColors {
     background: string;
 }
 
+export interface SystemTimezone {
+    id: string;
+    label: string;
+    offset: string;
+}
+
 export interface ConfigParams {
     colors: DotUiColors;
     emailRegex: string;
@@ -48,6 +54,7 @@ export interface ConfigParams {
         version: string;
     };
     websocket: WebSocketConfigParams;
+    systemTimezone: SystemTimezone;
 }
 
 export interface WebSocketConfigParams {
@@ -61,7 +68,9 @@ export interface DotTimeZone {
     offset: string;
 }
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class DotcmsConfigService {
     private configParamsSubject: BehaviorSubject<ConfigParams> = new BehaviorSubject(null);
     private configUrl: string;
@@ -112,7 +121,8 @@ export class DotcmsConfigService {
                         websocketReconnectTime:
                             res.config.websocket[DOTCMS_WEBSOCKET_RECONNECT_TIME],
                         disabledWebsockets: res.config.websocket[DOTCMS_DISABLE_WEBSOCKET_PROTOCOL]
-                    }
+                    },
+                    systemTimezone: res.config.systemTimezone
                 };
 
                 this.configParamsSubject.next(configParams);

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

@@ -72,6 +72,7 @@ <h3 class="m-0 text-gray-700">{{ field.name }}</h3>
         @defer (on immediate) {
             <ng-container [ngTemplateOutlet]="labelTemplate" />
             <dot-edit-content-calendar-field
+                [utcTimezone]="$systemTimezone()"
                 [field]="field"
                 [attr.data-testId]="'field-' + field.variable" />
         }
@@ -184,6 +185,10 @@ <h3 class="m-0 text-gray-700">{{ field.name }}</h3>
         }
     }
 }
-@if (field.hint && field.fieldType !== fieldTypes.RELATIONSHIP) {
+@if (
+    field.hint &&
+    field.fieldType !== fieldTypes.RELATIONSHIP &&
+    !calendarTypes.includes(field.fieldType)
+) {
     <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.ts

@@ -7,11 +7,13 @@ import {
     inject,
     input
 } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
 import { DividerModule } from 'primeng/divider';
 
 import { BlockEditorModule } from '@dotcms/block-editor';
+import { DotcmsConfigService } from '@dotcms/dotcms-js';
 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';
@@ -71,9 +73,13 @@ import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum';
         DotEditContentRelationshipFieldComponent,
         DividerModule,
         NgTemplateOutlet
-    ]
+    ],
+    providers: [DotcmsConfigService]
 })
 export class DotEditContentFieldComponent {
+    readonly #dotcmsConfigService = inject(DotcmsConfigService);
+    #globalSystemConfig = toSignal(this.#dotcmsConfigService.getConfig());
+
     @HostBinding('class') class = 'field';
 
     /**
@@ -91,7 +97,19 @@ export class DotEditContentFieldComponent {
      */
     $contentType = input<string>(null, { alias: 'contentType' });
 
+    /**
+     * The system timezone.
+     */
+    $systemTimezone = computed(() => this.#globalSystemConfig()?.systemTimezone);
+
+    /**
+     * The field types.
+     */
     readonly fieldTypes = FIELD_TYPES;
+
+    /**
+     * The calendar types.
+     */
     readonly calendarTypes = CALENDAR_FIELD_TYPES as string[];
 
     /**

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

@@ -10,7 +10,7 @@ import {
     OnInit,
     output
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import {
     FormBuilder,
     FormGroup,
@@ -33,6 +33,7 @@ import {
     DotWizardService,
     DotWorkflowEventHandlerService
 } from '@dotcms/data-access';
+import { DotcmsConfigService } from '@dotcms/dotcms-js';
 import {
     DotCMSContentlet,
     DotCMSContentTypeField,
@@ -118,6 +119,9 @@ export class DotEditContentFormComponent implements OnInit {
     readonly #dotWorkflowEventHandlerService = inject(DotWorkflowEventHandlerService);
     readonly #dotWizardService = inject(DotWizardService);
     readonly #dotMessageService = inject(DotMessageService);
+    readonly #dotcmsConfigService = inject(DotcmsConfigService);
+    #globalSystemConfig = toSignal(this.#dotcmsConfigService.getConfig());
+
     /**
      * Output event emitter that informs when the form has changed.
      * Emits an object of type Record<string, string> containing the updated form values.
@@ -173,6 +177,11 @@ export class DotEditContentFormComponent implements OnInit {
      */
     $tabs = this.$store.tabs;
 
+    /**
+     * The system timezone.
+     */
+    $systemTimezone = computed(() => this.#globalSystemConfig()?.systemTimezone);
+
     ngOnInit(): void {
         if (this.$store.tabs().length) {
             this.initializeForm();

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

@@ -1,9 +1,43 @@
-<p-calendar
-    [formControlName]="field.variable"
-    [timeOnly]="calendarOptions[field.fieldType].timeOnly"
-    [showTime]="calendarOptions[field.fieldType].showTime"
-    [id]="'calendar-id-' + field.variable"
-    [inputId]="field.variable"
-    [attr.data-testId]="field.variable"
-    [showIcon]="true"
-    [icon]="calendarOptions[field.fieldType].icon" />
+@let field = $field();
+@let fieldTypeConfig = $fieldTypeConfig();
+@let systemTimezone = $systemTimezone();
+@let defaultDate = $defaultDate();
+@let showHints = systemTimezone || $showSystemTimezoneLabel();
+
+<div class="calendar-field">
+    <p-calendar
+        class="calendar-field__input"
+        [formControlName]="field.variable"
+        [timeOnly]="fieldTypeConfig.timeOnly"
+        [showTime]="fieldTypeConfig.showTime"
+        [id]="'calendar-id-' + field.variable"
+        [inputId]="field.variable"
+        [attr.data-testId]="field.variable"
+        [showIcon]="true"
+        [icon]="fieldTypeConfig.icon"
+        [showButtonBar]="true"
+        [dataType]="'string'"
+        [defaultDate]="defaultDate"
+        [attr.aria-label]="field.name"
+        [attr.aria-describedby]="field.hint ? 'hint-' + field.variable : null" />
+
+    @if (showHints) {
+        <div class="calendar-field__hints flex" data-testId="hint-container">
+            <div class="flex-grow-1">
+                @if (field.hint) {
+                    <small
+                        id="hint-{{ field.variable }}"
+                        class="calendar-field__hint"
+                        [attr.data-testId]="'hint-' + field.variable">
+                        {{ field.hint }}
+                    </small>
+                }
+            </div>
+            @if (systemTimezone && $showSystemTimezoneLabel()) {
+                <small class="calendar-field__timezone" data-testId="hint-timezone-label">
+                    {{ systemTimezone.label }}
+                </small>
+            }
+        </div>
+    }
+</div>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.scss

@@ -0,0 +1,7 @@
+@use "variables" as *;
+
+.calendar-field {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-0;
+}