[IMP] carousel: allow duplicating charts in carousel

This commit adds a button in the cog wheel of the carousel panel to
duplicate charts in the carousel.

closes #7121

Task: 5081788
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

Author: hokolomopo

packages/o-spreadsheet-engine/src/plugins/ui_stateful/carousel_ui.ts

@@ -1,8 +1,13 @@
 import { UuidGenerator } from "../../helpers";
 import { CAROUSEL_DEFAULT_CHART_DEFINITION } from "../../helpers/carousel_helpers";
 import { AbstractChart } from "../../helpers/figures/charts/abstract_chart";
-import { deepEquals } from "../../helpers/misc";
-import { Command, CommandResult, LocalCommand } from "../../types/commands";
+import { deepEquals, insertItemsAtIndex } from "../../helpers/misc";
+import {
+  Command,
+  CommandResult,
+  DuplicateCarouselChartCommand,
+  LocalCommand,
+} from "../../types/commands";
 import { Carousel, CarouselItem } from "../../types/figure";
 import { UID } from "../../types/misc";
 import { UIPlugin } from "../ui_plugin";
@@ -28,6 +33,17 @@ export class CarouselUIPlugin extends UIPlugin {
           return CommandResult.InvalidFigureId;
         }
         return CommandResult.Success;
+      case "DUPLICATE_CAROUSEL_CHART":
+        if (
+          !this.getters.doesCarouselExist(cmd.carouselId) ||
+          !this.getters
+            .getCarousel(cmd.carouselId)
+            .items.some((item) => item.type === "chart" && item.chartId === cmd.chartId) ||
+          this.getters.getChart(cmd.duplicatedChartId)
+        ) {
+          return CommandResult.InvalidFigureId;
+        }
+        return CommandResult.Success;
       case "ADD_NEW_CHART_TO_CAROUSEL":
         if (!this.getters.doesCarouselExist(cmd.figureId)) {
           return CommandResult.InvalidFigureId;
@@ -55,6 +71,9 @@ export class CarouselUIPlugin extends UIPlugin {
       case "ADD_FIGURE_CHART_TO_CAROUSEL":
         this.addFigureChartToCarousel(cmd.carouselFigureId, cmd.chartFigureId, cmd.sheetId);
         break;
+      case "DUPLICATE_CAROUSEL_CHART":
+        this.duplicateCarouselChart(cmd);
+        break;
       case "UPDATE_CAROUSEL_ACTIVE_ITEM":
         this.carouselStates[cmd.figureId] = this.getCarouselItemId(cmd.item);
         break;
@@ -212,6 +231,45 @@ export class CarouselUIPlugin extends UIPlugin {
     this.dispatch("DELETE_FIGURE", { sheetId, figureId: chartFigureId });
   }
 
+  private duplicateCarouselChart({
+    carouselId,
+    chartId,
+    sheetId,
+    duplicatedChartId,
+  }: DuplicateCarouselChartCommand) {
+    const chart = this.getters.getChart(chartId);
+    if (!chart) {
+      return;
+    }
+    const carousel = this.getters.getCarousel(carouselId);
+
+    const duplicatedItemIndex = carousel.items.findIndex(
+      (item) => item.type === "chart" && item.chartId === chartId
+    );
+    if (duplicatedItemIndex === -1) {
+      return;
+    }
+
+    this.dispatch("CREATE_CHART", {
+      chartId: duplicatedChartId,
+      figureId: carouselId,
+      sheetId,
+      definition: chart.getDefinition(),
+    });
+
+    const carouselItems = insertItemsAtIndex(
+      carousel.items,
+      [{ type: "chart", chartId: duplicatedChartId }],
+      duplicatedItemIndex + 1
+    );
+
+    this.dispatch("UPDATE_CAROUSEL", {
+      sheetId,
+      figureId: carouselId,
+      definition: { ...carousel, items: carouselItems },
+    });
+  }
+
   private getCarouselItemId(item: CarouselItem): UID {
     return item.type === "chart" ? item.chartId : "carouselDataView";
   }

packages/o-spreadsheet-engine/src/types/commands.ts

@@ -602,6 +602,13 @@ export interface AddFigureChartToCarouselCommand extends SheetDependentCommand {
   chartFigureId: UID;
 }
 
+export interface DuplicateCarouselChartCommand extends SheetDependentCommand {
+  type: "DUPLICATE_CAROUSEL_CHART";
+  carouselId: UID;
+  chartId: UID;
+  duplicatedChartId: UID;
+}
+
 export interface UpdateCarouselActiveItemCommand extends SheetDependentCommand {
   type: "UPDATE_CAROUSEL_ACTIVE_ITEM";
   figureId: UID;
@@ -1287,6 +1294,7 @@ export type LocalCommand =
   | ToggleCheckboxCommand
   | AddNewChartToCarouselCommand
   | AddFigureChartToCarouselCommand
+  | DuplicateCarouselChartCommand
   | UpdateCarouselActiveItemCommand
   | PopOutChartFromCarouselCommand;
 

src/components/side_panel/carousel_panel/carousel_panel.ts

@@ -126,6 +126,16 @@ export class CarouselPanel extends Component<Props, SpreadsheetChildEnv> {
     });
   }
 
+  duplicateCarouselChart(item: CarouselItem) {
+    if (item.type !== "chart") return;
+    this.env.model.dispatch("DUPLICATE_CAROUSEL_CHART", {
+      sheetId: this.carouselSheetId,
+      carouselId: this.props.figureId,
+      chartId: item.chartId,
+      duplicatedChartId: this.env.model.uuidGenerator.smallUuid(),
+    });
+  }
+
   onDragHandleMouseDown(item: CarouselItem, event: MouseEvent) {
     if (event.button !== 0) return;
     const previewRects = Array.from(this.previewListRef.el!.children).map((previewEl) =>
@@ -222,6 +232,11 @@ export class CarouselPanel extends Component<Props, SpreadsheetChildEnv> {
         execute: () => this.popOutCarouselItem(item),
         icon: "o-spreadsheet-Icon.EXTERNAL",
       });
+      actions.push({
+        name: _t("Duplicate chart"),
+        execute: () => this.duplicateCarouselChart(item),
+        icon: "o-spreadsheet-Icon.COPY",
+      });
     }
     actions.push({
       name: _t("Delete item"),

tests/figures/carousel/carousel_panel_component.test.ts

@@ -105,6 +105,22 @@ describe("Carousel panel component", () => {
     expect(model.getters.getChartIds(model.getters.getActiveSheetId())).toHaveLength(1);
   });
 
+  test("Can duplicate a carousel chart", async () => {
+    createCarousel(model, { items: [] }, "carouselId");
+    addNewChartToCarousel(model, "carouselId", { type: "radar" });
+
+    await mountCarouselPanel(model, "carouselId");
+    await click(fixture, ".o-carousel-preview .os-cog-wheel-menu-icon");
+    await click(fixture, '.o-menu-item[title="Duplicate chart"]');
+
+    const items = model.getters.getCarousel("carouselId").items;
+    expect(items).toHaveLength(2);
+
+    expect(model.getters.getChartDefinition(items[0]["chartId"])).toMatchObject({ type: "radar" });
+    expect(items[1]["chartId"]).not.toEqual(items[0]["chartId"]);
+    expect(model.getters.getChartDefinition(items[1]["chartId"])).toMatchObject({ type: "radar" });
+  });
+
   test("Can drag & drop carousel items to re-order them", async () => {
     createCarousel(model, { items: [] }, "carouselId");
     const radarId = addNewChartToCarousel(model, "carouselId", { type: "radar" });

tests/figures/carousel/carousel_plugin.test.ts

@@ -99,6 +99,27 @@ describe("Carousel figure", () => {
       });
       expect(result).toBeSuccessfullyDispatched();
     });
+
+    test("Cannot duplicate wrong carousel item", () => {
+      createCarousel(model, { items: [] }, "carouselId");
+      const chartId = addNewChartToCarousel(model, "carouselId");
+
+      let result = model.dispatch("DUPLICATE_CAROUSEL_CHART", {
+        carouselId: "wrongCarouselId",
+        sheetId,
+        chartId,
+        duplicatedChartId: "anyId",
+      });
+      expect(result).toBeCancelledBecause(CommandResult.InvalidFigureId);
+
+      result = model.dispatch("DUPLICATE_CAROUSEL_CHART", {
+        carouselId: "carouselId",
+        sheetId,
+        chartId: "invalidChartId",
+        duplicatedChartId: "anyId",
+      });
+      expect(result).toBeCancelledBecause(CommandResult.InvalidFigureId);
+    });
   });
 
   test("Can create a carousel figure", () => {