Expand timeSpent choices for evaluation document and translate them to user locale or fallback 'fr'

.changes/unreleased/UX-20251030-180919.yaml

@@ -0,0 +1,6 @@
+kind: UX
+body: Expand timeSpent choices for evaluation document and translate them to user locale or fallback 'fr'
+time: 2025-10-30T18:09:19.373907522+01:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change

composer.json

@@ -14,7 +14,7 @@
         "ext-openssl": "*",
         "ext-redis": "*",
         "ext-zlib": "*",
-        "champs-libres/wopi-bundle": "dev-master@dev",
+        "champs-libres/wopi-bundle": "dev-master#1be045ee95310d2037683859ecefdbf3a10f7be6 as 0.4.x-dev",
         "champs-libres/wopi-lib": "dev-master@dev",
         "doctrine/data-fixtures": "^1.8",
         "doctrine/doctrine-bundle": "^2.1",

src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml

@@ -127,6 +127,20 @@ duration:
             few {# minutes}
             other {# minutes}
         }
+    hour: >-
+        {h, plural,
+            =0 {Aucune durée}
+            one {# heure}
+            few {# heures}
+            other {# heures}
+        }
+    day: >-
+        {d, plural,
+            =0 {Aucune durée}
+            one {# jour}
+            few {# jours}
+            other {# jours}
+        }
 
 filter_order:
     by_date:

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -60,43 +60,124 @@ import {
     EVALUATION_DOCUMENT_MOVE_SUCCESS,
 } from "translator";
 import { useToast } from "vue-toast-notification";
+import { buildLinkCreate as buildLinkCreateNotification } from "ChillMainAssets/lib/entity-notification/api";
 
 const props = defineProps(["evaluation", "docAnchorId"]);
 const store = useStore();
 
 const $toast = useToast();
 
-const timeSpentChoices = [
-    { text: "1 minute", value: 60 },
-    { text: "2 minutes", value: 120 },
-    { text: "3 minutes", value: 180 },
-    { text: "4 minutes", value: 240 },
-    { text: "5 minutes", value: 300 },
-    { text: "10 minutes", value: 600 },
-    { text: "15 minutes", value: 900 },
-    { text: "20 minutes", value: 1200 },
-    { text: "25 minutes", value: 1500 },
-    { text: "30 minutes", value: 1800 },
-    { text: "45 minutes", value: 2700 },
-    { text: "1 hour", value: 3600 },
-    { text: "1 hour 15 minutes", value: 4500 },
-    { text: "1 hour 30 minutes", value: 5400 },
-    { text: "1 hour 45 minutes", value: 6300 },
-    { text: "2 hours", value: 7200 },
-    { text: "2 hours 30 minutes", value: 9000 },
-    { text: "3 hours", value: 10800 },
-    { text: "3 hours 30 minutes", value: 12600 },
-    { text: "4 hours", value: 14400 },
-    { text: "4 hours 30 minutes", value: 16200 },
-    { text: "5 hours", value: 18000 },
-    { text: "5 hours 30 minutes", value: 19800 },
-    { text: "6 hours", value: 21600 },
-    { text: "6 hours 30 minutes", value: 23400 },
-    { text: "7 hours", value: 25200 },
-    { text: "7 hours 30 minutes", value: 27000 },
-    { text: "8 hours", value: 28800 },
+const timeSpentValues = [
+    60,
+    120,
+    180,
+    240,
+    300,
+    600,
+    900,
+    1200,
+    1500,
+    1800,
+    2700,
+    3600,
+    4500,
+    5400,
+    6300,
+    7200,
+    9000,
+    10800,
+    12600,
+    14400,
+    16200,
+    18000,
+    19800,
+    21600,
+    23400,
+    25200,
+    27000,
+    28800,
+    43200,
+    57600,
+    72000,
+    86400,
+    100800,
+    115200,
+    129600,
+    144000, // goes from 1 minute to 40 hours
 ];
 
+const formatDuration = (seconds, locale) => {
+    const currentLocale = locale || navigator.language || "fr";
+
+    const totalHours = Math.floor(seconds / 3600);
+    const remainingMinutes = Math.floor((seconds % 3600) / 60);
+
+    if (totalHours >= 8) {
+        const days = Math.floor(totalHours / 8);
+        const remainingHours = totalHours % 8;
+
+        const parts = [];
+
+        if (days > 0) {
+            parts.push(
+                new Intl.NumberFormat(currentLocale, {
+                    style: "unit",
+                    unit: "day",
+                    unitDisplay: "long",
+                }).format(days),
+            );
+        }
+
+        if (remainingHours > 0) {
+            parts.push(
+                new Intl.NumberFormat(currentLocale, {
+                    style: "unit",
+                    unit: "hour",
+                    unitDisplay: "long",
+                }).format(remainingHours),
+            );
+        }
+
+        return parts.join(" ");
+    }
+
+    // For less than 8 hours, use hour and minute format
+    const parts = [];
+
+    if (totalHours > 0) {
+        parts.push(
+            new Intl.NumberFormat(currentLocale, {
+                style: "unit",
+                unit: "hour",
+                unitDisplay: "long",
+            }).format(totalHours),
+        );
+    }
+
+    if (remainingMinutes > 0) {
+        parts.push(
+            new Intl.NumberFormat(currentLocale, {
+                style: "unit",
+                unit: "minute",
+                unitDisplay: "long",
+            }).format(remainingMinutes),
+        );
+    }
+
+    console.log(parts);
+    console.log(parts.join(" "));
+
+    return parts.join(" ");
+};
+
+const timeSpentChoices = computed(() => {
+    const locale = "fr";
+    return timeSpentValues.map((value) => ({
+        text: formatDuration(value, locale),
+        value: parseInt(value),
+    }));
+});
+
 const startDate = computed({
     get() {
         return props.evaluation.startDate;
@@ -193,7 +274,7 @@ function updateWarningInterval(value) {
 }
 
 function updateTimeSpent(value) {
-    timeSpent.value = value;
+    timeSpent.value = parseInt(value);
 }
 
 function updateComment(value) {

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig

@@ -216,9 +216,29 @@
 
                                     {% if e.timeSpent is not null and e.timeSpent > 0 %}
                                         <li>
-                                            {% set minutes = (e.timeSpent / 60) %}
-                                            <span
-                                                class="item-key">{{ 'accompanying_course_work.timeSpent'|trans ~ ' : ' }}</span> {{ 'duration.minute'|trans({ '{m}' : minutes }) }}
+                                            {% set totalHours = (e.timeSpent / 3600)|round(0, 'floor') %}
+                                            {% set totalMinutes = ((e.timeSpent % 3600) / 60)|round(0, 'floor') %}
+
+                                            <span class="item-key">{{ 'accompanying_course_work.timeSpent'|trans ~ ' : ' }}</span>
+
+                                            {% if totalHours >= 8 %}
+                                                {% set days = (totalHours / 8)|round(0, 'floor') %}
+                                                {% set remainingHours = totalHours % 8 %}
+
+                                                {% if days > 0 %}
+                                                    {{ 'duration.day'|trans({ '{d}' : days }) }}
+                                                {% endif %}
+                                                {% if remainingHours > 0 %}
+                                                    {{ 'duration.hour'|trans({ '{h}' : remainingHours }) }}
+                                                {% endif %}
+                                            {% else %}
+                                                {% if totalHours > 0 %}
+                                                    {{ 'duration.hour'|trans({ '{h}' : totalHours }) }}
+                                                {% endif %}
+                                                {% if totalMinutes > 0 %}
+                                                    {{ 'duration.minute'|trans({ '{m}' : totalMinutes }) }}
+                                                {% endif %}
+                                            {% endif %}
                                         </li>
                                     {% elseif displayContent is defined and displayContent == 'long' %}
                                         <li>