feat(ui-commons,ui-api): allow to export matrices to CSV (#2236)

webapp/public/locales/en/main.json

@@ -76,6 +76,7 @@
   "global.close": "Close",
   "global.replace": "Replace",
   "global.status": "Status",
+  "global.semicolon": "Semicolon",
   "global.language": "Language",
   "global.time.hourly": "Hourly",
   "global.time.daily": "Daily",

webapp/public/locales/fr/main.json

@@ -76,6 +76,7 @@
   "global.close": "Fermer",
   "global.replace": "Remplacer",
   "global.status": "Statut",
+  "global.semicolon": "Point-virgule",
   "global.language": "Langue",
   "global.time.hourly": "Horaire",
   "global.time.daily": "Journalier",

webapp/src/components/common/buttons/DownloadMatrixButton.tsx

@@ -17,6 +17,7 @@ import { downloadFile } from "../../../utils/fileUtils";
 import { StudyMetadata } from "../../../common/types";
 import { useTranslation } from "react-i18next";
 import DownloadButton from "./DownloadButton";
+import type { TTableExportFormat } from "@/services/api/studies/raw/types";
 
 export interface DownloadMatrixButtonProps {
   studyId: StudyMetadata["id"];
@@ -25,39 +26,44 @@ export interface DownloadMatrixButtonProps {
   label?: string;
 }
 
-const EXPORT_OPTIONS = [
-  { label: "TSV", value: "tsv" },
-  { label: "Excel", value: "xlsx" },
-] as const;
-
-type ExportFormat = (typeof EXPORT_OPTIONS)[number]["value"];
-
 function DownloadMatrixButton(props: DownloadMatrixButtonProps) {
   const { t } = useTranslation();
   const { studyId, path, disabled, label = t("global.export") } = props;
 
+  const options: Array<{ label: string; value: TTableExportFormat }> = [
+    { label: "CSV", value: "csv" },
+    {
+      label: `CSV (${t("global.semicolon").toLowerCase()})`,
+      value: "csv (semicolon)",
+    },
+    { label: "TSV", value: "tsv" },
+    { label: "XLSX", value: "xlsx" },
+  ];
+
   ////////////////////////////////////////////////////////////////
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleDownload = async (format: ExportFormat) => {
+  const handleDownload = async (format: TTableExportFormat) => {
     if (!path) {
       return;
     }
 
-    const isExcel = format === "xlsx";
+    const isXlsx = format === "xlsx";
 
     const res = await downloadMatrix({
       studyId,
       path,
       format,
-      header: isExcel,
-      index: isExcel,
+      header: isXlsx,
+      index: isXlsx,
     });
 
+    const extension = format === "csv (semicolon)" ? "csv" : format;
+
     return downloadFile(
       res,
-      `matrix_${studyId}_${path.replace("/", "_")}.${format}`,
+      `matrix_${studyId}_${path.replace("/", "_")}.${extension}`,
     );
   };
 
@@ -67,7 +73,7 @@ function DownloadMatrixButton(props: DownloadMatrixButtonProps) {
 
   return (
     <DownloadButton
-      formatOptions={[...EXPORT_OPTIONS]}
+      formatOptions={options}
       onClick={handleDownload}
       disabled={!path || disabled}
     >

webapp/src/services/api/studies/raw/constants.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+export const TableExportFormat = {
+  XLSX: "xlsx",
+  HDF5: "hdf5",
+  TSV: "tsv",
+  CSV: "csv",
+  CSV_SEMICOLON: "csv (semicolon)",
+} as const;

webapp/src/services/api/studies/raw/types.ts

@@ -14,11 +14,15 @@
 
 import type { AxiosRequestConfig } from "axios";
 import type { StudyMetadata } from "../../../../common/types";
+import { O } from "ts-toolbelt";
+import { TableExportFormat } from "./constants";
+
+export type TTableExportFormat = O.UnionOf<typeof TableExportFormat>;
 
 export interface DownloadMatrixParams {
   studyId: StudyMetadata["id"];
   path: string;
-  format?: "tsv" | "xlsx";
+  format?: TTableExportFormat;
   header?: boolean;
   index?: boolean;
 }