@odoo/o-spreadsheet 17.4.0-alpha.1 → 17.4.0-alpha.10

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 17.4.0-alpha.1
- @date 2024-06-03T15:31:14.056Z
- @hash cb56c37
+ @version 17.4.0-alpha.10
+ @date 2024-07-02T09:04:53.197Z
+ @hash a68d9f2
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -272,7 +272,8 @@
           t-att-class="{'o-sheet-name-editable': state.isEditing }"
           t-ref="sheetNameSpan"
           t-esc="sheetName"
-          t-on-click="(ev) => this.onClickSheetName(ev)"
+          t-on-click="(ev) => this.onMouseEventSheetName(ev)"
+          t-on-pointerdown="(ev) => this.onMouseEventSheetName(ev)"
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
@@ -669,7 +670,7 @@
   </t>
 
   <t t-name="o-spreadsheet-ScorecardChart">
-    <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer"/>
+    <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer" t-att-title="title"/>
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
@@ -2244,6 +2245,25 @@
       <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.INSERT_PIVOT">
+    <svg class="o-icon">
+      <defs>
+        <mask id="a">
+          <path fill="#fff" d="M0 0h18v18H0z"/>
+          <path d="M18 26a3.5 3 0 0 1 0-18"/>
+        </mask>
+      </defs>
+      <path
+        fill="currentColor"
+        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        mask="url(#a)"
+      />
+      <path
+        fill="currentColor"
+        d="M13 13v-3a.75.5 0 0 1 1.5 0v3h3a.5.75 0 0 1 0 1.5h-3v3a.75.5 0 0 1-1.5 0v-3h-3a.5.75 0 0 1 0-1.5"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
     <div class="o-link-tool d-flex align-items-center">
