[IMP] pivot: allow to open side panel in readonly mode

In read-only mode, you can't open the pivots/lists/charts side panels.
It's useful to know what you're looking at (range, domain, sorting, etc.),
even if you can't edit anything.

Task: 4187705

src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml

@@ -1,5 +1,6 @@
 <templates>
  <t t-name="o-spreadsheet-PivotDimension">
+ <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
  <div
  class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension"
  t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
@@ -20,7 +21,7 @@
  <t t-slot="upper-right-icons"/>
  <i
  class="o-button-icon fa fa-trash pe-1 ps-2"
- t-if="props.onRemoved"
+ t-if="props.onRemoved and !isReadonly"
  t-on-click="() => props.onRemoved(props.dimension)"
  />
  </div>

src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml

@@ -1,10 +1,15 @@
 <templates>
  <t t-name="o-spreadsheet-PivotLayoutConfigurator">
- <div class="o_side_panel_section pivot-dimensions o-section" t-ref="pivot-dimensions">
+ <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
+ <div
+ class="o_side_panel_section pivot-dimensions o-section"
+ t-ref="pivot-dimensions"
+ t-att-class="{'pe-none': isReadonly}">
  <div
  class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
  Columns
  <AddDimensionButton
+ t-if="!isReadonly"
  onFieldPicked.bind="addColumnDimension"
  fields="props.unusedGroupableFields"
  />
@@ -31,6 +36,7 @@
  t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
  Rows
  <AddDimensionButton
+ t-if="!isReadonly"
  onFieldPicked.bind="addRowDimension"
  fields="props.unusedGroupableFields"
  />
@@ -55,7 +61,10 @@
  <div
  class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
  Measures
- <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields">
+ <AddDimensionButton
+ t-if="!isReadonly"
+ onFieldPicked.bind="addMeasureDimension"
+ fields="props.measureFields">
  <div
  t-on-click="addCalculatedMeasure"
  class="p-2 bg-white border-top d-flex align-items-center sticky-bottom add-calculated-measure">

src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.xml

@@ -12,6 +12,7 @@
  t-on-click="toggleMeasureVisibility"
  />
  <i
+ t-if="!env.model.getters.isReadonly()"
  class="o-button-icon pe-1 ps-2 fa fa-cog"
  title="Show values as"
  t-on-click="openShowValuesAs"

src/components/side_panel/pivot/pivot_side_panel/pivot_spreadsheet_side_panel/pivot_spreadsheet_side_panel.xml

@@ -1,9 +1,10 @@
 <templates>
  <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
+ <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
  <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
  <div class="h-100 position-relative overflow-x-hidden overflow-y-auto">
  <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
- <Section>
+ <Section class="isReadonly ? 'pe-none' : ''">
  <t t-set-slot="title">Range</t>
  <SelectionInput
  ranges="ranges"
@@ -33,6 +34,7 @@
  />
  </div>
  <PivotDeferUpdate
+ t-if="!isReadonly"
  deferUpdate="store.updatesAreDeferred"
  toggleDeferUpdate="(value) => store.deferUpdates(value)"
  isDirty="store.isDirty"

src/components/side_panel/pivot/pivot_title_section/pivot_title_section.xml

@@ -1,10 +1,11 @@
 <templates>
  <t t-name="o-spreadsheet-PivotTitleSection">
- <Section>
+ <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
+ <Section class="isReadonly ? 'pe-none' : ''">
  <t t-set-slot="title">
  <div class="d-flex flex-row justify-content-between align-items-center">
  Name
- <CogWheelMenu items="cogWheelMenuItems"/>
+ <CogWheelMenu t-if="!isReadonly" items="cogWheelMenuItems"/>
  </div>
  </t>
  <TextInput class="'os-pivot-title'" value="name" onChange.bind="onNameChanged"/>

src/helpers/pivot/pivot_menu_items.ts

@@ -14,6 +14,7 @@ export const pivotProperties: ActionSpec = {
  const pivotId = env.model.getters.getPivotIdFromPosition(position);
  return (pivotId && env.model.getters.isExistingPivot(pivotId)) || false;
  },
+ isReadonlyAllowed: true,
  icon: "o-spreadsheet-Icon.PIVOT",
 };
 

src/registries/menus/topbar_menu_registry.ts

