Merge pull request #94 from CIAT-DAPA/develop

feat: Add showLabel option for DateRangeField in FieldEditor and upda…

Author: Mino-02

src/src/app/[locale]/templates/create/TemplatePreview.tsx

@@ -1689,6 +1689,11 @@ export function TemplatePreview({
       case "date_range":
         const dateRangeFormat =
           (field.field_config as any)?.date_format || "DD/MM/YYYY";
+        const showDateRangeLabel =
+          (field.field_config as any)?.showLabel ?? false;
+        const displayDateRangeLabel = showDateRangeLabel
+          ? field.label || field.display_name
+          : null;
         const showMoonPhases =
           (field.field_config as any)?.show_moon_phases || false;
 
@@ -1747,8 +1752,13 @@ export function TemplatePreview({
           }
 
           return (
-            <div key={key} style={fieldStyles}>
-              {rangeDisplay}
+            <div
+              key={key}
+              style={fieldStyles}
+              className={displayDateRangeLabel ? "flex items-center gap-2" : undefined}
+            >
+              {displayDateRangeLabel && <span>{displayDateRangeLabel}:</span>}
+              <span>{rangeDisplay}</span>
             </div>
           );
         }
@@ -1823,8 +1833,13 @@ export function TemplatePreview({
 
         // Sin lunas: formato tradicional
         return (
-          <div key={key} style={fieldStyles}>
-            {`${startDateDisplay} - ${endDateDisplay}`}
+          <div
+            key={key}
+            style={fieldStyles}
+            className={displayDateRangeLabel ? "flex items-center gap-2" : undefined}
+          >
+            {displayDateRangeLabel && <span>{displayDateRangeLabel}:</span>}
+            <span>{`${startDateDisplay} - ${endDateDisplay}`}</span>
           </div>
         );
 

src/src/app/[locale]/templates/create/components/FieldEditor.tsx

@@ -143,6 +143,7 @@ export function FieldEditor({
         ...fieldToSave,
         field_config: {
           date_format: currentConfig?.date_format || "YYYY-MM-DD",
+          showLabel: currentConfig?.showLabel,
           start_date_label: currentConfig?.start_date_label || "Start Date",
           start_date_description: currentConfig?.start_date_description || "",
           end_date_label: currentConfig?.end_date_label || "End Date",

src/src/app/[locale]/templates/create/components/fieldTypes/DateRangeFieldTypeConfig.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { DateRangeFieldConfig } from "../../../../../../types/template";
 import { BaseFieldTypeConfigProps } from "./BaseFieldTypeConfig";
 import {
+  helpTextClass,
   labelClass,
   labelXsClass,
   inputClass,
@@ -33,6 +34,7 @@ export const DateRangeFieldTypeConfig: React.FC<BaseFieldTypeConfigProps> = ({
   const t = useTranslations("CreateTemplate.fieldEditor.dateRangeConfig");
 
   const config = (currentField.field_config as DateRangeFieldConfig) || {};
+  const showLabel = config.showLabel ?? false;
 
   return (
     <div className="space-y-4">
@@ -52,6 +54,20 @@ export const DateRangeFieldTypeConfig: React.FC<BaseFieldTypeConfigProps> = ({
         </select>
       </div>
 
+      {/* Mostrar etiqueta del rango */}
+      <div>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={showLabel}
+            onChange={(e) => updateFieldConfig({ showLabel: e.target.checked })}
+            className="w-4 h-4 text-[#283618] border-gray-300 rounded focus:ring-[#283618]"
+          />
+          <span className={labelClass}>{t("showLabel")}</span>
+        </label>
+        <p className={helpTextClass}>{t("showLabelHelp")}</p>
+      </div>
+
       {/* Mostrar Fases de Luna */}
       <div>
         <label className="flex items-center gap-2 cursor-pointer">

src/src/messages/en.json

@@ -1245,6 +1245,8 @@
       },
       "dateRangeConfig": {
         "format": "Date Format",
+        "showLabel": "Show range label",
+        "showLabelHelp": "If enabled, the field label will be shown next to the date range",
         "showMoonPhases": "Show moon phases with dates",
         "showMoonPhasesHelp": "Display moon phase icons next to each date",
         "moonPhasesConfigTitle": "Moon Phase Configuration",

src/src/messages/es.json

@@ -1243,6 +1243,8 @@
       },
       "dateRangeConfig": {
         "format": "Formato de Fecha",
+        "showLabel": "Mostrar etiqueta del rango",
+        "showLabelHelp": "Si está activado, se mostrará el label del campo junto al rango de fechas",
         "showMoonPhases": "Mostrar fases de luna con fechas",
         "showMoonPhasesHelp": "Muestra íconos de fase lunar junto a cada fecha",
         "moonPhasesConfigTitle": "Configuración de Fases Lunares",

src/src/messages/vi.json

@@ -1309,6 +1309,8 @@
         }
       },
       "dateRangeConfig": {
+        "showLabel": "Hiển thị nhãn của phạm vi",
+        "showLabelHelp": "Nếu bật, nhãn của trường sẽ hiển thị bên cạnh phạm vi ngày",
         "showMoonPhases": "Hiển thị chu kỳ mặt trăng",
         "showMoonPhasesHelp": "Hiển thị biểu tượng chu kỳ mặt trăng bên cạnh mỗi ngày",
         "moonPhasesConfigTitle": "Cấu hình chu kỳ mặt trăng",

src/src/types/template.ts

@@ -80,6 +80,7 @@ export interface DateFieldConfig {
 
 export interface DateRangeFieldConfig {
   date_format?: string;
+  showLabel?: boolean; // Si true, muestra la etiqueta del rango al lado del valor
   start_date_label: string;
   start_date_description: string;
   end_date_label: string;