@@ -2505,7 +2525,7 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="stackedLabel"
+          label="chartTerms.StackedBarChart"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />
@@ -2751,6 +2771,264 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartPreview.LINE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path stroke="#eb6d00" style="fill:none" d="M6,40 l12,-12 l6,6 l18,-18"/>
+      <path stroke="#0074d9" style="fill:none" d="M6,25 l12,-12 l18,18 l6,-6"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_LINE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path stroke="#0074d9" style="fill:none" d="M3,30 l12,-12 l6,6 l18,-18"/>
+      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-12"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.AREA_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#c4e4ff" d="M3,45 V25 l12,-12 l18,18 l6,-6 V45"/>
+      <path fill="#ffe1c8" d="M3,45 V40 l12,-12 l6,6 l18,-18 V45"/>
+      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-18"/>
+      <path stroke="#0074d9" style="fill:none" d="M3,25 l12,-12 l18,18 l6,-6"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_AREA_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#c4e4ff" d="M3,45 h36 v-39 l-18,18 l-6,-6 l-12,12"/>
+      <path stroke="#0074d9" style="fill:none" d="M3,30 l12,-12 l6,6 l18,-18"/>
+      <path fill="#ffe1c8" d="M3,45 h36 v-23 l-18,12 l-6,-6 l-12,12"/>
+      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-12"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.COLUMN_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
+      <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
+      <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
+      <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
+      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_COLUMN_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
+      <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
+      <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
+      <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
+
+      <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
+      <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
+      <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
+      <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
+
+      <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
+      <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
+      <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
+      <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.BAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <g transform="matrix(0 1 -1 0 48 3)">
+        <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
+        <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
+        <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
+        <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
+        <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+        <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+        <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+        <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      </g>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_BAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <g transform="matrix(0 1 -1 0 48 1)">
+        <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
+        <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
+        <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
+        <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
+        <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
+        <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
+        <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
+        <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
+        <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
+        <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
+        <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
+        <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+      </g>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.COMBO_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-14 h6 v14"/>
+      <path fill="#c4e4ff" d="M8,45 v-13 h4 v13"/>
+      <path fill="#eb6d00" d="M14,45 v-28 h6 v28"/>
+      <path fill="#ffe1c8" d="M15,45 v-27 h4 v27"/>
+      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      <path stroke="#888" style="fill:none;stroke-width:1.5;" d="M4,40 l14,-12 l6,6 l20,-18"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.PIE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ffe1c8" stroke="#eb6d00" d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v20"/>
+      <path fill="#c4e4ff" stroke="#0074d9" d="M24,24 v-20 A20 20, 0, 0, 1, 41.32, 34 L24,24"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.DOUGHNUT_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#ffe1c8"
+        stroke="#eb6d00"
+        d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v8 A12,12,0,1,0,34.4,30"
+      />
+      <path
+        fill="#c4e4ff"
+        stroke="#0074d9"
+        d="M24,12 v-8 A20 20, 0, 0, 1, 41.32, 34 L34.4,30 A12,12,0,0,0,24,12"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.SCATTER_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <circle fill="#0074d9" cx="10" cy="10" r="2"/>
+      <circle fill="#0074d9" cx="15" cy="30" r="2"/>
+      <circle fill="#0074d9" cx="25" cy="36" r="2"/>
+      <circle fill="#0074d9" cx="32" cy="15" r="2"/>
+      <circle fill="#eb6d00" cx="10" cy="40" r="2"/>
+      <circle fill="#eb6d00" cx="18" cy="20" r="2"/>
+      <circle fill="#eb6d00" cx="30" cy="25" r="2"/>
+      <circle fill="#eb6d00" cx="40" cy="33" r="2"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.GAUGE_CHART">
+    <svg
+      viewBox="0 0 48 48"
+      class="o-chart-preview user-select-none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ccc" d="M2,32 A22,22,0,0,1,46,32 h-6 A16,16,0,0,0,8,32"/>
+      <path fill="#6aa84f" d="M2,32 A22,22,0,0,1,35,13 L32,18.2 A16,16,0,0,0,8,32"/>
+      <text x="17" y="32" style="font-size:12px;">62</text>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.SCORECARD_CHART">
+    <svg
+      viewBox="0 0 48 48"
+      class="o-chart-preview user-select-none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ddd" d="M1,8 h46 v32 h-46"/>
+      <path fill="#eee" d="M2,9 h44 v30 h-44"/>
+      <text x="9" y="32" style="font-size:18px;">123</text>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.WATERFALL_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#444" d="M5,45 v-26 h6 v26"/>
+      <path fill="#fff" d="M6,45 v-25 h4 v25"/>
+      <path fill="#eb6d00" d="M13,19 v7 h6 v-7"/>
+      <path fill="#ffe1c8" d="M14,20 v5 h4 v-5"/>
+      <path fill="#eb6d00" d="M21,25 v10 h6 v-10"/>
+      <path fill="#ffe1c8" d="M22,26 v8 h4 v-8"/>
+      <path fill="#0074d9" d="M29,35 v-24 h6 v24"/>
+      <path fill="#c4e4ff" d="M30,34 v-22 h4 v22"/>
+      <path fill="#444" d="M37,45 v-34 h6 v34"/>
+      <path fill="#fff" d="M38,45 v-33 h4 v33"/>
+      <path fill="#444" d="M11,20 v-1 h2 v1 M19,26 v-1 h2 v1 M27,35 v-1 h2 v1 M35,12 v-1 h2 v1"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.POPULATION_PYRAMID_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#eb6d00" d="M23,43 v-6 h22 v6"/>
+      <path fill="#ffe1c8" d="M23,42 v-4 h21 v4"/>
+      <path fill="#eb6d00" d="M23,36 v-6 h18 v6"/>
+      <path fill="#ffe1c8" d="M23,35 v-4 h17 v4"/>
+      <path fill="#eb6d00" d="M23,29 v-6 h12 v6"/>
+      <path fill="#ffe1c8" d="M23,28 v-4 h11 v4"/>
+      <path fill="#eb6d00" d="M23,22 v-6 h8 v6"/>
+      <path fill="#ffe1c8" d="M23,21 v-4 h7 v4"/>
+      <path fill="#eb6d00" d="M23,15 v-6 h4 v6"/>
+      <path fill="#ffe1c8" d="M23,14 v-4 h3 v4"/>
+
+      <path fill="#0074d9" d="M24,43 v-6 h-20 v6"/>
+      <path fill="#c4e4ff" d="M24,42 v-4 h-19 v4"/>
+      <path fill="#0074d9" d="M24,36 v-6 h-18 v6"/>
+      <path fill="#c4e4ff" d="M24,35 v-4 h-17 v4"/>
+      <path fill="#0074d9" d="M24,29 v-6 h-12 v6"/>
+      <path fill="#c4e4ff" d="M24,28 v-4 h-11 v4"/>
+      <path fill="#0074d9" d="M24,22 v-6 h-6 v6"/>
+      <path fill="#c4e4ff" d="M24,21 v-4 h-5 v4"/>
+      <path fill="#0074d9" d="M24,15 v-6 h-4 v6"/>
+      <path fill="#c4e4ff" d="M24,14 v-4 h-3 v4"/>
+
+      <path fill="#444" d="M23,2 v43 h1 v-43 M2,45 h44 v1 h-44"/>
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet-ChartTypePicker">
+    <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
+    <Section>
+      <t t-set-slot="title">Chart type</t>
+      <div class="position-relative">
+        <select
+          class="o-input o-type-selector"
+          t-ref="selectRef"
+          t-on-pointerdown.prevent="onPointerDown">
+          <option
+            t-esc="selectedChartProperties.displayName"
+            t-att-value="selectedChartProperties.chartSubtype"
+          />
+        </select>
+        <div class="o-type-selector-preview position-absolute">
+          <t t-call="{{selectedChartProperties.preview}}"/>
+        </div>
+      </div>
+    </Section>
+    <Popover t-if="state.popoverProps" t-props="state.popoverProps">
+      <div
+        t-ref="popoverRef"
+        class="o-chart-select-popover px-3 pb-4"
+        t-att-style="state.popoverStyle">
+        <t t-foreach="categories" t-as="category" t-key="category">
+          <t t-if="chartTypeByCategories[category]">
+            <h5 class="my-3" t-esc="category_value"/>
+            <div class="d-flex flex-wrap">
+              <t
+                t-foreach="chartTypeByCategories[category]"
+                t-as="properties"
+                t-key="properties.chartSubtype">
+                <div
+                  class="o-chart-type-item"
+                  t-att-title="properties.displayName"
+                  t-on-click="() => this.onTypeChange(properties.chartSubtype)"
+                  t-att-data-id="properties.chartSubtype"
+                  t-att-class="{'selected': properties === selectedChartProperties}">
+                  <t t-call="{{properties.preview}}"/>
+                </div>
+              </t>
+            </div>
+          </t>
+        </t>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-ChartWithAxisDesignPanel">
     <GeneralDesignEditor
       figureId="props.figureId"
