@odoo/o-spreadsheet 17.3.0-alpha.3 → 17.3.0-alpha.5

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.3.0-alpha.3
- @date 2024-04-10T12:29:04.461Z
- @hash 80b5056
+ @version 17.3.0-alpha.5
+ @date 2024-04-18T14:39:41.198Z
+ @hash cff0ef9
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -606,7 +606,7 @@
         <div
           t-foreach="getClickableCells()"
           t-as="clickableCell"
-          t-key="clickableCell.tKey"
+          t-key="clickableCell_index"
           class="o-dashboard-clickable-cell"
           t-on-click="() => this.selectClickableCell(clickableCell)"
           t-on-contextmenu.prevent=""
@@ -1005,6 +1005,9 @@
         position="menuState.position"
         onClose="() => this.closeMenu()"
       />
+      <t t-foreach="staticTables" t-as="table" t-key="table.id">
+        <TableResizer table="table"/>
+      </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
       <HorizontalScrollBar leftOffset="HEADER_WIDTH"/>
       <div class="o-scrollbar corner"/>
@@ -2328,6 +2331,19 @@ https://fontawesome.com/license -->
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.PIVOT">
+    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <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"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.UNUSED_PIVOT_WARNING">
+    <div class="o-unused-pivot-icon text-warning" title="This pivot is not used">
+      <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
     <div class="o-link-tool d-flex align-items-center">
@@ -2927,7 +2943,7 @@ https://fontawesome.com/license -->
     </tr>
   </t>
 
-  <t t-name="o-spreadsheet-LineBarPieConfigPanel">
+  <t t-name="o-spreadsheet-GenericChartConfigPanel">
     <div>
       <ChartDataSeries
         ranges="this.getDataSeriesRanges()"
@@ -2954,7 +2970,7 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-LineBarPieDesignPanel">
+  <t t-name="o-spreadsheet-GenericChartDesignPanel">
     <div>
       <Section class="'o-chart-background-color'">
         <t t-set-slot="title">Background color</t>
@@ -3247,6 +3263,93 @@ https://fontawesome.com/license -->
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-WaterfallChartDesignPanel">
+    <div>
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked="(color) => this.updateColor('background', color)"
+          />
+        </div>
+      </Section>
+      <ChartTitle title="title" update.bind="updateTitle"/>
+      <Section>
+        <t t-set-slot="title">Vertical axis position</t>
+        <select
+          t-att-value="props.definition.verticalAxisPosition"
+          class="o-input o-chart-vertical-axis-position"
+          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </Section>
+      <Section>
+        <t t-set-slot="title">Legend position</t>
+        <select
+          t-att-value="props.definition.legendPosition"
+          class="o-input o-chart-legend-position"
+          t-on-change="(ev) => this.updateSelect('legendPosition', ev)">
+          <option value="none">None</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </Section>
+      <Section>
+        <t t-set-slot="title">Waterfall options</t>
+        <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
+        <Checkbox
+          name="'firstValueAsSubtotal'"
+          label="firstValueAsSubtotal"
+          value="props.definition.firstValueAsSubtotal"
+          onChange.bind="onUpdateFirstValueAsSubtotal"
+        />
+        <t t-set="showSubTotalsLabel">Show subtotals at the end of series</t>
+        <Checkbox
+          name="'showSubTotals'"
+          label="showSubTotalsLabel"
+          value="props.definition.showSubTotals"
+          onChange.bind="onUpdateShowSubTotals"
+        />
+        <t t-set="showConnectorLinesLabel">Show connector lines</t>
+        <Checkbox
+          name="'showConnectorLines'"
+          label="showConnectorLinesLabel"
+          value="props.definition.showConnectorLines"
+          onChange.bind="onUpdateShowConnectorLines"
+        />
+      </Section>
+      <Section>
+        <t t-set-slot="title">Waterfall colors</t>
+        <div class="o-waterfall-positive-color d-flex align-items-center mb-1">
+          <RoundColorPicker
+            currentColor="positiveValuesColor"
+            onColorPicked="(color) => this.updateColor('positiveValuesColor', color)"
+          />
+          <span class="ps-2">Color of positive values</span>
+        </div>
+        <div class="o-waterfall-negative-color d-flex align-items-center mb-1">
+          <RoundColorPicker
+            currentColor="negativeValuesColor"
+            onColorPicked="(color) => this.updateColor('negativeValuesColor', color)"
+          />
+          <span class="ps-2">Color of negative values</span>
+        </div>
+        <div class="o-waterfall-subtotal-color d-flex align-items-center">
+          <RoundColorPicker
+            currentColor="subTotalValuesColor"
+            onColorPicked="(color) => this.updateColor('subTotalValuesColor', color)"
+          />
+          <span class="ps-2">Color of subtotals</span>
+        </div>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet.Checkbox">
     <label
       class="o-checkbox"