@@ -473,6 +473,7 @@ topbarMenuRegistry
  id: `item_pivot_${env.model.getters.getPivotFormulaId(pivotId)}`,
  name: env.model.getters.getPivotDisplayName(pivotId),
  sequence: sequence + index,
+ isReadonlyAllowed: true,
  execute: (env) => env.openSidePanel("PivotSidePanel", { pivotId }),
  onStartHover: (env) => env.getStore(HighlightStore).register(highlightProvider),
  onStopHover: (env) => env.getStore(HighlightStore).unRegister(highlightProvider),

tests/pivots/__snapshots__/pivot_side_panel.test.ts.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pivot side panel readonly panel snapshot 1`] = `
+<div
+ class="o-sidePanel"
+>
+ <div
+ class="o-sidePanelHeader"
+ >
+ <div
+ class="o-sidePanelTitle o-heading-3"
+ >
+ Pivot #2
+ </div>
+ <div
+ class="o-sidePanelClose"
+ >
+ ✕
+ </div>
+ </div>
+ <div
+ class="o-sidePanelBody-container d-flex flex-grow-1 "
+ >
+ <div
+ class="o-sidePanel-handle-container"
+ >
+ <div
+ class="o-sidePanel-handle"
+ >
+ <svg
+ class="o-icon"
+ fill="currentColor"
+ viewBox="0 0 4 16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <circle
+ cx="2"
+ cy="3.5"
+ r="1"
+ />
+ <circle
+ cx="2"
+ cy="6.5"
+ r="1"
+ />
+ <circle
+ cx="2"
+ cy="9.5"
+ r="1"
+ />
+ <circle
+ cx="2"
+ cy="12.5"
+ r="1"
+ />
+ </svg>
+ </div>
+ </div>
+ <div
+ class="o-sidePanelBody"
+ >
+ <div
+ class="d-flex flex-column h-100 justify-content-between overflow-hidden"
+ >
+ <div
+ class="h-100 position-relative overflow-x-hidden overflow-y-auto"
+ >
+ <div
+ class="o-section pe-none"
+ >
+ <div
+ class="o-section-title"
+ >
+ <div
+ class="d-flex flex-row justify-content-between align-items-center"
+ >
+ Name 
+ 
+ </div>
+ </div>
+ 
+ <div
+ class="w-100"
+ >
+ <input
+ class="os-input w-100 os-pivot-title"
+ type="text"
+ />
+ </div>
+ 
+ </div>
+ 
+ <div
+ class="o-section pe-none"
+ >
+ <div
+ class="o-section-title"
+ >
+ Range
+ </div>
+ 
+ <div
+ class="o-selection"
+ >
+ <div
+ class="o-selection-input d-flex flex-row"
+ >
+ <div
+ class="position-relative w-100"
+ >
+ <input
+ class="o-input mb-2 o-invalid border-danger position-relative"
+ placeholder="e.g. A1:A2"
+ spellcheck="false"
+ style=""
+ type="text"
+ />
+ <span
+ class="error-icon text-danger position-absolute d-flex align-items-center"
+ title="This range is invalid"
+ >
+ <div
+ class="o-icon"
+ >
+ <i
+ class="fa fa-exclamation-circle"
+ />
+ </div>
+ </span>
+ 
+ </div>
+ 
+ </div>
+ 
+ 
+ <div
+ class="d-flex flex-row w-100 o-selection-input"
+ >
+ 
+ 
+ </div>
+ </div>
+ <span
+ class="text-danger sp_range_error_message"
+ >
+ The pivot cannot be created because cell A1 is empty
+ </span>
+ 
+ </div>
+ 
+ 
+ </div>
+ 
+ </div>
+ </div>
+ 
+ </div>
+</div>
+`;

tests/pivots/pivot_side_panel.test.ts

@@ -19,6 +19,13 @@ describe("Pivot side panel", () => {
  addPivot(model, "A1:D5", {}, "2");
  });
 
+ test("readonly panel snapshot", async () => {
+ model.updateMode("readonly");
+ env.openSidePanel("PivotSidePanel", { pivotId: "2" });
+ await nextTick();
+ expect(fixture.querySelector(".o-sidePanel")).toMatchSnapshot();
+ });
+
  test("It should open the pivot editor when pivotId is provided", async () => {
  env.openSidePanel("PivotSidePanel", { pivotId: "2" });
  await nextTick();