@@ -2780,7 +3058,7 @@
             class="o-input data-series-selector"
             t-model="state.label"
             t-on-change="(ev) => this.updateSerieEditor(ev)">
-            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie" t-index="index">
+            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
               <option
                 t-att-value="serie"
                 t-att-selected="state.index === serie_index"
@@ -2797,7 +3075,7 @@
               />
             </div>
           </Section>
-          <Section class="'pt-0 px-0'">
+          <Section class="'pt-0 px-0'" t-if="canHaveTwoVerticalAxis">
             <t t-set-slot="title">Vertical axis</t>
             <select
               t-att-value="getDataSerieAxis()"
@@ -3005,7 +3283,7 @@
         />
         <Checkbox
           name="'cumulative'"
-          label="cumulativeLabel"
+          label="chartTerms.CumulativeData"
           value="props.definition.cumulative"
           onChange.bind="onUpdateCumulative"
         />
@@ -3056,22 +3334,7 @@
 
       <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
       <t t-if="store.panel === 'configuration'">
-        <Section>
-          <t t-set-slot="title">Chart type</t>
-          <t t-set="types" t-value="chartTypes"/>
-          <select
-            class="o-input o-type-selector"
-            t-on-change="(ev) => this.onTypeChange(ev.target.value)">
-            <option
-              t-foreach="chartTypes"
-              t-as="type"
-              t-key="type"
-              t-att-value="type"
-              t-esc="types[type]"
-              t-att-selected="definition.type === type"
-            />
-          </select>
-        </Section>
+        <ChartTypePicker figureId="props.figureId" chartPanelStore="store"/>
         <t
           t-component="chartPanel.configuration"
           definition="definition"
@@ -3353,6 +3616,23 @@
     </label>
   </t>
 
+  <t t-name="o-spreadsheet-CogWheelMenu">
+    <span class="fa fa-cog os-cog-wheel-menu-icon" t-on-click="togglePopover" t-ref="button"/>
+    <Popover t-if="popover.isOpen" t-props="popoverProps">
+      <div class="d-flex flex-column align-items-start os-cog-wheel-menu my-2">
+        <div
+          t-foreach="props.items"
+          t-as="item"
+          t-key="item.name"
+          t-on-click="() => this.onClick(item)"
+          class="btn btn-link me-3">
+          <i t-if="item.icon" t-att-class="'me-2 fa ' + item.icon"/>
+          <t t-esc="item.name"/>
+        </div>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="p-1 m-1" t-att-class="props.class">
       <div class="o_side_panel_collapsible_title d-flex align-items-center">
@@ -4160,15 +4440,16 @@
           </div>
         </div>
         <select
