feat(annotation): update date format

OpenSILEX/opensilex-dev!1377

Author: ALIANE LYDIA

opensilex-front/front/src/components/annotations/list/AnnotationList.vue

@@ -142,9 +142,7 @@ export default class AnnotationList extends Vue {
   @Ref("annotationModalForm") readonly annotationModalForm!: AnnotationModalForm;
 
   formatDate(dateStr: string): string {
-    const localeString = new Date(dateStr).toLocaleString();
-
-    return localeString.replace(/\//g, '-');
+    return this.$opensilex.$dateTimeFormatter.formatLocalFixedDateTime(dateStr);
   }
 
   static getDefaultColumns() {

opensilex-front/front/src/models/DateTimeFormatter.ts

@@ -95,6 +95,31 @@ export default class DateTimeFormatter {
             .format(new Date(dateTimeValue));
     }
 
+    /**
+     * Formats a date string into a local date and time string with the format `YYYY-MM-DD HH:mm:ss`.
+     * The output uses the local timezone of the environment where the code runs.
+     *
+     * @param dateStr - The date string to format.
+     * @returns The formatted date and time string in the format `YYYY-MM-DD HH:mm:ss`.
+     *          Returns an empty string if the input is invalid or empty.
+     */
+    formatLocalFixedDateTime(dateStr: string): string {
+        if (!dateStr) return "";
+
+        const date = new Date(dateStr);
+        if (isNaN(date.getTime())) return ""; // invalid date check
+
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
     /**
      * Formats a period between two dates
      *