[IMP] format: add custom format side panel

This commit adds a side panel for all number formats. This merges
the old date format/currency format panels into a single "More formats"
panel, with tabs for each category of formats (number, date, currency).

closes #7241

Task: 3149088
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: hokolomopo

packages/o-spreadsheet-engine/src/helpers/format/format.ts

@@ -4,7 +4,7 @@ import { CellValue } from "../../types/cells";
 import { Currency } from "../../types/currency";
 import { EvaluationError } from "../../types/errors";
 import { Format, FormattedValue, LocaleFormat } from "../../types/format";
-import { Locale } from "../../types/locale";
+import { DEFAULT_LOCALE, Locale } from "../../types/locale";
 import { FunctionResultObject, Maybe } from "../../types/misc";
 import { DateTime, INITIAL_1900_DAY, isDateTime, numberToJsDate, parseDateTime } from "../dates";
 import {
@@ -25,7 +25,7 @@ import {
   convertInternalFormatToFormat,
   parseFormat,
 } from "./format_parser";
-import { FormatToken } from "./format_tokenizer";
+import { FormatToken, tokenizeFormat } from "./format_tokenizer";
 
 /**
  * Number of digits for the default number format. This number of digit make a number fit well in a cell
@@ -948,3 +948,16 @@ export function formatHasRepeatedChar(value: CellValue, format: Format | undefin
 
   return false;
 }
+
+export function isFormatValid(format: Format): boolean {
+  try {
+    formatValue(0, { format, locale: DEFAULT_LOCALE });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function getNumberOfFormatParts(format: Format): number {
+  return tokenizeFormat(format).length;
+}

src/actions/format_actions.ts

@@ -109,7 +109,7 @@ export const EXAMPLE_DATE = parseLiteral("2023/09/26 10:43:00 PM", DEFAULT_LOCAL
 export const formatCustomCurrency: ActionSpec = {
   name: _t("Custom currency"),
   isVisible: (env) => env.loadCurrencies !== undefined && !env.isSmall,
-  execute: (env) => env.openSidePanel("CustomCurrency", {}),
+  execute: (env) => env.openSidePanel("MoreFormats", { category: "currency" }),
 };
 
 export const formatNumberDate = createFormatActionSpec({
@@ -139,21 +139,16 @@ export const formatNumberDuration = createFormatActionSpec({
   format: "hhhh:mm:ss",
 });
 
-export const formatNumberQuarter = createFormatActionSpec({
-  name: _t("Quarter"),
-  descriptionValue: EXAMPLE_DATE,
-  format: "qq yyyy",
-});
-
-export const formatNumberFullQuarter = createFormatActionSpec({
-  name: _t("Full quarter"),
-  descriptionValue: EXAMPLE_DATE,
-  format: "qqqq yyyy",
-});
+export const customDateFormat: ActionSpec = {
+  name: _t("Custom date and time"),
+  isVisible: (env) => !env.isSmall,
+  execute: (env) => env.openSidePanel("MoreFormats", { category: "date" }),
+};
 
-export const moreFormats: ActionSpec = {
-  name: _t("More date formats"),
-  execute: (env) => env.openSidePanel("MoreFormats", {}),
+export const customNumberFormat: ActionSpec = {
+  name: _t("Custom number format"),
+  isVisible: (env) => !env.isSmall,
+  execute: (env) => env.openSidePanel("MoreFormats", { category: "number" }),
 };
 
 export const formatNumberFullDateTime = createFormatActionSpec({
@@ -162,54 +157,6 @@ export const formatNumberFullDateTime = createFormatActionSpec({
   descriptionValue: EXAMPLE_DATE,
 });
 
-export const formatNumberISODate = createFormatActionSpec({
-  name: _t("ISO Date"),
-  format: "yyyy-mm-dd",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberISODateTime = createFormatActionSpec({
-  name: _t("ISO Date time"),
-  format: "yyyy-mm-dd hh:mm:ss",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberFullWeekDayAndMonth = createFormatActionSpec({
-  name: _t("Full week day and month"),
-  format: "dddd d mmmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberDayAndFullMonth = createFormatActionSpec({
-  name: _t("Day and full month"),
-  format: "d mmmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberShortWeekDay = createFormatActionSpec({
-  name: _t("Short week day"),
-  format: "ddd d mmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberDayAndShortMonth = createFormatActionSpec({
-  name: _t("Day and short month"),
-  format: "d mmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberFullMonth = createFormatActionSpec({
-  name: _t("Full month"),
-  format: "mmmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
-export const formatNumberShortMonth = createFormatActionSpec({
-  name: _t("Short month"),
-  format: "mmm yyyy",
-  descriptionValue: EXAMPLE_DATE,
-});
-
 export const increaseDecimalPlaces: ActionSpec = {
   name: _t("Increase decimal places"),
   icon: "o-spreadsheet-Icon.INCREASE_DECIMAL",