-          class="o-input o-type-selector o-type-range-selector mt-3 mb-3"
-          t-on-change="changeSearchScope">
+          class="o-input o-type-range-selector mt-3 mb-3"
+          t-on-change="changeSearchScope"
+          t-att-value="searchOptions.searchScope">
           <option value="allSheets">All sheets</option>
           <option value="activeSheet">Current sheet</option>
           <option value="specificRange">Specific range</option>
         </select>
         <div t-if="searchOptions.searchScope === 'specificRange'">
           <SelectionInput
-            ranges="[this.dataRange]"
+            ranges="[this.state.dataRange]"
             onSelectionChanged="(ranges) => this.onSearchRangeChanged(ranges)"
             onSelectionConfirmed.bind="updateDataRange"
             hasSingleRange="true"
@@ -4197,7 +4478,7 @@
           />
         </div>
         <div class="o-matches-count mt-4" t-if="store.toSearch !== ''">
-          <div t-if="searchOptions.searchScope === 'specificRange' and dataRange != ''">
+          <div t-if="searchOptions.searchScope === 'specificRange' and state.dataRange != ''">
             <t t-esc="specificRangeMatchesCount"/>
           </div>
           <div>
@@ -4286,6 +4567,31 @@
     </t>
   </t>
 
+  <t t-name="o-spreadsheet-PivotDeferUpdate">
+    <Section
+      class="'align-items-center border-top d-flex flex-row justify-content-between py-1 pivot-defer-update'">
+      <Checkbox
+        label="deferUpdatesLabel"
+        title="deferUpdatesTooltip"
+        value="props.deferUpdate"
+        onChange="(value) => props.toggleDeferUpdate(value)"
+      />
+      <div t-if="props.isDirty">
+        <i
+          class="btn btn-sm pe-0 fa fa-undo"
+          title="Discard all changes"
+          t-on-click="() => props.discard()"
+        />
+        <span
+          class="btn btm-sm btn-link sp_apply_update"
+          title="Apply all changes"
+          t-on-click="() => props.apply()">
+          Update
+        </span>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-AddDimensionButton">
     <span class="btn btn-sm btn-link add-dimension" t-on-click="togglePopover" t-ref="button">
       Add
@@ -4332,9 +4638,9 @@
     <div class="d-flex flex-row">
       <div class="d-flex flex-row py-1 px-2 w-100 small">
         <t t-set="granularity" t-value="props.dimension.granularity"/>
-        <div class="flex-basis-50">Granularity</div>
+        <div class="pivot-dim-operator-label">Granularity</div>
         <select
-          class="o_input flex-basis-50"
+          class="o_input flex-grow-1"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
           <option
             t-foreach="props.allGranularities"
@@ -4353,9 +4659,9 @@
   <t t-name="o-spreadsheet-PivotDimensionOrder">
     <div class="d-flex">
       <div class="d-flex py-1 px-2 w-100 small">
-        <div class="flex-basis-50">Order by</div>
+        <div class="pivot-dim-operator-label">Order by</div>
         <select
-          class="o_input flex-basis-50"
+          class="o_input flex-grow-1"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
           <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
           <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
@@ -4439,9 +4745,9 @@
           <PivotDimension dimension="measure" onRemoved.bind="removeMeasureDimension">
             <div class="d-flex flex-row small">
               <div class="d-flex flex-row py-1 px-2 w-100">
-                <div class="flex-basis-50">Aggregated by</div>
+                <div class="pivot-dim-operator-label">Aggregated by</div>
                 <select
-                  class="o_input flex-basis-50"
+                  class="o_input flex-grow-1"
                   t-on-change="(ev) => this.updateAggregator(measure, ev.target.value)">
                   <option
                     t-foreach="Object.keys(AGGREGATORS[measure.type])"
@@ -4460,35 +4766,14 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-PivotListItem">
-    <div
-      class="o_pivot_list_item p-4 border-bottom"
-      t-ref="pivotListItem"
-      t-on-click="this.selectPivot">
-      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-PivotSidePanel">
-    <t t-if="props.pivotId" t-component="sidePanelEditor" t-props="props"/>
-    <t t-else="">
-      <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
-        <PivotListItem pivotId="pivotId"/>
-      </t>
-    </t>
+    <t t-component="sidePanelEditor" t-props="props"/>
   </t>
 
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
     <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
       <div class="h-100 overflow-auto">