@@ -4159,6 +4262,202 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
+  <div t-name="o-spreadsheet-AllPivotsSidePanel" class="o_spreadsheet_pivot_side_panel">
+    <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
+      <PivotPreview pivotId="pivotId"/>
+    </t>
+  </div>
+
+  <t t-name="o-spreadsheet-PivotPreview">
+    <div class="o_side_panel_select" t-ref="pivotPreview" t-on-click="this.selectPivot">
+      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-EditableName">
+    <t t-if="state.isEditing">
+      <div>
+        <input type="text" class="o_input o_sp_en_name" t-model="state.name"/>
+      </div>
+      <div class="btn btn-link o_sp_en_save" t-on-click="save">Save</div>
+      <br/>
+    </t>
+    <t t-else="">
+      <div class="o_sp_en_display_name" t-esc="props.displayName"/>
+      <div class="btn btn-link o_sp_en_rename" t-on-click="rename">
+        <i class="fa fa-pencil me-1"/>
+        Rename
+      </div>
+      <br/>
+    </t>
+  </t>
+
+  <t t-name="o-spreadsheet-AddDimensionButton">
+    <span class="btn btn-sm btn-link add-dimension" t-on-click="togglePopover" t-ref="button">
+      Add
+    </span>
+    <Popover t-if="popover.isOpen" t-props="popoverProps">
+      <div class="p-2 bg-white border-bottom d-flex align-items-baseline pivot-dimension-search">
+        <i class="pe-1 pivot-dimension-search-field-icon">
+          <t t-call="o-spreadsheet-Icon.SEARCH"/>
+        </i>
+        <input
+          t-model="search.input"
+          t-on-keydown="onKeyDown"
+          class="border-0 w-100 pivot-dimension-search-field"
+          autofocus="1"
+        />
+      </div>
+      <div
+        t-foreach="filteredFields"
+        t-as="field"
+        t-key="field.name"
+        t-esc="field.string"
+        t-att-title="field.help"
+        t-on-click="() => this.pickField(field)"
+        class="p-1 px-2 pivot-dimension-field"
+        role="button"
+      />
+    </Popover>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotDimension">
+    <div class="border py-1 px-2 d-flex flex-column shadow-sm pivot-dimension">
+      <div class="d-flex flex-row justify-content-between align-items-center">
+        <span class="fw-bold" t-esc="props.dimension.displayName"/>
+        <i
+          class="btn fa fa-times pe-0"
+          t-if="props.onRemoved"
+          t-on-click="() => props.onRemoved(props.dimension)"
+        />
+      </div>
+      <t t-slot="default"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotDimensionGranularity">
+    <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>
+        <select
+          class="o_input flex-basis-50"
+          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
+          <option
+            t-foreach="allGranularities"
+            t-as="granularity"
+            t-key="granularity"
+            t-if="props.availableGranularities.has(granularity) || granularity === props.dimension.granularity"
+            t-att-value="granularity"
+            t-esc="periods[granularity]"
+            t-att-selected="granularity === props.dimension.granularity or (granularity === 'month' and !props.dimension.granularity)"
+          />
+        </select>
+      </div>
+    </div>
+  </t>
+
+  <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>
+        <select
+          class="o_input flex-basis-50"
+          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
+          <option value="" t-att-selected="props.dimension.order === undefined">Automatic</option>
+          <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
+          <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
+        </select>
+      </div>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotDimensions">
+    <div class="o_side_panel_section pivot-dimensions" t-ref="pivot-dimensions">
+      <div class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center">
+        Columns
+        <AddDimensionButton
+          onFieldPicked.bind="addColumnDimension"
+          fields="props.unusedGroupableFields"
+        />
+      </div>
+      <t t-foreach="props.definition.columns" t-as="col" t-key="col.nameWithGranularity">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDrop(col, ev)"
+          t-att-style="dragAndDrop.itemsStyle[col.nameWithGranularity]"
+          class="pt-1">
+          <PivotDimension dimension="col" onRemoved.bind="removeDimension">
+            <PivotDimensionGranularity
+              t-if="isDateField(col)"
+              dimension="col"
+              onUpdated.bind="this.updateGranularity"
+              availableGranularities="props.unusedDateTimeGranularities[col.name]"
+            />
+            <PivotDimensionOrder dimension="col" onUpdated.bind="this.updateOrder"/>
+          </PivotDimension>
+        </div>
+      </t>
+      <div
+        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center"
+        t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
+        Rows
+        <AddDimensionButton
+          onFieldPicked.bind="addRowDimension"
+          fields="props.unusedGroupableFields"
+        />
+      </div>
+      <t t-foreach="props.definition.rows" t-as="row" t-key="row.nameWithGranularity">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDrop(row, ev)"
+          t-att-style="dragAndDrop.itemsStyle[row.nameWithGranularity]"
+          class="pt-1">
+          <PivotDimension dimension="row" onRemoved.bind="removeDimension">
+            <PivotDimensionGranularity
+              t-if="isDateField(row)"
+              dimension="row"
+              onUpdated.bind="this.updateGranularity"
+              availableGranularities="props.unusedDateTimeGranularities[row.name]"
+            />
+            <PivotDimensionOrder dimension="row" onUpdated.bind="this.updateOrder"/>
+          </PivotDimension>
+        </div>
+      </t>
+      <div class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center">
+        Measures
+        <AddDimensionButton
+          onFieldPicked.bind="addMeasureDimension"
+          fields="props.unusedMeasureFields"
+        />
+      </div>
+      <t t-foreach="props.definition.measures" t-as="measure" t-key="measure.nameWithAggregator">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDropMeasures(measure, ev)"
+          t-att-style="dragAndDrop.itemsStyle[measure.name]"
+          class="pt-1 pivot-measure">
+          <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>
+                <select
+                  class="o_input flex-basis-50"
+                  t-on-change="(ev) => this.updateAggregator(measure, ev.target.value)">
+                  <option
+                    t-foreach="Object.keys(AGGREGATORS[measure.type])"
+                    t-as="agg"
+                    t-key="agg"
+                    t-att-value="agg"
+                    t-att-selected="agg === measure.aggregator"
+                    t-esc="AGGREGATORS[measure.type][agg]"
+                  />
+                </select>
+              </div>
+            </div>
+          </PivotDimension>
+        </div>
+      </t>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -4478,6 +4777,14 @@ https://fontawesome.com/license -->
     />
   </t>
 
+  <t t-name="o-spreadsheet-TableResizer">
+    <div
+      class="o-table-resizer position-absolute"
+      t-att-style="containerStyle"
+      t-on-pointerdown="onMouseDown"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-TableStylePicker">
     <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
       <div class="d-flex flex-row overflow-hidden">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.3.0-alpha.3",
+  "version": "17.3.0-alpha.5",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -102,6 +102,7 @@
   "dependencies": {
     "@odoo/owl": "2.2.10",
     "bootstrap": "^5.1.3",
+    "font-awesome": "^4.7.0",
     "rbush": "^3.0.1"
   },
   "jest": {