@odoo/o-spreadsheet 17.3.0-alpha.4 → 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.4
- @date 2024-04-15T11:03:33.066Z
- @hash a32a1df
+ @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=""
@@ -2331,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">
@@ -4249,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.3.0-alpha.4",
+  "version": "17.3.0-alpha.5",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",