-        <Section>
-          <t t-set-slot="title">Name</t>
-          <EditableName name="name" displayName="displayName" onChanged.bind="onNameChanged"/>
-          <div class="btn btn-link o_duplicate_pivot" t-on-click="duplicatePivot">
-            <i class="fa fa-solid fa-copy me-1"/>
-            Duplicate Pivot
-          </div>
-        </Section>
+        <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
         <Section>
           <t t-set-slot="title">Range</t>
           <SelectionInput
@@ -4515,38 +4800,29 @@
           definition="definition"
           onDimensionsUpdated.bind="onDimensionsUpdated"
         />
-        <Section>
-          <button class="btn btn-link sp_back" t-on-click="back">Back</button>
-          <button class="btn btn-link sp_delete" t-on-click="delete">Delete</button>
-        </Section>
       </div>
-      <Section
-        class="'align-items-center border-top d-flex flex-row justify-content-between py-1 pivot-defer-update'">
-        <Checkbox
-          label="deferUpdatesLabel"
-          title="deferUpdatesTooltip"
-          value="store.updatesAreDeferred"
-          onChange="(value) => store.deferUpdates(value)"
-        />
-        <div>
-          <i
-            t-if="store.isDirty"
-            class="btn btn-sm pe-0 fa fa-undo"
-            title="Discard all changes"
-            t-on-click="() => store.discardPendingUpdate()"
-          />
-          <span
-            t-if="store.isDirty"
-            class="btn btm-sm btn-link sp_apply_update"
-            title="Apply all changes"
-            t-on-click="() => store.applyUpdate()">
-            Update
-          </span>
-        </div>
-      </Section>
+      <PivotDeferUpdate
+        deferUpdate="store.updatesAreDeferred"
+        toggleDeferUpdate="(value) => store.deferUpdates(value)"
+        isDirty="store.isDirty"
+        discard="store.discardPendingUpdate"
+        apply="store.applyUpdate"
+      />
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotTitleSection">
+    <Section>
+      <t t-set-slot="title">
+        <div class="d-flex flex-row justify-content-between align-items-center">
+          Name
+          <CogWheelMenu items="cogWheelMenuItems"/>
+        </div>
+      </t>
+      <EditableName name="name" displayName="displayName" onChanged.bind="onNameChanged"/>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -4607,6 +4883,7 @@
       menuItems="props.menuItems"
       position="menuPosition"
       onClose.bind="onMenuClosed"
+      menuId="menuId"
     />
   </t>
 
@@ -4638,6 +4915,12 @@
             <span t-esc="dateTimeFormatPreview"/>
           </div>
         </div>
+        <div class="alert alert-primary d-flex align-items-center mt-2" role="alert">
+          <div class="o-icon">
+            <i class="fa fa-info"/>
+          </div>
+          <div>This setting affects all users.</div>
+        </div>
       </Section>
     </div>
   </t>
@@ -4648,20 +4931,30 @@
         <div class="o-sidePanelTitle" t-esc="getTitle()"/>
         <div class="o-sidePanelClose" t-on-click="close">✕</div>
       </div>
-      <div class="o-sidePanelBody">
-        <t
-          t-component="panel.Body"
-          t-props="sidePanelStore.panelProps"
-          onCloseSidePanel.bind="close"
-          t-key="'Body_' + sidePanelStore.componentTag + sidePanelStore.panelKey"
-        />
-      </div>
-      <div class="o-sidePanelFooter" t-if="panel?.Footer">
-        <t
-          t-component="panel.Footer"
-          t-props="sidePanelStore.panelProps"
-          t-key="'Footer_' + sidePanelStore.componentTag"
-        />
+      <div class="o-sidePanelBody-container d-flex flex-grow-1 ">
+        <div class="o-sidePanel-handle-container d-flex align-items-center">
+          <div
+            class="o-sidePanel-handle"
+            t-on-pointerdown="startHandleDrag"
+            t-on-dblclick="sidePanelStore.resetPanelSize">
+            <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+          </div>
+        </div>
+        <div class="o-sidePanelBody">
+          <t
+            t-component="panel.Body"
+            t-props="sidePanelStore.panelProps"
+            onCloseSidePanel.bind="close"
+            t-key="'Body_' + sidePanelStore.componentTag + sidePanelStore.panelKey"
+          />
+        </div>
+        <div class="o-sidePanelFooter" t-if="panel?.Footer">
+          <t
+            t-component="panel.Footer"
+            t-props="sidePanelStore.panelProps"
+            t-key="'Footer_' + sidePanelStore.componentTag"
+          />
+        </div>
       </div>
     </div>
   </t>